diff options
Diffstat (limited to 'StoneIsland/platforms/ios')
| -rw-r--r-- | StoneIsland/platforms/ios/www/css/blogs.css | 32 | ||||
| -rw-r--r-- | StoneIsland/platforms/ios/www/js/index.js | 2 | ||||
| -rw-r--r-- | StoneIsland/platforms/ios/www/js/lib/blogs/ArchiveView.js | 134 | ||||
| -rw-r--r-- | StoneIsland/platforms/ios/www/js/lib/blogs/BlogView.js | 1 | ||||
| -rw-r--r-- | StoneIsland/platforms/ios/www/js/vendor/oktween.js | 1 |
5 files changed, 147 insertions, 23 deletions
diff --git a/StoneIsland/platforms/ios/www/css/blogs.css b/StoneIsland/platforms/ios/www/css/blogs.css index f18b27f8..220cb2bf 100644 --- a/StoneIsland/platforms/ios/www/css/blogs.css +++ b/StoneIsland/platforms/ios/www/css/blogs.css @@ -53,7 +53,7 @@ padding: 10px; } -#hub .content .body { +#hub .content .body, #story .content .body { letter-spacing:0.35px; font-size:12px; width:calc(100vw - 40px); @@ -62,10 +62,14 @@ clear:both } -#hub .content .body:last-child { +#hub .content .body:last-child { margin:10px auto 100px; } +#story .content .body:last-child { + margin:10px auto 50px; +} + .hub_item { position: relative; } @@ -207,8 +211,18 @@ ul.links { font-size:14px; } + .archive h2 { - font-size:32px + font-size: 25px; + font-weight: normal; +} +.archive h2 b { + font-size: 28px; +} +.archive .body { + font-size: 14px; + line-height: 1.2em; + font-weight: 100; } #archive .heading { @@ -264,16 +278,23 @@ ul.links { top: 0; left: 0; height: 100%; } +#archive .row:first-of-type { + margin-top: 7em; +} +#archive .row:last-of-type { + margin-bottom: 10em; +} #archive .row { position: relative; min-height: 80vh; -webkit-perspective: 500px; perspective: 500px; + margin-bottom: 5em; } #archive .row .image { width: 100%; height: 100%; background-repeat: no-repeat; - background-size: 80% auto; + background-size: contain; background-position: center center; } #archive .row.loading .image { @@ -313,4 +334,5 @@ content:''; top:50%; left:50%; transform:translateY(-50%) translateX(-50%); -}
\ No newline at end of file +} + diff --git a/StoneIsland/platforms/ios/www/js/index.js b/StoneIsland/platforms/ios/www/js/index.js index 573ce720..32b97d4b 100644 --- a/StoneIsland/platforms/ios/www/js/index.js +++ b/StoneIsland/platforms/ios/www/js/index.js @@ -3,7 +3,7 @@ var app = (function(){ app.init = function(){ - sdk.init({ env: "test" }) + sdk.init({ env: "development" }) app.bind() app.build() diff --git a/StoneIsland/platforms/ios/www/js/lib/blogs/ArchiveView.js b/StoneIsland/platforms/ios/www/js/lib/blogs/ArchiveView.js index c156aed0..785717a8 100644 --- a/StoneIsland/platforms/ios/www/js/lib/blogs/ArchiveView.js +++ b/StoneIsland/platforms/ios/www/js/lib/blogs/ArchiveView.js @@ -19,17 +19,22 @@ var ArchiveView = ScrollableView.extend({ this.$content = this.$(".content") this.$loader = this.$(".loader") this.scroller = new IScroll('#archive .scroll', app.iscroll_options) + this.$subtitle = this.$('.subtitle') + this.subtitle_html = this.$subtitle.html() + }, back: function(){ this.$el.addClass("menu") app.header.set_back(false) + this.$subtitle.html( this.subtitle_html ) }, pick: function(e){ this.$el.removeClass("menu") app.header.set_back(true) var index = $(e.currentTarget).data("index") + this.$subtitle.html( $(e.currentTarget).text() ) this.populateDecade(index) }, @@ -70,8 +75,9 @@ var ArchiveView = ScrollableView.extend({ var row = this.data[index] + count = count || row.images.length + row.images.forEach(function(cell, i){ - if (i > count) return var $t = $("<div>") $t.addClass("row").addClass("loading") var t = this.row_template.replace(/{{image}}/, cell.uri) @@ -79,9 +85,24 @@ var ArchiveView = ScrollableView.extend({ .replace(/{{code}}/, cell.code) .replace(/{{caption}}/, cell.caption) $t.html(t) + $t.data("flipped", false) this.$content.append($t) - + + var item = $t[0] + var aa = this.build_aa_item( item ) + aa.q = 0 + this.render( aa, 0 ) + aa.flipped = true + this.fix_z_index( aa ) + + var $text = $t.find(".text") + if ( ($text.height() % 2) == 1) { + $text.css("margin-bottom", "1px") + } + loader.preloadImage(cell.uri, function(){ + aa.flipped = false + this.fix_z_index( aa ) $t.removeClass('loading') }.bind(this)) }.bind(this)) @@ -91,36 +112,117 @@ var ArchiveView = ScrollableView.extend({ // .image, .text touchstart: function(e){ - this.$row = e.currentTarget - this.mousedown(e.touches[0]) + app.archive.row = e.currentTarget + app.archive.mousedown(e.touches[0]) }, touchmove: function(e){ - this.mousemove(e.touches[0]) + app.archive.mousemove(e.touches[0]) }, touchend: function(e){ - this.mouseup() + app.archive.mouseup() }, - mouse: { x: 0, y: 0 }, - $row: null, + + row: null, + image: null, + text: null, + flipped: false, + q: 0, mousedown: function(e){ - this.$row = this.$row || e.currentTarget - this.mouse.x = e.pageX - this.mouse.y = e.pageY + var aa = app.archive.item = app.archive.build_aa_item( app.archive.row || e.currentTarget ) + aa.mouse_x = e.pageX + aa.mouse_y = e.pageY + }, + + build_aa_item: function(el){ + var aa = {} + aa.row = el + aa.flipped = $(aa.row).data('flipped') + aa.image = $(aa.row).find(".image")[0] + aa.text = $(aa.row).find(".text")[0] + aa.q = 0 + return aa }, + mousemove: function(e){ - var dx = ( this.mouse.x - e.pageX ) / window.innerWidth - var dy = ( this.mouse.y - e.pageY ) / window.innerWidth - this.$row.style['transformProp'] = [ + if (! app.archive.item) return + aa = app.archive.item + var dx = ( aa.mouse_x - e.pageX ) / window.innerWidth + var dy = ( aa.mouse_y - e.pageY ) / window.innerWidth + + var gray, opacity, q + + dx = Math.abs(dx) + dx *= 2 + q = clamp( dx, 0, 1 ) + + this.render(aa, q) + + aa.q = q +/* + aa.row.style['transformProp'] = [ "translateZ(0)", "translateX(-50%)", "translateY(-50%)", "rotateY(" + dx + "deg)", ].join(" ") +*/ + }, + + render: function(aa, q){ + if ( aa.flipped ) { + gray = Math.round( (1-q) * 100 ) + opacity = lerp(q, 0.2, 1) + text_opacity = lerp(q, 1, 0.3) +// console.log("<", gray, opacity) + } + else { + gray = Math.round( q * 100 ) + opacity = lerp(q, 1, 0.2) + text_opacity = lerp(q, 0.3, 1) +// console.log(">", gray, opacity) + } + aa.image.style.WebkitFilter = "grayscale(" + gray + "%)" + aa.image.style.opacity = opacity + aa.text.style.opacity = text_opacity }, + + margin: 0.3, + mouseup: function(e){ - this.mouse.x = this.mouse.y = 0 - this.$row = null + aa = app.archive.item + app.archive.row = null + app.archive.item = null + var was_flipped = aa.flipped + var flipped = aa.flipped ? (aa.q < app.archive.margin) : (aa.q > app.archive.margin) + var dest = was_flipped == flipped ? 0 : 1 + $(aa.row).data('flipped', flipped) + + oktween.add({ + obj: {q: aa.q}, + to: {q: dest}, + duration: 200 * Math.abs(aa.q-dest), + update: function(o, dt){ + app.archive.render(aa, o.q) + }, + }) + + this.fix_z_index(aa) + }, + + fix_z_index: function (aa) { + if ( aa.flipped ) { + console.log(aa.q) + z = aa.q > app.archive.margin ? 2 : 1 + zz = aa.q > app.archive.margin ? 1 : 2 + } + else { + z = aa.q < app.archive.margin ? 2 : 1 + zz = aa.q < app.archive.margin ? 1 : 2 + } + aa.image.style.zIndex = z + aa.text.style.zIndex = zz + }, })
\ No newline at end of file diff --git a/StoneIsland/platforms/ios/www/js/lib/blogs/BlogView.js b/StoneIsland/platforms/ios/www/js/lib/blogs/BlogView.js index ddfff9e6..327b5328 100644 --- a/StoneIsland/platforms/ios/www/js/lib/blogs/BlogView.js +++ b/StoneIsland/platforms/ios/www/js/lib/blogs/BlogView.js @@ -24,7 +24,6 @@ var BlogView = View.extend({ this.data = data = typeof data == "string" ? JSON.parse(data) : data app.archive.populate(data.archive) - this.loader.preloadImage(data.hub[0].image[0].uri, function(img){ app.hub.populate(data.hub) }) diff --git a/StoneIsland/platforms/ios/www/js/vendor/oktween.js b/StoneIsland/platforms/ios/www/js/vendor/oktween.js index d0d2b7cb..7e820b04 100644 --- a/StoneIsland/platforms/ios/www/js/vendor/oktween.js +++ b/StoneIsland/platforms/ios/www/js/vendor/oktween.js @@ -40,6 +40,7 @@ var oktween = (function(){ tween.keys = Object.keys(tween.from) } tween.delay = tween.delay || 0 + tween.duration = tween.duration || 200 tween.start = last_t + tween.delay tween.done = false tween.then = function(fn){ tween.after = [fn] } |