scrollable nav

6 files changed, 28 insertions, 486 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index e34eb52..6fa5724 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -98,17 +98,19 @@ var app = (function() {
   
   app.resizeItems = function(){
     var windowHeight = window.innerHeight
+    var navHeight = $("nav").height()
 
     if (is_iphone) {
       windowHeight -= 22 // account for lower bar
       window.scrollTo(0,0)
+      $(".menu").height( windowHeight + 16 - navHeight )
     }
 
     $(".item").each(function(i){
       
       var height = windowHeight - ($(this).find(".bottom").height() + 10)
       if (is_desktop) {
-        height -= $("nav").height() // account for top bar
+        height -= navHeight // account for top bar
       }
 
       $(".cell, .top, .previous, .next, .flickity-viewport", this).css({ 'height': height })
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){
diff --git a/public/assets/js/vendor/froogaloop.js b/public/assets/js/vendor/froogaloop.js
deleted file mode 100644
index e2220b2..0000000
--- a/public/assets/js/vendor/froogaloop.js
+++ /dev/null
@@ -1,287 +0,0 @@
-// Init style shamelessly stolen from jQuery http://jquery.com
-var Froogaloop = (function(){
-    // Define a local copy of Froogaloop
-    function Froogaloop(iframe) {
-        // The Froogaloop object is actually just the init constructor
-        return new Froogaloop.fn.init(iframe);
-    }
-
-    var eventCallbacks = {},
-        hasWindowEvent = false,
-        isReady = false,
-        slice = Array.prototype.slice,
-        playerDomain = '';
-
-    Froogaloop.fn = Froogaloop.prototype = {
-        element: null,
-
-        init: function(iframe) {
-            if (typeof iframe === "string") {
-                iframe = document.getElementById(iframe);
-            }
-
-            this.element = iframe;
-
-            // Register message event listeners
-            playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
-
-            return this;
-        },
-
-        /*
-         * Calls a function to act upon the player.
-         *
-         * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
-         * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
-         *                                or callback function when the method returns a value.
-         */
-        api: function(method, valueOrCallback) {
-            if (!this.element || !method) {
-                return false;
-            }
-
-            var self = this,
-                element = self.element,
-                target_id = element.id !== '' ? element.id : null,
-                params = !isFunction(valueOrCallback) ? valueOrCallback : null,
-                callback = isFunction(valueOrCallback) ? valueOrCallback : null;
-
-            // Store the callback for get functions
-            if (callback) {
-                storeCallback(method, callback, target_id);
-            }
-
-            postMessage(method, params, element);
-            return self;
-        },
-
-        /*
-         * Registers an event listener and a callback function that gets called when the event fires.
-         *
-         * @param eventName (String): Name of the event to listen for.
-         * @param callback (Function): Function that should be called when the event fires.
-         */
-        addEvent: function(eventName, callback) {
-            if (!this.element) {
-                return false;
-            }
-
-            var self = this,
-                element = self.element,
-                target_id = element.id !== '' ? element.id : null;
-
-            storeCallback(eventName, callback, target_id);
-
-            // The ready event is not registered via postMessage. It fires regardless.
-            if (eventName != 'ready') {
-                postMessage('addEventListener', eventName, element);
-            }
-            else if (eventName == 'ready' && isReady) {
-                callback.call(null, target_id);
-            }
-
-            return self;
-        },
-
-        /*
-         * Unregisters an event listener that gets called when the event fires.
-         *
-         * @param eventName (String): Name of the event to stop listening for.
-         */
-        removeEvent: function(eventName) {
-            if (!this.element) {
-                return false;
-            }
-
-            var self = this,
-                element = self.element,
-                target_id = element.id !== '' ? element.id : null,
-                removed = removeCallback(eventName, target_id);
-
-            // The ready event is not registered
-            if (eventName != 'ready' && removed) {
-                postMessage('removeEventListener', eventName, element);
-            }
-        }
-    };
-
-    /**
-     * Handles posting a message to the parent window.
-     *
-     * @param method (String): name of the method to call inside the player. For api calls
-     * this is the name of the api method (api_play or api_pause) while for events this method
-     * is api_addEventListener.
-     * @param params (Object or Array): List of parameters to submit to the method. Can be either
-     * a single param or an array list of parameters.
-     * @param target (HTMLElement): Target iframe to post the message to.
-     */
-    function postMessage(method, params, target) {
-        if (! target.contentWindow || ! target.contentWindow.postMessage) {
-            return false;
-        }
-
-        var url = target.getAttribute('src').split('?')[0],
-            data = JSON.stringify({
-                method: method,
-                value: params
-            });
-
-        if (url.substr(0, 2) === '//') {
-            url = window.location.protocol + url;
-        }
-
-        target.contentWindow.postMessage(data, url);
-    }
-
-    /**
-     * Event that fires whenever the window receives a message from its parent
-     * via window.postMessage.
-     */
-    function onMessageReceived(event) {
-        var data, method;
-
-        try {
-            data = JSON.parse(event.data);
-            method = data.event || data.method;
-        }
-        catch(e)  {
-            //fail silently... like a ninja!
-        }
-        
-        if (method == 'ready' && !isReady) {
-            isReady = true;
-        }
-
-        // Handles messages from moogaloop only
-        if (event.origin != playerDomain) {
-            return false;
-        }
-
-        var value = data.value,
-            eventData = data.data,
-            target_id = target_id === '' ? null : data.player_id,
-
-            callback = getCallback(method, target_id),
-            params = [];
-
-        if (!callback) {
-            return false;
-        }
-
-        if (value !== undefined) {
-            params.push(value);
-        }
-
-        if (eventData) {
-            params.push(eventData);
-        }
-
-        if (target_id) {
-            params.push(target_id);
-        }
-
-        return params.length > 0 ? callback.apply(null, params) : callback.call();
-    }
-
-
-    /**
-     * Stores submitted callbacks for each iframe being tracked and each
-     * event for that iframe.
-     *
-     * @param eventName (String): Name of the event. Eg. api_onPlay
-     * @param callback (Function): Function that should get executed when the
-     * event is fired.
-     * @param target_id (String) [Optional]: If handling more than one iframe then
-     * it stores the different callbacks for different iframes based on the iframe's
-     * id.
-     */
-    function storeCallback(eventName, callback, target_id) {
-        if (target_id) {
-            if (!eventCallbacks[target_id]) {
-                eventCallbacks[target_id] = {};
-            }
-            eventCallbacks[target_id][eventName] = callback;
-        }
-        else {
-            eventCallbacks[eventName] = callback;
-        }
-    }
-
-    /**
-     * Retrieves stored callbacks.
-     */
-    function getCallback(eventName, target_id) {
-        if (target_id) {
-            return eventCallbacks[target_id][eventName];
-        }
-        else {
-            return eventCallbacks[eventName];
-        }
-    }
-
-    function removeCallback(eventName, target_id) {
-        if (target_id && eventCallbacks[target_id]) {
-            if (!eventCallbacks[target_id][eventName]) {
-                return false;
-            }
-            eventCallbacks[target_id][eventName] = null;
-        }
-        else {
-            if (!eventCallbacks[eventName]) {
-                return false;
-            }
-            eventCallbacks[eventName] = null;
-        }
-
-        return true;
-    }
-
-    /**
-     * Returns a domain's root domain.
-     * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
-     *
-     * @param url (String): Url to test against.
-     * @return url (String): Root domain of submitted url
-     */
-    function getDomainFromUrl(url) {
-        if (url.substr(0, 2) === '//') {
-            url = window.location.protocol + url;
-        }
-
-        var url_pieces = url.split('/'),
-            domain_str = '';
-
-        for(var i = 0, length = url_pieces.length; i < length; i++) {
-            if(i<3) {domain_str += url_pieces[i];}
-            else {break;}
-            if(i<2) {domain_str += '/';}
-        }
-
-        return domain_str;
-    }
-
-    function isFunction(obj) {
-        return !!(obj && obj.constructor && obj.call && obj.apply);
-    }
-
-    function isArray(obj) {
-        return toString.call(obj) === '[object Array]';
-    }
-
-    // Give the init function the Froogaloop prototype for later instantiation
-    Froogaloop.fn.init.prototype = Froogaloop.fn;
-
-    // Listens for the message event.
-    // W3C
-    if (window.addEventListener) {
-        window.addEventListener('message', onMessageReceived, false);
-    }
-    // IE
-    else {
-        window.attachEvent('onmessage', onMessageReceived);
-    }
-
-    // Expose froogaloop to the global object
-    return (window.Froogaloop = window.$f = Froogaloop);
-
-})();
\ No newline at end of file
diff --git a/public/assets/ok.css b/public/assets/ok.css
index 34a64dd..e7bf1e6 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -145,16 +145,18 @@ h3 {
 
 .menu {
     position: fixed;
-    height: 100vh;
+    height: calc(100vh - 24px);
     width: 50vw;
-    top: 0;
+    top: 24px;
     left: 0;
     z-index: 2;
     transform: translateZ(0) translateX(-50vw);
-    padding: 24px 0 5px 0;
+    padding: 0 0 5px 0;
     transition: 150ms transform cubic-bezier(0, 0, 0, 1);
     z-index: 0;
     opacity: 0;
+}
+.desktop .menu {
     -webkit-column-count: 2;
     -webkit-column-gap: 3px;
     -moz-column-gap: 3px;
@@ -165,6 +167,14 @@ h3 {
     page-break-inside: avoid;
     break-inside: avoid-column;
 }
+.mobile .menu {
+    overflow: scroll;
+    -webkit-overflow-scrolling: scroll;
+    top: 32px;
+}
+.mobile .scroll {
+    width: 100%;
+}
 
 .menu ul {
     height: 100%;
@@ -186,10 +196,6 @@ ul li[data-id='dump-fm'] {
     text-transform: none;
 }
 
-.mobile ul li:first-child {
-  padding-top: 11px;
-}
-
 .desktop .menu ul li:hover,
 .menu ul li.active {
     background: black;
@@ -219,9 +225,11 @@ nav {
     transform: translateZ(0) translateX(0vw);
     z-index: 2;
     opacity: 1;
-    overflow: auto;
     background: #f9f9f9;
 }
+.desktop .navopen .menu {
+    overflow: auto;
+}
 
 .navopen .item {
     transform: translateZ(0) translateX(50vw);
diff --git a/templates/index.liquid b/templates/index.liquid
index 0995c4f..56ba293 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -191,14 +191,13 @@
 {% else %}
 <script src="/assets/js/vendor/fastclick.js"></script>
 <script src="/assets/js/vendor/flickity.pkfg.js"></script>
-<script src="/assets/js/vendor/froogaloop.js"></script>
+<script src="/assets/js/vendor/iscroll.js"></script>
 <script src="/assets/js/vendor/loader.js"></script>
 <script src="/assets/js/vendor/lodash.min.js"></script>
 <script src="/assets/js/vendor/util.js"></script>
 <script src="/assets/js/vendor/View.js"></script>
 <script src="/assets/js/vendor/Router.js"></script>
 <script src="/assets/js/lib/SiteRouter.js"></script>
-<script src="/assets/js/lib/GalleryView.js"></script>
 <script src="/assets/js/lib/HeaderView.js"></script>
 <script src="/assets/js/lib/NavView.js"></script>
 <script src="/assets/js/lib/ProjectView.js"></script>