preload images, inject iframes

5 files changed, 77 insertions, 26 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 319a939..040b99c 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -18,8 +18,8 @@ var app = (function() {
   }
 
   app.init = function() {
-    app.bind()
     app.build()
+    app.bind()
     app.ready()
   }
 
@@ -28,20 +28,25 @@ 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")
+    // should this go here or elsewhere?
+    app.resizeItems()
+
+    var $items = $(".item")
+
     app.lookup = {}
-    app.projects = items.toArray().map(function(el, i){
+    app.projects = $items.toArray().map(function(el, i){
       var view = new ProjectView ({
         el: el,
         page_number: i,
@@ -63,7 +68,6 @@ var app = (function() {
         gallery && gallery.next()
       },
     })
-
   }
 
   app.ready = function() {
@@ -123,17 +127,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/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..97a7e1c 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -12,7 +12,24 @@ var ProjectView = View.extend({
     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) {
+      $iframes.remove()
+      $videos.remove()
+    }
+
+    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 +47,14 @@ var ProjectView = View.extend({
       this.$el.append( $("<figure>").addClass("page-up") )
       this.$el.append( $("<figure>").addClass("page-down") )
     }
+    
+    this.$el.addClass('hidden')
+  },
+  
+  preload: function(){
+    if (this.images.length) {
+      app.loader.preloadImage( this.images[0] )
+    }
   },
   
   show: function(){
@@ -46,6 +71,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,6 +101,13 @@ 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) )
   },
   
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 7429523..acc7ea2 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -537,11 +537,13 @@ 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,
@@ -555,7 +557,8 @@ button.previous {
     transform: scale(0.1);
 }
 
-.cell {
+.cell,
+.cell iframe {
     width: 100vw;
     height: 100%;
     /*THIS SHOULD BE DYNAMIC*/
@@ -744,7 +747,7 @@ ul li {
         padding: 3px 0 2px 0;
         font-weight: 600;
     }
-    iframe.cell {
+    .cell iframe {
         pointer-events: none;
     }
     .five span.description {
diff --git a/templates/index.liquid b/templates/index.liquid
index 697bd7f..d822579 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -118,12 +118,11 @@
         <div class="top {% if project.media[2] %}gallery{% else %}single{% endif %}">
             {% for media in project.media %}
               {% if media.type == 'image' %}
-              <div class="cell" style="background-image:url({{ media.uri }}); 
-                  {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>
-              {% elsif media.type == 'vimeo' %}
-              <div class="cell video" data-video="{{ media.token }}"></div>
+              <div class="cell image" data-uri="{{ media.uri }}" style="{% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>
+              {% elsif media.type == 'video' %}
+              <div class="cell video" data-uri="{{ media.uri }}"></div>
               {% elsif media.type == 'link' %}
-              <iframe class="cell" src="{{ media.uri }}"></iframe>
+              <div class="cell iframe" data-uri="{{ media.uri }}"></div>
               {% endif %}
             {% endfor %}
         </div>