Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Checkin Joe's changes for smooth animation

  • Loading branch information...
commit 3f5a7b9485cd0fa3c14fbb4165c6b097304e1188 1 parent bb5ae17
authored October 24, 2007

Showing 2 changed files with 87 additions and 45 deletions. Show diff stats Hide diff stats

  1. 6  iui/iui.css
  2. 126  iui/iui.js
6  iui/iui.css
... ...
@@ -1,4 +1,4 @@
1  
-/* iui.css (c) 2007 by iUI Project Members, see LICENSE.txt for license */
  1
+
2 2
 body {
3 3
     margin: 0;
4 4
     font-family: Helvetica;
@@ -140,6 +140,10 @@ body[orient="landscape"] > .toolbar > h1 {
140 140
 
141 141
 /************************************************************************************************/
142 142
 
  143
+body > ul {
  144
+  background: #FFFFFF;
  145
+}
  146
+
143 147
 body > ul > li {
144 148
     position: relative;
145 149
     margin: 0;
126  iui/iui.js
... ...
@@ -1,7 +1,7 @@
1 1
 
2 2
 (function() {
3 3
 
4  
-var slideSpeed = 20;
  4
+var slideSpeed = 5.5;
5 5
 var slideInterval = 0;
6 6
 
7 7
 var currentPage = null;
@@ -11,7 +11,7 @@ var currentHash = location.hash;
11 11
 var hashPrefix = "#_";
12 12
 var pageHistory = [];
13 13
 var newPageCount = 0;
14  
-var checkTimer;
  14
+var animating = false;
15 15
 
16 16
 // *************************************************************************************************
17 17
 
@@ -34,6 +34,12 @@ window.iui =
34 34
                 var fromPage = currentPage;
35 35
                 currentPage = page;
36 36
 
  37
+                if (!page.id)
  38
+                    page.id = "__" + (++newPageCount) + "__";
  39
+
  40
+                location.href = currentHash = hashPrefix + page.id;
  41
+                pageHistory.push(page.id);
  42
+
37 43
                 if (fromPage)
38 44
                     setTimeout(slidePages, 0, fromPage, page, backwards);
39 45
                 else
@@ -144,7 +150,7 @@ addEventListener("load", function(event)
144 150
 
145 151
     setTimeout(preloadImages, 0);
146 152
     setTimeout(checkOrientAndLocation, 0);
147  
-    checkTimer = setInterval(checkOrientAndLocation, 300);
  153
+    setInterval(checkOrientAndLocation, 300);
148 154
 }, false);
149 155
     
150 156
 addEventListener("click", function(event)
@@ -194,7 +200,10 @@ addEventListener("click", function(event)
194 200
 }, true);
195 201
 
196 202
 function checkOrientAndLocation()
197  
-{
  203
+{                              
  204
+    if (animating)
  205
+        return;
  206
+    
198 207
     if (window.innerWidth != currentWidth)
199 208
     {   
200 209
         currentWidth = window.innerWidth;
@@ -241,12 +250,6 @@ function cancelDialog(form)
241 250
 
242 251
 function updatePage(page, fromPage)
243 252
 {
244  
-    if (!page.id)
245  
-        page.id = "__" + (++newPageCount) + "__";
246  
-
247  
-    location.href = currentHash = hashPrefix + page.id;
248  
-    pageHistory.push(page.id);
249  
-
250 253
     var pageTitle = $("pageTitle");
251 254
     if (page.title)
252 255
         pageTitle.innerHTML = page.title;
@@ -265,50 +268,85 @@ function updatePage(page, fromPage)
265 268
         }
266 269
         else
267 270
             backButton.style.display = "none";
268  
-    }    
  271
+    }
  272
+    
  273
+    animating = false;
269 274
 }
270 275
 
271 276
 function slidePages(fromPage, toPage, backwards)
272  
-{        
273  
-    var axis = (backwards ? fromPage : toPage).getAttribute("axis");
274  
-    if (axis == "y")
275  
-        (backwards ? fromPage : toPage).style.top = "100%";
276  
-    else
277  
-        toPage.style.left = "100%";
278  
-
279  
-    toPage.setAttribute("selected", "true");
280  
-    scrollTo(0, 1);
281  
-    clearInterval(checkTimer);
282  
-    
283  
-    var percent = 100;
284  
-    slide();
285  
-    var timer = setInterval(slide, slideInterval);
  277
+{
  278
+    animating = true;
  279
+
  280
+    var titlebar = findParent($("pageTitle"), "div");
  281
+    var titlebar2 = titlebar.cloneNode(true);
  282
+    titlebar2.style.position = "absolute";
  283
+    titlebar2.style.top = "0";
  284
+    titlebar2.style.width = titlebar.offsetWidth + "px";
  285
+    titlebar2.style.left = "100%";
  286
+    document.body.appendChild(titlebar2);
286 287
 
287  
-    function slide()
  288
+    if (backwards)
288 289
     {
289  
-        percent -= slideSpeed;
290  
-        if (percent <= 0)
291  
-        {
292  
-            percent = 0;
293  
-            if (!hasClass(toPage, "dialog"))
294  
-                fromPage.removeAttribute("selected");
295  
-            clearInterval(timer);
296  
-            checkTimer = setInterval(checkOrientAndLocation, 300);
297  
-            setTimeout(updatePage, 0, toPage, fromPage);
298  
-        }
  290
+        var from2 = fromPage.cloneNode(true);
  291
+        from2.style.left = "100%";
  292
+        document.body.appendChild(from2);
  293
+        scrollTo(320, 1);
  294
+    }
299 295
     
300  
-        if (axis == "y")
  296
+    setTimeout(function()
  297
+    {
  298
+        if (backwards)
301 299
         {
302  
-            backwards
303  
-                ? fromPage.style.top = (100-percent) + "%"
304  
-                : toPage.style.top = percent + "%";
  300
+            fromPage.style.left = "100%";
  301
+            document.body.removeChild(from2);
305 302
         }
306  
-        else
  303
+        
  304
+        toPage.style.left = backwards ? "0" : "100%";
  305
+
  306
+        toPage.setAttribute("selected", "true");
  307
+        scrollTo(0, 1);
  308
+        animating = true;
  309
+
  310
+        var percent = 100;
  311
+        var timer = setInterval(slide, slideInterval);
  312
+
  313
+        function slide()
307 314
         {
308  
-            fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%"; 
309  
-            toPage.style.left = (backwards ? -percent : percent) + "%"; 
  315
+            percent -= slideSpeed;
  316
+            if (percent <= 0)
  317
+            {
  318
+                percent = 0;
  319
+                clearInterval(timer);
  320
+
  321
+                if (!hasClass(toPage, "dialog"))
  322
+                    fromPage.removeAttribute("selected");
  323
+            }
  324
+
  325
+            var x = backwards ? (320 + (((percent-100)/100) * 320)) : ((100-percent)/100) * 320;
  326
+            scrollTo(x, 1);
  327
+
  328
+            if (percent == 0)
  329
+            {
  330
+                if (!backwards)
  331
+                {
  332
+                    var page2 = toPage.cloneNode(true);
  333
+                    page2.style.left = "0";
  334
+                    document.body.appendChild(page2);
  335
+
  336
+                    setTimeout(function() {
  337
+                        scrollTo(0, 1);
  338
+                        toPage.style.left = "0";
  339
+                        document.body.removeChild(page2);
  340
+                    }, 0);
  341
+                }
  342
+
  343
+                setTimeout(function() {
  344
+                    document.body.removeChild(titlebar2);
  345
+                    setTimeout(updatePage, 0, toPage, fromPage);
  346
+                }, 0);
  347
+            }
310 348
         }
311  
-    }
  349
+    }, 10);
312 350
 }
313 351
 
314 352
 function preloadImages()

0 notes on commit 3f5a7b9

Please sign in to comment.
Something went wrong with that request. Please try again.