diff options
| -rw-r--r-- | index.js | 18 | ||||
| -rw-r--r-- | public/assets/js/app.js | 6 | ||||
| -rw-r--r-- | public/assets/js/lib/HeaderView.js | 2 | ||||
| -rw-r--r-- | public/assets/js/lib/NavView.js | 9 | ||||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 20 | ||||
| -rw-r--r-- | public/assets/js/lib/SiteRouter.js | 31 | ||||
| -rw-r--r-- | public/assets/js/vendor/Router.js | 82 | ||||
| -rw-r--r-- | templates/index.liquid | 4 |
8 files changed, 156 insertions, 16 deletions
@@ -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 b3503de..bea8f27 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -59,8 +59,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") } @@ -88,5 +89,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..f3dd97d 100644 --- a/public/assets/js/lib/NavView.js +++ b/public/assets/js/lib/NavView.js @@ -11,6 +11,10 @@ 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 ) }, @@ -28,6 +32,11 @@ var NavView = View.extend({ }, swap: function(view) { + if (view && ! app.view) { + app.view = view + app.view.show() + return + } if (! view || app.view == view || app.view.showing) { return } diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 02d7d4e..e735c81 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,6 +21,13 @@ 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(){ @@ -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..173e988 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"> @@ -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> |