Refactored navigation JS code into its own resource

memoriestravel · Aug 25, 2013 · 5fe2ee0 · 5fe2ee0
1 parent ab2e8ea
commit 5fe2ee0
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 60 deletions.
diff --git a/lib/cleaver.js b/lib/cleaver.js
@@ -11,6 +11,7 @@ function Cleaver(options) {
   this.stylesheetFile = Cleaver.ROOT_DIR + 'styles/default.css';
   this.templateFile = Cleaver.ROOT_DIR + 'templates/layout.mustache';
   this.jqueryFile = Cleaver.ROOT_DIR + 'resources/jquery.min.js';
+  this.navigationFile = Cleaver.ROOT_DIR + 'resources/navigation.js';
 
   // user-specified files
   this.documentFile = options.file;
@@ -22,6 +23,7 @@ function Cleaver(options) {
   this.stylesheets = [];
   this.template = null;
   this.jquery = null;
+  this.navigation = null;
 }
 
 Cleaver.ROOT_DIR = path.normalize(__dirname + '/../');
@@ -51,6 +53,7 @@ Cleaver.prototype._loadAssets = function () {
   var promises = [
     this._loadSingleAsset(this.templateFile),
     this._loadSingleAsset(this.jqueryFile),
+    this._loadSingleAsset(this.navigationFile),
     this._loadSingleAsset(this.stylesheetFile)
   ];
 
@@ -63,8 +66,9 @@ Cleaver.prototype._loadAssets = function () {
     .then(function (data) {
       self.template = data[0];
       self.jquery = data[1];
+      self.navigation = data[2];
 
-      for (var i = 2; i < data.length; i++) {
+      for (var i = 3; i < data.length; i++) {
         self.stylesheets.push(data[i]);
       }
     })
@@ -105,7 +109,8 @@ Cleaver.prototype._renderSlideshow = function () {
     title: 'Hello, world',
     controls: true,
     styles: this.stylesheets,
-    jquery: this.jquery
+    jquery: this.jquery,
+    navigation: this.navigation
   }
 
   console.log(mustache.render(this.template, slideData));

diff --git a/resources/navigation.js b/resources/navigation.js
@@ -0,0 +1,57 @@
+$(function() {
+  $('section').each(function(i, v) {
+    if (i)
+      $(v).hide();
+    else
+      $(v).addClass('active');
+  });
+
+  // go back a slide
+  var go_back = function() {
+    var curr = $('section.active');
+    if (!curr.prev().length) {
+      $('section:last').show().addClass('active');
+    } else {
+      curr.prev().show().addClass('active');
+    }
+    curr.hide().removeClass('active');
+  };
+
+  // go forward a slide
+  var go_forward = function() {
+    var curr = $('section.active');
+    if (!curr.next().length) {
+      $('section:first').show().addClass('active');
+    } else {
+      curr.next().show().addClass('active');
+    }
+    curr.hide().removeClass('active');
+  };
+
+  $(document).on('keydown', function(e) {
+    var kc = e.keyCode;
+
+    // left, down, H, J, backspace - BACK
+    // up, right, K, L, space, enter - FORWARD
+    if (kc == 37 || kc == 40 || kc == 8 || kc == 72 || kc == 74) {
+      go_back();
+    } else if (kc == 38 || kc == 39 || kc == 13 || kc == 32 || kc == 75 || kc == 76) {
+      go_forward();
+    }
+
+  });
+
+  if ($('#next') && $('#prev')) {
+    // clicking the next box
+    $('#next').on('click', function(e) {
+      e.preventDefault();
+      go_forward();
+    });
+
+    // clicking the prev box
+    $('#prev').on('click', function(e) {
+      e.preventDefault();
+      go_back();
+    });
+  }
+});
diff --git a/templates/layout.mustache b/templates/layout.mustache
@@ -23,64 +23,7 @@
   {{/controls}}
   <script type="text/javascript">
     {{{jquery}}}
-
-    $(function() {
-      $('section').each(function(i, v) {
-        if (i)
-          $(v).hide();
-        else
-          $(v).addClass('active');
-      });
-
-      // go back a slide
-      var go_back = function() {
-        var curr = $('section.active');
-        if (!curr.prev().length) {
-          $('section:last').show().addClass('active');
-        } else {
-          curr.prev().show().addClass('active');
-        }
-        curr.hide().removeClass('active');
-      };
-
-      // go forward a slide
-      var go_forward = function() {
-        var curr = $('section.active');
-        if (!curr.next().length) {
-          $('section:first').show().addClass('active');
-        } else {
-          curr.next().show().addClass('active');
-        }
-        curr.hide().removeClass('active');
-      };
-
-      $(document).on('keydown', function(e) {
-        var kc = e.keyCode;
-
-        // left, down, H, J, backspace - BACK
-        // up, right, K, L, space, enter - FORWARD
-        if (kc == 37 || kc == 40 || kc == 8 || kc == 72 || kc == 74) {
-          go_back();
-        } else if (kc == 38 || kc == 39 || kc == 13 || kc == 32 || kc == 75 || kc == 76) {
-          go_forward();
-        }
-
-      });
-
-      {{#controls}}
-        // clicking the next box
-        $('#next').on('click', function(e) {
-          e.preventDefault();
-          go_forward();
-        });
-
-        // clicking the prev box
-        $('#prev').on('click', function(e) {
-          e.preventDefault();
-          go_back();
-        });
-      {{/controls}}
-    });
+    {{{navigation}}}
   </script>
 </body>
 </html>