diff options
Diffstat (limited to 'StoneIsland/platforms/android/assets/www/js/lib/blogs')
5 files changed, 657 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..12aaf7de --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js @@ -0,0 +1,235 @@ +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) + this.deferScrollToTop() + }, + + show: function(){ + this.deferScrollToTop() + app.footer.hide() + this.back() + document.body.className = "archive" + if (! this.populated) { + this.populate( BACKUP_DB.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.populateDecade(0, 3) + this.deferScrollToTop() + }, + + 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){ + if (count && i > count) { return } + 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)) + + this.deferRefresh() + setTimeout(function(){ + this.deferScrollToTop() + }.bind(this), 100) + }, + +// ['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) + } + else { + gray = Math.round( q * 100 ) + opacity = lerp(q, 1, 0.2) + text_opacity = lerp(q, 0.3, 1) + } + 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 diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js new file mode 100755 index 00000000..6eea977f --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js @@ -0,0 +1,114 @@ +var BlogView = View.extend({ + + data: null, + loaded: false, + + us_states: $("#us_states").html(), + ca_states: $("#ca_states").html(), + + initialize: function(){ + this.loader = new Loader () + }, + + fetch: function(fn){ + $.ajax({ + method: "GET", + url: sdk.env === 'test' ? '/db.json' : sdk.cms() + '/db.json', + // url: "https://stone.giraffe.life/db.json", + success: function(data){ + this.success(data) + fn && fn() + }.bind(this), + cache: true, + }) + }, + + refresh: function(){ + this.loaded = false + this.fetch() + }, + + success: function(data){ + + if (this.loaded) return + + this.loaded = true + this.data = data = typeof data == "string" ? JSON.parse(data) : data + + // sdk.env = 'test' + + if (sdk.env === 'test') { + app.store = data.store[1] + } + else { + app.store = data.store[0] + } + + switch (app.store.DepartmentStoreStatus) { + case "open": + app.closed.storeIsClosed = false + break + case "closed": + app.closed.storeIsClosed = true + app.closed.storeClosedMessageOne = app.store.StoreClosedMessageOne + app.closed.storeClosedMessageTwo = app.store.StoreClosedMessageTwo + break + } + + if (app.closed.storeIsClosed && sdk.env !== 'test') { + app.closed.populate(app.store.ClosedStoreImages) + } + else { + app.departments = app.store.Departments + app.department_id = app.store.Departments[0].uri + $("#collections h1").toggleClass("single-dept", app.store.Departments.length == 1) + app.collection.setCollectionName( app.store.Departments[0].text ) + //// demo department for shoes with weird SizeTypeId + // app.department_id = "NKDrtSC" + if (sdk.env === 'test') { + app.department_id = window.location.search.substr(1) || app.department_id + console.log('using test department id', app.department_id) + // app.department_id = 'TSTSZS' + } + app.collection.loaded = false + app.collection.fetch() + } + + app.archive.populate(data.archive) + this.loader.preloadImage(data.hub[0].image[0].uri, function(img){ + app.hub.populate(data.hub) + }.bind(this)) + this.loader.preloadImage(data.story[0].image.uri, function(img){ + app.story.populate(data.story) + setTimeout(function(){ + this.loader.preloadImage(data.story[1].image.uri) + this.loader.preloadImage(data.story[2].image.uri) + }.bind(this), 2000) + }.bind(this)) + + data.page.forEach(function(page){ + app[page.tag].populate(page) + }) + + console.log(app.store.StoreStatus) + + app.product.fitLargeCodes = {} + if (app.store.FittingCodes.length) { + app.store.FittingCodes.split("\n").forEach(function(code){ + app.product.fitLargeCodes[code] = true + }) + } + + if (app.store.BackgroundIsGray === "true") { + app.collection.$el.addClass("gray") + app.product.gallery.$el.addClass("gray") + } + + var states = this.us_states + if (! app.store.NotAvailableInCanada) { + states += this.ca_states + } + $('[name=Province]').html(states) + }, + +})
\ No newline at end of file diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js new file mode 100755 index 00000000..5e2ff67e --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js @@ -0,0 +1,191 @@ +var HubView = ScrollableView.extend({ + + el: "#hub", + template: $("#hub .template").html(), + + events: { + "click .content-share": "share", + "click .store": "store_link", + "click .gallery-left": "gallery_left", + "click .gallery-right": "gallery_right", + "click .play": "play_video", + }, + + initialize: function(){ + this.$content = this.$(".content") + this.$loader = this.$(".loader") + this.scroller = new IScroll('#hub', app.iscroll_options) + HubLoader.init(this) + }, + + show: function(){ + this.deferScrollToTop() + app.footer.hide() + document.body.className = "hub" + HubLoader.isNeeded() + if (! this.populated) { + this.populate( BACKUP_DB.hub ) + } + }, + + galleries: {}, + populated: false, + populate: function(data){ + // sort posts by date, reversed + this.populated = true + this.data = data.map(function(s){ + return [ +moment(s.date), s ] + }).sort(function(a,b){ + return a[0] > b[0] ? -1 : a[0] == b[0] ? 0 : 1 + }).map(function(pair){ + // console.log(pair[1]) + return pair[1] + }) + this.$loader.hide() + this.$content.empty() + this.galleries = {} + HubLoader.add(this.data) + + this.deferScrollToTop() + }, + + append: function(row){ + // id date subtitle body link store image[uri caption] + // console.log(row) + // console.log(moment(row.date)) + var t = this.template.replace(/{{id}}/g, row.id) + .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY")) + .replace(/{{title}}/, row.title) + .replace(/{{subtitle}}/, row.subtitle) + .replace(/{{link}}/, row.link) + .replace(/{{body}}/, row.body.replace(/\n/g, "<br>")) + var $t = $(t) + if (row.store != "true") { + $t.find(".store").remove() + } + this.$content.append($t) + + if (row.image && row.image.length > 1) { + // image gallery + var $gallery = $(".gallery-" + row.id) + row.image.forEach(function(img){ + var el = document.createElement("div") + el.style.backgroundImage = "url(" + img.uri + ")" + el.className = "item" + $gallery.append(el) + }) + var gallery = this.galleries[row.id] = new Flickity( ".gallery-" + row.id, { + selector: '.item', + cellAlign: 'center', + autoPlay: false, + freeScroll: false, + wrapAround: true, + imagesLoaded: true, + prevNextButtons: false, + pageDots: false, + contain: true, + draggable: true, + }) + gallery.on('staticClick', function(e){ + var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"") + app.fullscreenViewer.show(url, url) + }) + } + else { + // single image + var el = document.createElement("div") + if (row.image && row.image.length) { + el.style.backgroundImage = "url(" + row.image[0].uri + ")" + } + el.className = "item" + $(".gallery-" + row.id).append(el) + $(".gallery-" + row.id).data("row", row) + + // video, append play button + if (row.link.match(/youtube|youtu.be|vimeo/)) { + var play = document.createElement("div") + play.className = "play" + $(".gallery-" + row.id).append(play) + $(".gallery-" + row.id).addClass("gallery-video-post") + if (! row.image) { + var url = row.link + var ytid = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0]; + e.style.backgroundImage = "url(https://i.ytimg.com/vi/" + ytid + "/maxresdefault.jpg" + } + } else { + $(el).click(function(){ + app.fullscreenViewer.show(row.image[0].uri) + }) + } + $t.find(".gallery-left").remove() + $t.find(".gallery-right").remove() + } + }, + + store_link: function(){ + app.router.go("store") + }, + play_video: function(e){ + var row = $(e.currentTarget).closest('.gallery-video-post').data("row") + window.open(row.link, '_system') + }, + + gallery_left: function(e){ + var id = $(e.currentTarget).closest(".hub_item").data('id') + this.galleries[id].previous() + }, + gallery_right: function(e){ + var id = $(e.currentTarget).closest(".hub_item").data('id') + this.galleries[id].next() + }, + + share: function(e){ + var title = $(e.currentTarget).parent().find(".title").text() + console.log("share", title) + window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" ) + }, + +}) + +var HubLoader = (function(){ + var queue, view, item, loader + var count = 0 + var HubLoader = {} + var loader + var needed = false + HubLoader.init = function(v){ + view = v + } + HubLoader.add = function(items){ + queue = items + HubLoader.load() + } + HubLoader.load = function(){ + item = queue.shift() + count++ + if (! item) return + if (item.image && item.image.length) { + loader = new Loader (HubLoader.build) + images = item.image.map(function(img){ + return img.uri.replace("http:","https:") + }).filter(function(img){ + return img.uri + }) + loader.preloadImages(images, true) + } + else { + HubLoader.build() + } + } + HubLoader.isNeeded = function(){ + needed = true + } + HubLoader.build = function(){ + view.append(item) + view.scroller.refresh() + if (count < 2 && ! needed) return + // if (count === 10) return + setTimeout(HubLoader.load, count < 10 ? 1000 : 5000) + } + return HubLoader +})() diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js new file mode 100755 index 00000000..f5f8ab2e --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js @@ -0,0 +1,41 @@ +var PageView = ScrollableView.extend({ + + events: { + "click a": "follow_link" + }, + + initialize: function(opt){ + this.page = opt.page + this.setElement("#" + opt.page) + this.$content = this.$(".content") + this.$loader = this.$(".loader") + this.scroller = new IScroll('#' + this.page, app.iscroll_options) + }, + + show: function(){ + this.deferScrollToTop() + app.footer.hide() + document.body.className = this.page + }, + + populate: function(data){ + this.$content.html(data.body.replace(/\n/g, "<br>")) + this.$content.find("a").each(function(){ + var href = $(this).attr("href") // .substr(1, "fuck".length-2) + if (href.indexOf("“")) { + href = href.substr(1, href.length-2) + $(this).attr("href", href) + } + $(this).attr("target", "_system") + }) + }, + + follow_link: function(e){ + e.stopPropagation() + e.preventDefault() + var href = $(e.currentTarget).attr("href") + console.log(href) + window.open(href, '_system') + }, + +})
\ No newline at end of file diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js new file mode 100755 index 00000000..5a7a56d1 --- /dev/null +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js @@ -0,0 +1,76 @@ +var StoryView = ScrollableView.extend({ + + loaded: false, + + el: "#story", + template: $("#story .template").html(), + + events: { + "click .links li": "pick", + }, + + initialize: function(){ + this.sections = {} + this.$img = this.$("img") + this.$content = this.$(".content") + this.$links = this.$(".links") + this.$loader = this.$(".loader") + this.loader = new Loader () + this.scroller = new IScroll('#story', app.iscroll_options) + }, + + show: function(){ + this.deferScrollToTop() + app.footer.hide() + document.body.className = "story" + if (! this.loaded) { + this.populate( BACKUP_DB.story ) + } + }, + + populate: function(data){ + if (this.loaded) { return } + this.loaded = true + this.data = data + this.$loader.hide() + this.$content.empty() + // id title image[uri caption] body + this.data.forEach(function(row){ + var t = this.template.replace(/{{id}}/, row.id) + .replace(/{{body}}/, row.body.replace(/\n/g, "<br>")) + var li = document.createElement("li") + li.dataset.id = row.id + li.innerHTML = row.title + this.sections[row.id] = row + this.$links.append(li) + this.$content.append(t) + }.bind(this)) + + this.set_active( this.data[0].id ) + }, + + pick: function(e){ + var id = e.currentTarget.dataset.id + this.set_active(id) + }, + + set_active: function(id){ + this.$(".active").removeClass("active") + + this.$links.find("[data-id=" + id + "]").addClass("active") + this.$content.find("[data-id=" + id + "]").addClass("active") + + var section = this.sections[id] + + if (navigator.onLine) { + var $replace = this.$img + + this.$img.stop().fadeTo(110,0.65, function() { + $replace.attr("src", section.image.uri) + }).fadeTo(130,1) + } + + this.deferScrollToTop() + }, + +})
\ No newline at end of file |