Merge lp:~mttronchetti/novacut/nested_sequences into lp:novacut

Proposed by Matteo Ronchetti on 2012-09-18
Status: Needs review
Proposed branch: lp:~mttronchetti/novacut/nested_sequences
Merge into: lp:novacut
Diff against target: 1053 lines (+775/-33)
5 files modified
ui/bucket.css (+165/-3)
ui/bucket.html (+10/-10)
ui/bucket.js (+570/-15)
ui/novacut.js (+29/-5)
ui/projects.js (+1/-0)
To merge this branch: bzr merge lp:~mttronchetti/novacut/nested_sequences
Reviewer Review Type Date Requested Status
Novacut Dev 2012-09-18 Pending
Review via email: mp+125030@code.launchpad.net

Description of the change

nested sequences

To post a comment you must log in.
292. By Matteo Ronchetti on 2012-09-19

fix a bug with old projects

293. By Matteo Ronchetti on 2012-09-21

new button new animation bug fix better graphic

294. By Matteo Ronchetti on 2012-09-22

new animation

Unmerged revisions

294. By Matteo Ronchetti on 2012-09-22

new animation

293. By Matteo Ronchetti on 2012-09-21

new button new animation bug fix better graphic

292. By Matteo Ronchetti on 2012-09-19

fix a bug with old projects

291. By Matteo Ronchetti on 2012-09-18

bug fixes and some new things

290. By Matteo Ronchetti on 2012-09-16

