From 0e3e56f74672736353c8d8bb3a8e46ec8fa8fa3a Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 12 May 2015 18:41:54 +0100 Subject: click categories --- site/public/assets/javascripts/_env.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'site/public/assets/javascripts/_env.js') diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 53d5f12..ce9e8f9 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -29,10 +29,16 @@ environment.ready = function(){ controls.init() $('.cat').click( function(){ - $('.cat').removeClass('active') - $('.sub').removeClass('active') - $(this).addClass('active') - $(this).next('.sub').addClass('active') + if ($(this).hasClass('active')) { + $('.cat').removeClass('active') + $('.sub').removeClass('active') + } + else { + $('.cat').removeClass('active') + $('.sub').removeClass('active') + $(this).addClass('active') + $(this).next('.sub').addClass('active') + } }) $("nav a").click(function(e){ -- cgit v1.2.3-70-g09d2 From 6355b85fc5cb6ad2bac4e3d40e1b550875adb22e Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Tue, 12 May 2015 15:00:16 -0400 Subject: Use more reliable fullscreen test --- site/public/assets/javascripts/_env.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) (limited to 'site/public/assets/javascripts/_env.js') diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index ce9e8f9..53a73af 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -168,19 +168,27 @@ environment.ready = function(){ } setTimeout(function(){ done_loading = true }, 200) - + + /* + * Proper fullscreen detection using the HTML5 + * Full Screen API. Not supported on mobile or + * IE10 and under + */ + function isFullScreen() { + return !!(document.fullscreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement) + } + $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){ - setTimeout(function(){ - if (window.innerHeight == screen.height) { - $("html").addClass("full-screen") - } - else { - $("html").removeClass("full-screen") - } - setTimeout(function(){ - resize_gallery() - }, 100) - }, 500) + if (isFullScreen()) { + $("html").addClass("full-screen") + } + else { + $("html").removeClass("full-screen") + } + resize_gallery() }) $("#scene_container").click(function(e){ -- cgit v1.2.3-70-g09d2 From 21256f1fc48ee448626a32d6c41c077dfbaf0e02 Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Tue, 12 May 2015 16:32:43 -0400 Subject: Add some polyfills + utils --- site/public/assets/javascripts/_env.js | 12 --------- site/public/assets/javascripts/vendor/polyfill.js | 32 ++++++++++++++++++++++- site/public/assets/javascripts/vendor/util.js | 21 +++++++++++++++ 3 files changed, 52 insertions(+), 13 deletions(-) (limited to 'site/public/assets/javascripts/_env.js') diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 53a73af..b571af5 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -169,18 +169,6 @@ environment.ready = function(){ setTimeout(function(){ done_loading = true }, 200) - /* - * Proper fullscreen detection using the HTML5 - * Full Screen API. Not supported on mobile or - * IE10 and under - */ - function isFullScreen() { - return !!(document.fullscreenElement || - document.webkitFullscreenElement || - document.mozFullScreenElement || - document.msFullscreenElement) - } - $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){ if (isFullScreen()) { $("html").addClass("full-screen") diff --git a/site/public/assets/javascripts/vendor/polyfill.js b/site/public/assets/javascripts/vendor/polyfill.js index 411d90f..8c26e80 100644 --- a/site/public/assets/javascripts/vendor/polyfill.js +++ b/site/public/assets/javascripts/vendor/polyfill.js @@ -97,4 +97,34 @@ function fullscreen (el) { } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } -} \ No newline at end of file +} + +/* + * Proper fullscreen detection using the HTML5 + * Full Screen API. Not supported on mobile or + * IE10 and under + * TODO Need to disable fullscreen button on IE10 and lower + */ +function isFullScreen() { + return !!getFullScreenElement() +} + +function getFullScreenElement() { + return document.fullScreenElement || + document.webkitFullscreenElement || + document.mozFullScreenElement || + document.msFullscreenElement +} + +var raf = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame + +var caf = window.cancelAnimationFrame || + window.webkitCancelAnimationFrame || + window.mozCancelAnimationFrame || + window.oCancelAnimationFrame || + window.msCancelAnimationFrame + diff --git a/site/public/assets/javascripts/vendor/util.js b/site/public/assets/javascripts/vendor/util.js index 0f5c6ed..487fe56 100644 --- a/site/public/assets/javascripts/vendor/util.js +++ b/site/public/assets/javascripts/vendor/util.js @@ -240,6 +240,27 @@ if (!Function.prototype.bind) { }; }()); +/* + * Throttle a function to be called no more often + * than ms milliseconds + */ +function throttle(fn, ms) { + ms = ms || 100 + var ready = true + var last + return function() { + var now = Date.now() + if (ready) { + last = now + return fn.apply(this, arguments) + ready = false + } else { + if (now - last > ms) { + ready = true + } + } + } +} function selectElementContents(el) { if (window.getSelection && document.createRange) { -- cgit v1.2.3-70-g09d2 From 4994d8e8361b75b7578ee130b205efe18c6d60d6 Mon Sep 17 00:00:00 2001 From: Sean Fridman Date: Tue, 12 May 2015 17:46:31 -0400 Subject: Fix fullscreen mode BS JS wasn't resolving correctly when the screen switched to fullscreen and was sizing stuff all messed up --- site/public/assets/javascripts/_env.js | 81 +++++++++++++++++++++++++++++----- 1 file changed, 70 insertions(+), 11 deletions(-) (limited to 'site/public/assets/javascripts/_env.js') diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index b571af5..9f13353 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -3,6 +3,60 @@ var strips = [], boxImages = [] var done_loading = false, menu_open = false, entry_open = false var shuffled_indexes +/** + * Polls the viewport to check when fullscreening is settled + * TODO Doesn't work in IE10 and under + */ +function onFullScreenSettle(raf, fullScreenEl, fn, freq) { + freq = freq || 200 + + function pollSettled(fullscreen, getHeight) { + var isSettled = settledPredicate(getHeight) + var poll = throttle(function doPoll() { + if (isSettled()) { + fn(fullscreen) + } else { + raf(poll) + } + }, freq) + raf(poll) + } + + function settledPredicate(getHeight) { + var count = 0 + // Guard against a false positive by requiring predicate to match + // passCount number of times + var passCount = 2 + var last + /** + * Checks whether the fullscreen element height has changed + * since the last poll + */ + return function isSettled() { + var height = getHeight() + if (!last) { + last = height + } else { + var result = height === last && (++count === passCount) + last = height + return result + } + } + } + + // If fullscreening in progress + if (fullScreenEl) { + pollSettled(true, function() { + return fullScreenEl.offsetHeight + }) + // Otherwise, fullscreen is turning off + } else { + pollSettled(false, function() { + return window.innerHeight + }) + } +} + var environment = {}, hashes = {} environment.init = function(){ $("#scene").addClass("fade") @@ -170,13 +224,17 @@ environment.ready = function(){ setTimeout(function(){ done_loading = true }, 200) $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){ - if (isFullScreen()) { - $("html").addClass("full-screen") - } - else { - $("html").removeClass("full-screen") + onFullScreenSettle(requestAnimationFrame, getFullScreenElement(), onSettle) + + function onSettle(isFullScreen) { + if (isFullScreen) { + $("html").addClass("full-screen") + } + else { + $("html").removeClass("full-screen") + } + resize_gallery(isFullScreen) } - resize_gallery() }) $("#scene_container").click(function(e){ @@ -530,12 +588,13 @@ function build_gallery () { $(".nextbutton").click(function(){ gallery.next() }) $(".prevbutton").click(function(){ gallery.previous() }) } -function resize_gallery () { +function resize_gallery (isFullScreen) { if (! gallery) return; - var isFullscreen = $("html").hasClass("full-screen") - $("#okgallery").find(".cell img").each(function(){ - var h = isFullscreen ? window.innerHeight : 0.6 * window.innerHeight - var w = isFullscreen ? "auto" : this.naturalWidth / this.naturalHeight * h + var fullScreenElement = getFullScreenElement() + var $gallery = $("#okgallery") + $gallery.find(".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, }) -- cgit v1.2.3-70-g09d2 From 2f78a76b8aebdda2936752835cab80f75a78997d Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Sun, 17 May 2015 12:44:52 +0200 Subject: its off by a pixel!!!! --- site/public/assets/javascripts/_env.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'site/public/assets/javascripts/_env.js') diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 9f13353..e74a020 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -3,6 +3,8 @@ var strips = [], boxImages = [] var done_loading = false, menu_open = false, entry_open = false var shuffled_indexes +var wasPrev = false, navWidth + /** * Polls the viewport to check when fullscreening is settled * TODO Doesn't work in IE10 and under @@ -341,7 +343,6 @@ function build_scene () { offset: 200, }) ) - var wasPrev = false, navWidth function resize_for_prev_next(){ navWidth = $("nav").width() } @@ -349,7 +350,7 @@ function build_scene () { $(window).resize(resize_for_prev_next) $(window).mousemove(function(e){ if (! gallery) return - prev = ((e.pageX - navWidth) / window.innerWidth) < 0.39 + prev = ((e.pageX - navWidth) / window.innerWidth) < 0.415 if (prev !== wasPrev) { wasPrev = prev $("#okgallery").toggleClass("prev", prev) @@ -505,6 +506,7 @@ function toggle_menu (isInitialLoad){ var gallery = null function build_gallery () { videos = [] + wasPrev = -1 var $el = $("#entry_container #okgallery") if (! $el.length) { gallery = null -- cgit v1.2.3-70-g09d2