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

1 files changed, 67 insertions, 4 deletions

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()
   },