Mercurial > code > home > repos > light9
annotate light9/web/timeline-elements.html @ 1331:14b8e874e89b
whitespace
Ignore-this: 9132f800a062e463998e0fc6fbc32118
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Sat, 04 Jun 2016 08:45:16 +0000 |
| parents | 44558087d3f6 |
| children | 1310a807de06 |
| rev | line source |
|---|---|
| 1314 | 1 <link rel="import" href="/lib/polymer/polymer.html"> |
| 2 <link rel="import" href="light9-timeline-audio.html"> | |
| 3 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html"> | |
|
1329
44558087d3f6
move out rdfdb-synced-graph
Drew Perttula <drewp@bigasterisk.com>
parents:
1328
diff
changeset
|
4 <link rel="import" href="rdfdb-synced-graph.html"> |
| 1314 | 5 |
|
1328
e4825767a4bf
fixes to RDF adjusters. put graph load in an element.
Drew Perttula <drewp@bigasterisk.com>
parents:
1327
diff
changeset
|
6 |
| 1314 | 7 <!-- Whole editor- include this on your page. |
| 8 Most coordinates are relative to this element. | |
| 9 --> | |
| 10 <dom-module id="light9-timeline-editor"> | |
| 11 <template> | |
| 12 <style> | |
| 13 :host { | |
| 14 background: #444; | |
| 15 display: flex; | |
| 16 flex-direction: column; | |
| 17 position: relative; | |
| 18 border: 1px solid black; | |
|
1328
e4825767a4bf
fixes to RDF adjusters. put graph load in an element.
Drew Perttula <drewp@bigasterisk.com>
parents:
1327
diff
changeset
|
19 overflow: hidden; |
| 1314 | 20 } |
| 21 light9-timeline-audio { | |
| 22 width: 100%; | |
| 23 height: 30px; | |
| 24 } | |
| 25 light9-timeline-time-zoomed { | |
| 26 flex-grow: 1; | |
| 27 } | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
28 light9-timeline-diagram-layer, light9-timeline-adjusters { |
| 1314 | 29 position: absolute; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
30 left: 0; top: 0; right: 0; bottom: 0; |
| 1314 | 31 } |
|
1322
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
32 #debug { |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
33 position: fixed; |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
34 right: 0; |
|
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
35 bottom: 0; |
| 1331 | 36 } |
| 1314 | 37 </style> |
| 38 <div> | |
| 1331 | 39 <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph> |
| 1314 | 40 timeline editor: song [uri] <button>unlink</button> |
| 41 <label><input type="checkbox"> follow player song choice</label> | |
| 42 </div> | |
| 43 <!-- | |
| 44 Old zoom menu: | |
| 45 See current time .. esc | |
| 46 See from current time -> end .. shift+esc | |
| 47 Zoom all .. ctrl+esc | |
| 48 --> | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
49 <light9-timeline-audio id="audio"></light9-timeline-audio> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
50 <light9-timeline-time-zoomed id="zoomed" zoom="{{viewState.zoomSpec}}"></light9-timeline-time-zoomed> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
51 <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer> |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
52 <light9-timeline-adjusters id="adjusters" dia="{{dia}}" adjs="{{adjs}}"></light9-timeline-adjusters> |
|
1322
fb8aa1cb96e1
attempt zoom controls, but updates aren't working well.
Drew Perttula <drewp@bigasterisk.com>
parents:
1321
diff
changeset
|
53 <div id="debug">[[debug]]</div> |
| 1314 | 54 </template> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
55 |
| 1314 | 56 </dom-module> |
| 57 | |
| 58 | |
| 59 <!-- the whole section that pans/zooms in time (most of the editor) --> | |
| 60 <dom-module id="light9-timeline-time-zoomed"> | |
| 61 <template> | |
| 62 <style> | |
| 63 :host { | |
| 64 display: flex; | |
| 65 height: 100%; | |
| 66 } | |
| 67 div { | |
| 68 display: flex; | |
| 69 flex-direction: column; | |
| 70 height: 100%; | |
| 71 | |
| 72 } | |
| 73 light9-timeline-audio { | |
| 74 width: 100%; | |
| 75 height: 90px; | |
| 76 } | |
| 77 light9-timeline-graph-row { | |
| 78 flex-grow: 1; | |
| 79 } | |
| 80 </style> | |
| 81 <div> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
82 <light9-timeline-time-axis id="time"></light9-timeline-time-axis> |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
83 <light9-timeline-audio zoom="{{zoomFlattened}}"></light9-timeline-audio> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
84 <template is="dom-repeat" items="{{rows}}"> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
85 <light9-timeline-graph-row></light9-timeline-graph-row> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
86 </template> |
| 1314 | 87 </div> |
| 88 </template> | |
| 89 <script> | |
| 90 Polymer({ | |
| 91 is: "light9-timeline-time-zoomed", | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
92 behaviors: [ |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
93 Polymer.IronResizableBehavior |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
94 ], |
| 1314 | 95 properties: { |
| 96 rows: {value: [0, 1, 2, 3]}, | |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
97 zoom: {type: Object, notify: true, observer: 'onZoom'}, |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
98 zoomFlattened: {type: Object, notify: true} |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
99 }, |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
100 onZoom: function() { |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
101 ko.computed(function() { |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
102 this.zoomFlattened = ko.toJS(this.zoom); |
|
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
103 }.bind(this)); |
| 1314 | 104 } |
| 105 }); | |
| 106 </script> | |
| 107 </dom-module> | |
| 108 | |
| 109 | |
| 110 <!-- | |
| 111 SVG or canvas that draws these: | |
| 112 - background grids | |
| 113 - zoom arcs | |
| 114 - notes | |
| 115 - annotations on notes | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
116 - connectors between adjusters and their targets |
| 1314 | 117 |
| 118 This element is not responsible for any hit detection. Things you click (rows, | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
119 notes, adjusters, etc) are caught on their respective elements. (But is that |
| 1314 | 120 wrong in the case of notes?) |
| 121 --> | |
| 122 <dom-module id="light9-timeline-diagram-layer"> | |
| 123 <template> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
124 <style> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
125 :host { |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
126 pointer-events: none; |
| 1331 | 127 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
128 svg { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
129 width: 100%; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
130 height: 100%; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
131 pointer-events: none; |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
132 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
133 </style> |
| 1331 | 134 <svg xmlns="http://www.w3.org/2000/svg" |
| 135 xmlns:svg="http://www.w3.org/2000/svg" | |
| 136 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" > | |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
137 <g id="layer1"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
138 <text |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
139 xml:space="preserve" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
140 style="font-size:13px;line-height:125%;font-family:'Verana Sans';-inkscape-font-specification:'Verana Sans';text-align:start;text-anchor:start;fill:#000000;" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
141 x="-338.38403" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
142 y="631.3988" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
143 id="text4290" |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
144 sodipodi:linespacing="125%" ><tspan sodipodi:role="line" id="tspan4292" x="-338.38403" y="631.3988">spotchase</tspan></text> |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
145 <g id="mouse"></g> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
146 <g id="notes"></g> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
147 <g id="connectors"></g> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
148 <g id="cursor"> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
149 <path id="cursor1" style="fill:none; stroke:#ff0303; stroke-width:1.5; stroke-linecap:butt;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
150 <path id="cursor2" style="fill:#9c0303;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
151 <path id="cursor3" style="fill:none; stroke:#ff0303; stroke-width:3; stroke-linecap:butt;" /> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
152 </g> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
153 </g> |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
154 </svg> |
| 1314 | 155 </template> |
| 156 </dom-module> | |
| 157 | |
| 158 | |
| 159 <!-- seconds labels --> | |
| 160 <dom-module id="light9-timeline-time-axis"> | |
| 161 <template> | |
| 162 <pre>0 sec 10 20 30 40 50</pre> | |
| 163 </template> | |
| 164 <script> | |
| 165 Polymer({ | |
| 166 is: "light9-timeline-time-axis", | |
| 167 properties: { | |
| 168 } | |
| 169 }); | |
| 170 </script> | |
| 171 </dom-module> | |
| 172 | |
| 173 <!-- one row of notes --> | |
| 174 <dom-module id="light9-timeline-graph-row"> | |
| 175 <template> | |
| 176 <style> | |
| 177 :host { | |
| 178 border-top: 1px solid black; | |
| 179 display: flex; | |
| 180 } | |
| 181 </style> | |
| 182 <template is="dom-repeat" items="[1,2,3]"> | |
| 183 <light9-timeline-note></light9-timeline-note> | |
| 184 </template> | |
| 185 </template> | |
| 186 <script> | |
| 187 Polymer({ | |
| 188 is: "light9-timeline-graph-row", | |
| 1331 | 189 behaviors: [ |
| 190 Polymer.IronResizableBehavior | |
| 191 ], | |
| 1314 | 192 properties: { |
| 193 | |
| 194 } | |
| 195 }); | |
| 196 </script> | |
| 197 </dom-module> | |
| 198 | |
| 199 <!-- One trapezoid note shape in a row. | |
| 200 This element has the right Y coords. | |
| 201 We compute X coords from the zoom setting. | |
| 202 diagram-layer draws the note body. --> | |
| 203 <dom-module id="light9-timeline-note"> | |
| 204 <template> | |
| 205 <style> | |
| 206 :host { | |
| 207 display: block; | |
| 208 background: green; | |
| 209 outline: 2px solid red; | |
| 210 } | |
| 211 </style> | |
| 212 <light9-timeline-note-inline-attrs></light9-timeline-note-inline-attrs> | |
| 213 </template> | |
| 214 <script> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
215 window.xserial = 0; |
| 1314 | 216 Polymer({ |
| 217 is: "light9-timeline-note", | |
| 218 behaviors: [ | |
| 219 Polymer.IronResizableBehavior | |
| 220 ], | |
| 221 listeners: { | |
| 222 'iron-resize': '_onIronResize' | |
| 223 }, | |
| 224 properties: { | |
| 225 }, | |
| 226 | |
| 227 _onIronResize: function() { | |
| 228 | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
229 setNote('myuri', 60 + 150 * (window.xserial++), 180, this.offsetTop, this.offsetTop + this.offsetHeight); |
| 1314 | 230 |
| 231 } | |
| 232 }); | |
| 233 </script> | |
| 234 </dom-module> | |
| 235 | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
236 <!-- All the adjusters you can edit or select. |
| 1314 | 237 This element manages their layout and suppresion. |
| 238 Owns the selection. | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
239 Maybe includes selecting things that don't even have adjusters. |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
240 Maybe manages the layout of other labels and text too, to avoid overlaps. |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
241 --> |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
242 <dom-module id="light9-timeline-adjusters"> |
| 1314 | 243 <template> |
| 244 <style> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
245 :host { |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
246 } |
| 1314 | 247 </style> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
248 |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
249 <template is="dom-repeat" items="{{adjs}}"> |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
250 <light9-timeline-adjuster dia="{{dia}}" adj="{{item}}"></light9-timeline-adjuster> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
251 </template> |
| 1314 | 252 </template> |
| 253 </dom-module> | |
| 254 | |
| 255 <!-- Yellow dotted handle that you can adjust to edit something. | |
| 256 Knows an attribute to edit and the true screen location, even if | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
257 parent <light9-timeline-adjusters> has offset us a bit to avoid a |
| 1314 | 258 text overlap. |
| 259 Draws affordance arrows and a connector line if we're far | |
| 260 away from the point that we edit. | |
| 261 May grow to a bigger editor when you click or drag. | |
| 262 --> | |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
263 <dom-module id="light9-timeline-adjuster"> |
| 1314 | 264 <template> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
265 <style> |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
266 #top { |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
267 position: absolute; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
268 display: inline-block; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
269 outline: 2px solid rgba(255, 0, 0, 0.25); |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
270 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
271 table { |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
272 position: relative; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
273 left: -50%; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
274 top: -40px; /* percent had no effect */ |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
275 outline: 2px solid rgba(0, 0, 255, 0.19); |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
276 z-index: 2; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
277 border-collapse: collapse; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
278 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
279 td { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
280 text-align: center; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
281 font-size: 20px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
282 } |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
283 span { |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
284 font-size: 16px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
285 background: rgba(255, 255, 0, 0.5); |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
286 border: 3px yellow dotted; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
287 border-radius: 8px; |
|
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
288 padding: 5px; |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
289 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
290 cursor: ew-resize; |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
291 -webkit-user-select: none; |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
292 } |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
293 span.empty { |
|
1328
e4825767a4bf
fixes to RDF adjusters. put graph load in an element.
Drew Perttula <drewp@bigasterisk.com>
parents:
1327
diff
changeset
|
294 width: 30px; /* todo: supposed to fill the whole visible section*/ |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
295 height: 13px; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
296 display: inline-block; |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
297 background: rgba(0,0,0,0); |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
298 } |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
299 </style> |
|
1325
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
300 <div id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px"> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
301 <table> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
302 <tr><td></td><td style="visibility: hidden">↑</td><td></td></tr> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
303 <tr><td>←</td><td><span id="label" class$="[[spanClass]]">[[displayValue]]</span></td><td>→</td></tr> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
304 <tr><td></td><td style="visibility: hidden">↓</td><td></td></tr> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
305 </table> |
|
4210bbaf528f
lots of adjuster work. zoom adjs are usable.
Drew Perttula <drewp@bigasterisk.com>
parents:
1324
diff
changeset
|
306 </div> |
|
1315
b21e31c79f31
more timeline drawing code. cool zoom zigzag feature
Drew Perttula <drewp@bigasterisk.com>
parents:
1314
diff
changeset
|
307 |
| 1314 | 308 </template> |
| 309 </dom-module> | |
| 310 | |
| 311 <!-- sometimes we draw attrs within the shape of a note. --> | |
| 312 <dom-module id="light9-timeline-note-inline-attrs"> | |
| 313 <template> | |
| 314 | |
| 315 </template> | |
| 316 <script> | |
| 317 Polymer({ | |
| 318 is: "light9-timeline-note-inline-attrs", | |
| 319 properties: { | |
| 320 } | |
| 321 }); | |
| 322 </script> | |
| 323 </dom-module> | |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
324 |
|
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
325 <script src="/lib/sylvester/sylvester.js"></script> |
|
1329
44558087d3f6
move out rdfdb-synced-graph
Drew Perttula <drewp@bigasterisk.com>
parents:
1328
diff
changeset
|
326 <script src="/lib/d3/build/d3.min.js"></script> |
|
44558087d3f6
move out rdfdb-synced-graph
Drew Perttula <drewp@bigasterisk.com>
parents:
1328
diff
changeset
|
327 <script src="/lib/N3.js/browser/n3-browser.min.js"></script> |
|
1323
a77bb5bf9d89
switch zoom system to ko.observable, which works much better
Drew Perttula <drewp@bigasterisk.com>
parents:
1322
diff
changeset
|
328 <script src="/lib/knockout/dist/knockout.js"></script> |
|
1327
d6396679c121
move to adjustable.coffee and also simplify the getTarget code
Drew Perttula <drewp@bigasterisk.com>
parents:
1325
diff
changeset
|
329 <script src="adjustable.js"></script> |
|
1317
4c6d88aa9e26
enough element and rdf support to drag one adjuster and see its value change
Drew Perttula <drewp@bigasterisk.com>
parents:
1315
diff
changeset
|
330 <script src="timeline.js"></script> |