diff options
Diffstat (limited to 'StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js')
| -rwxr-xr-x | StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js new file mode 100755 index 00000000..254df6d1 --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js @@ -0,0 +1,228 @@ +var ArchiveView = ScrollableView.extend({ + + el: "#archive", + menu_template: $("#archive .menu .template").html(), + row_template: $("#archive .scroll .template").html(), + + events: { + "click .item": "pick", + "mousedown .row": "mousedown", + "touchstart .row": "touchstart", + "mousemove .row": "mousemove", + "touchmove .row": "touchmove", + "mouseup .row": "mouseup", + "touchend .row": "touchend", + }, + + initialize: function(){ + this.$menu_items = this.$(".menu .items") + 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) + }, + + show: function(){ + this.deferScrollToTop() + app.footer.hide() + this.back() + document.body.className = "archive" + }, + + populate: function(data){ + if (this.loaded) { return } + this.loaded = true + this.data = data + this.$loader.hide() + this.$content.empty() + + // id title images[ uri label code caption ] + this.data.forEach(function(row, index){ + + var t = this.menu_template.replace(/{{title}}/, row.title) + var $t = $(t) + $t.data("title", row.title) + $t.data("index", index) + this.$menu_items.append($t) + }.bind(this)) + + this.back() + this.deferScrollToTop() + + this.populateDecade(0, 3) + }, + + populateDecade: function(index, count){ + this.$content.empty() + + var loader = new Loader() + + var row = this.data[index] + + count = count || row.images.length + + row.images.forEach(function(cell, i){ + var $t = $("<div>") + $t.addClass("row").addClass("loading") + var t = this.row_template.replace(/{{image}}/, cell.uri) + .replace(/{{label}}/, cell.label) + .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)) + }, + +// ['transformProp'] = "translateZ(0) translateX(-50%) translateY(-50%) "; +// .image, .text + + touchstart: function(e){ + app.archive.row = e.currentTarget + app.archive.mousedown(e.originalEvent.touches[0]) + }, + touchmove: function(e){ + app.archive.mousemove(e.originalEvent.touches[0]) + }, + touchend: function(e){ + app.archive.mouseup() + }, + + row: null, + image: null, + text: null, + flipped: false, + q: 0, + + mousedown: function(e){ + 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){ + 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){ + 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 |