summaryrefslogtreecommitdiff
path: root/StoneIsland/platforms/android/assets/www/js/lib/blogs
diff options
context:
space:
mode:
Diffstat (limited to 'StoneIsland/platforms/android/assets/www/js/lib/blogs')
-rwxr-xr-xStoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js228
-rwxr-xr-xStoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js70
-rwxr-xr-xStoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js113
-rwxr-xr-xStoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js24
-rwxr-xr-xStoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js65
5 files changed, 500 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
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..9b49abbd
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/BlogView.js
@@ -0,0 +1,70 @@
+var BlogView = View.extend({
+
+ data: null,
+ loaded: false,
+ initialize: function(){
+ this.loader = new Loader ()
+ this.fetch()
+ },
+
+ fetch: function(){
+ $.ajax({
+ method: "GET",
+// url: sdk.env == 'test' ? '/db.json' : "http://stone.sup.land/db.json",
+ url: "http://stone.sup.land/db.json",
+ success: this.success.bind(this),
+ cache: true,
+ })
+ },
+
+ success: function(data){
+
+ if (this.loaded) return
+
+ this.loaded = true
+ 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)
+ })
+ this.loader.preloadImage(data.story[0].image.uri, function(img){
+ app.story.populate(data.story)
+ })
+ data.page.forEach(function(page){
+ app[page.tag].populate(page)
+
+ })
+ app.collection.setCollectionName( data.store[0].collection )
+
+ app.closed.populate(data.store[0].ClosedStoreImages)
+ switch (data.store[0].StoreStatus) {
+ case "open":
+ app.closed.storeIsClosed = false
+ break
+ case "closed":
+ app.closed.storeIsClosed = true
+ app.closed.storeOpenDate = null
+ break
+ case "openson":
+ app.closed.storeIsClosed = true
+ app.closed.storeOpenDate = moment(data.store[0].OpensOn)
+ break
+ }
+ console.log(data.store[0].StoreStatus)
+
+ var fits_large = (data.store[0].FitsLarge === "true")
+ app.product.$fit.toggle( fits_large )
+ app.product.$sizing.toggle( fits_large )
+
+ if (data.store[0].BackgroundIsGray === "true") {
+ app.collection.$el.addClass("gray")
+ app.product.gallery.$el.addClass("gray")
+ }
+
+ app.gallery_id = data.store[0].CollectionId
+
+ app.collection.fetch()
+ },
+
+}) \ 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..49c05ff6
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js
@@ -0,0 +1,113 @@
+var HubView = ScrollableView.extend({
+
+ el: "#hub",
+ template: $("#hub .template").html(),
+
+ events: {
+ "click .share": "content-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)
+ },
+
+ show: function(){
+ this.deferScrollToTop()
+ app.footer.hide()
+ document.body.className = "hub"
+ },
+
+ galleries: {},
+ populate: function(data){
+ this.data = data
+ this.$loader.hide()
+ this.$content.empty()
+ this.galleries = {}
+ // id date subtitle body link store image[uri caption]
+ this.data.forEach(function(row){
+ // console.log(row)
+ 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.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)
+ })
+ 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,
+ })
+ }
+ else {
+ // single image
+ var el = document.createElement("div")
+ 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)
+ }
+ $t.find(".gallery-left").remove()
+ $t.find(".gallery-right").remove()
+ }
+
+ }.bind(this))
+
+ this.deferScrollToTop()
+ },
+
+ 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(){
+ window.plugins.socialsharing.share( this.item['ModelNames'], null, null, "http://stoneisland.com/")
+ },
+
+}) \ No newline at end of file
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..4bf05430
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/PageView.js
@@ -0,0 +1,24 @@
+var PageView = ScrollableView.extend({
+
+ events: {
+ },
+
+ 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>"))
+ },
+
+}) \ 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..84684ff7
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/StoryView.js
@@ -0,0 +1,65 @@
+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.scroller = new IScroll('#story', app.iscroll_options)
+ },
+
+ show: function(){
+ this.deferScrollToTop()
+ app.footer.hide()
+ document.body.className = "story"
+ },
+
+ populate: function(data){
+ if (this.loaded) { console.warn("populate called twice"); 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.$links.find(".active").removeClass("active")
+ this.$links.find("[data-id=" + id + "]").addClass("active")
+
+ this.$content.find(".active").removeClass("active")
+ this.$content.find("[data-id=" + id + "]").addClass("active")
+
+ var section = this.sections[id]
+ this.$img.attr("src", section.image.uri)
+ this.deferScrollToTop()
+ },
+
+}) \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-13 09:33:19 +0000