HTML5 demo from Mobile World Congress 2011HEADmaster

1 files changed, 260 insertions, 0 deletions

diff --git a/mobile-hybrid-demo/html/csstransform.js b/mobile-hybrid-demo/html/csstransform.js
new file mode 100755
index 0000000..f319558
--- /dev/null
+++ b/mobile-hybrid-demo/html/csstransform.js
@@ -0,0 +1,260 @@
+/* This file is part of mobile_hybrid_demo (HTML5 demonstration)
+
+Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies).
+All rights reserved.
+
+Contact:  Nokia Corporation [email protected]
+
+You may use this file under the terms of the BSD license as follows:
+
+"Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met: *
+Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer. * Redistributions in binary
+form must reproduce the above copyright notice, this list of conditions and the
+following disclaimer in the documentation and/or other materials provided with
+the distribution. * Neither the name of Nokia Corporation and its
+Subsidiary(-ies) nor the names of its contributors may be used to endorse or
+promote products derived from this software without specific prior written
+permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+*/
+
+// this effect demonstrates css transforms and animations
+// also the background is generated by CSS gradient
+// there are only three images on screen all the time, so we juggle them around.
+// the two images that stay on the screen (the center image transitioning to the side and 
+// the side image transitioning to the center) are simple, but to achieve a new image 
+// appearing, we have to use multiple timers. first, the image gets transitioned out in 100ms,
+// when the transition is over, the new image will be loaded and the transition will be set to 0,
+// and the image is moved to where the new image will appear from. after this is done, the 
+// image will be transitioned to the screen in 900ms.
+
+var csstransformEffect = {
+    images: new Array(),
+    moving: false,
+    timer: false,
+    selected: 2,
+    padding: 10,
+    margin: 0,
+    click: function (x, y) {
+        // if clock is on the edge, scroll to that direction
+        if (x < 100) csstransformEffect.move(1);
+        if (x > window.innerWidth - 100) csstransformEffect.move(-1);
+    },
+    swipe: function (dir) {
+        // also move when swiped
+        csstransformEffect.move(-dir);
+    },
+    drag: function (amt) {},
+    releaseDrag: function (amt) {},
+    init: function () {
+        console.log("flikr init.");
+        gete("content").style.background = "	-webkit-gradient( linear, left bottom, left top, color-stop(0.47, rgb(71,72,90)),    color-stop(0.74, rgb(100,101,117)), color-stop(0.87, rgb(130,132,153)))";
+        // generate the div to hold the images, and the three images visible on screen
+        di = document.createElement("div");
+        di.setAttribute("id", "images");
+        ip = document.createElement("img");
+        ip.setAttribute("id", "previous");
+        ip.setAttribute("class", "flikr");
+        cp = document.createElement("img");
+        cp.setAttribute("id", "current");
+        cp.setAttribute("class", "flikr");
+        np = document.createElement("img");
+        np.setAttribute("id", "next");
+        np.setAttribute("class", "flikr");
+        di.appendChild(ip);
+        di.appendChild(cp);
+        di.appendChild(np);
+        gete("content").appendChild(di);
+        csstransformEffect.setpics();
+    },
+    start: function () {},
+    deinit: function () {
+        gete("content").style.background = "white";
+        if (gete("content").hasChildNodes()) while (gete("content").childNodes.length >= 1)
+        gete("content").removeChild(gete("content").firstChild);
+    },
+    images: function () {
+        // images to preload
+        return new Array("images/flikr1.jpg", "images/flikr2.jpg", "images/flikr3.jpg", "images/flikr4.jpg", "images/flikr5.jpg", "images/flikr6.jpg");
+    },
+    resize: function () {},
+    settransition: function () {
+        // sets all the transition durations to initial values, after trickery to move the pictures
+        gete("previous").style.webkitTransitionDuration = "1s";
+        gete("current").style.webkitTransitionDuration = "1s";
+        gete("next").style.webkitTransitionDuration = "1s";
+    },
+    setpics: function () {
+        // sets the images to their default positions and initial values
+        margin = 0;
+        csstransformEffect.padding = window.innerWidth / 46;
+        gete("images").style.width = window.innerWidth + "px";
+        gete("images").style.height = window.innerHeight + "px";
+        // set transition times to 0, to move the pictures instantly
+        gete("previous").style.webkitTransitionDuration = "0ms";
+        gete("current").style.webkitTransitionDuration = "0ms";
+        gete("next").style.webkitTransitionDuration = "0ms";
+        // set positions and transform details
+        gete("previous").style.left = 2 * (margin + csstransformEffect.padding) + "px";
+        gete("current").style.left = 3 * (margin + csstransformEffect.padding) + "px";
+        gete("next").style.left = 4 * (margin + csstransformEffect.padding) + "px";
+        gete("previous").style.webkitTransformOrigin = "0% 100%";
+        gete("current").style.webkitTransformOrigin = "0% 100%";
+        gete("next").style.webkitTransformOrigin = "100% 100%";
+        gete("previous").style.webkitTransform = "rotate(-90deg)";
+        gete("current").style.webkitTransform = "rotate(0deg)";
+        gete("next").style.webkitTransform = "rotate(90deg)";
+        // set the images to show the right picture
+        console.log("IMAGES ARE " + (((csstransformEffect.selected + 5) % 6) + 1) + " " + (((csstransformEffect.selected + 6) % 6) + 1) + " " + (((csstransformEffect.selected + 7) % 6) + 1));
+        gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 5) % 6) + 1) + ".jpg";
+        gete("current").src = "images/flikr" + (((csstransformEffect.selected + 6) % 6) + 1) + ".jpg";
+        gete("next").src = "images/flikr" + (((csstransformEffect.selected + 7) % 6) + 1) + ".jpg";
+        // in 10ms, after the images have moved, set the transitions to what they should be
+        timer = setTimeout("csstransformEffect.settransition()", 10);
+        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false);
+        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.setpics, false);
+        ytop = (window.innerHeight - csstransformEffect.padding * 40) / 2;
+        gete("current").style.top = ytop + "px";
+        gete("previous").style.top = ytop + "px";
+        gete("next").style.top = ytop + "px";
+        gete("current").style.width = csstransformEffect.padding * 40 + "px";
+        gete("next").style.width = csstransformEffect.padding * 40 + "px";
+        gete("previous").style.width = csstransformEffect.padding * 40 + "px";
+        gete("current").style.height = csstransformEffect.padding * 40 + "px";
+        gete("next").style.height = csstransformEffect.padding * 40 + "px";
+        gete("previous").style.height = csstransformEffect.padding * 40 + "px";
+
+    },
+
+
+    transitioncenter: function () {
+        // helper function, when we are transitioning to the right, we need to move the rotation origin of the center image
+        gete("current").style.webkitTransitionDuration = "1000ms";
+        gete("current").style.left = 4 * (margin + csstransformEffect.padding) + "px";
+        gete("current").style.webkitTransform = "rotate(90deg)";
+    },
+
+    move: function (dir) {
+        // this function starts the transition
+        // after the transition is complete, loadleft or loadright will be called to load the next image
+        if (csstransformEffect.moving) return;
+        csstransformEffect.moving = true;
+        if (dir == 1) {
+            gete("previous").style.zIndex = "2";
+            gete("previous").style.left = "1px";
+            gete("previous").style.webkitTransitionDuration = "100ms";
+            gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false);
+            gete("current").style.webkitTransformOrigin = "0% 100%";
+            gete("current").style.webkitTransform = "rotate(-90deg)";
+            gete("current").style.left = 2 * (csstransformEffect.padding) + "px";
+            gete("next").style.webkitTransform = "rotate(0deg)";
+            gete("next").style.left = 3 * (csstransformEffect.padding) + "px";
+        }
+        if (dir == -1) {
+            gete("next").style.zIndex = "2";
+            gete("previous").style.left = 3 * (csstransformEffect.padding) + "px";
+            gete("previous").style.webkitTransform = "rotate(0deg)";
+            // moving right, we need to move the origin first so that the transition is a mirror of the transition to the left
+            gete("current").style.webkitTransitionDuration = "0ms";
+            gete("current").style.webkitTransformOrigin = "100% 100%";
+            // and only then actually transition the center image
+            setTimeout("csstransformEffect.transitioncenter()", 10);
+            // this bugs if the user is clicking through the images too fast.
+            gete("next").style.webkitTransitionDuration = "100ms";
+            gete("next").style.left = (6 * (csstransformEffect.padding)) - 1 + "px";
+            gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.loadright, false);
+        }
+    },
+    loadleft: function () {
+        // loadleft gets called after move()
+        // move the disappeared image to the other side to transition it in
+        gete("previous").style.left = (6 * (margin + csstransformEffect.padding)) - 1 + "px";
+        gete("previous").style.webkitTransform = "rotate(90deg)";
+        gete("previous").style.webkitTransformOrigin = "100% 100%";
+        gete("previous").style.webkitTransitionDuration = "0ms";
+        // load the next image to appear 
+        console.log("loading " + (((csstransformEffect.selected + 2) % 6) + 1));
+        gete("previous").src = "images/flikr" + (((csstransformEffect.selected + 2) % 6) + 1) + ".jpg";
+        setTimeout("csstransformEffect.moveleft();", 1);
+        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.loadleft, false);
+    },
+    loadright: function () {
+        // loadright gets called after move()
+        // move the disappeared image to the other side to transition it in
+        gete("next").style.left = "1px";
+        gete("next").style.webkitTransform = "rotate(-90deg)";
+        gete("next").style.webkitTransformOrigin = "0% 100%";
+        gete("next").style.webkitTransitionDuration = "0ms";
+        // load the next image to appear 
+        console.log("!loading " + (((csstransformEffect.selected + 4) % 6) + 1));
+        gete("next").src = "images/flikr" + (((csstransformEffect.selected + 4) % 6) + 1) + ".jpg";
+        setTimeout("csstransformEffect.moveright();", 1);
+        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.loadright, false);
+    },
+    moveleft: function () {
+        //  move the new image loaded to the screen, and after it is complete, call updateleft
+        // this gets called after loadleft
+        gete("previous").style.webkitTransitionDuration = "900ms";
+        gete("previous").style.left = 4 * (margin + csstransformEffect.padding) + "px";
+        gete("previous").addEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false);
+        csstransformEffect.selected++;
+    },
+
+    moveright: function () {
+        //  move the new image loaded to the screen, and after it is complete, call updateright
+        // this gets called after loadright
+        gete("next").style.webkitTransitionDuration = "900ms";
+        gete("next").style.left = 2 * (margin + csstransformEffect.padding) + "px";
+        gete("next").addEventListener('webkitTransitionEnd', csstransformEffect.updateright, false);
+        // keep selected positive to make things easier
+        csstransformEffect.selected = (csstransformEffect.selected + 5) % 6;
+    },
+    updateleft: function () {
+        // this function sets the images back to the default settings, ready to transition again
+        // the final function getting called in the transition
+        gete("previous").style.zIndex = "0";
+        gete("current").style.zIndex = "0";
+        gete("next").style.zIndex = "0";
+        gete("previous").removeEventListener('webkitTransitionEnd', csstransformEffect.updateleft, false);
+        gete("previous").setAttribute("id", "next2");
+        gete("current").setAttribute("id", "previous");
+        gete("next").setAttribute("id", "current");
+        gete("next2").setAttribute("id", "next");
+        gete("previous").style.webkitTransformOrigin = "0% 100%";
+        gete("current").style.webkitTransformOrigin = "0% 100%";
+        gete("next").style.webkitTransformOrigin = "100% 100%";
+        csstransformEffect.moving = false;
+        //		csstransformEffect.setpics();
+    },
+
+    updateright: function () {
+        // this function sets the images back to the default settings, ready to transition again
+        // the final function getting called in the transition
+        gete("previous").style.zIndex = "0";
+        gete("current").style.zIndex = "0";
+        gete("next").style.zIndex = "0";
+        gete("next").style.zIndex = "0";
+        gete("next").removeEventListener('webkitTransitionEnd', csstransformEffect.updateright, false);
+        gete("next").setAttribute("id", "previous2");
+        gete("current").setAttribute("id", "next");
+        gete("previous").setAttribute("id", "current");
+        gete("previous2").setAttribute("id", "previous");
+        gete("previous").style.webkitTransformOrigin = "0% 100%";
+        gete("current").style.webkitTransformOrigin = "0% 100%";
+        gete("next").style.webkitTransformOrigin = "100% 100%";
+        csstransformEffect.moving = false;
+        //		csstransformEffect.setpics();
+    }
+
+
+}