scrollable nav

2 files changed, 8 insertions, 188 deletions

diff --git a/public/assets/js/lib/GalleryView.js b/public/assets/js/lib/GalleryView.js
deleted file mode 100644
index 1d8cdc2..0000000
--- a/public/assets/js/lib/GalleryView.js
+++ /dev/null
@@ -1,188 +0,0 @@
-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") )
-      console.log(gallery.selectedElement)
-      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')
-  },
-
-})
diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js
index 96e110e..ce231b8 100644
--- a/public/assets/js/lib/NavView.js
+++ b/public/assets/js/lib/NavView.js
@@ -11,6 +11,14 @@ var NavView = View.extend({
       console.log("BACK >>", document.location.pathname)
       app.router.go(document.location.pathname)
     }.bind(this))
+    
+    if (is_mobile) {
+      var $scroller = $("<div class='scroll'>")
+      $scroller.html( this.$el.html() )
+      this.$el.empty()
+      this.$el.append( $scroller )
+      this.scroller = new IScroll(this.$el.get(0), app.iscroll_options)
+    }
   },
   
   click: function(e){