Implement nav

mojits/Preso/binders/index.js

@@ -15,27 +15,36 @@ YUI.add('PresoBinder', function(Y, NAME)
 
         bind: function(node)
         {
-            var self = this;
-
-            // sniff for proper key event
-            self.keyEvent = Y.UA.webkit || Y.UA.ie ? 'keydown' : 'keypress';
+            var self = this,
+                // sniff for proper key event
+                keyEvent = Y.UA.webkit || Y.UA.ie ? 'keydown' : 'keypress';
 
             // listen for keypress
-            Y.one('body').on(self.keyEvent, self.handleKey, self);
+            Y.one('body').on(keyEvent, self.handleKey, self);
 
             // make sure current slide is set
             self.onRefreshView(node);
         },
 
         onRefreshView: function(node)
         {
-            // get the current slide number from a data atribute within the view
-            this.currentSlide = parseInt(node.getAttribute('data-slide'), 10);
+            var self = this,
+                nav = node.one('nav');
+
+            // get the current slide numbers from a data atribute within the nav links
+            self.currentSlide = self.getSlideAttr(nav, 'a.current');
+            self.nextSlide    = self.getSlideAttr(nav, 'a.next');
+            self.prevSlide    = self.getSlideAttr(nav, 'a.prev');
 
             // update page title
             Y.one('title').setContent(Y.one('h1').getContent());
         },
 
+        getSlideAttr: function(node, selector)
+        {
+            return parseInt(node.one(selector).getAttribute('data-slide'), 10);
+        },
+
         changeSlide: function(num)
         {
             this.proxy.refreshView({params:{url:{slide: num}}});
@@ -45,36 +54,34 @@ YUI.add('PresoBinder', function(Y, NAME)
         {
             var self = this,
                 key = e.keyCode,
-                numSlides = self.numSlides,
-                currentSlide = self.currentSlide,
-                nextSlide = 0;
+                slideNum = 0;
 
             // left, up, page up respectively
             if(key == 37 || key == 38 || key == 33)
             {
-                nextSlide = currentSlide > 1 ? currentSlide - 1 : numSlides;
+                slideNum = self.prevSlide;
             }
             // right, down, page down respectively
             else if(key == 39 || key == 40 || key == 34)
             {
-                nextSlide = currentSlide < numSlides ? currentSlide + 1 : 1;
+                slideNum = self.nextSlide;
             }
             // home
             else if(key == 36)
             {
-                nextSlide = 1;
+                slideNum = 1;
             }
             // end
             else if(key == 35)
             {
-                nextSlide = self.numSlides;
+                slideNum = self.numSlides;
             }
 
             // change slide if we got an expected key
-            if(nextSlide)
+            if(slideNum)
             {
                 e.preventDefault();
-                self.changeSlide(nextSlide);
+                self.changeSlide(slideNum);
             }
         }
     };

mojits/Preso/controller.common.js

@@ -10,15 +10,21 @@ YUI.add('Preso', function(Y, NAME)
         index: function(ac)
         {
             var self = this,
-                num = ac.params.url('slide') || '1',
+                // slide can come from routes or query params
+                currentSlide = parseInt(ac.params.merged('slide') || '1', 10),
                 children = null;
 
+            // store slide info
+            self.currentSlide = currentSlide;
+            self.prevSlide = currentSlide > 1 ? currentSlide - 1 : self.config.numSlides;
+            self.nextSlide = currentSlide < self.config.numSlides ? currentSlide + 1 : 1;
+
             // store ac for access in other methods and closure
             self.ac = ac;
 
             function done(meta)
             {
-                var viewName = 'slide' + num,
+                var viewName = 'slide' + currentSlide,
                     meta = meta || {};
 
                 // workaround for a diff view and binder
@@ -28,11 +34,11 @@ YUI.add('Preso', function(Y, NAME)
                 meta.view = {'name': viewName};
 
                 // end execution
-                self.ac.done({}, meta);
+                self.ac.done({nav: self.genNav()}, meta);
             }
 
             // handle any children that the slide expects
-            switch(num)
+            switch(currentSlide)
             {
 
             }
@@ -47,6 +53,19 @@ YUI.add('Preso', function(Y, NAME)
                 views = self.ac.command.instance.views;
 
             views[target] = Y.merge(views[base], views[target]);
+        },
+
+        genNav: function()
+        {
+            var self = this;
+
+            return [
+            '<nav>',
+                '<a href="/slides/' + self.prevSlide + '" data-slide="' + self.prevSlide + '" title="Previous Slide" class="prev">&lt;</a>',
+                '<a href="/slides/' + self.currentSlide + '" data-slide="' + self.currentSlide + '" title="Current Slide" class="current">#</a>',
+                '<a href="/slides/' + self.nextSlide + '" data-slide="' + self.nextSlide + '" title="Next Slide" class="next">&gt;</a>',
+            '</nav>'
+            ].join(' ');
         }
     };
 }, '0.0.1', {requires: ['json', 'mojito']});