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

6 files changed, 191 insertions, 55 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 319a939..5ae0c99 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,7 +1,7 @@
 var app = (function() {
   var app = {}
   
-  app.navigation_delay = 200
+  app.navigation_delay = 150
 
   app.iscroll_options = {
     mouseWheel: true,
@@ -18,8 +18,8 @@ var app = (function() {
   }
 
   app.init = function() {
-    app.bind()
     app.build()
+    app.bind()
     app.ready()
   }
 
@@ -28,20 +28,24 @@ var app = (function() {
       document.addEventListener('touchmove', function(e) {
         e.preventDefault()
       })
-      FastClick.attach(document.body)
+      window.FastClick && FastClick.attach(document.body)
     }
     
     $(window).resize(app.resize)
   }
 
   app.build = function(data) {
+    app.loader = new Loader ()
 
     app.header = new HeaderView()
     app.nav = new NavView()
 
-    var items = $(".item")
+    app.$items = $(".item")
+
+    app.resizeItems()
+
     app.lookup = {}
-    app.projects = items.toArray().map(function(el, i){
+    app.projects = app.$items.toArray().map(function(el, i){
       var view = new ProjectView ({
         el: el,
         page_number: i,
@@ -63,7 +67,6 @@ var app = (function() {
         gallery && gallery.next()
       },
     })
-
   }
 
   app.ready = function() {
@@ -94,11 +97,20 @@ var app = (function() {
   }
   
   app.resizeItems = function(){
+    var windowHeight = window.innerHeight
+
+    if (is_iphone) {
+      windowHeight -= 22 // account for lower bar
+      window.scrollTo(0,0)
+    }
+
     $(".item").each(function(i){
-      var height = window.innerHeight - ($(this).find(".bottom").height() + 10)
+      
+      var height = windowHeight - ($(this).find(".bottom").height() + 10)
       if (is_desktop) {
         height -= $("nav").height() // account for top bar
       }
+
       $(".cell, .top, .previous, .next, .flickity-viewport", this).css({ 'height': height })
       var cellCount = $(this).find(".cell").length
       if ($.browser.mozilla) {
@@ -123,17 +135,4 @@ var app = (function() {
 
 })()
 
-app.resizeItems()
-
-$('.top').each(function(){
-  if ($(this).find(".cell").length > 1) {
-    $(this).flickity(app.flickity_options).on( 'cellSelect', function(e) {
-      var gallery = $(e.target).data('flickity')
-      app.header.updateSlideNumber( gallery.selectedIndex )
-    })
-  }
-})
-
-$(".item").addClass("hidden")
-
 app.init()
diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js
index 374f84c..59ca255 100644
--- a/public/assets/js/lib/HeaderView.js
+++ b/public/assets/js/lib/HeaderView.js
@@ -26,7 +26,6 @@ var HeaderView = View.extend({
   },
 
   updateSlideCount: function(n){
-    console.log(n)
     if (n > 1) {
       if (n < 10) n = "0" + n
       this.$figText.show()
diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js
index b2fe341..e2b334c 100644
--- a/public/assets/js/lib/NavView.js
+++ b/public/assets/js/lib/NavView.js
@@ -27,6 +27,10 @@ var NavView = View.extend({
     var index = Math.max( app.view.page_number - 1, 0 )
     var view = app.projects[ index ]
     this.swap( view, "up" )
+
+    var prevIndex = Math.max( app.view.page_number - 1, 0 )
+    var prevView = app.projects[ prevIndex ]
+    prevView.preload()
   },
   
   next: function(){
@@ -37,6 +41,10 @@ var NavView = View.extend({
     var index = (app.view.page_number + 1) % app.projects.length
     var view = app.projects[ index ]
     this.swap( view, "down" )
+    
+    var nextIndex = (app.view.page_number + 1) % app.projects.length
+    var nextView = app.projects[ nextIndex ]
+    nextView.preload()
   },
   
   swap: function(view, direction) {
diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js
index b119b65..4b1c994 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -9,10 +9,33 @@ var ProjectView = View.extend({
   
   initialize: function(opt){
     // this.gallery = new GalleryView ()
-    this.project_id = this.$el.data("id")
-    this.page_number = opt.page_number
-    this.slide_count = this.$(".cell").length
-    console.log("INIT", this.project_id)
+
+    this.$iframes = this.$(".cell.iframe")
+    this.$images = this.$(".cell.image")
+    this.$videos = this.$(".cell.video")
+
+    this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") })
+
+    if (is_mobile) {
+      this.$iframes.remove()
+      this.$videos.remove()
+      this.$iframes = this.$videos = $(".nothing")
+      if (this.$(".mobile").length) {
+        this.$(".desktop").remove()
+        this.$(".mobile").removeClass("desktop")
+      }
+    }
+    else {
+      this.$(".mobile").remove()
+      this.$(".desktop").removeClass("desktop")
+    }
+
+    if (this.$(".cell").length > 1) {
+      this.$(".top").flickity(app.flickity_options).on( 'cellSelect', function(e) {
+        var gallery = $(e.target).data('flickity')
+        app.header.updateSlideNumber( gallery.selectedIndex )
+      })
+    }
 
     var $viewport = this.$(".flickity-viewport")
     if (! $viewport.length) {
@@ -30,6 +53,19 @@ var ProjectView = View.extend({
       this.$el.append( $("<figure>").addClass("page-up") )
       this.$el.append( $("<figure>").addClass("page-down") )
     }
+
+    // now that the gallery is ready, store this data..
+    this.project_id = this.$el.data("id")
+    this.page_number = opt.page_number
+    this.slide_count = this.$(".cell").length
+        
+    this.$el.addClass('hidden')
+  },
+  
+  preload: function(){
+    if (this.images.length) {
+      app.loader.preloadImage( this.images[0] )
+    }
   },
   
   show: function(){
@@ -46,6 +82,24 @@ var ProjectView = View.extend({
       app.router.pushState("/project/" + this.project_id)
     }
     
+    this.$images.each(function(){
+      var uri = $(this).data("uri")
+      $(this).css("background-image", "url(" + uri + ")")
+    })
+    
+    if (is_mobile) {
+      this.$images.each(function(){
+        var uri = $(this).data("uri")
+        $(this).css("background-image", "url(" + uri + ")")
+      })
+    }
+    else {
+      this.$iframes.each(function(){
+        var uri = $(this).data("uri")
+        $(this).html("<iframe src='" + uri + "'>")
+      })
+    }
+
     app.nav.setActive( this.project_id )
 
     this.showing = true
@@ -58,15 +112,24 @@ var ProjectView = View.extend({
     addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
       this.$el.addClass("hidden")
       this.$el.removeClass("active")
+      
+      this.$images.each(function(){
+        $(this).css("background-image", "")
+      })
+      this.$iframes.html("")
+      this.$videos.html("")
+      
     }.bind(this) )
   },
   
   previous: function(e){
+    if (is_mobile) return;
     e.stopPropagation()
     app.nav.previous()
   },
 
   next: function(e){
+    if (is_mobile) return;
     e.stopPropagation()
     app.nav.next()
   },
diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js
index 3bebce7..b88ec0f 100644
--- a/public/assets/js/lib/Scroller.js
+++ b/public/assets/js/lib/Scroller.js
@@ -11,9 +11,9 @@ var Scroller = (function(){
     left = opt.left
     right = opt.right
     if (is_mobile) {
-//       document.body.addEventListener("touchstart", touchstart)
-//       document.body.addEventListener("touchmove", touchmove)
-//       document.body.addEventListener("touchend", touchend)
+      document.body.addEventListener("touchstart", touchstart)
+      document.body.addEventListener("touchmove", touchmove)
+      document.body.addEventListener("touchend", touchend)
     }
     else {
       document.body.addEventListener("wheel", wheelDelta)
@@ -21,11 +21,20 @@ var Scroller = (function(){
     }
   }
   
-  var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop
+  var touching = false, touchStartTime
+  var touchStartY, touchEndY, touchDistY, touchAbsY
+  var touchStartX, touchEndX, touchDistX, touchAbsX
+  var touchAdvanceDistance = 60
+  var touchFadeDistance = 60
+  var touchGalleryScrubDistance = 100
+  var $items = $("#items")[0]
   function touchstart (e) {
     touching = true
     touchStartTime = +(new Date)
     touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY
+    touchStartX = touchEndX = e.touches ? e.touches[0].pageX : e.pageX
+    touchDistY = touchDistX = 0
+//     $items.className = "no-tween"
   }
   function touchmove (e) {
     if (! touching) return
@@ -33,7 +42,14 @@ var Scroller = (function(){
     var timestamp = +(new Date)
     var duration = timestamp - touchStartTime
     touchEndY = e.touches ? e.touches[0].pageY : e.pageY
-    touchDist = touchStartY - touchEndY
+    touchEndX = e.touches ? e.touches[0].pageX : e.pageX
+    touchDistY = touchStartY - touchEndY
+    touchDistX = touchStartX - touchEndX
+    touchAbsY = Math.abs(touchDistY)
+    touchAbsX = Math.abs(touchDistX)
+    if (touchAbsY > touchAdvanceDistance && touchAbsX < touchGalleryScrubDistance) {
+      touchend(e)
+    }
   }
   function touchend (e) {
     if (! touching) return
@@ -41,13 +57,30 @@ var Scroller = (function(){
     touching = false
     var timestamp = +(new Date)
     var duration = timestamp - touchStartTime
-    touchDist = touchStartY - touchEndY
-		if (Math.abs(touchDist) < 10 || duration < 100) {
-			step(1)
-		}
-		else {
-			touchDist > 0 ? step(1) : step(-1)
+
+    console.log("DURATION >>", duration, touchDistY, touchDistX)
+
+    if (touchAbsX > touchGalleryScrubDistance) {
+      return
+    }
+    
+		if ( (duration < 120 && touchAbsY < 10) || touchAbsY >= touchAdvanceDistance) {
+			touchDistY > 0 ? step(1) : step(-1)
 		}
+		
+//     $items.className = ""
+//     setTimeout(function(){
+//       $items.style[transformProp] = "translateZ(0) translateY(0)"
+//       if (Math.abs(touchDist) >= touchAdvanceDistance) {
+//         $items.style.opacity = 0
+//         setTimeout(function(){
+//           $items.style.opacity = 1
+//         }, 200)
+//       }
+//       else {
+//         $items.style.opacity = 1
+//       }
+//     }, 0)
   }
   
   function wheelDelta (e){
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 7429523..25392e5 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -149,7 +149,7 @@ h3 {
     top: 0;
     left: 0;
     z-index: 2;
-    transform: translateX(-50vw);
+    transform: translateZ(0) translateX(-50vw);
     padding: 24px 0 5px 0;
     transition: 150ms transform cubic-bezier(0, 0, 0, 1);
     z-index: 0;
@@ -181,6 +181,10 @@ ul li {
     text-transform: capitalize;
 }
 
+ul li[data-id='dump-fm'] {
+    text-transform: none;
+}
+
 .desktop .menu ul li:hover,
 .menu ul li.active {
     background: black;
@@ -188,21 +192,35 @@ ul li {
     cursor: pointer;
 }
 
+.desktop .mobiletitle,
+.mobile .desktoptitle {
+  display: none;
+}
+
+.desktop .desktoptitle
+.mobile .mobiletitle {
+  display: inline;
+}
+
+.menu u {
+  text-decoration: none;
+}
+
 nav {
     background: white;
 }
 
 .navopen .menu {
-    transform: translateX(0vw);
+    transform: translateZ(0) translateX(0vw);
     z-index: 2;
     opacity: 1;
     overflow: auto;
+    background: #f9f9f9;
 }
 
 .navopen .item {
-    transform: translateX(50vw);
+    transform: translateZ(0) translateX(50vw);
     /*opacity:0.5;*/
-    background: black;
 }
 
 nav svg g g rect {
@@ -260,12 +278,15 @@ span {
     display: block;
     float: none;
 }
+#items.notween {
+    transition: opacity 0, transform 0;
+}
 
 .item {
     height: 100vh;
     width: 100%;
     display: block;
-    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0);
+    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0);
 }
 
 .item.intro {
@@ -276,10 +297,6 @@ span {
     background: white;
 }
 
-.navopen .item.intro {
-    background: black;
-}
-
 .navopen .item.intro > * {
     background: transparent;
 }
@@ -289,6 +306,20 @@ body.navopen {
     background: #f9f9f9;
 }
 
+#curtain {
+  position: absolute;
+  top: 0; left: 0;
+  background: black;
+  transition: 200ms opacity cubic-bezier(0, 0, 0, 1);
+  opacity: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+.navopen #curtain {
+  opacity: 1;
+}
+
 nav {
     position: fixed;
     top: 0;
@@ -328,7 +359,7 @@ nav span div:last-child {
 }
 
 .navopen nav span div:last-child {
-    transform: translateX(110px);
+    transform: translateZ(0) translateX(110px);
     transition: 150ms all;
     position: absolute;
     right: 5px;
@@ -411,12 +442,12 @@ body {
 }
 
 .up .showing.item {
-    transform: translateY(-10px);
+    transform: translateZ(0) translateY(-10px);
     opacity: 0;
 }
 
 .down .showing.item {
-    transform: translateY(10px);
+    transform: translateZ(0) translateY(10px);
     opacity: 0;
 }
 
@@ -537,25 +568,28 @@ button svg {
 button.next {
     right: 0;
     cursor: url(img/r.png)64 32, pointer;
+    z-index: 4;
 }
 
 button.previous {
     left: 0;
     cursor: url(img/l.png) 0 32, pointer;
+    z-index: 4;
 }
 
 .desktop button.previous:hover svg,
 .desktop button.next:hover svg {
     opacity: 1;
-    transform: scale(0.2);
+    transform: translateZ(0) scale(0.2);
 }
 
 .desktop button.next:active svg,
 .desktop button.previous:active svg {
-    transform: scale(0.1);
+    transform: translateZ(0) scale(0.1);
 }
 
-.cell {
+.cell,
+.cell iframe {
     width: 100vw;
     height: 100%;
     /*THIS SHOULD BE DYNAMIC*/
@@ -651,7 +685,7 @@ ul li {
     height: 100%
 }
 
-.nopress span:last-child {
+.nopress span:nth-child(6) {
     display: none;
 }
 
@@ -744,7 +778,7 @@ ul li {
         padding: 3px 0 2px 0;
         font-weight: 600;
     }
-    iframe.cell {
+    .cell iframe {
         pointer-events: none;
     }
     .five span.description {
@@ -774,10 +808,10 @@ ul li {
     }
     .menu {
         width: 90vw;
-        transform: translateX(-90vw);
+        transform: translateZ(0) translateX(-90vw);
     }
     .navopen .item {
-        transform: translateX(90vw);
+        transform: translateZ(0) translateX(90vw);
     }
     .top {
         margin-top: 30px;