summaryrefslogtreecommitdiff
path: root/public/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/js')
-rw-r--r--public/assets/js/app.js39
-rw-r--r--public/assets/js/lib/HeaderView.js1
-rw-r--r--public/assets/js/lib/NavView.js8
-rw-r--r--public/assets/js/lib/ProjectView.js71
-rw-r--r--public/assets/js/lib/Scroller.js55
5 files changed, 138 insertions, 36 deletions
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 319a939..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,
@@ -18,8 +18,8 @@ var app = (function() {
}
app.init = function() {
- app.bind()
app.build()
+ app.bind()
app.ready()
}
@@ -28,20 +28,24 @@ 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")
+ app.$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,
@@ -63,7 +67,6 @@ var app = (function() {
gallery && gallery.next()
},
})
-
}
app.ready = function() {
@@ -94,11 +97,20 @@ var app = (function() {
}
app.resizeItems = function(){
+ var windowHeight = window.innerHeight
+
+ if (is_iphone) {
+ windowHeight -= 22 // 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) {
@@ -123,17 +135,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/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/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..4b1c994 100644
--- a/public/assets/js/lib/ProjectView.js
+++ b/public/assets/js/lib/ProjectView.js
@@ -9,10 +9,33 @@ 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
- 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) {
+ 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) {
+ 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 +53,19 @@ var ProjectView = View.extend({
this.$el.append( $("<figure>").addClass("page-up") )
this.$el.append( $("<figure>").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')
+ },
+
+ preload: function(){
+ if (this.images.length) {
+ app.loader.preloadImage( this.images[0] )
+ }
},
show: function(){
@@ -46,6 +82,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("<iframe src='" + uri + "'>")
+ })
+ }
+
app.nav.setActive( this.project_id )
this.showing = true
@@ -58,15 +112,24 @@ var ProjectView = View.extend({
addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
this.$el.addClass("hidden")
this.$el.removeClass("active")
+
+ this.$images.each(function(){
+ $(this).css("background-image", "")
+ })
+ this.$iframes.html("")
+ this.$videos.html("")
+
}.bind(this) )
},
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..b88ec0f 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)
@@ -21,11 +21,20 @@ 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) {
if (! touching) return
@@ -33,7 +42,14 @@ var Scroller = (function(){
var timestamp = +(new Date)
var duration = timestamp - touchStartTime
touchEndY = e.touches ? e.touches[0].pageY : e.pageY
- touchDist = touchStartY - touchEndY
+ 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) {
if (! touching) return
@@ -41,13 +57,30 @@ var Scroller = (function(){
touching = false
var timestamp = +(new Date)
var duration = timestamp - touchStartTime
- touchDist = touchStartY - touchEndY
- if (Math.abs(touchDist) < 10 || duration < 100) {
- step(1)
- }
- else {
- 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 = ""
+// 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){
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 11:37:24 +0000