1 files changed, 187 insertions, 0 deletions
diff --git a/public/assets/js/lib/GalleryView.js b/public/assets/js/lib/GalleryView.js
new file mode 100644
index 0000000..da0f580
--- /dev/null
+++ b/public/assets/js/lib/GalleryView.js
@@ -0,0 +1,187 @@
+var GalleryView = View.extend({
+
+  videos: [],
+
+  initialize: function(options){
+    options = options || {}
+    this.data = options.data
+  },
+
+  reset: function(){
+    this.videos.forEach(function(video){
+      video.api('stop')
+    })
+    this.$(".video iframe").remove()
+    this.$(".video").removeClass("playing").removeClass("loaded")
+    this.gallery && this.gallery.destroy()
+
+    this.player = null
+  },
+
+  build: function($el){
+
+    this.reset()
+
+    this.setElement( $el )
+
+    this.videos = []
+
+    var film = _.filter(this.data.films, byId($el.data("film-id")))[0]
+
+    var $cells = this.$(".cell")
+    if ($cells.length == 1) {
+      $(".entry").addClass("singleton")
+    }
+
+    var gallery = this.gallery = new Flickity( this.el, {
+      cellSelector: '.cell',
+      cellAlign: 'left',
+      wrapAround: true,
+      prevNextButtons: false,
+      pageDots: true,
+      setGallerySize: false,
+      draggable: true,
+      imagesLoaded: true,
+    })
+
+    $el.find(".dot").toArray().forEach(function(el, i){
+      var media = film.media[i]
+      $(el).html(media.caption || media.title)
+    }.bind(this))
+
+    this.$(".video").toArray().forEach(function(el){
+      var $el = $(el)
+
+      var $play, $underlay
+
+      $play = $('<div class="play"></div>')
+
+      if (is_desktop) {
+        $underlay = $('<div class="underlay"></div>')
+        $underlay.css("background-image", $el.css("background-image"))
+        $el.css("background-image", 'none')
+        $el.append($underlay)
+        $el.append($play)
+
+        $play.on("click", function(e){
+          e.stopPropagation()
+          e.preventDefault()
+          if ($el.hasClass('loaded')) {
+            var player = $el.data('player')
+            try {
+              player.api('play')
+            } catch (err) { console.error(err) }
+          }
+          else {
+            this.load_video($el)
+          }
+        }.bind(this))
+      }
+      else {
+        this.load_video($el)
+        // $el.append($play)
+      }
+    }.bind(this))
+
+    gallery.on("cellSelect", function(){
+      if (! gallery.selectedElement) return
+      // $caption.html( $(gallery.selectedElement).data("caption") )
+      try {
+        this.videos.forEach(function(player){
+          player.api('pause')
+        })
+      } catch (err) { console.error(err) }
+    }.bind(this) )
+
+    gallery.on("settle", function(){
+      if (! gallery || ! gallery.selectedElement) { return }
+      // $caption.html( $(gallery.selectedElement).data("caption") )
+    }.bind(this) )
+
+    gallery.on("staticClick", function(e){
+      console.log(e.target.className)
+      var $el = $(e.target)
+      if ($el.hasClass("play")) {
+        // this.load_video($el)
+      }
+      else {
+        if ($("#okgallery").hasClass("prev")) {
+          gallery.previous()
+        } else {
+          gallery.next()
+        }
+      }
+    }.bind(this) )
+
+    gallery.loader.on("progress", function(imagesLoaded, loadingImage){
+      $(loadingImage.img).addClass('loaded')
+      $(loadingImage.img).parent().removeClass('loading')
+    }.bind(this) )
+
+    function byId(id){
+      return function(data){
+        return data.id === id
+      }
+    }
+  },
+
+  next: function(){
+    this.gallery.next()
+  },
+
+  previous: function(){
+    this.gallery.previous()
+  },
+
+  resize: function(isFullScreen){
+    if (! this.gallery) return
+
+    var fullScreenElement = getFullScreenElement()
+    this.$(".cell img").each(function(){
+      var h = isFullScreen ? $(fullScreenElement).height() : $gallery.height()
+      var w = isFullScreen ? "auto" :  this.naturalWidth / this.naturalHeight * h
+      $(this).css({
+        width: w, height: h,
+      })
+    })
+    $(".flickity-viewport").css("height","")
+    this.gallery.resize()
+  },
+
+  stop_video: function(){
+    try {
+      console.log(this.videos)
+      this.videos.forEach(function(player){
+        player.api('pause')
+      })
+    } catch (err) { console.error(err) }
+  },
+
+  load_video: function($el){
+    if ($el.hasClass('loaded')) { return }
+    $el.addClass('loaded')
+    var vimeo_id = $el.data("video").match(/\d+/)[0]
+    var $embed = $('<iframe src="https://player.vimeo.com/video/' + vimeo_id + '?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
+    $el.append($embed)
+
+    var player = this.player = $f( $el.find("iframe")[0] )
+    $el.data('player', player)
+    player.addEvent('ready', function(){
+      $el.addClass('playing')
+      player.api('play')
+      player.addEvent('play', function(){
+        $el.addClass('playing')
+      })
+      player.addEvent('pause', function(){
+        $el.removeClass('playing')
+      })
+    })
+    this.videos.push(player)
+  },
+
+  unload_video: function($el){
+    $el.find("iframe").remove()
+    $el.removeClass('loaded')
+  },
+
+})