diff options
Diffstat (limited to 'site/public')
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 99 | ||||
| -rw-r--r-- | site/public/assets/javascripts/app.js | 6 | ||||
| -rw-r--r-- | site/public/assets/javascripts/vendor/polyfill.js | 32 | ||||
| -rw-r--r-- | site/public/assets/javascripts/vendor/util.js | 21 | ||||
| -rw-r--r-- | site/public/assets/style.css | 122 |
5 files changed, 234 insertions, 46 deletions
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 53d5f12..e74a020 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -3,6 +3,62 @@ 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 + */ +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") @@ -29,10 +85,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){ @@ -162,19 +224,19 @@ environment.ready = function(){ } setTimeout(function(){ done_loading = true }, 200) - + $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(){ - setTimeout(function(){ - if (window.innerHeight == screen.height) { + onFullScreenSettle(requestAnimationFrame, getFullScreenElement(), onSettle) + + function onSettle(isFullScreen) { + if (isFullScreen) { $("html").addClass("full-screen") } else { $("html").removeClass("full-screen") } - setTimeout(function(){ - resize_gallery() - }, 100) - }, 500) + resize_gallery(isFullScreen) + } }) $("#scene_container").click(function(e){ @@ -281,7 +343,6 @@ function build_scene () { offset: 200, }) ) - var wasPrev = false, navWidth function resize_for_prev_next(){ navWidth = $("nav").width() } @@ -289,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) @@ -445,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 @@ -528,12 +590,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, }) diff --git a/site/public/assets/javascripts/app.js b/site/public/assets/javascripts/app.js index 0d51a3f..4e00f30 100644 --- a/site/public/assets/javascripts/app.js +++ b/site/public/assets/javascripts/app.js @@ -19,6 +19,12 @@ app.init = function () { app.launch = function () { // if ($.browser.msie || ! has3d()) { return app.fallback() } + if ($.browser.msie) { + $("html").addClass("msie") + } + else { + $("html").addClass("notmsie") + } scene = new MX.Scene().addTo('#scene') 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) { diff --git a/site/public/assets/style.css b/site/public/assets/style.css index fe08fed..3d1ee7f 100644 --- a/site/public/assets/style.css +++ b/site/public/assets/style.css @@ -713,6 +713,9 @@ nav .sub.active a { opacity: 1.0; cursor:pointer; } +.msie .entry .caption { + display: none; +} .desktop .caption:hover { background:#222; color:#222; @@ -824,16 +827,35 @@ nav .sub.active a { top:0; } +.entry .brady { + width: 72vw; +} .brady { display: block; - max-width: 1001px; } -.brady a, .brady img { - width: 200px; height: 200px; +.brady > a { + width: 18vw; height: 18vw; + background-size: cover; + background-position: center center; + position: relative; + display: block; + float: left; +} +.brady div { + width: 17vw; position: relative; - display: inline-block; + display: block; + float: left; + padding: 1vw; + font-size: 0.8vw; + line-height: 1.4vw; + border: 1px solid black; + margin: 0.5vw 0.5vw 0 0.5vw; +} +.brady > a:nth-child(3) { + margin-right: 5vw; } -.desktop .brady a:hover:after { +.desktop .brady > a:hover:after { content: 'SAY HELLO!'; position: absolute; top: 40%; @@ -843,6 +865,25 @@ nav .sub.active a { font-size: 22px; width: 100%; } +.brady span { + position: absolute; + bottom: 0; + left: 0; + background: white; + opacity: 0; + color: black; + margin-top: -4px; + font-size: 1vw; + padding: 2px 0 1px 2px; + + transition: 0.1s opacity ease-in; + display: block; + text-overflow: ellipsis; + text-transform: uppercase; +} +.desktop .brady > a:hover span { + opacity: 1; +} .project { float: left; @@ -860,6 +901,9 @@ nav .sub.active a { .desktop .ready .project:hover { opacity: 1.0; } +.msie .project { + opacity: 1.0 !important; +} .entry.hover .project { opacity: 0.5 } .entry.hover .project.hover { opacity: 1.0 } @@ -884,7 +928,8 @@ nav .sub.active a { text-transform: uppercase; } .mobile .project span, -.desktop .project:hover span { +.desktop .project:hover span, +.msie .project span { opacity: 1; } .undone .project:nth-child(1) { transition-delay:0.05s; } @@ -966,34 +1011,27 @@ nav .sub.active a { @media (max-width:1200px) { - .entry span div.content { -/* - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - */ - } - .project { width:33.3333%; height: 16.6vw; } - .brady a { - width: 160px; - height: 160px; - } - + .brady > a { + width: 24vw; height: 24vw; + } + .brady div { + width: 23vw; + font-size: 1.2vw; + line-height: 1.9vw; + } + .brady span { + font-size: 2vw; + } + .brady > a:nth-child(3) { + margin-right: 0vw; + } } @media (max-width:900px) { - .entry span div.content { -/* - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - */ - } - .project { width:50%; height: 23vw; @@ -1044,6 +1082,18 @@ nav .sub.active a { font-size: 0.6em; width: 120px; } + nav .bottom { + height: 27%; + } + nav .sub.active a { + padding: 2px 0 4px 20px; + } + nav .cat { + padding: 2px 0 2px 10px; + } + .contact { + margin-top: 6px; + } .menuActive #entry_container .entry.all { width:65%; } @@ -1055,6 +1105,24 @@ nav .sub.active a { .menuActive .project span { top: -18px; } + .brady > a { + width: 35vw; height: 35vw; + } + .brady div { + width: 34vw; + font-size: 2vw; + line-height: 2.5vw; + } + .brady div:nth-child(1) { + margin-left: 3vw; + } + .brady span { + font-size: 2vw; + } + .brady > a:nth-child(3) { + margin-right: 0vw; + } + } .mobile .cell iframe { width: 100%; |