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

Proposed by Matteo Ronchetti on 2012-09-22
Status: Merged
Approved by: Matteo Ronchetti on 2012-09-22
Approved revision: 294
Merged at revision: 294
Proposed branch: lp:~mttronchetti/novacut/nested_sequences_animated
Merge into: lp:~mttronchetti/novacut/nested_sequences
Diff against target: 315 lines (+162/-35)
3 files modified
ui/bucket.css (+70/-7)
ui/bucket.html (+9/-9)
ui/bucket.js (+83/-19)
To merge this branch: bzr merge lp:~mttronchetti/novacut/nested_sequences_animated
Reviewer Review Type Date Requested Status
Matteo Ronchetti Approve on 2012-09-22
Review via email: mp+125850@code.launchpad.net

Description of the change

new animation

To post a comment you must log in.
review: Approve

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-09-21 09:14:19 +0000
3+++ ui/bucket.css 2012-09-22 13:00:09 +0000
4@@ -288,6 +288,10 @@
5 border-left: 1px solid #555;
6 border-right: 1px solid #444;
7 border-bottom:1px solid #333;
8+
9+ -webkit-animation-duration: 300ms;
10+ -webkit-animation-iteration-count: 1;
11+ -webkit-animation-timing-function: ease;
12 }
13
14 .slice.selected {
15@@ -591,13 +595,32 @@
16 min-width:128px;
17 min-height:147px;
18 background-color: gray;
19+
20+ -webkit-animation-duration: 300ms;
21+ -webkit-transform-origin:50% 50%;
22+ -webkit-animation-iteration-count: 1;
23+ -webkit-animation-timing-function: ease;
24+}
25+
26+.nested #desc{
27+ font-size: 14px;
28+ text-shadow: 0 1px 1px rgba(0,0,0,0.6);
29+ margin-bottom: 2px;
30+ line-height: 13px;
31+ margin-left: 3px;
32+ height: 147px;
33+ width: 125px;
34+ white-space: normal !important;
35+}
36+
37+.nested br{
38+ line-height: 2px;
39 }
40
41 .nested.selected {
42 border-color: #e81f3b;
43 z-index: 1;
44 }
45-
46 .nested, .nested * {
47 -webkit-user-select: none;
48 }
49@@ -610,25 +633,65 @@
50 cursor:pointer;
51 }
52
53+#sequence .nested{
54+ width: 192px;
55+ height: 219px;
56+}
57+
58+#sequence .nested #desc{
59+ width: 189px;
60+ height: 219px;
61+ font-size: 16px;
62+ line-height: 18px;
63+ position: absolute;
64+}
65+
66 #bucket .nested {
67+ width:128px;
68+ height:147px;
69 position: absolute;
70 box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
71
72 -webkit-transition-timing-function: ease;
73 -webkit-transition-duration: 250ms;
74 -webkit-transition-property: left, top;
75-
76- -webkit-animation-duration: 250ms;
77- -webkit-transform-origin:50% 50%;
78- -webkit-animation-iteration-count: 1;
79- -webkit-animation-timing-function: linear;
80 }
81
82-@-webkit-keyframes appear{
83+@-webkit-keyframes create{
84 from{-webkit-transform: translateX(-200px) translateY(-200px) scale(0.3);}
85 to{-webkit-transform: translateX(0px) translateY(0px) scale(1);}
86 }
87
88+@-webkit-keyframes leftout{
89+from{-webkit-transform: translateX(0px);}
90+to{-webkit-transform:translateX(-1000px);}
91+}
92+
93+@-webkit-keyframes leftin{
94+from{-webkit-transform: translateX(1000px);}
95+to{-webkit-transform:translateX(0px);}
96+}
97+
98+@-webkit-keyframes rigthin{
99+from{-webkit-transform: translateX(-1000px);}
100+to{-webkit-transform:translateX(0px);}
101+}
102+
103+@-webkit-keyframes rigthout{
104+from{-webkit-transform: translateX(0px);}
105+to{-webkit-transform:translateX(1000px);}
106+}
107+
108+@-webkit-keyframes disappear{
109+from{-webkit-transform: scale(1);}
110+to{-webkit-transform:scale(0.01);}
111+}
112+
113+@-webkit-keyframes appear{
114+from{-webkit-transform: scale(0.01);}
115+to{-webkit-transform:scale(1);}
116+}
117+
118 @-webkit-keyframes shake{
119 /*0%{-webkit-transform: rotate(0deg)}
120 10%{-webkit-transform: rotate(3deg)}
121
122=== modified file 'ui/bucket.html'
123--- ui/bucket.html 2012-09-21 09:14:19 +0000
124+++ ui/bucket.html 2012-09-22 13:00:09 +0000
125@@ -52,6 +52,15 @@
126 </div>
127 </div>
128 <div id="bucket">
129+</div>
130+<div id="sequence" clas="lower"></div>
131+<div id="roughcut" class="hide">
132+ <div class="grid_row">
133+ <button class="grid_2" id="close_roughcut">Done</button>
134+ <button class="grid_2" id="create_slice">New Slice</button>
135+ </div>
136+</div>
137+<div id="newsequence" class="clickable" onclick="addSequence();"><div id="plus">+</div></div>
138 <div id="shortcuts" >
139 <table border="0">
140 <tr>
141@@ -80,15 +89,6 @@
142 </tr>
143 </table>
144 </div>
145-</div>
146-<div id="sequence" clas="lower"></div>
147-<div id="roughcut" class="hide">
148- <div class="grid_row">
149- <button class="grid_2" id="close_roughcut">Done</button>
150- <button class="grid_2" id="create_slice">New Slice</button>
151- </div>
152-</div>
153-<div id="newsequence" class="clickable" onclick="addSequence();"><div id="plus">+</div></div>
154 </body>
155
156 </html>
157
158=== modified file 'ui/bucket.js'
159--- ui/bucket.js 2012-09-21 09:14:19 +0000
160+++ ui/bucket.js 2012-09-22 13:00:09 +0000
161@@ -163,6 +163,14 @@
162 return child;
163 }
164
165+function $remove(el){
166+ el.parentNode.removeChild(el);
167+}
168+
169+function $no_animation(el){
170+ el.style.webkitAnimationName = "";
171+}
172+
173
174 function $position(element) {
175 element = $(element);
176@@ -359,10 +367,13 @@
177 nes.x = 150;
178 nes.y = 150;
179 UI.bucket.appendChild(nes.element);
180- nes.element.style.webkitAnimationName = "appear";
181+ nes.element.style.webkitAnimationName = "create";
182+ setTimeout(reset_animation,250,nes.element);
183 UI.sequence.do_reorder();
184 }
185
186+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>";
187+
188 var Nested = function(session,doc){
189 session.subscribe(doc._id, this.on_change, this);
190 this.doc = doc;
191@@ -436,6 +447,7 @@
192 return;
193 }
194 this.doc = doc;
195+ this.element.innerHTML = nested_description;
196 if(doc.node.src.length > 0){
197 console.log('add thumbnails');
198 //console.log(this.get_slice(doc.node.src[0],0));
199@@ -2086,6 +2098,30 @@
200 },
201 }
202
203+function getOffset( el ) {//get the coordinates of an element
204+ var _x = 0;
205+ var _y = 0;
206+ while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
207+ _x += el.offsetLeft - el.scrollLeft;
208+ _y += el.offsetTop - el.scrollTop;
209+ el = el.offsetParent;
210+ }
211+ return { y: _y, x: _x };
212+}
213+
214+function generate_animation(el,x,y,k){
215+ var off = getOffset(el);
216+ var tx = off.x - x;
217+ var ty = off.y - y;
218+ var keyframeprefix = "-webkit-";
219+ if(k == 0)var keyframes = '@' + keyframeprefix + 'keyframes a'+el.id+' { '+'0% {' + keyframeprefix + 'transform: translate('+-tx+'px,'+-ty+'px);}'+'100% {' + keyframeprefix + 'transform:translate(0px,0px);}'+'}';
220+ else var keyframes = '@' + keyframeprefix + 'keyframes a'+el.id+' { '+'0% {' + keyframeprefix + 'transform: translate(0px,0px);}'+'100% {' + keyframeprefix + 'transform:translate('+-tx+'px,'+-ty+'px);}'+'}';
221+ var s = document.createElement( 'style' );
222+ s.innerHTML = keyframes;
223+ document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
224+ el.style.webkitAnimationName = 'a'+el.id;
225+}
226+
227
228 var UI = {
229 init: function() {
230@@ -2104,6 +2140,8 @@
231 UI.orb = new LoveOrb();
232 document.getElementById('shortcuts').style.marginTop = window.innerHeight/2-200+"px";
233 document.getElementById('shortcuts').style.marginLeft = window.innerWidth/2-255+"px";
234+
235+ UI.settable = true;
236
237 // Create and start the CouchDB session
238 UI.session = new couch.Session(UI.db, UI.on_new_doc);
239@@ -2295,32 +2333,58 @@
240 console.log(parent);
241 if(close)UI.orb.toggle();
242 if(!parent || parent == "")window.location = "projects.html";
243- else UI.set_sequence(UI.session.get_doc(parent));
244- },
245-
246- set_sequence: function(doc){
247- //reset the bucket
248+ else UI.set_sequence(UI.session.get_doc(parent),UI.sequence.doc);
249+ },
250+
251+ get_list: function(){
252+ var list = Array();
253+ for(var a=0;a < UI.bucket.children.length;a++)list.push(UI.bucket.children[a]);
254+ for(var a=0;a < $('sequence').children.length;a++)list.push($('sequence').children[a]);
255+ return list;
256+ },
257+
258+ set_sequence: function(doc,doc2){
259+ if(!UI.settable)return;
260+ UI.settable = false;
261 console.log('set sequence '+ doc._id);
262- var len = UI.bucket.children.length;
263- var b = 0;
264- for(var a=0;a < len;a++){
265- if(UI.bucket.children[b].id == 'newsequence' || UI.bucket.children[b].id == 'shortcuts'){
266- b++;
267- continue;
268- }
269- UI.bucket.removeChild(UI.bucket.children[b]);
270- }
271- //reset the sequence
272- len = $('sequence').children.length;
273- for(var a=0;a < len;a++)$('sequence').removeChild($('sequence').children[0]);
274+ var list = UI.get_list();
275 UI.sequence.active = false;
276 UI.sequence = new Sequence(UI.session, doc);
277 UI.clips = new Clips(dmedia);
278 UI.player= new SequencePlayer(UI.session, doc);
279+ var len = 300;
280+ if(doc2){
281+ var pos = getOffset(document.getElementById(doc2._id));
282+ for(var a in list){
283+ generate_animation(list[a],pos.x,pos.y,1);
284+ setTimeout($remove,len,list[a]);
285+ }
286+ list = UI.get_list();
287+ for(var a in list){
288+ if(list[a].style.webkitAnimationName != ('a'+list[a].id)){
289+ list[a].style.webkitAnimationName = "appear";
290+ setTimeout($no_animation,len,list[a]);
291+ }
292+ }
293+ }else{
294+ var pos = getOffset(document.getElementById(doc._id));
295+ for(var a in list){
296+ list[a].style.webkitAnimationName = "disappear";
297+ setTimeout($remove,len,list[a]);
298+ }
299+ list = UI.get_list();
300+ for(var a in list){
301+ if(list[a].style.webkitAnimationName != "disappear"){
302+ generate_animation(list[a],pos.x,pos.y,0);
303+ setTimeout($no_animation,len,list[a]);
304+ }
305+ }
306+ }
307+ setTimeout(function(){UI.settable = true;},len);
308 },
309
310 edit_nested: function(doc) {
311- UI.set_sequence(doc);
312+ UI.set_sequence(doc,false);
313 },
314
315 hide_roughcut: function() {

Subscribers

People subscribed via source and target branches

to all changes: