diff options
| -rw-r--r-- | index.js | 1 | ||||
| -rw-r--r-- | public/assets/js/app.js | 97 | ||||
| -rw-r--r-- | public/assets/js/lib/HeaderView.js | 31 | ||||
| -rw-r--r-- | public/assets/js/lib/MenuView.js | 16 | ||||
| -rw-r--r-- | public/assets/js/lib/NavView.js | 37 | ||||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 30 | ||||
| -rw-r--r-- | public/assets/js/vendor/util.js | 11 | ||||
| -rw-r--r-- | public/assets/ok.css | 6 | ||||
| -rw-r--r-- | templates/index.liquid | 28 |
9 files changed, 175 insertions, 82 deletions
@@ -18,6 +18,7 @@ var app = okcms.createApp({ project: { id: {type: 'string', hidden: true}, title: {type: 'string'}, + alternateTitle: {type: 'string'}, year: {type: 'number'}, client: {type: 'string'}, link: {type: 'string'}, 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; diff --git a/templates/index.liquid b/templates/index.liquid index a6b1e6e..9517a4e 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -56,10 +56,13 @@ </svg> </div> <div>OKFocus LLC. - Portfolio • 2016</div> - <div>e.g.<b class="slide-no">1</b> OF <b>3</b> • PG.<b class="page-no">1</b></div> + <div>fig.<b class="slide-no">1</b> OF <b class="slide-count">3</b> • PG.<b class="page-no">1</b></div> </span> </nav> - <div class="item intro hidden"> + + <div id="items"> + + <div class="item intro hidden" data-id="introduction"> <div class="left"> <h1> 20 Years of Creating Stuff On The Computer. @@ -95,7 +98,7 @@ <div class="right"></div> </div> {% for project in projects %} - <div class="item" data-id="{{ project.id }}"> + <div class="item hidden" 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 }}); @@ -118,15 +121,21 @@ <div class="five texts"> <span>{{ project.year }}</span> <span>{{ project.client }}</span> - <span>{{ project.title }}</span> + <span>{{ project.alternateTitle or project.title }}</span> <span> <ul> {% assign categories = project.NatureOfWork | newline_to_br | split: '<br />' %} - {% for category in categories %} - <li> - {{ category }} - </li> - {% endfor %} + {% if categories.length %} + {% for category in categories %} + <li> + {{ category }} + </li> + {% endfor %} + {% else %} + <li> + + </li> + {% endif %} </ul> </span> <span class="description"> @@ -160,6 +169,7 @@ <script src="/assets/js/vendor/util.js"></script> <script src="/assets/js/vendor/View.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> <script src="/assets/js/lib/ProjectView.js"></script> <script src="/assets/js/app.js"></script> |