nested sequences are almost here

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'ui/bucket.css'
2--- ui/bucket.css 2012-07-19 10:18:29 +0000
3+++ ui/bucket.css 2012-09-22 13:18:20 +0000
4@@ -138,7 +138,7 @@
5 }
6
7 #open_clips {
8- z-index: 3;
9+ z-index: 4;
10 position: fixed;
11 top: 0;
12 right: 50%;
13@@ -158,7 +158,7 @@
14 }
15
16 #clips_outer {
17- z-index: 2;
18+ z-index: 3;
19 position: fixed;
20 top: -140px;
21 height: 139px;
22@@ -288,6 +288,10 @@
23 border-left: 1px solid #555;
24 border-right: 1px solid #444;
25 border-bottom:1px solid #333;
26+
27+ -webkit-animation-duration: 300ms;
28+ -webkit-animation-iteration-count: 1;
29+ -webkit-animation-timing-function: ease;
30 }
31
32 .slice.selected {
33@@ -301,7 +305,7 @@
34
35 #bucket .slice {
36 position: absolute;
37- box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.5);
38+ box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
39
40 -webkit-transition-timing-function: ease;
41 -webkit-transition-duration: 250ms;
42@@ -558,3 +562,161 @@
43 padding-left: 15px;
44 padding-right: 15px;
45 }
46+
47+#newsequence{
48+ /*background: url(newnested.png) gray;
49+ background-size: 42px;
50+ background-position: 50px 53px;
51+ background-repeat: no-repeat;*/
52+ z-index:2;
53+ position:fixed;
54+ background-color: gray;
55+ margin: -45px -45px;
56+ border-radius: 80px;
57+ width: 90px;
58+ height: 90px;
59+ text-align: center;
60+ box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
61+}
62+
63+#plus{
64+ margin-right: 15px;
65+ margin-top: 50px;
66+ font-size: 45px;
67+ float: right;
68+ text-shadow: 0 2px 4px rgba(0,0,0,0.65);
69+}
70+
71+.nested {
72+ border-top: 1px solid #666;
73+ border-left: 1px solid #555;
74+ border-right: 1px solid #444;
75+ border-bottom:1px solid #333;
76+ min-width:128px;
77+ min-height:147px;
78+ background-color: gray;
79+
80+ -webkit-animation-duration: 300ms;
81+ -webkit-transform-origin:50% 50%;
82+ -webkit-animation-iteration-count: 1;
83+ -webkit-animation-timing-function: ease;
84+}
85+
86+.nested #desc{
87+ font-size: 14px;
88+ text-shadow: 0 1px 1px rgba(0,0,0,0.6);
89+ margin-bottom: 2px;
90+ line-height: 13px;
91+ margin-left: 3px;
92+ height: 147px;
93+ width: 125px;
94+ white-space: normal !important;
95+}
96+
97+.nested br{
98+ line-height: 2px;
99+}
100+
101+.nested.selected {
102+ border-color: #e81f3b;
103+ z-index: 1;
104+}
105+.nested, .nested * {
106+ -webkit-user-select: none;
107+}
108+
109+.space {
110+ height: 3px;
111+}
112+
113+.clickable{
114+ cursor:pointer;
115+}
116+
117+#sequence .nested{
118+ width: 192px;
119+ height: 219px;
120+}
121+
122+#sequence .nested #desc{
123+ width: 189px;
124+ height: 219px;
125+ font-size: 16px;
126+ line-height: 18px;
127+ position: absolute;
128+}
129+
130+#bucket .nested {
131+ width:128px;
132+ height:147px;
133+ position: absolute;
134+ box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
135+
136+ -webkit-transition-timing-function: ease;
137+ -webkit-transition-duration: 250ms;
138+ -webkit-transition-property: left, top;
139+}
140+
141+@-webkit-keyframes create{
142+from{-webkit-transform: translateX(-200px) translateY(-200px) scale(0.3);}
143+to{-webkit-transform: translateX(0px) translateY(0px) scale(1);}
144+}
145+
146+@-webkit-keyframes leftout{
147+from{-webkit-transform: translateX(0px);}
148+to{-webkit-transform:translateX(-1000px);}
149+}
150+
151+@-webkit-keyframes leftin{
152+from{-webkit-transform: translateX(1000px);}
153+to{-webkit-transform:translateX(0px);}
154+}
155+
156+@-webkit-keyframes rigthin{
157+from{-webkit-transform: translateX(-1000px);}
158+to{-webkit-transform:translateX(0px);}
159+}
160+
161+@-webkit-keyframes rigthout{
162+from{-webkit-transform: translateX(0px);}
163+to{-webkit-transform:translateX(1000px);}
164+}
165+
166+@-webkit-keyframes disappear{
167+from{-webkit-transform: scale(1);}
168+to{-webkit-transform:scale(0.01);}
169+}
170+
171+@-webkit-keyframes appear{
172+from{-webkit-transform: scale(0.01);}
173+to{-webkit-transform:scale(1);}
174+}
175+
176+@-webkit-keyframes shake{
177+ /*0%{-webkit-transform: rotate(0deg)}
178+ 10%{-webkit-transform: rotate(3deg)}
179+ 20%{-webkit-transform: rotate(-3deg)}
180+ 30%{-webkit-transform: rotate(5deg)}
181+ 40%{-webkit-transform: rotate(-5deg)}
182+ 50%{-webkit-transform: rotate(4deg)}
183+ 60%{-webkit-transform: rotate(-4deg)}
184+ 70%{-webkit-transform: rotate(2deg)}
185+ 80%{-webkit-transform: rotate(-2deg)}
186+ 90%{-webkit-transform: rotate(1deg)}
187+ 100%{-webkit-transform: rotate(0deg)}*/
188+ 0% { -webkit-transform: translate(2px, 1px) scale(1.05) rotate(0deg); }
189+10% { -webkit-transform: translate(-1px, -2px) scale(1.1) rotate(-2deg); }
190+20% { -webkit-transform: translate(-2px, 0px) scale(1.1) rotate(2deg); }
191+30% { -webkit-transform: translate(0px, 2px) scale(1.10) rotate(0deg); }
192+40% { -webkit-transform: translate(1px, -1px) scale(1.08) rotate(1deg); }
193+50% { -webkit-transform: translate(-1px, 2px) scale(1.06) rotate(-1deg); }
194+60% { -webkit-transform: translate(-2px, 1px) scale(1.04) rotate(0deg); }
195+70% { -webkit-transform: translate(2px, 1px) scale(1.02) rotate(-1deg); }
196+80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
197+90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
198+100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
199+}
200+
201+#sequence .nested {
202+ display: inline-block;
203+}
204
205=== modified file 'ui/bucket.html'
206--- ui/bucket.html 2012-07-24 04:42:29 +0000
207+++ ui/bucket.html 2012-09-22 13:18:20 +0000
208@@ -24,7 +24,7 @@
209 <div id="flyout_capture" class="hide">
210 <div id="flyout">
211 <div class="fgrid_row">
212- <a class="fgrid_4" href="projects.html"><strong>Projects</strong></a>
213+ <a class="fgrid_4" onclick="UI.back(true)"><strong class="clickable">Back</strong></a>
214 <button class="fgrid_3" id="render-btn" onclick="UI.render()">Render</button>
215 </div>
216 <div class="fgrid_row">
217@@ -51,8 +51,16 @@
218 </div>
219 </div>
220 </div>
221-
222 <div id="bucket">
223+</div>
224+<div id="sequence" clas="lower"></div>
225+<div id="roughcut" class="hide">
226+ <div class="grid_row">
227+ <button class="grid_2" id="close_roughcut">Done</button>
228+ <button class="grid_2" id="create_slice">New Slice</button>
229+ </div>
230+</div>
231+<div id="newsequence" class="clickable" onclick="addSequence();"><div id="plus">+</div></div>
232 <div id="shortcuts" >
233 <table border="0">
234 <tr>
235@@ -81,14 +89,6 @@
236 </tr>
237 </table>
238 </div>
239-</div>
240-<div id="sequence" clas="lower"></div>
241-<div id="roughcut" class="hide">
242- <div class="grid_row">
243- <button class="grid_2" id="close_roughcut">Done</button>
244- <button class="grid_2" id="create_slice">New Slice</button>
245- </div>
246-</div>
247 </body>
248
249 </html>
250
251=== modified file 'ui/bucket.js'
252--- ui/bucket.js 2012-07-19 10:18:29 +0000
253+++ ui/bucket.js 2012-09-22 13:18:20 +0000
254@@ -141,6 +141,14 @@
255 Hub.connect('thumbnail_finished', Thumbs.on_thumbnail_finished);
256
257
258+function rand_range(min,max){
259+ return Math.floor(Math.random()*(max-min)+min);
260+}
261+
262+function reset_animation(el){
263+ el.style.webkitAnimationName = "";
264+}
265+
266 function $halt(event) {
267 event.preventDefault();
268 event.stopPropagation();
269@@ -155,6 +163,14 @@
270 return child;
271 }
272
273+function $remove(el){
274+ el.parentNode.removeChild(el);
275+}
276+
277+function $no_animation(el){
278+ el.style.webkitAnimationName = "";
279+}
280+
281
282 function $position(element) {
283 element = $(element);
284@@ -343,7 +359,423 @@
285 return scale * (delta / Math.abs(delta));
286 }
287
288-
289+function addSequence(){
290+ var doc = create_sequence();
291+ doc.node.parent = UI.sequence.doc._id;
292+ UI.session.save(doc);
293+ var nes = new Nested(UI.session,doc);
294+ nes.x = 150;
295+ nes.y = 150;
296+ UI.bucket.appendChild(nes.element);
297+ nes.element.style.webkitAnimationName = "create";
298+ setTimeout(reset_animation,250,nes.element);
299+ UI.sequence.do_reorder();
300+}
301+
302+var nested_description = "<div id='desc'>Hi I'm a nested sequence<br>You can use me to organize your project<br>It' s easy:<br>&nbsp;&nbsp;Double click to open<br>&nbsp;&nbsp;Do your work<br>&nbsp;&nbsp;Esc to come back!</div>";
303+
304+var Nested = function(session,doc){
305+ session.subscribe(doc._id, this.on_change, this);
306+ this.doc = doc;
307+ this.id = doc._id;
308+ this.session=session;
309+
310+ this.element = $el('div', {'class': 'nested','id': doc._id,'draggable': 'true'});
311+ this.element.onmousedown = $bind(this.on_mousedown, this);
312+ this.element.ondblclick = $bind(this.on_dblclick, this);
313+ this.element.ondragenter = $bind(this.on_mouseover, this);
314+
315+ this.width = 192 + 2;
316+ this.threshold = this.width * 0.65;
317+ this.on_change(doc);
318+}
319+
320+Nested.prototype = {
321+ destroy: function() {
322+ $unparent(this.element);
323+ delete this.element;
324+ },
325+ set x(value) {
326+ if (typeof value == 'number') {
327+ this.element.style.left = value + 'px';
328+ }
329+ else {
330+ this.element.style.left = null;
331+ }
332+ },
333+
334+ set y(value) {
335+ if (typeof value == 'number') {
336+ this.element.style.top = value + 'px';
337+ }
338+ else {
339+ this.element.style.top = null;
340+ }
341+ },
342+
343+ get x() {
344+ return parseInt(this.element.style.left);
345+ },
346+
347+ get y() {
348+ return parseInt(this.element.style.top);
349+ },
350+
351+ get inbucket() {
352+ return this.element.parentNode.id == 'bucket';
353+ },
354+
355+ get frombucket() {
356+ return this.parent.id == 'bucket';
357+ },
358+
359+ get_slice: function(id,k){
360+ var doc = this.session.get_doc(id);
361+ if(doc.node.type == 'slice')return doc;
362+ else return this.get_slice(doc.node.src[(doc.node.src.length-1)*k]);
363+ },
364+
365+ on_mouseover: function(ev){
366+ console.log("ova");
367+ },
368+
369+ on_change: function(doc) {
370+ if (doc._deleted) {
371+ console.log('deleted ' + doc._id);
372+ this.destroy();
373+ UI.sequence.do_reorder();
374+ return;
375+ }
376+ this.doc = doc;
377+ this.element.innerHTML = nested_description;
378+ if(doc.node.src.length > 0){
379+ console.log('add thumbnails');
380+ //console.log(this.get_slice(doc.node.src[0],0));
381+ this.element.innerHTML = "";
382+ var stslice = new Slice(this.session,this.get_slice(doc.node.src[0],0));
383+ stslice.start.request_thumbnail();
384+ var endslice = new Slice(this.session,this.get_slice(doc.node.src[doc.node.src.length-1],1));
385+ endslice.end.request_thumbnail();
386+ var st = stslice.element.firstChild.firstChild;
387+ var end = endslice.element.lastChild.firstChild;
388+ var div = $el('div',{'class': 'frame'});
389+ this.element.appendChild(div);
390+ div.appendChild(st);
391+ this.element.appendChild($el('div',{'class': 'space'}));
392+ var div2 = $el('div',{'class': 'frame'});
393+ this.element.appendChild(div2);
394+ div2.appendChild(end);
395+ }
396+ },
397+ on_mousedown: function(event) {
398+ UI.select(this.doc._id);
399+ if (UI.player.active) {
400+ UI.player.hold();
401+ }
402+ this.pos = $position(this.element);
403+ this.dnd = new DragEvent(event, this.element);
404+ this.dnd.ondragcancel = $bind(this.on_dragcancel, this);
405+ this.dnd.ondragstart = $bind(this.on_dragstart, this);
406+ this.dnd.ondrag = $bind(this.on_drag, this);
407+ this.dnd.ondrop = $bind(this.on_drop, this);
408+ },
409+
410+ on_dblclick: function(event) {
411+ $halt(event);
412+ if (UI.player.active) {
413+ return;
414+ }
415+ UI.edit_nested(this.doc);
416+ },
417+
418+ on_dragcancel: function(dnd) {
419+ console.log('dragcancel');
420+ if (UI.player.active) {
421+ UI.player.resume();
422+ }
423+ this.stop_scrolling();
424+ if (this.inbucket && UI.bucket.lastChild != this.element) {
425+ console.log('moving to end of bucket');
426+ $unparent(this.element);
427+ UI.bucket.appendChild(this.element);
428+ UI.sequence.do_reorder();
429+ }
430+ },
431+
432+ on_dragstart: function(dnd) {
433+ console.log('dragstart');
434+ this.offsetX = this.dnd.offsetX;
435+ this.offsetY = this.dnd.offsetY;
436+ this.offsetWidth = this.element.offsetWidth;
437+ this.offsetHeight = this.element.offsetHeight;
438+
439+ this.parent = this.element.parentNode;
440+ this.x = dnd.x - this.offsetX;
441+ if (this.inbucket) {
442+ this.y = dnd.y - this.offsetY;
443+ }
444+ else {
445+ this.nextSibling = this.element.nextSibling;
446+ if (this.element.nextSibling) {
447+ this.over = this.element.nextSibling;
448+ this.over.classList.add('over');
449+ }
450+ else if (this.element.previousSibling) {
451+ this.over = this.element.previousSibling;
452+ this.over.classList.add('over-right');
453+ }
454+ this.target = this.element;
455+ var seq = this.element.parentNode;
456+ var i, child;
457+ for (i=0; i<seq.children.length; i++) {
458+ child = seq.children[i];
459+ if (child == this.element) {
460+ this.i = i;
461+ this.orig_i = i;
462+ }
463+ }
464+ this.y = UI.sequence.top - 14;
465+ }
466+ this.element.classList.add('grabbed');
467+ },
468+
469+ on_drag: function(dnd) {
470+ var top = UI.sequence.top;
471+ var height = this.element.clientHeight;
472+ var y = dnd.y - this.offsetY;
473+ var f = 0.65;
474+ if (this.inbucket) {
475+ if (y > top - height * (1 - f)) {
476+ this.move_into_sequence(dnd);
477+ }
478+ }
479+ else {
480+ if (y < top - height * f) {
481+ this.move_into_bucket(dnd);
482+ }
483+ }
484+ if (this.inbucket) {
485+ this.on_mousemove_bucket(dnd);
486+ }
487+ else {
488+ this.on_mousemove_sequence(dnd);
489+ }
490+ },
491+
492+ move_into_sequence: function(dnd) {
493+ if (UI.player.active) {
494+ UI.player.soft_show();
495+ }
496+ if (!this.frombucket) {
497+ this.clear_over();
498+ UI.sequence.reset();
499+ }
500+ var seq = UI.sequence.element;
501+ if (seq.children.length == 0) {
502+ this.i = 0;
503+ this.orig_i = 0;
504+ this.target = this.element;
505+ seq.appendChild(this.element);
506+ this.update_offset();
507+ return;
508+ }
509+
510+ var x = this.pos.left + dnd.dx;
511+
512+ var scroll_x = x + seq.scrollLeft;
513+
514+ var unclamped = Math.round(scroll_x / this.width);
515+ this.i = Math.max(0, Math.min(unclamped, seq.children.length));
516+ this.orig_i = this.i;
517+ if (this.i == seq.children.length) {
518+ this.over = seq.children[this.i - 1];
519+ this.over.classList.add('over-right');
520+ }
521+ else {
522+ this.over = seq.children[this.i];
523+ this.over.classList.add('over');
524+ }
525+
526+ var ref = seq.children[this.i];
527+ $unparent(this.element);
528+ seq.insertBefore(this.element, ref);
529+ if (!ref) {
530+ seq.scrollLeft += this.width;
531+ }
532+ this.target = this.element;
533+ this.update_offset();
534+ },
535+
536+ move_into_bucket: function(dnd) {
537+ if (UI.player.active) {
538+ UI.player.soft_hide();
539+ }
540+ this.stop_scrolling();
541+ $unparent(this.element);
542+ $('bucket').appendChild(this.element);
543+ if (this.frombucket) {
544+ this.clear_over();
545+ UI.sequence.reset();
546+ }
547+ this.update_offset();
548+ },
549+
550+ update_offset: function() {
551+ this.offsetX = Math.round(this.dnd.offsetX * this.element.offsetWidth / this.offsetWidth);
552+ this.offsetY = Math.round(this.dnd.offsetY * this.element.offsetHeight / this.offsetHeight);
553+ },
554+
555+ on_mousemove_bucket: function(dnd) {
556+ this.x = dnd.x - this.offsetX;
557+ this.y = dnd.y - this.offsetY;
558+ },
559+
560+ start_scrolling: function(direction) {
561+ this.direction = direction;
562+ this.scrolling = true;
563+ this.interval_id = setInterval($bind(this.on_interval, this), 300);
564+ },
565+
566+ stop_scrolling: function() {
567+ this.scrolling = false;
568+ clearInterval(this.interval_id);
569+ this.interval_id = null;
570+ },
571+
572+ on_interval: function() {
573+ var d = (this.direction == 'left') ? -1 : 1;
574+ UI.sequence.element.scrollLeft += (d * this.width);
575+ this.do_mousemove_sequence();
576+ },
577+
578+ on_mousemove_sequence: function(dnd) {
579+ var mid_x = dnd.x - this.offsetX + (this.element.offsetWidth / 2);
580+ var width = UI.sequence.element.clientWidth;
581+ var left = Math.min(dnd.x, mid_x);
582+ var right = Math.max(dnd.x, mid_x);
583+
584+ if (this.scrolling) {
585+ if (left > 0 && right < width) {
586+ this.stop_scrolling();
587+ }
588+ else {
589+ return;
590+ }
591+ }
592+ else {
593+ if (left <= 0) {
594+ this.start_scrolling('left');
595+ }
596+ else if (right >= width) {
597+ this.start_scrolling('right');
598+ }
599+ }
600+ this.do_mousemove_sequence();
601+ },
602+
603+ do_mousemove_sequence: function() {
604+ var x = this.dnd.x - this.offsetX;
605+ var parent = UI.sequence.element;
606+ var scroll_x = x + parent.scrollLeft;
607+ var ix = this.i * this.width;
608+ var dx = scroll_x - ix;
609+
610+ this.x = x;
611+ this.y = UI.sequence.top - 14;
612+
613+ if (dx < -this.threshold) {
614+ this.shift_right();
615+ }
616+ else if (dx > this.threshold) {
617+ this.shift_left();
618+ }
619+ },
620+
621+ shift_right: function() {
622+ if (!this.target.previousSibling) {
623+ return;
624+ }
625+ this.i -= 1;
626+ if (this.target.classList.contains('left')) {
627+ this.target.classList.remove('left');
628+ UI.animate(this.target);
629+ }
630+ else {
631+ this.target.previousSibling.classList.add('right');
632+ UI.animate(this.target.previousSibling);
633+ }
634+ this.target = this.target.previousSibling;
635+ },
636+
637+ shift_left: function() {
638+ if (!this.target.nextSibling) {
639+ return;
640+ }
641+ this.i += 1;
642+ if (this.target.classList.contains('right')) {
643+ this.target.classList.remove('right');
644+ UI.animate(this.target);
645+ }
646+ else {
647+ this.target.nextSibling.classList.add('left');
648+ UI.animate(this.target.nextSibling);
649+ }
650+ this.target = this.target.nextSibling;
651+
652+ },
653+
654+ clear_over: function() {
655+ if (this.over) {
656+ this.over.classList.remove('over');
657+ this.over.classList.remove('over-right');
658+ this.over = null;
659+ }
660+ UI.animate(null);
661+ },
662+
663+ on_drop: function(dnd) {
664+ this.stop_scrolling();
665+ this.element.classList.remove('grabbed');
666+ this.clear_over();
667+ UI.sequence.reset();
668+ if (this.inbucket) {
669+ if (UI.player.active) {
670+ UI.player.hide();
671+ }
672+ if (UI.bucket.lastChild != this.element) {
673+ $unparent(this.element);
674+ UI.bucket.appendChild(this.element);
675+ }
676+ var pos = $position(UI.bucket);
677+ this.x = Math.max(0, dnd.x - this.offsetX - pos.left);
678+ this.y = Math.max(0, dnd.y - this.offsetY - pos.top);
679+ }
680+ else {
681+ console.log(this.orig_i + ' => ' + this.i);
682+ this.x = null;
683+ this.y = null;
684+ var seq = $('sequence');
685+ if (this.i == this.orig_i) {
686+ console.assert(seq.children[this.i] == this.element);
687+ }
688+ else {
689+ if (this.i < this.orig_i) {
690+ var ref = seq.children[this.i];
691+ }
692+ else {
693+ var ref = seq.children[this.i].nextSibling;
694+ }
695+ $unparent(this.element);
696+ seq.insertBefore(this.element, ref);
697+ }
698+ }
699+ UI.sequence.do_reorder();
700+ if (UI.player.active) {
701+ UI.player.resume();
702+ }
703+ },
704+
705+}
706
707 var Slice = function(session, doc) {
708 session.subscribe(doc._id, this.on_change, this);
709@@ -377,7 +809,7 @@
710 }
711 Slice.prototype = {
712 destroy: function() {
713- this.start.destroy();
714+ if(this.start.destroy)this.start.destroy();
715 delete this.start;
716 this.end.destroy();
717 delete this.end;
718@@ -758,6 +1190,25 @@
719 if (UI.player.active) {
720 UI.player.hide();
721 }
722+ //test if dropped on a nested sequence
723+ for(var a in UI.bucket.children){
724+ if(UI.bucket.children[a].classList && UI.bucket.children[a].classList[0] == "nested"){
725+ var x = parseInt(UI.bucket.children[a].style.left);
726+ var y = parseInt(UI.bucket.children[a].style.top);
727+ if(x < dnd.x && y < dnd.y && x+130 > dnd.x && y+149 > dnd.y){
728+ console.log('send slice '+this.doc._id+' to nested sequence '+UI.bucket.children[a].id);
729+ UI.bucket.children[a].style.webkitAnimationName = "shake";
730+ //UI.bucket.children[a].style.webkitAnimationName = '';
731+ setTimeout(reset_animation,400,UI.bucket.children[a]);
732+ var doc = UI.session.get_doc(UI.bucket.children[a].id);
733+ doc.doodle.push({id: this.doc._id, x:rand_range(50,window.innerWidth-300), y:rand_range(50,window.innerHeight-300)});
734+ UI.session.save(doc);
735+ this.destroy();
736+ UI.sequence.do_reorder();
737+ return;
738+ }
739+ }
740+ }
741 if (UI.bucket.lastChild != this.element) {
742 $unparent(this.element);
743 UI.bucket.appendChild(this.element);
744@@ -815,6 +1266,7 @@
745 this.bucket = $('bucket');
746 session.subscribe(doc._id, this.on_change, this);
747 this.session = session;
748+ this.active = true;
749 this.on_change(doc);
750
751 this.element.onmousedown = $bind(this.on_mousedown, this);
752@@ -833,6 +1285,7 @@
753
754 on_change: function(doc) {
755 console.log('Sequence.on_change()');
756+ if(!this.active)return;
757 this.doc = doc;
758
759 Thumbs.freeze();
760@@ -1645,6 +2098,30 @@
761 },
762 }
763
764+function getOffset( el ) {//get the coordinates of an element
765+ var _x = 0;
766+ var _y = 0;
767+ while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
768+ _x += el.offsetLeft - el.scrollLeft;
769+ _y += el.offsetTop - el.scrollTop;
770+ el = el.offsetParent;
771+ }
772+ return { y: _y, x: _x };
773+}
774+
775+function generate_animation(el,x,y,k){
776+ var off = getOffset(el);
777+ var tx = off.x - x;
778+ var ty = off.y - y;
779+ var keyframeprefix = "-webkit-";
780+ if(k == 0)var keyframes = '@' + keyframeprefix + 'keyframes a'+el.id+' { '+'0% {' + keyframeprefix + 'transform: translate('+-tx+'px,'+-ty+'px);}'+'100% {' + keyframeprefix + 'transform:translate(0px,0px);}'+'}';
781+ else var keyframes = '@' + keyframeprefix + 'keyframes a'+el.id+' { '+'0% {' + keyframeprefix + 'transform: translate(0px,0px);}'+'100% {' + keyframeprefix + 'transform:translate('+-tx+'px,'+-ty+'px);}'+'}';
782+ var s = document.createElement( 'style' );
783+ s.innerHTML = keyframes;
784+ document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
785+ el.style.webkitAnimationName = 'a'+el.id;
786+}
787+
788
789 var UI = {
790 init: function() {
791@@ -1663,12 +2140,18 @@
792 UI.orb = new LoveOrb();
793 document.getElementById('shortcuts').style.marginTop = window.innerHeight/2-200+"px";
794 document.getElementById('shortcuts').style.marginLeft = window.innerWidth/2-255+"px";
795+
796+ UI.settable = true;
797
798 // Create and start the CouchDB session
799 UI.session = new couch.Session(UI.db, UI.on_new_doc);
800 UI.session.start();
801
802 },
803+
804+ set_base: function(id){
805+ UI.base = id;
806+ },
807
808 animated: null,
809
810@@ -1738,15 +2221,24 @@
811 },
812
813 duplicate_selected: function(dnd) {
814- var element = $(UI.selected);
815- var doc = UI.session.get_doc(element.id);
816- var ndoc = create_slice(doc.node.src,doc.node.stop.frame);
817- ndoc.node.start.frame = doc.node.start.frame;
818- UI.session.save(ndoc);
819- var slice = new Slice(UI.session, ndoc);
820- slice.x = 64;
821- slice.y = 36;
822- UI.bucket.appendChild(slice.element);
823+ var element = $(UI.selected);
824+ var doc = UI.session.get_doc(element.id);
825+ if(doc.node.type == "slice"){
826+ var ndoc = create_slice(doc.node.src,doc.node.stop.frame);
827+ ndoc.node.start.frame = doc.node.start.frame;
828+ UI.session.save(ndoc);
829+ var slice = new Slice(UI.session, ndoc);
830+ }else{
831+ var ndoc = create_sequence();
832+ ndoc.node.src = doc.node.src;
833+ ndoc.doodle = doc.doodle;
834+ UI.session.save(ndoc);
835+ var slice = new Nested(UI.session, ndoc);
836+ }
837+
838+ slice.x = parseInt(element.style.left)-30;
839+ slice.y = parseInt(element.style.top)-30;
840+ UI.bucket.appendChild(slice.element);
841 UI.sequence.do_reorder();
842 },
843
844@@ -1791,7 +2283,8 @@
845 catch (e) {
846 return null;
847 }
848- var slice = new Slice(UI.session, doc);
849+ if(doc.node.type == 'slice')var slice = new Slice(UI.session, doc);
850+ if(doc.node.type == 'sequence')var slice = new Nested(UI.session, doc);
851 return slice.element;
852 },
853
854@@ -1833,6 +2326,66 @@
855 UI.roughcut.show(doc.node.src);
856 UI.roughcut.edit_slice(doc);
857 },
858+
859+ back: function(close){
860+ UI.sequence.active = false;
861+ var parent = UI.sequence.doc.node.parent;
862+ console.log(parent);
863+ if(close)UI.orb.toggle();
864+ if(!parent || parent == "")window.location = "projects.html";
865+ else UI.set_sequence(UI.session.get_doc(parent),UI.sequence.doc);
866+ },
867+
868+ get_list: function(){
869+ var list = Array();
870+ for(var a=0;a < UI.bucket.children.length;a++)list.push(UI.bucket.children[a]);
871+ for(var a=0;a < $('sequence').children.length;a++)list.push($('sequence').children[a]);
872+ return list;
873+ },
874+
875+ set_sequence: function(doc,doc2){
876+ if(!UI.settable)return;
877+ UI.settable = false;
878+ console.log('set sequence '+ doc._id);
879+ var list = UI.get_list();
880+ UI.sequence.active = false;
881+ UI.sequence = new Sequence(UI.session, doc);
882+ UI.clips = new Clips(dmedia);
883+ UI.player= new SequencePlayer(UI.session, doc);
884+ var len = 300;
885+ if(doc2){
886+ var pos = getOffset(document.getElementById(doc2._id));
887+ for(var a in list){
888+ generate_animation(list[a],pos.x,pos.y,1);
889+ setTimeout($remove,len,list[a]);
890+ }
891+ list = UI.get_list();
892+ for(var a in list){
893+ if(list[a].style.webkitAnimationName != ('a'+list[a].id)){
894+ list[a].style.webkitAnimationName = "appear";
895+ setTimeout($no_animation,len,list[a]);
896+ }
897+ }
898+ }else{
899+ var pos = getOffset(document.getElementById(doc._id));
900+ for(var a in list){
901+ list[a].style.webkitAnimationName = "disappear";
902+ setTimeout($remove,len,list[a]);
903+ }
904+ list = UI.get_list();
905+ for(var a in list){
906+ if(list[a].style.webkitAnimationName != "disappear"){
907+ generate_animation(list[a],pos.x,pos.y,0);
908+ setTimeout($no_animation,len,list[a]);
909+ }
910+ }
911+ }
912+ setTimeout(function(){UI.settable = true;},len);
913+ },
914+
915+ edit_nested: function(doc) {
916+ UI.set_sequence(doc,false);
917+ },
918
919 hide_roughcut: function() {
920 UI.roughcut.hide();
921@@ -1865,8 +2418,8 @@
922 UI.player.hold_and_resume();
923 }
924 },
925- 'U+0044': function(event) {
926- UI.duplicate_selected(event);
927+ 'U+0044': function(event) {
928+ UI.duplicate_selected(event);
929 },
930
931 // The David Fulde key
932@@ -1899,7 +2452,9 @@
933 'U+001B': function(event) {
934 if (UI.player.active) {
935 UI.player.hide();
936- }
937+ }else{
938+ UI.back(false);
939+ }
940 },
941 },
942
943
944=== modified file 'ui/novacut.js'
945--- ui/novacut.js 2012-06-28 00:51:04 +0000
946+++ ui/novacut.js 2012-09-22 13:18:20 +0000
947@@ -73,6 +73,7 @@
948 function create_sequence() {
949 var node = {
950 'type': 'sequence',
951+ 'parent': '',
952 'src': [],
953 }
954 var doc = create_node(node);
955@@ -80,6 +81,15 @@
956 return doc;
957 }
958
959+/*function create_nested() {
960+ var node = {
961+ 'type': 'nested',
962+ 'root': '',
963+ }
964+ var doc = create_node(node);
965+ return doc;
966+}*/
967+
968
969 function SlicePlayer() {
970 this.video = document.createElement('video');
971@@ -199,6 +209,8 @@
972
973 load_slice: function(clip, slice) {
974 this.stop();
975+ //console.log(clip);
976+ //console.log(slice);
977 this.clip = clip;
978 this.slice = slice;
979 this.video.src = 'dmedia:' + this.clip._id;
980@@ -246,7 +258,9 @@
981 SequencePlayer.prototype = {
982 show: function() {
983 console.log('show');
984- if (this.doc.node.src.length == 0) {
985+ this.list = Array();
986+ this.create_list(this.doc);
987+ if (this.list.length == 0) {
988 return;
989 }
990 $show(this.element);
991@@ -322,6 +336,8 @@
992
993 play: function() {
994 this.playing = true;
995+ this.list = Array();
996+ this.create_list(this.doc);
997 this.activate_target();
998 },
999
1000@@ -331,7 +347,7 @@
1001 },
1002
1003 play_from_slice: function(slice_id) {
1004- if (this.doc.node.src.length == 0) {
1005+ if (this.list.length == 0) {
1006 return;
1007 }
1008 this.stop();
1009@@ -339,21 +355,29 @@
1010 slice_id = UI.selected;
1011 }
1012 console.log('play_from_slice ' + slice_id);
1013- var index = Math.max(0, this.doc.node.src.indexOf(slice_id));
1014+ var index = Math.max(0, this.list.indexOf(slice_id));
1015 this.load_slice(this.player1, index);
1016 this.load_slice(this.player2, index + 1);
1017 },
1018+
1019+ create_list: function(doc){
1020+ for(var a in doc.node.src){
1021+ var el = this.session.get_doc(doc.node.src[a]);
1022+ if(el.node.type == "slice")this.list.push(el._id);
1023+ else this.create_list(el);
1024+ }
1025+ },
1026
1027 get_player: function(i) {
1028 return this.players[i % this.players.length];
1029 },
1030
1031 next_slice_index: function(player) {
1032- return this.doc.node.src.indexOf(player.slice._id) + 1;
1033+ return this.list.indexOf(player.slice._id) + 1;
1034 },
1035
1036 load_slice: function(player, index) {
1037- var src = this.doc.node.src;
1038+ var src = this.list;
1039 var slice_id = src[index % src.length];
1040 var slice = this.session.get_doc(slice_id);
1041 var clip = this.session.get_doc(slice.node.src);
1042
1043=== modified file 'ui/projects.js'
1044--- ui/projects.js 2012-07-19 10:18:29 +0000
1045+++ ui/projects.js 2012-09-22 13:18:20 +0000
1046@@ -6,6 +6,7 @@
1047
1048 function countFiles(project_id){
1049 var pdb = new couch.Database("novacut-0-" + project_id.toLowerCase());
1050+ console.log(pdb);
1051 try{
1052 var filecount = pdb.view_sync('doc', 'type', {key: 'dmedia/file'}).rows[0].value;
1053 }

Subscribers

People subscribed via source and target branches

to all changes:
to status/vote changes: