Merge branch 'master' of https://github.com/okfocus/portfolio

8 files changed, 175 insertions, 25 deletions

diff --git a/index.js b/index.js
index b9f309f..5aeec84 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,14 @@ var okcms = require('okcms')
 
 var isProduction = process.env.OK_PRODUCTION === 'true'
 
+var viewConfig = {
+  template: 'index',
+  data: [
+    {type: 'project', query: '*'},
+    {type: 'page', query: '*'},
+  ]
+}
+
 var app = okcms.createApp({
 
   project: 'OKFocus Portfolio',
@@ -36,13 +44,9 @@ var app = okcms.createApp({
   ],
 
   views: {
-    '/': {
-      template: 'index',
-      data: [
-        {type: 'project', query: '*'},
-        {type: 'page', query: '*'},
-      ]
-    },
+    '/': viewConfig,
+    '/page/:id': viewConfig,
+    '/project/:id': viewConfig,
   },
 
   services: {
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 54b2177..29224fe 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,5 +1,7 @@
 var app = (function() {
   var app = {}
+  
+  app.navigation_delay = 200
 
   app.iscroll_options = {
     mouseWheel: true,
@@ -53,8 +55,9 @@ var app = (function() {
       $("body").removeClass("loading")
     }, 20)
     
-    app.view = app.projects[0]
-    app.view.show()
+    app.router = new SiteRouter ()
+    
+    app.router.launch()
     
     console.log("launched")
   }
@@ -63,9 +66,13 @@ var app = (function() {
     $(".cell, .next, .previous").css({ 'display': 'none' })
     $('body').addClass('resizing')
     debounce(function() {
+      $(".item").addClass("hidden")
+      setTimeout(function(){
         $(".cell, .next, .previous").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' })
+        app.view.$el.removeClass("hidden")
         $('.top').flickity('resize')
         $('body').removeClass('resizing')
+      }, 20)
     }, 400)
   }
 
@@ -74,6 +81,7 @@ var app = (function() {
 })()
 
 $(".cell, .next").css({ 'height': ($(".top").height() + 'px') })
+$(".item").addClass("hidden")
 
 $('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
   var gallery = $(e.target).data('flickity')
@@ -82,5 +90,4 @@ $('.top').flickity(app.flickity_options).on( 'cellSelect', function(e) {
 
 $(".previous, .next").css({ 'height': ($(".top").height() + 'px') })
 
-
 app.init()
diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js
index b568ecb..bc64d85 100644
--- a/public/assets/js/lib/HeaderView.js
+++ b/public/assets/js/lib/HeaderView.js
@@ -25,7 +25,7 @@ var HeaderView = View.extend({
   },
   
   toggleNav: function(){
-    $('body').toggleClass('navopen');
+    $('body').toggleClass('navopen')
   },
 
 })
diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js
index 0ed1d4f..ae60bdf 100644
--- a/public/assets/js/lib/NavView.js
+++ b/public/assets/js/lib/NavView.js
@@ -11,29 +11,41 @@ var NavView = View.extend({
   
   click: function(e){
     var id = $(e.target).data("id")
+    this.pick(id)
+  },
+  
+  pick: function(id){
     var view = app.lookup[ id ]
-    this.swap( view )
+    this.swap( view, "down" )
   },
   
   previous: function(){
     var index = Math.max( app.view.page_number - 1, 0 )
     var view = app.projects[ index ]
-    this.swap( view )
+    this.swap( view, "up" )
   },
   
   next: function(){
     var index = Math.min( app.view.page_number + 1, app.projects.length - 1 )
     var view = app.projects[ index ]
-    this.swap( view )
+    this.swap( view, "down" )
   },
   
-  swap: function(view) {
+  swap: function(view, direction) {
+    if (view && ! app.view) {
+      app.view = view
+      app.view.show()
+      return
+    }
     if (! view || app.view == view || app.view.showing) {
       return
     }
 
     console.log(view.page_number, view.project_id)
+    direction = direction || "down"
 
+    addClassForPeriod( document.body, direction, app.navigation_delay )
+    
     app.view.hide()
     view.show()
     app.view = view
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index 02d7d4e..3bef408 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -1,13 +1,13 @@
 var ProjectView = View.extend({
 
   events: {
-    "click": "next",
+    "click": "nextOrCloseNav",
     "click .page-up": "previous",
     "click .page-down": "next",
   },
   
   initialize: function(opt){
-    this.gallery = new GalleryView ()
+    // this.gallery = new GalleryView ()
     this.project_id = this.$el.data("id")
     this.page_number = opt.page_number
     console.log("INIT", this.project_id)
@@ -21,15 +21,22 @@ var ProjectView = View.extend({
     app.header.updateSlideCount( 1 )
     $('body').removeClass('navopen')
     this.$el.removeClass("hidden")
+    
+    if (this.project_id == "cover") {
+      app.router.pushState("/")
+    }
+    else {
+      app.router.pushState("/project/" + this.project_id)
+    }
 
     this.showing = true
-    addClassForPeriod( this.el, "showing", 200, function(){
+    addClassForPeriod( this.el, "showing", app.navigation_delay, function(){
       this.showing = false
     }.bind(this) )
   },
   
   hide: function(){
-    addClassForPeriod( this.el, "hiding", 200, function(){
+    addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
       this.$el.addClass("hidden")
     }.bind(this) )
   },
@@ -39,9 +46,14 @@ var ProjectView = View.extend({
     app.nav.previous()
   },
   
-  next: function(e){
+  nextOrCloseNav: function(e){
     e.stopPropagation()
-    app.nav.next()
+    if ($('body').hasClass('navopen')) {
+      $('body').removeClass('navopen')
+    }
+    else {
+      app.nav.next()
+    }
   },
 
 })
diff --git a/public/assets/js/lib/SiteRouter.js b/public/assets/js/lib/SiteRouter.js
new file mode 100644
index 0000000..7f1cec6
--- /dev/null
+++ b/public/assets/js/lib/SiteRouter.js
@@ -0,0 +1,31 @@
+var SiteRouter = Router.extend({
+
+	el: 'body',
+	routeByHash: false,
+
+	routes: {
+		'/':                 'home',
+		'/page/:id':         'project',
+		'/project/:id':      'project',
+  },
+
+  initial_route: null,
+	launch: function(){
+	  if (this.initial_route) {
+      this.parseRoute( this.initial_route )
+	  }
+	  else {
+      this.route()
+	  }
+	  this.initial_route = null
+	},
+	
+  home: function(){
+    app.nav.pick("cover")
+  },
+  
+  project: function(id){
+    app.nav.pick(id)
+  },
+
+})
\ No newline at end of file
diff --git a/public/assets/js/vendor/Router.js b/public/assets/js/vendor/Router.js
new file mode 100644
index 0000000..3b0d939
--- /dev/null
+++ b/public/assets/js/vendor/Router.js
@@ -0,0 +1,82 @@
+var Router = View.extend({
+
+  routeByHash: false,
+
+  go: function(url){
+    this.parseRoute(url)
+  },
+  
+  pushState: function(url){
+    if (this.routeByHash) {
+      window.location.hash = url
+    }
+    else if (window.history) {
+      window.history.pushState(null, null, url)
+    }
+  },
+
+	route: function(){
+	  var path = this.routeByHash ? window.location.hash.substr(0) : window.location.pathname
+    path = path || "/"
+		this.originalPath = path
+		this.parseRoute(path)
+	},
+	
+	parseRoute: function(pathname){
+    
+    pathname = pathname.replace(/^#/, "")
+    
+		if (pathname[0] !== "/") { pathname = "/" + pathname }
+
+		var routes = this.routes,
+		    path = pathname.split("/");
+
+		for (var i = 0; i < path.length; i++) {
+			if (! path[i].length) {
+				path[i] = null
+			}
+		}
+
+		if (pathname in routes) {	
+			this[this.routes[pathname]]()
+			return
+		}
+		
+		if (path[path.length-1] == null) {
+			path.pop()
+		}
+
+		for (var route in routes) {
+			var routePath = route.split("/")
+			if (routePath[1] == path[1]) {
+				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
+					this[this.routes[route]](path[2])
+					return
+				}
+				else if (routePath[2] == path[2]) {
+					if (routePath[3] && path[3]) {
+						if (routePath[3].indexOf(":") !== -1) {
+							this[this.routes[route]](path[3])
+							return
+						}
+						else if (routePath[3] == path[3]) {
+							this[this.routes[route]]()
+							return
+						}
+					}
+					else if (! routePath[3] && ! path[3]) {
+						this[this.routes[route]]()
+						return
+					}
+				}
+				else if (! routePath[2] && (! path[2].length || ! path[2])) {
+					this[this.routes[route]]()
+					return
+				}
+			}
+		}
+    // Redirect to root on 404
+    window.location = '/'
+	}
+
+})
diff --git a/templates/index.liquid b/templates/index.liquid
index 4be161e..4cebc42 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -24,7 +24,7 @@
     <link rel="apple-touch-icon" href="/icon.jpg" />
     <link rel="apple-touch-icon-precomposed" href="/icon.jpg" />
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,700|Roboto+Mono:700' rel='stylesheet' type='text/css'>
-    <link href='assets/ok.css' rel='stylesheet' type='text/css'>
+    <link href='/assets/ok.css' rel='stylesheet' type='text/css'>
 </head>
 
 <body class="loading">
@@ -61,7 +61,7 @@
     </nav>
     <div id="items">
     
-    <div class="item cover intro hidden" data-id="cover">
+    <div class="item cover intro" data-id="cover">
         <div class="left">
             <h1>
                 OKFocus Portfolio
@@ -76,7 +76,7 @@
         </div>
     </div>
 
-    <div class="item intro hidden" data-id="introduction">
+    <div class="item intro" data-id="introduction">
         <div class="left">
             <h1>
                 20 Years of Creating Stuff On The Computer.
@@ -112,7 +112,7 @@
         <div class="right"></div>
     </div>
     {% for project in projects %}
-    <div class="item hidden" data-id="{{ project.id }}">
+    <div class="item" data-id="{{ project.id }}">
         <div class="top">
             {% for media in project.media %} {% if media.type == 'image' %}
             <div class="cell" style="background-image:url({{ media.uri }}); 
@@ -182,6 +182,8 @@
 <script src="/assets/js/vendor/lodash.min.js"></script>
 <script src="/assets/js/vendor/util.js"></script>
 <script src="/assets/js/vendor/View.js"></script>
+<script src="/assets/js/vendor/Router.js"></script>
+<script src="/assets/js/lib/SiteRouter.js"></script>
 <script src="/assets/js/lib/GalleryView.js"></script>
 <script src="/assets/js/lib/HeaderView.js"></script>
 <script src="/assets/js/lib/NavView.js"></script>