From 7c073e83edf335fe611864c00a14abca0d718b11 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 12:14:18 -0400 Subject: preload images, inject iframes --- public/assets/js/app.js | 27 +++++++------------ public/assets/js/lib/NavView.js | 8 ++++++ public/assets/js/lib/ProjectView.js | 52 ++++++++++++++++++++++++++++++++++++- public/assets/ok.css | 7 +++-- templates/index.liquid | 9 +++---- 5 files changed, 77 insertions(+), 26 deletions(-) diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 319a939..040b99c 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -18,8 +18,8 @@ var app = (function() { } app.init = function() { - app.bind() app.build() + app.bind() app.ready() } @@ -28,20 +28,25 @@ var app = (function() { document.addEventListener('touchmove', function(e) { e.preventDefault() }) - FastClick.attach(document.body) + window.FastClick && FastClick.attach(document.body) } $(window).resize(app.resize) } app.build = function(data) { + app.loader = new Loader () app.header = new HeaderView() app.nav = new NavView() - var items = $(".item") + // should this go here or elsewhere? + app.resizeItems() + + var $items = $(".item") + app.lookup = {} - app.projects = items.toArray().map(function(el, i){ + app.projects = $items.toArray().map(function(el, i){ var view = new ProjectView ({ el: el, page_number: i, @@ -63,7 +68,6 @@ var app = (function() { gallery && gallery.next() }, }) - } app.ready = function() { @@ -123,17 +127,4 @@ var app = (function() { })() -app.resizeItems() - -$('.top').each(function(){ - if ($(this).find(".cell").length > 1) { - $(this).flickity(app.flickity_options).on( 'cellSelect', function(e) { - var gallery = $(e.target).data('flickity') - app.header.updateSlideNumber( gallery.selectedIndex ) - }) - } -}) - -$(".item").addClass("hidden") - app.init() diff --git a/public/assets/js/lib/NavView.js b/public/assets/js/lib/NavView.js index b2fe341..e2b334c 100644 --- a/public/assets/js/lib/NavView.js +++ b/public/assets/js/lib/NavView.js @@ -27,6 +27,10 @@ var NavView = View.extend({ var index = Math.max( app.view.page_number - 1, 0 ) var view = app.projects[ index ] this.swap( view, "up" ) + + var prevIndex = Math.max( app.view.page_number - 1, 0 ) + var prevView = app.projects[ prevIndex ] + prevView.preload() }, next: function(){ @@ -37,6 +41,10 @@ var NavView = View.extend({ var index = (app.view.page_number + 1) % app.projects.length var view = app.projects[ index ] this.swap( view, "down" ) + + var nextIndex = (app.view.page_number + 1) % app.projects.length + var nextView = app.projects[ nextIndex ] + nextView.preload() }, swap: function(view, direction) { diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index b119b65..97a7e1c 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -12,7 +12,24 @@ var ProjectView = View.extend({ this.project_id = this.$el.data("id") this.page_number = opt.page_number this.slide_count = this.$(".cell").length - console.log("INIT", this.project_id) + + this.$iframes = this.$(".cell.iframe") + this.$images = this.$(".cell.image") + this.$videos = this.$(".cell.video") + + this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") }) + + if (is_mobile) { + $iframes.remove() + $videos.remove() + } + + if (this.$(".cell").length > 1) { + this.$(".top").flickity(app.flickity_options).on( 'cellSelect', function(e) { + var gallery = $(e.target).data('flickity') + app.header.updateSlideNumber( gallery.selectedIndex ) + }) + } var $viewport = this.$(".flickity-viewport") if (! $viewport.length) { @@ -30,6 +47,14 @@ var ProjectView = View.extend({ this.$el.append( $("
").addClass("page-up") ) this.$el.append( $("
").addClass("page-down") ) } + + this.$el.addClass('hidden') + }, + + preload: function(){ + if (this.images.length) { + app.loader.preloadImage( this.images[0] ) + } }, show: function(){ @@ -46,6 +71,24 @@ var ProjectView = View.extend({ app.router.pushState("/project/" + this.project_id) } + this.$images.each(function(){ + var uri = $(this).data("uri") + $(this).css("background-image", "url(" + uri + ")") + }) + + if (is_mobile) { + this.$images.each(function(){ + var uri = $(this).data("uri") + $(this).css("background-image", "url(" + uri + ")") + }) + } + else { + this.$iframes.each(function(){ + var uri = $(this).data("uri") + $(this).html(" +
{% endif %} {% endfor %} -- cgit v1.2.3-70-g09d2 From bc5c9ff05b113df0907f442c225ce61c3f15f1b3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 12:16:22 -0400 Subject: fix missing brief if no press --- db.json | 7 +------ public/assets/ok.css | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/db.json b/db.json index 6307d24..bf7b9ea 100644 --- a/db.json +++ b/db.json @@ -198,12 +198,7 @@ "containImage": "true", "__index": "6", "dateCreated": "Sun, 03 Apr 2016 19:12:17 GMT", - "press": [ - { - "text": "", - "uri": "" - } - ] + "press": [] }, { "id": "soylent-website", diff --git a/public/assets/ok.css b/public/assets/ok.css index acc7ea2..785a6d6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -654,7 +654,7 @@ ul li { height: 100% } -.nopress span:last-child { +.nopress span:nth-child(6) { display: none; } -- cgit v1.2.3-70-g09d2 From d1714eb9c50ebacc12431fe08122764397106013 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 14:12:38 -0400 Subject: making mobile work better --- index.js | 2 ++ public/assets/js/app.js | 18 +++++++++++----- public/assets/js/lib/ProjectView.js | 25 +++++++++++++++------- public/assets/ok.css | 42 +++++++++++++++++++++++-------------- templates/index.liquid | 13 +++++++++--- 5 files changed, 69 insertions(+), 31 deletions(-) diff --git a/index.js b/index.js index 5162769..d8dc14f 100644 --- a/index.js +++ b/index.js @@ -27,12 +27,14 @@ var app = okcms.createApp({ id: {type: 'string', hidden: true}, title: {type: 'string'}, alternateTitle: {type: 'string'}, + mobileTitle: {type: 'string'}, year: {type: 'number'}, client: {type: 'string'}, link: {type: 'string'}, NatureOfWork: {type: 'text'}, brief: {type: 'text'}, media: {type: 'media-list'}, + mobileMedia: {type: 'media-list'}, containImage: {type: 'flag'}, press: {type: 'link-list'}, }, diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 040b99c..91ccdaf 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -40,13 +40,12 @@ var app = (function() { app.header = new HeaderView() app.nav = new NavView() - // should this go here or elsewhere? - app.resizeItems() + app.$items = $(".item") - var $items = $(".item") + app.resizeItems() app.lookup = {} - app.projects = $items.toArray().map(function(el, i){ + app.projects = app.$items.toArray().map(function(el, i){ var view = new ProjectView ({ el: el, page_number: i, @@ -98,11 +97,20 @@ var app = (function() { } app.resizeItems = function(){ + var windowHeight = window.innerHeight + + if (is_iphone) { + windowHeight -= 44 // account for lower bar + window.scrollTo(0,0) + } + $(".item").each(function(i){ - var height = window.innerHeight - ($(this).find(".bottom").height() + 10) + + var height = windowHeight - ($(this).find(".bottom").height() + 10) if (is_desktop) { height -= $("nav").height() // account for top bar } + $(".cell, .top, .previous, .next, .flickity-viewport", this).css({ 'height': height }) var cellCount = $(this).find(".cell").length if ($.browser.mozilla) { diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 97a7e1c..7e38d2a 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -9,10 +9,7 @@ var ProjectView = View.extend({ initialize: function(opt){ // this.gallery = new GalleryView () - this.project_id = this.$el.data("id") - this.page_number = opt.page_number - this.slide_count = this.$(".cell").length - + this.$iframes = this.$(".cell.iframe") this.$images = this.$(".cell.image") this.$videos = this.$(".cell.video") @@ -20,8 +17,17 @@ var ProjectView = View.extend({ this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") }) if (is_mobile) { - $iframes.remove() - $videos.remove() + this.$iframes.remove() + this.$videos.remove() + this.$iframes = this.$videos = $(".nothing") + if (this.$(".mobile").length) { + this.$(".desktop").remove() + this.$(".mobile").removeClass("desktop") + } + } + else { + this.$(".mobile").remove() + this.$(".desktop").removeClass("desktop") } if (this.$(".cell").length > 1) { @@ -47,7 +53,12 @@ var ProjectView = View.extend({ this.$el.append( $("
").addClass("page-up") ) this.$el.append( $("
").addClass("page-down") ) } - + + // now that the gallery is ready, store this data.. + this.project_id = this.$el.data("id") + this.page_number = opt.page_number + this.slide_count = this.$(".cell").length + this.$el.addClass('hidden') }, diff --git a/public/assets/ok.css b/public/assets/ok.css index 785a6d6..0f09323 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -149,7 +149,7 @@ h3 { top: 0; left: 0; z-index: 2; - transform: translateX(-50vw); + transform: translateZ(0) translateX(-50vw); padding: 24px 0 5px 0; transition: 150ms transform cubic-bezier(0, 0, 0, 1); z-index: 0; @@ -193,16 +193,16 @@ nav { } .navopen .menu { - transform: translateX(0vw); + transform: translateZ(0) translateX(0vw); z-index: 2; opacity: 1; overflow: auto; + background: #f9f9f9; } .navopen .item { - transform: translateX(50vw); + transform: translateZ(0) translateX(50vw); /*opacity:0.5;*/ - background: black; } nav svg g g rect { @@ -265,7 +265,7 @@ span { height: 100vh; width: 100%; display: block; - transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0); + transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0); } .item.intro { @@ -276,10 +276,6 @@ span { background: white; } -.navopen .item.intro { - background: black; -} - .navopen .item.intro > * { background: transparent; } @@ -289,6 +285,20 @@ body.navopen { background: #f9f9f9; } +#curtain { + position: absolute; + top: 0; left: 0; + background: black; + transition: 200ms opacity cubic-bezier(0, 0, 0, 1); + opacity: 0; + z-index: 0; + width: 100%; + height: 100%; +} +.navopen #curtain { + opacity: 1; +} + nav { position: fixed; top: 0; @@ -328,7 +338,7 @@ nav span div:last-child { } .navopen nav span div:last-child { - transform: translateX(110px); + transform: translateZ(0) translateX(110px); transition: 150ms all; position: absolute; right: 5px; @@ -411,12 +421,12 @@ body { } .up .showing.item { - transform: translateY(-10px); + transform: translateZ(0) translateY(-10px); opacity: 0; } .down .showing.item { - transform: translateY(10px); + transform: translateZ(0) translateY(10px); opacity: 0; } @@ -549,12 +559,12 @@ button.previous { .desktop button.previous:hover svg, .desktop button.next:hover svg { opacity: 1; - transform: scale(0.2); + transform: translateZ(0) scale(0.2); } .desktop button.next:active svg, .desktop button.previous:active svg { - transform: scale(0.1); + transform: translateZ(0) scale(0.1); } .cell, @@ -777,10 +787,10 @@ ul li { } .menu { width: 90vw; - transform: translateX(-90vw); + transform: translateZ(0) translateX(-90vw); } .navopen .item { - transform: translateX(90vw); + transform: translateZ(0) translateX(90vw); } .top { margin-top: 30px; diff --git a/templates/index.liquid b/templates/index.liquid index d822579..73b694e 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -60,6 +60,7 @@
fig.1 OF 3 • PG.1
+
@@ -118,11 +119,17 @@
{% for media in project.media %} {% if media.type == 'image' %} -
+
{% elsif media.type == 'video' %} -
+
{% elsif media.type == 'link' %} -
+
+ {% endif %} + {% endfor %} + + {% for media in project.mobileMedia %} + {% if media.type == 'image' %} +
{% endif %} {% endfor %}
-- cgit v1.2.3-70-g09d2 From 70441ec0cc8f4d1258de98adf50d738c32ac757b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 15:00:31 -0400 Subject: optional mobile title --- public/assets/ok.css | 18 ++++++++++++++++++ templates/index.liquid | 5 ++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 0f09323..b8e0ff6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -181,6 +181,10 @@ ul li { text-transform: capitalize; } +ul li[data-id='dump-fm'] { + text-transform: none; +} + .desktop .menu ul li:hover, .menu ul li.active { background: black; @@ -188,6 +192,20 @@ ul li { cursor: pointer; } +.desktop .mobiletitle, +.mobile .desktoptitle { + display: none; +} + +.desktop .desktoptitle +.mobile .mobiletitle { + display: inline; +} + +.menu u { + text-decoration: none; +} + nav { background: white; } diff --git a/templates/index.liquid b/templates/index.liquid index 73b694e..8328227 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -33,7 +33,10 @@ {% for page in pages %}
  • {{ page.title }}
    • {% endfor %} {% for project in projects %} -
  • {{ project.title }}
    • +
  • + {{ project.title }} + {% if project.mobileTitle %}{{ project.mobileTitle }}{% else %}{{ project.title }}{% endif %} +
    • {% endfor %}
    -- cgit v1.2.3-70-g09d2 From 267ab668915933f170a6255f60cfc0bb0713391a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 15:38:44 -0400 Subject: swipe --- public/assets/js/app.js | 4 ++-- public/assets/js/lib/HeaderView.js | 1 - public/assets/js/lib/ProjectView.js | 2 ++ public/assets/js/lib/Scroller.js | 39 ++++++++++++++++++++++++++++++------- public/assets/ok.css | 3 +++ 5 files changed, 39 insertions(+), 10 deletions(-) diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 91ccdaf..5ae0c99 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -1,7 +1,7 @@ var app = (function() { var app = {} - app.navigation_delay = 200 + app.navigation_delay = 150 app.iscroll_options = { mouseWheel: true, @@ -100,7 +100,7 @@ var app = (function() { var windowHeight = window.innerHeight if (is_iphone) { - windowHeight -= 44 // account for lower bar + windowHeight -= 22 // account for lower bar window.scrollTo(0,0) } diff --git a/public/assets/js/lib/HeaderView.js b/public/assets/js/lib/HeaderView.js index 374f84c..59ca255 100644 --- a/public/assets/js/lib/HeaderView.js +++ b/public/assets/js/lib/HeaderView.js @@ -26,7 +26,6 @@ var HeaderView = View.extend({ }, updateSlideCount: function(n){ - console.log(n) if (n > 1) { if (n < 10) n = "0" + n this.$figText.show() diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 7e38d2a..4b1c994 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -123,11 +123,13 @@ var ProjectView = View.extend({ }, previous: function(e){ + if (is_mobile) return; e.stopPropagation() app.nav.previous() }, next: function(e){ + if (is_mobile) return; e.stopPropagation() app.nav.next() }, diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js index 3bebce7..4b4c95b 100644 --- a/public/assets/js/lib/Scroller.js +++ b/public/assets/js/lib/Scroller.js @@ -11,9 +11,9 @@ var Scroller = (function(){ left = opt.left right = opt.right if (is_mobile) { -// document.body.addEventListener("touchstart", touchstart) -// document.body.addEventListener("touchmove", touchmove) -// document.body.addEventListener("touchend", touchend) + document.body.addEventListener("touchstart", touchstart) + document.body.addEventListener("touchmove", touchmove) + document.body.addEventListener("touchend", touchend) } else { document.body.addEventListener("wheel", wheelDelta) @@ -22,10 +22,14 @@ var Scroller = (function(){ } var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop + var touchAdvanceDistance = 60 + var touchFadeDistance = 60 + var $items = $("#items")[0] function touchstart (e) { touching = true touchStartTime = +(new Date) touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY +// $items.className = "no-tween" } function touchmove (e) { if (! touching) return @@ -34,6 +38,15 @@ var Scroller = (function(){ var duration = timestamp - touchStartTime touchEndY = e.touches ? e.touches[0].pageY : e.pageY touchDist = touchStartY - touchEndY + var touchAbs = Math.abs(touchDist) + if (touchAbs > touchAdvanceDistance) { +// touchend(e) + // touchAbs -= 9 + // $items.style.opacity = clamp(1-touchAbs / (touchFadeDistance * 2), 0, 1) + // touchAbs *= -sign(touchDist) + // touchAbs /= 2 + // $items.style[transformProp] = "translateZ(0) translateY(" + touchAbs + "px)" + } } function touchend (e) { if (! touching) return @@ -42,12 +55,24 @@ var Scroller = (function(){ var timestamp = +(new Date) var duration = timestamp - touchStartTime touchDist = touchStartY - touchEndY - if (Math.abs(touchDist) < 10 || duration < 100) { - step(1) - } - else { + console.log("DURATION >>", duration, touchDist) + if ( (duration < 120 && Math.abs(touchDist) < 10) || Math.abs(touchDist) >= touchAdvanceDistance) { touchDist > 0 ? step(1) : step(-1) } + +// $items.className = "" +// setTimeout(function(){ +// $items.style[transformProp] = "translateZ(0) translateY(0)" +// if (Math.abs(touchDist) >= touchAdvanceDistance) { +// $items.style.opacity = 0 +// setTimeout(function(){ +// $items.style.opacity = 1 +// }, 200) +// } +// else { +// $items.style.opacity = 1 +// } +// }, 0) } function wheelDelta (e){ diff --git a/public/assets/ok.css b/public/assets/ok.css index b8e0ff6..25392e5 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -278,6 +278,9 @@ span { display: block; float: none; } +#items.notween { + transition: opacity 0, transform 0; +} .item { height: 100vh; -- cgit v1.2.3-70-g09d2 From 2cee451d5309eb3d0099b4d14e45248054efd834 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 4 Apr 2016 15:46:39 -0400 Subject: tuning swipe --- public/assets/js/lib/Scroller.js | 36 ++++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/public/assets/js/lib/Scroller.js b/public/assets/js/lib/Scroller.js index 4b4c95b..b88ec0f 100644 --- a/public/assets/js/lib/Scroller.js +++ b/public/assets/js/lib/Scroller.js @@ -21,14 +21,19 @@ var Scroller = (function(){ } } - var touching = false, touchStartTime, touchStartY, touchEndY, touchDist, touchScrollTop + var touching = false, touchStartTime + var touchStartY, touchEndY, touchDistY, touchAbsY + var touchStartX, touchEndX, touchDistX, touchAbsX var touchAdvanceDistance = 60 var touchFadeDistance = 60 + var touchGalleryScrubDistance = 100 var $items = $("#items")[0] function touchstart (e) { touching = true touchStartTime = +(new Date) touchStartY = touchEndY = e.touches ? e.touches[0].pageY : e.pageY + touchStartX = touchEndX = e.touches ? e.touches[0].pageX : e.pageX + touchDistY = touchDistX = 0 // $items.className = "no-tween" } function touchmove (e) { @@ -37,15 +42,13 @@ var Scroller = (function(){ var timestamp = +(new Date) var duration = timestamp - touchStartTime touchEndY = e.touches ? e.touches[0].pageY : e.pageY - touchDist = touchStartY - touchEndY - var touchAbs = Math.abs(touchDist) - if (touchAbs > touchAdvanceDistance) { -// touchend(e) - // touchAbs -= 9 - // $items.style.opacity = clamp(1-touchAbs / (touchFadeDistance * 2), 0, 1) - // touchAbs *= -sign(touchDist) - // touchAbs /= 2 - // $items.style[transformProp] = "translateZ(0) translateY(" + touchAbs + "px)" + touchEndX = e.touches ? e.touches[0].pageX : e.pageX + touchDistY = touchStartY - touchEndY + touchDistX = touchStartX - touchEndX + touchAbsY = Math.abs(touchDistY) + touchAbsX = Math.abs(touchDistX) + if (touchAbsY > touchAdvanceDistance && touchAbsX < touchGalleryScrubDistance) { + touchend(e) } } function touchend (e) { @@ -54,10 +57,15 @@ var Scroller = (function(){ touching = false var timestamp = +(new Date) var duration = timestamp - touchStartTime - touchDist = touchStartY - touchEndY - console.log("DURATION >>", duration, touchDist) - if ( (duration < 120 && Math.abs(touchDist) < 10) || Math.abs(touchDist) >= touchAdvanceDistance) { - touchDist > 0 ? step(1) : step(-1) + + console.log("DURATION >>", duration, touchDistY, touchDistX) + + if (touchAbsX > touchGalleryScrubDistance) { + return + } + + if ( (duration < 120 && touchAbsY < 10) || touchAbsY >= touchAdvanceDistance) { + touchDistY > 0 ? step(1) : step(-1) } // $items.className = "" -- cgit v1.2.3-70-g09d2