diff options
Diffstat (limited to 'site/public/assets/javascripts/_env.js')
| -rw-r--r-- | site/public/assets/javascripts/_env.js | 555 |
1 files changed, 415 insertions, 140 deletions
diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js index 3badf41..95afd50 100644 --- a/site/public/assets/javascripts/_env.js +++ b/site/public/assets/javascripts/_env.js @@ -1,59 +1,128 @@ -var base_href = "http://okfocus.s3.amazonaws.com/2h/" -var box_images = shuffle([ - "1.gif", "2.gif", "3.gif", "4.gif", "5.gif", -// "dies2.gif", "dies3.gif", - "6.gif", "7.gif", "8.gif", "9.gif", - "12.gif", "13.gif", "14.gif", "15.gif", - "16.gif", "17.gif", // "CCP-GIF.gif", "dies1.gif", -]) - -var strips = [] +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(){ - var loader = new Loader(function(){ - environment.ready() - }) - loader.preloadImages(box_images.map(function(url){ - return base_href + url - })) + $("#scene").addClass("fade") + var loader = new Loader(environment.ready, new HustleLoader) + var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s }) + boxImages = $("#box-image-list").html().split("\n") + var postImages = $(".sub a").toArray().map(function(el){ return $(el).data("image") }) + + var images = preloadImages.concat(postImages).concat(boxImages).filter(function(s){ return !!s }) + loader.preloadImages( images ) loader.ready() } environment.ready = function(){ if (window.innerWidth < 500) document.body.classList.add('mobile') - controls = new MX.OrbitCamera({ - radius: 1000, - radiusRange: [ 10, 2000 ], - rotationX: PI/2, - rotationY: PI, - wheelEase: 20, - ease: 100 - }) + if (is_mobile) { + controls = new MX.OrbitCameraMobile({ + radius: 100000, + radiusRange: [ 10, 2000 ], + rotationX: PI/2, + rotationY: PI, + wheelEase: 20, + ease: 100 + }) + } + else { + controls = new MX.OrbitCamera({ + radius: 100000, + radiusRange: [ 10, 2000 ], + rotationX: PI/2, + rotationY: PI, + wheelEase: 20, + ease: 100 + }) + } 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){ + if ($(this).parent().hasClass("contact")) return; + e.preventDefault() - - var hash = "#" + $(this).data("hash") + + var page = "/" + $(this).data("type") + "/" + $(this).data("id") + var hash = "#" + page if (done_loading && window.location.hash == hash) return window.location.hash = hash $("nav a.active").removeClass("active") - $(this).addClass("active") + var $link = $(this) + $link.addClass("active") open_entry() - - var page = $(this).attr("href") - if (page.indexOf("#") !== -1) page = "#" $("#entry_container").removeClass("visible") @@ -61,29 +130,30 @@ environment.ready = function(){ $loader.load(page + " .entry", function(){ display_entry($loader.children()[0]) }) - }) $("nav .about").click(function(e){ e.preventDefault() - if (done_loading && window.location.hash == "#about") return - window.location.hash = "#about" + if (done_loading && window.location.hash == "#/about") return + window.location.hash = "#/about" $("nav a.active").removeClass("active") open_entry() $("#entry_container").removeClass("visible") var $loader = $("<div>") - $loader.load("about .entry", function(){ + $loader.load("/about/ .entry", function(){ + console.log($loader.html()) display_entry($loader.children()[0]) }) }) +/* $("nav .contact").click(function(e){ e.preventDefault() - if (done_loading && window.location.hash == "#contact") return - window.location.hash = "#contact" + if (done_loading && window.location.hash == "#/contact") return + window.location.hash = "#/contact" $("nav a.active").removeClass("active") open_entry() @@ -94,29 +164,28 @@ environment.ready = function(){ display_entry($loader.children()[0]) }) }) - $("nav .index").click(function(e){ - e.preventDefault() - - if (done_loading && window.location.hash == "#index") return - window.location.hash = "#index" - - $("nav a.active").removeClass("active") - open_entry() - - $("#entry_container").removeClass("visible") - var $loader = $("<div>") - $loader.load("all .entry", function(){ - display_entry($loader.children()[0]) - }) - }) +*/ + // $("nav .index").click() $(".toggleRapper").click(toggle_menu) - $(".toplogo").click(hide_entry) $(document).on("click", ".project", function(){ - var hash = as_hash( $(this).find("span").text() ) - load_hash(hash) + var page = "/" + $(this).data("type") + "/" + $(this).data("id") + $(".entry").css("pointer-events", "none") + load_hash(page) + }) + $(".toplogo,.logo").click(function(e){ + e.preventDefault() + $(".active").removeClass('active') + $('.cat.active, .sub.active, .sub.a').addClass('active') + controls.pause() + window.location.hash = "#" + // $(".index").trigger("click") + load_index() + // hide_entry() }) + Share.init() + $(window).mousedown(function(e){ if (! menu_open) { controls.pause() @@ -147,52 +216,75 @@ environment.ready = function(){ var current_hash = window.location.hash.replace("#","") $("nav a").each(function(){ - var key = as_hash(this.innerHTML) - hashes[key] = this - $(this).data("hash", key) + var page = "/" + $(this).data("type") + "/" + $(this).data("id") + hashes[page] = this + $(this).data("hash", page) }) - hashes['about'] = $("nav .about") - hashes['contact'] = $("nav .contact") - hashes['index'] = $("nav .index") + hashes['/about'] = $("nav .about") + // hashes['/contact'] = $("nav .contact") + // hashes['/index'] = $("nav .index") if (current_hash in hashes) { - toggle_menu() + toggle_menu(false) load_hash(current_hash) setTimeout(build_scene, 200) } else { build_scene() + setTimeout(function(){ + $("#scene").removeClass("fade") + }, 100) } setTimeout(function(){ done_loading = true }, 200) -// $(".mx-scenery").on("mouseenter", function(e){ -// e.stopPropagation() -// $(this).addClass("red") -// }) -// $(".mx-scenery").on("mouseleave", function(e){ -// e.stopPropagation() -// $(".red").removeClass("red") -// }) $(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){ + if ( $("body").hasClass("menuActive") || $(".entry").length ) { + return + } + else { + toggle_menu() + } + }) + if (is_desktop) { + $(document).on("mouseenter", ".project", function(){ + var type = $(this).data("type") + $(".entry").addClass("hover") + $(this).addClass("hover") + $(".top .cat").not("[data-type=" + type + "]").addClass("no-hover") + $(".cat[data-type=" + type + "]").addClass("hover") + }) + $(document).on("mouseleave", ".project", function(){ + var type = $(this).data("type") + $(".entry").removeClass("hover") + $(this).removeClass("hover") + $(".cat").removeClass("hover").removeClass("no-hover") + }) + } } function build_scene () { + controls.setZoom(100000) + controls.zoom(1000) + +/* strips.push( new Strip({ - images: box_images.slice(0, 5), + images: $(".sub[data-type=advertising] a"), x: -100, y: 100, rotationY: PI/4, @@ -200,7 +292,7 @@ function build_scene () { }) ) strips.push( new Strip({ - images: box_images.slice(5, 10), + images: $(".sub[data-type=retail] a"), x: 100, y: 100, rotationX: PI/4, @@ -209,7 +301,7 @@ function build_scene () { }) ) strips.push( new Strip({ - images: box_images.slice(10, 15), + images: $(".sub[data-type=experiential] a"), x: 0, y: 100, z: 100, @@ -218,7 +310,44 @@ function build_scene () { }) ) strips.push( new Strip({ - images: box_images.slice(15, 20), + images: $(".sub[data-type=content] a"), + x: 0, + y: 100, + z: -50, + rotationX: PI/2, + rotationY: PI/100, + offset: 200, + }) ) +*/ + + strips.push( new Strip({ + images: boxImages.slice(0, 5), + x: -100, + y: 100, + rotationY: PI/4, + offset: 100, + }) ) + + strips.push( new Strip({ + images: boxImages.slice(5, 10), + x: 100, + y: 100, + rotationX: PI/4, + rotationY: PI/-100, + offset: 200, + }) ) + + strips.push( new Strip({ + images: boxImages.slice(10, 15), + x: 0, + y: 100, + z: 100, + rotationY: PI/6, + offset: 300, + }) ) + + strips.push( new Strip({ + images: boxImages.slice(15, 20), x: 0, y: 100, z: -50, @@ -227,6 +356,20 @@ function build_scene () { offset: 200, }) ) + function resize_for_prev_next(){ + navWidth = $("nav").width() + } + resize_for_prev_next() + $(window).resize(resize_for_prev_next) + $(window).mousemove(function(e){ + if (! gallery) return + prev = ((e.pageX - navWidth) / window.innerWidth) < 0.415 + if (prev !== wasPrev) { + wasPrev = prev + $("#okgallery").toggleClass("prev", prev) + } + }) + strips.forEach(function(strip){ strip.update(0) }) scene.update() @@ -235,6 +378,25 @@ function build_scene () { var entry_open_time = 0; +function load_index (e){ + e && e.preventDefault() + // if (done_loading && window.location.hash == "#/index") return + // window.location.hash = "#/index" + // console.log("load index") + + $("nav a.active").removeClass("active") + open_entry(true) + + window.location.hash = "#" + + $("#entry_container").removeClass("visible") + var $loader = $("<div>") + $loader.load("all .entry", function(){ + $("body").addClass("menuActive") + display_entry($loader.children()[0]) + }) +} + function as_hash (txt) { return txt.replace(/\s/g,'_') } @@ -245,8 +407,8 @@ function load_hash (hash) { $menu.parent().prev(".cat").addClass('active') $menu.trigger("click") } -function open_entry () { - if (is_mobile) { +function open_entry (entryIsAll) { + if (is_mobile && ! entryIsAll) { $("body").removeClass("menuActive") } if (! entry_open) { @@ -259,24 +421,49 @@ function open_entry () { entry_open_time = +new Date $("#entry_container").addClass("fade") } -function display_entry ($el) { +function display_entry (el) { var now = +new Date + var $el = $(el) + var isIndex = $el.hasClass("all") + if (is_mobile) { + $("body").toggleClass("menuActive", isIndex) +// $el.find(".brady > a").remove() + } + if (isIndex) { + var $project_list = $el.find("#project_list") + var $projects = $project_list.find(".project") + if (! shuffled_indexes) { + shuffled_indexes = [] + for (var i = 0; i < $projects.length; i++) { + shuffled_indexes[i] = i + } + shuffle(shuffled_indexes) + } + $project_list.html("") + for (var i = 0; i < $projects.length; i++) { + $project_list.append($projects[shuffled_indexes[i]]) + } + } setTimeout(function(){ $("#entry_container").empty().append($el) $("#entry_container").removeClass("fade") - build_gallery() + setTimeout(function(){ + build_gallery() + }) if (is_mobile) { $(".video").each(function(){ load_video( $(this) ) }) } - if (window.location.hash.match(/about|contact|index/)) { + if (window.location.hash.match(/about|contact/) || $(".entry").hasClass("all")) { setTimeout(function(){ $(".entry").addClass("ready") + if ($(".entry").hasClass("all")) { + setTimeout(function(){ + $(".entry").removeClass("undone") + }, 500) + } }, 100) - setTimeout(function(){ - $(".entry").addClass("done") - }, 600) } else { $(".entry").addClass("ready") @@ -285,8 +472,11 @@ function display_entry ($el) { $("#entry_container").scrollTop(0) $("#entry_container").addClass("visible") - controls.setZoom(100000) - setTimeout(function(){ controls.zoom(100) }, 100) + $("#scene").addClass("fade") + $(".cat").removeClass("hover").removeClass("no-hover") + setTimeout(function(){ + $("#scene").hide() + }, 200) } function hide_entry () { $("nav .active").removeClass("active") @@ -298,7 +488,7 @@ function hide_entry () { controls.zoom(1500) window.location.hash = "#" } -function toggle_menu (){ +function toggle_menu (isInitialLoad){ $("body").toggleClass("menuActive") menu_open = $("body").hasClass("menuActive") @@ -306,8 +496,10 @@ function toggle_menu (){ $("#entry_container").removeClass("visible") } - if (menu_open) { + if (menu_open && isInitialLoad !== false) { controls.pause() + // $(".index").trigger("click") + load_index() } if (! menu_open && entry_open && ! is_mobile) { entry_open = false @@ -328,11 +520,16 @@ function toggle_menu (){ var gallery = null function build_gallery () { videos = [] + wasPrev = -1 var $el = $("#entry_container #okgallery") if (! $el.length) { gallery = null return } + var $cells = $("#entry_container #okgallery .cell") + if ($cells.length == 1) { + $(".entry").addClass("singleton") + } var $next = $el.next(".next") var $caption = $el.next(".caption") gallery = new Flickity( "#okgallery", { @@ -347,20 +544,28 @@ function build_gallery () { }) $("#okgallery .video").each(function(){ - var $play = $('<div class="play"></div>') var $el = $(this) + if (! is_mobile) { + var $underlay = $('<div class="underlay"></div>') + $underlay.css("background-image", $el.css("background-image")) + $el.css("background-image", 'none') + } + var $play = $('<div class="play"></div>') $el.append($play) - $play.click(function(e){ - e.stopPropagation() - e.preventDefault() - if ($el.hasClass('loaded')) { - var player = $el.data('player') - player.api('play') - } - else { - load_video($el) - } - }) + $el.append($underlay) + if (is_desktop) { + $play.on("click", function(e){ + e.stopPropagation() + e.preventDefault() + if ($el.hasClass('loaded')) { + var player = $el.data('player') + player.api('play') + } + else { + load_video($el) + } + }) + } }) $(".caption").click(function(){ @@ -368,12 +573,14 @@ function build_gallery () { }) gallery.on("cellSelect", function(){ + if (! gallery.selectedElement) return $caption.html( $(gallery.selectedElement).data("caption") ) videos.forEach(function(player){ player.api('pause') }) }) gallery.on("settle", function(){ + if (! gallery || ! gallery.selectedElement) { return } $caption.html( $(gallery.selectedElement).data("caption") ) }) gallery.on("staticClick", function(e){ @@ -383,23 +590,27 @@ function build_gallery () { // load_video($el) } else { - next() + if ($("#okgallery").hasClass("prev")) { + gallery.previous() + } else { + gallery.next() + } } }) - // $next.on("click", next) - function next(){ - gallery.next() - } gallery.loader.on("progress", function(imagesLoaded, loadingImage){ $(loadingImage.img).addClass('loaded') + $(loadingImage.img).parent().removeClass('loading') }) + $(".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, }) @@ -414,12 +625,17 @@ function load_video ($el) { var vimeo_id = $el.data("video").match(/\d+/)[0] var $embed = $('<iframe src="https://player.vimeo.com/video/' + vimeo_id + '?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>') $el.append($embed) - var $mask = $('<div class="mask"></div>') - $el.append($mask) + if (! is_mobile) { +// var $mask = $('<div class="mask"></div>') +// $el.append($mask) + } var player = $f( $el.find("iframe")[0] ) $el.data('player', player) player.addEvent('ready', function(){ +// console.log("ready") + $el.addClass('playing') player.addEvent('play', function(){ +// console.log("playing") $el.addClass('playing') }) player.addEvent('pause', function(){ @@ -436,24 +652,6 @@ environment.updateOnReady = function(t){ controls.update() } -var titles = [ - "BARNEY'S, GAGA CONSTELLATION", - "CCP GAMES, EVE ONLINE", - "DIESEL ACCESSORIES", - "DIESEL CAMPAIGN FW13/SS14", - "DIESEL CAMPAIGN FW14", - "#DIESELREBOOT", - "#DIESELTRIBUTE", - "DIESEL JOGG JEANS", - "DIESEL WATCHES", - 'MAC, "UNTITLED, SELF-PORTRAIT"', - "MUGLER, BROTHERS OF ARCADIA", - "MUGLER, LADY GAGA", - "MUGLER, MEN’S FW11", - "NICOLA’S, HO HO HO CHRISTMAS SHOP", - "NICOLA'S, LANE CRAWFORD", - "NICOLA’S, NEW YORK" -] var Strip = function( opt ){ this.opt = opt @@ -467,13 +665,20 @@ var Strip = function( opt ){ root.addTo(scene) var prev = root - this.els = opt.images.map(function(url, i){ + this.els = ( opt.images.toArray ? opt.images.toArray() : opt.images ).map(function(el, i){ + var url + if (typeof el == "string") { + url = el + } + else { + var data = $(el).data() + url = data.image + } var el = new MX.Image({ - src: base_href + url, + src: url, onload: function(img){ } }) - $(el.el).attr("data-title", choice(titles)) el.setCSSTransformOrigin( "50% 100%" ) el.addTo(prev) el.update() @@ -494,3 +699,73 @@ Strip.prototype.update = function(t){ el.y = el.height / 2 }) } + +function HustleLoader () { + var svg = document.getElementById("loader_svg_status") + function init(){ + build() + } + function build(){ + setTimeout(function(){ $("#loader_svg").addClass("slide") }, 100) + } + this.update = function (i) { + var y = lerp(1-i, 336, 118) + svg.setAttribute("y", y ) + } + this.finish = function(cb){ + $("#loader_rapper").addClass("hidden") + setTimeout(cb, 100) + setTimeout(function(){ + $("#loader_rapper").hide() + }, 500) + } + init() +} + +var Share = { + init: function(){ + $(document).on("click", ".fb", Share.facebook) + $(document).on("click", ".tw", Share.twitter) + setTimeout(function(){ + window.fbAsyncInit = function() { + FB.init({ + appId : '643786815755427', + xfbml : true, + version : 'v2.3' + }); + }; + + (function(d, s, id){ + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) {return;} + js = d.createElement(s); js.id = id; + js.src = "//connect.facebook.net/en_US/sdk.js"; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); + }, 1000) + }, + + facebook: function (e) { + e.preventDefault() + // var link = window.location.href + // var msg = $(".postname").html() + // var url = "https://www.facebook.com/share.php?u=" + encodeURIComponent(link) + "&t=" + encodeURIComponent(msg) + // window.open(url, "_blank") + + var picture = $(".gallery img").first().attr("src") || ($(".gallery .underlay").css('background-image') || "").replace("url(","").replace(")","") || "http://twohustlers.com/assets/images/2H_LOGOMARK.png" + FB.ui({ + method: 'feed', + link: window.location.href, + caption: $(".postname").html(), + picture: picture, + }, function(response){}); + }, + + twitter: function (e) { + e.preventDefault() + var link = window.location.href + var msg = $(".postname").html() + var url = "https://twitter.com/home?status=" + encodeURIComponent(msg + " " + link) + window.open(url, "_blank") + }, +}
\ No newline at end of file |