extremely basic nav

7 files changed, 155 insertions, 73 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 13017f6..4c06729 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,16 +1,29 @@
 var app = (function() {
   var app = {}
 
+  app.iscroll_options = {
+    mouseWheel: true,
+    scrollbars: true,
+    click: is_android,
+  }
+  
+  app.flickity_options = {
+    cellAlign: 'left',
+    contain: true,
+    pageDots: false,
+    wrapAround: true,
+    arrowShape: {
+      x0: 10,
+      x1: 35, y1: 25,
+      x2: 40, y2: 25,
+      x3: 15
+    }
+  }
+
   app.init = function() {
     app.bind()
     app.build()
     app.ready()
-
-    app.iscroll_options = {
-      mouseWheel: true,
-      scrollbars: true,
-      click: is_android,
-    }
   }
 
   app.bind = function() {
@@ -20,17 +33,25 @@ var app = (function() {
       })
       FastClick.attach(document.body)
     }
+    
+    $(window).resize(app.resize)
   }
 
   app.build = function(data) {
+
+    app.header = new HeaderView()
+    app.nav = new NavView()
+
     var items = $(".item")
     app.lookup = {}
-    app.projects = items.toArray().map(function(el){
-      var view = new ProjectView ({ el: el })
+    app.projects = items.toArray().map(function(el, i){
+      var view = new ProjectView ({
+        el: el,
+        page_number: i,
+      })
       app.lookup[ view.project_id ] = view
       return view
     })
-    app.nav = new NavView()
   }
 
   app.ready = function() {
@@ -43,56 +64,28 @@ var app = (function() {
     
     console.log("launched")
   }
+  
+  app.resize = function(){
+    $(".cell, .next, .previous").css({ 'display': 'none' })
+    $('body').addClass('resizing')
+    debounce(function() {
+        $(".cell, .next, .previous").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' })
+        $('.top').flickity('resize')
+        $('body').removeClass('resizing')
+    }, 400)
+  }
 
   return app
 
 })()
 
-$(".cell, .next").css({ 'height': ($(".top").height() + 'px') });
+$(".cell, .next").css({ 'height': ($(".top").height() + 'px') })
 
-$('.top').flickity({
-  cellAlign: 'left',
-  contain: true,
-  pageDots: false,
-  wrapAround: true,
-  arrowShape: { 
-    x0: 10,
-    x1: 35, y1: 25,
-    x2: 40, y2: 25,
-    x3: 15
-  }
-}).on( 'cellSelect', function(e) {
+$('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
   var gallery = $(e.target).data('flickity')
-  $(".slide-no").html(gallery.selectedIndex + 1)
+  app.header.updateSlideNumber( gallery.selectedIndex )
 })
 
-$(".previous, .next").css({ 'height': ($(".top").height() + 'px') });
-
-$('.index').click(function() {
-    $('body').toggleClass('navopen');
-});
-
-$('.item').click( function(){
-  $('body').removeClass('navopen');
-});
-
-
-var delay = (function() {
-    var timer = 0;
-    return function(callback, ms) {
-        clearTimeout(timer);
-        timer = setTimeout(callback, ms);
-    };
-})();
-
-$(window).resize(function() {
-    $(".cell, .next, .previous").css({ 'display': 'none' });
-    $('body').addClass('resizing');
-    delay(function() {
-        $(".cell, .next, .previous").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' });
-        $('.top').flickity('resize');
-        $('body').removeClass('resizing');
-    }, 400);
-})
+$(".previous, .next").css({ 'height': ($(".top").height() + 'px') })
 
-// app.init()
+app.init()
diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js
new file mode 100644
index 0000000..b568ecb
--- /dev/null
+++ b/public/assets/js/lib/HeaderView.js
@@ -0,0 +1,31 @@
+var HeaderView = View.extend({
+
+  el: "nav",
+
+  events: {
+    "click .index": "toggleNav",
+  },
+  
+  initialize: function(){
+    this.$pageNumber = this.$(".page-no")
+    this.$slideNumber = this.$(".slide-no")
+    this.$slideCount = this.$(".slide-count")
+  },
+  
+  updateSlideNumber: function(n){
+    this.$slideNumber.html(n + 1)
+  },
+
+  updatePageNumber: function(n){
+    this.$pageNumber.html(n + 1)
+  },
+
+  updateSlideCount: function(n){
+    this.$slideCount.html(n)
+  },
+  
+  toggleNav: function(){
+    $('body').toggleClass('navopen');
+  },
+
+})
diff --git a/public/assets/js/lib/MenuView.js b/public/assets/js/lib/MenuView.js
deleted file mode 100644
index 9576757..0000000
--- a/public/assets/js/lib/MenuView.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var MenuView = View.extend({
-
-  el: ".menu",
-  
-  events: {
-    "click li": "click",
-  },
-  
-  initialize: function(){
-  },
-  
-  click: function(e){
-    var id = $(e.target).data("id")
-    // navigate to page
-  },
-})
\ No newline at end of file
diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js
index 1edca02..0ed1d4f 100644
--- a/public/assets/js/lib/NavView.js
+++ b/public/assets/js/lib/NavView.js
@@ -1,5 +1,42 @@
 var NavView = View.extend({
 
+  el: ".menu",
   
+  events: {
+    "click li": "click",
+  },
+  
+  initialize: function(){
+  },
+  
+  click: function(e){
+    var id = $(e.target).data("id")
+    var view = app.lookup[ id ]
+    this.swap( view )
+  },
+  
+  previous: function(){
+    var index = Math.max( app.view.page_number - 1, 0 )
+    var view = app.projects[ index ]
+    this.swap( view )
+  },
+  
+  next: function(){
+    var index = Math.min( app.view.page_number + 1, app.projects.length - 1 )
+    var view = app.projects[ index ]
+    this.swap( view )
+  },
+  
+  swap: function(view) {
+    if (! view || app.view == view || app.view.showing) {
+      return
+    }
+
+    console.log(view.page_number, view.project_id)
 
+    app.view.hide()
+    view.show()
+    app.view = view
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index f5e47bd..02d7d4e 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -1,17 +1,47 @@
 var ProjectView = View.extend({
 
   events: {
+    "click": "next",
+    "click .page-up": "previous",
+    "click .page-down": "next",
   },
   
   initialize: function(opt){
     this.gallery = new GalleryView ()
     this.project_id = this.$el.data("id")
+    this.page_number = opt.page_number
+    console.log("INIT", this.project_id)
+    $("<div>").addClass("page-up").insertBefore( this.$(".flickity-viewport") )
+    $("<div>").addClass("page-down").insertAfter( this.$(".flickity-viewport") )
   },
   
   show: function(){
+    app.header.updatePageNumber( this.page_number )
+    app.header.updateSlideNumber( 0 )
+    app.header.updateSlideCount( 1 )
+    $('body').removeClass('navopen')
+    this.$el.removeClass("hidden")
+
+    this.showing = true
+    addClassForPeriod( this.el, "showing", 200, function(){
+      this.showing = false
+    }.bind(this) )
   },
   
   hide: function(){
+    addClassForPeriod( this.el, "hiding", 200, function(){
+      this.$el.addClass("hidden")
+    }.bind(this) )
+  },
+  
+  previous: function(e){
+    e.stopPropagation()
+    app.nav.previous()
+  },
+  
+  next: function(e){
+    e.stopPropagation()
+    app.nav.next()
   },
 
 })
diff --git a/public/assets/js/vendor/util.js b/public/assets/js/vendor/util.js
index bd16b7a..e0e2c0b 100644
--- a/public/assets/js/vendor/util.js
+++ b/public/assets/js/vendor/util.js
@@ -1,8 +1,9 @@
-function addClassForPeriod(el, className, delay){
+function addClassForPeriod(el, className, delay, callback){
   delay = delay || 1000
   el.classList.add(className)
   setTimeout(function(){
     el.classList.remove(className)
+    callback && callback()
   }, delay)
 }
 
@@ -58,6 +59,14 @@ if (!Function.prototype.bind) {
         };
 }());
 
+var debounce = (function() {
+    var timer = 0;
+    return function(callback, ms) {
+        clearTimeout(timer);
+        timer = setTimeout(callback, ms);
+    }
+})()
+
 // Identify browser based on useragent string
 var browser = (function( ua ) {
   ua = ua.toLowerCase();
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 03b0a3b..47c61b2 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -305,8 +305,7 @@ nav b {
     outline: none;
 }
 
-.flickity-viewport:before {
-    content: "";
+.page-up {
     height: 20vw;
     width: 60vw;
     position: absolute;
@@ -316,8 +315,7 @@ nav b {
 }
 
 
-.flickity-viewport:after {
-    content: "";
+.page-down {
     height: 20vw;
     width: 60vw;
     position: absolute;