summaryrefslogtreecommitdiff
path: root/site/public/javascripts/_env.js
diff options
context:
space:
mode:
Diffstat (limited to 'site/public/javascripts/_env.js')
-rw-r--r--site/public/javascripts/_env.js496
1 files changed, 0 insertions, 496 deletions
diff --git a/site/public/javascripts/_env.js b/site/public/javascripts/_env.js
deleted file mode 100644
index 4a4d71b..0000000
--- a/site/public/javascripts/_env.js
+++ /dev/null
@@ -1,496 +0,0 @@
-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 done_loading = false, menu_open = false, entry_open = false
-
-var environment = {}, hashes = {}
-environment.init = function(){
- var loader = new Loader(function(){
- environment.ready()
- })
- loader.preloadImages(box_images.map(function(url){
- return base_href + url
- }))
- 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
- })
- controls.init()
-
- $('.cat').click( function(){
- $('.cat').removeClass('active')
- $('.sub').removeClass('active')
- $(this).addClass('active')
- $(this).next('.sub').addClass('active')
- })
-
- $("nav a").click(function(e){
- e.preventDefault()
-
- var hash = "#" + $(this).data("hash")
- if (done_loading && window.location.hash == hash) return
- window.location.hash = hash
-
- $("nav a.active").removeClass("active")
- $(this).addClass("active")
- open_entry()
-
- var page = $(this).attr("href")
- if (page.indexOf("#") !== -1) page = "#"
-
- $("#entry_container").removeClass("visible")
-
- var $loader = $("<div>")
- $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"
-
- $("nav a.active").removeClass("active")
- open_entry()
-
- $("#entry_container").removeClass("visible")
- var $loader = $("<div>")
- $loader.load("about.html .entry", function(){
- display_entry($loader.children()[0])
- })
- })
- $("nav .contact").click(function(e){
- e.preventDefault()
-
- if (done_loading && window.location.hash == "#contact") return
- window.location.hash = "#contact"
-
- $("nav a.active").removeClass("active")
- open_entry()
-
- $("#entry_container").removeClass("visible")
- var $loader = $("<div>")
- $loader.load("contact.html .entry", 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.html .entry", function(){
- display_entry($loader.children()[0])
- })
- })
-
- $(".toggleRapper").click(toggle_menu)
- $(".toplogo").click(hide_entry)
- $(document).on("click", ".project", function(){
- var hash = as_hash( $(this).find("span").text() )
- load_hash(hash)
- })
-
- $(window).mousedown(function(e){
- if (! menu_open) {
- controls.pause()
- controls.opt.ease = 10
- }
- })
- $(window).mouseup(function(e){
- if (! menu_open) {
- controls.pause()
- }
- controls.opt.ease = 100
- })
- $(window).mousemove(function(e){
- if (menu_open || controls.dragging) return
- var x = e.pageX/window.innerWidth
- var xmid = pow( abs( 2 * (x - 0.5) ), 1/2 )
- var y = e.pageY/window.innerHeight
- var ymid = pow( abs( 2 * (y - 0.5) ), 1/2 )
- var z = dist( xmid, ymid, 0, 0 )
- controls.zoomPercent( clamp(z - 0.3, 0, 1) )
- controls.move(
- (x) * TWO_PI * 4,
- PI/2 + (1-y) * TWO_PI * 4
- )
- })
-
- $("body").removeClass('loading')
-
- var current_hash = window.location.hash.replace("#","")
- $("nav a").each(function(){
- var key = as_hash(this.innerHTML)
- hashes[key] = this
- $(this).data("hash", key)
- })
- hashes['about'] = $("nav .about")
- hashes['contact'] = $("nav .contact")
- hashes['index'] = $("nav .index")
-
- if (current_hash in hashes) {
- toggle_menu()
- load_hash(current_hash)
- setTimeout(build_scene, 200)
- }
- else {
- build_scene()
- }
-
- 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) {
- $("html").addClass("full-screen")
- }
- else {
- $("html").removeClass("full-screen")
- }
- setTimeout(function(){
- resize_gallery()
- }, 100)
- }, 500)
- })
-}
-
-
-function build_scene () {
- strips.push( new Strip({
- images: box_images.slice(0, 5),
- x: -100,
- y: 100,
- rotationY: PI/4,
- offset: 100,
- }) )
-
- strips.push( new Strip({
- images: box_images.slice(5, 10),
- x: 100,
- y: 100,
- rotationX: PI/4,
- rotationY: PI/-100,
- offset: 200,
- }) )
-
- strips.push( new Strip({
- images: box_images.slice(10, 15),
- x: 0,
- y: 100,
- z: 100,
- rotationY: PI/6,
- offset: 300,
- }) )
-
- strips.push( new Strip({
- images: box_images.slice(15, 20),
- x: 0,
- y: 100,
- z: -50,
- rotationX: PI/2,
- rotationY: PI/100,
- offset: 200,
- }) )
-
- strips.forEach(function(strip){ strip.update(0) })
-
- scene.update()
- environment.update = environment.updateOnReady
-}
-
-var entry_open_time = 0;
-
-function as_hash (txt) {
- return txt.replace(/\s/g,'_')
-}
-function load_hash (hash) {
- var $menu = $(hashes[hash])
- $(".active").removeClass('active')
- $menu.parent().addClass('active')
- $menu.parent().prev(".cat").addClass('active')
- $menu.trigger("click")
-}
-function open_entry () {
- if (is_mobile) {
- $("body").removeClass("menuActive")
- }
- if (! entry_open) {
- entry_open = true
- controls.zoom(40)
- controls.wheel.lock()
- $("#scene").addClass("fade")
- setTimeout(function(){ $("#scene").hide() }, 200)
- }
- entry_open_time = +new Date
- $("#entry_container").addClass("fade")
-}
-function display_entry ($el) {
- var now = +new Date
- setTimeout(function(){
- $("#entry_container").empty().append($el)
- $("#entry_container").removeClass("fade")
- build_gallery()
- if (is_mobile) {
- $(".video").each(function(){
- load_video( $(this) )
- })
- }
- if (window.location.hash.match(/about|contact|index/)) {
- setTimeout(function(){
- $(".entry").addClass("ready")
- }, 100)
- setTimeout(function(){
- $(".entry").addClass("done")
- }, 600)
- }
- else {
- $(".entry").addClass("ready")
- }
- }, max(0, 200 - (now - entry_open_time)) + 20)
-
- $("#entry_container").scrollTop(0)
- $("#entry_container").addClass("visible")
- controls.setZoom(100000)
- setTimeout(function(){ controls.zoom(100) }, 100)
-}
-function hide_entry () {
- $("nav .active").removeClass("active")
- $("#entry_container").addClass("fade")
- setTimeout(function(){
- $("#entry_container").empty()
- }, 200)
- $("#scene").show().removeClass("fade")
- controls.zoom(1500)
- window.location.hash = "#"
-}
-function toggle_menu (){
- $("body").toggleClass("menuActive")
- menu_open = $("body").hasClass("menuActive")
-
- if (! is_mobile) {
- $("#entry_container").removeClass("visible")
- }
-
- if (menu_open) {
- controls.pause()
- }
- if (! menu_open && entry_open && ! is_mobile) {
- entry_open = false
- controls.wheel.unlock()
- setTimeout(function(){ $("#scene").removeClass("fade") })
- $("nav a.active").removeClass("active")
- }
- if (! menu_open && ! entry_open) {
- window.location.hash = "#"
- $("#scene").show()
- $("#entry_container").empty()
- controls.zoom(1500)
- $('.cat').removeClass('active')
- $('.sub').removeClass('active')
- }
-}
-
-var gallery = null
-function build_gallery () {
- videos = []
- var $el = $("#entry_container #okgallery")
- if (! $el.length) {
- gallery = null
- return
- }
- var $next = $el.next(".next")
- var $caption = $el.next(".caption")
- gallery = new Flickity( "#okgallery", {
- cellSelector: '.cell',
- cellAlign: 'left',
- wrapAround: true,
- prevNextButtons: false,
- pageDots: true,
- setGallerySize: false,
- draggable: true,
- imagesLoaded: true,
- })
-
- $("#okgallery .video").each(function(){
- var $play = $('<div class="play"></div>')
- var $el = $(this)
- $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)
- }
- })
- })
-
- $(".caption").click(function(){
- fullscreen($(".gallery")[0])
- })
-
- gallery.on("cellSelect", function(){
- $caption.html( $(gallery.selectedElement).data("caption") )
- videos.forEach(function(player){
- player.api('pause')
- })
- })
- gallery.on("settle", function(){
- $caption.html( $(gallery.selectedElement).data("caption") )
- })
- gallery.on("staticClick", function(e){
- // console.log(e)
- var $el = $(e.target)
- if ($el.hasClass("play")) {
- // load_video($el)
- }
- else {
- next()
- }
- })
- // $next.on("click", next)
- function next(){
- gallery.next()
- }
- gallery.loader.on("progress", function(imagesLoaded, loadingImage){
- $(loadingImage.img).addClass('loaded')
- })
-}
-function resize_gallery () {
- 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
- $(this).css({
- width: w, height: h,
- })
- })
- $(".flickity-viewport").css("height","")
- gallery.resize()
-}
-var videos = []
-function load_video ($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 + '?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)
- var player = $f( $el.find("iframe")[0] )
- $el.data('player', player)
- player.addEvent('ready', function(){
- player.addEvent('play', function(){
- $el.addClass('playing')
- })
- player.addEvent('pause', function(){
- $el.removeClass('playing')
- })
- })
- videos.push(player)
-}
-environment.update = noop
-environment.updateOnReady = function(t){
- // strips.forEach(function(strip){ strip.update(t) })
- controls.delta( menu_open ? 0 : 1/16, 0)
- scene.update()
- 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
-
- var root = this.root = new MX.Object3D ()
- root.x = opt.x || 0
- root.y = opt.y || 0
- root.z = opt.z || 0
- root.rotationX = opt.rotationX || 0
- root.rotationY = opt.rotationY || 0
- root.rotationZ = opt.rotationZ || 0
- root.addTo(scene)
-
- var prev = root
- this.els = opt.images.map(function(url, i){
- var el = new MX.Image({
- src: base_href + url,
- onload: function(img){
- }
- })
- $(el.el).attr("data-title", choice(titles))
- el.setCSSTransformOrigin( "50% 100%" )
- el.addTo(prev)
- el.update()
- prev = el
- return el
- })
-}
-Strip.prototype.update = function(t){
- var count = this.els.length
- var offset = this.opt.offset
-
- t += offset
-
- // this.root.rotationZ = t/10000
- this.els.forEach(function(el, i){
- el.rotationX = i/count * Math.PI * 2
- el.skewY = cos( (1 + i) * 2 * Math.PI * t/100000 + 100 ) / 10
- el.y = el.height / 2
- })
-}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-19 10:16:50 +0000