summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/assets/js/app.js4
-rw-r--r--public/assets/js/lib/GalleryView.js188
-rw-r--r--public/assets/js/lib/NavView.js8
-rw-r--r--public/assets/js/vendor/froogaloop.js287
-rw-r--r--public/assets/ok.css24
5 files changed, 27 insertions, 484 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);
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 15:03:32 +0000