diff options
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 81 |
1 files changed, 70 insertions, 11 deletions
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, }) |