impressive code clean-up

js/impress.js

@@ -1,6 +1,8 @@
-(function() {
+(function ( document ) {
 
-    var _pfx = (function () {
+    // HELPER FUNCTIONS
+    
+    var pfx = (function () {
 
         var style = document.createElement('dummy').style,
             prefixes = 'Webkit Moz O ms Khtml'.split(' '),
@@ -27,39 +29,53 @@
 
     })();
 
-    var extend = function (dst, src) {
+    var extend = function ( dst, src ) {
-        for (var key in src) {
+        var key;
-            if (src.hasOwnProperty(key)) {
+        for ( key in src ) {
+            if ( src.hasOwnProperty(key) ) {
                 dst[key] = src[key];
             }
         }
         return dst;
     }
     
-    var css = function (el, props) {
+    var css = function ( el, props ) {
         var key, pkey;
-        for (key in props) {
+        for ( key in props ) {
-            pkey = _pfx(key);
+            pkey = pfx(key);
-            if (pkey != null) {
+            if ( pkey != null ) {
                 el.style[pkey] = props[key];
             }
         }
         return el;
     }
     
-    var $ = function(s) {
+    var $ = function ( selector, context ) {
-        return document.querySelector(s);
+        context = context || document;
+        return context.querySelector(selector);
     };
     
-    var $$ = function(selector){
+    var $$ = function ( selector, context ) {
-        return [].slice.call(document.querySelectorAll(selector));
+        context = context || document;
+        return [].slice.call( context.querySelectorAll(selector) );
     };
     
+    var translate = function (x,y) { return " translate3d(" + x + "px," + y + "px, 0) "; }
+    var rotate = function (a) { return " rotate(" + a + "deg) "; }
+    var scale = function (s) { return " scale(" + s + ") "; }
+    
+    // DOM ELEMENTS
+    
     var impress = document.getElementById("impress");
-    
     var canvas = document.getElementById("canvas");
+    
     canvas.rotate = canvas.querySelector(".rotate");
     
+    var steps = $$(".step", impress);
+    
+    // SETUP
+    // set initial values and defaults
+    
     document.documentElement.style.height = "100%";
     
     css(document.body, {
@@ -91,13 +107,7 @@
 
     var current = canvas.dataset;
 
-    var translate = function (x,y) { return " translate3d(" + x + "px," + y + "px, 0) "; }
+    steps.forEach(function ( el, idx ) {
-    var rotate = function (a) { return " rotate(" + a + "deg) "; }
-    var scale = function (s) { return " scale(" + s + ") "; }
-    
-    var steps = $$(".step");
-        
-    steps.forEach(function(el){
         var step = el.dataset;
         
         step.x = step.x || 0;
@@ -105,6 +115,10 @@
         step.rotate = step.rotate || 0;
         step.scale = step.scale || 1;
         
+        if ( !el.id ) {
+            el.id = "step-" + idx;
+        }
+        
         css(el, {
             position: "absolute",
             transform: "translate(-50%,-50%)" +
@@ -115,11 +129,13 @@
         
     });
 
-    function select(el) {
+    // making given step active
+
+    var select = function ( el ) {
         var step = el.dataset;
 
-        if ($(".step.active")) {
+        if ( $(".step.active", canvas) ) {
-            $(".step.active").classList.remove("active");
+            $(".step.active", canvas).classList.remove("active");
         }
         el.classList.add("active");
 
@@ -127,12 +143,11 @@
         
         var target = {
             rotate: -parseInt(step.rotate, 10),
-            scale: 1 / parseFloat(step.scale)
+            scale: 1 / parseFloat(step.scale),
+            x: -step.x,
+            y: -step.y
         };
 
-        target.x = -step.x;
-        target.y = -step.y;
-
         css(canvas, {
             transform: scale(target.scale),
             transitionDelay: (target.scale > current.scale ? "300ms" : "0")
@@ -146,10 +161,12 @@
         extend(current, target);
     }
     
-    document.addEventListener("keydown", function(event){
+    // EVENTS
+    
+    document.addEventListener("keydown", function ( event ) {
         if( event.keyCode == 32 || (event.keyCode >= 37 && event.keyCode <= 40) ) {
             var next = null;
-            var active = document.querySelector(".step.active");
+            var active = $(".step.active", canvas);
             switch( event.keyCode ) {
                 case 37: ; // left
                 case 38:   // up
@@ -170,6 +187,9 @@
         }
     }, false);
     
+    // START 
+    // by selecting first step of presentation
     select(steps[0]);
-})();
+
+})(document);