diff options
| -rw-r--r-- | README.md | 5 | ||||
| -rw-r--r-- | StoneIsland/www/css/nav.css | 8 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 1 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/_router.js | 1 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/ArchiveView.js | 5 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/BlogView.js | 6 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/HubView.js | 5 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/blogs/StoryView.js | 9 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/CollectionView.js | 21 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/ProductView.js | 15 | ||||
| -rw-r--r-- | StoneIsland/www/js/vendor/view/router.js | 8 | ||||
| -rw-r--r-- | StoneIsland/www/js/vendor/view/scrollable.js | 12 |
12 files changed, 71 insertions, 25 deletions
@@ -1,3 +1,8 @@ stone island ============ +to run app locally: + +* `node proxy` +* load http://lvh.me:9090/ + diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index 03f468a7..381a9f28 100644 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -6,7 +6,7 @@ top: 0; left: 0; width: 249px; -webkit-transform: translateZ(0) translateX(-249px); - -webkit-transition: -webkit-transform 0.3s; + -webkit-transition: -webkit-transform 0.1s; background: #fff; } #content { @@ -15,7 +15,7 @@ width: 100%; height: 100%; overflow: hidden; -webkit-transform: translateZ(0) translateX(0px); - -webkit-transition: -webkit-transform 0.3s; + -webkit-transition: -webkit-transform 0.1s; } .ios #nav, .ios #content { @@ -193,8 +193,8 @@ width: 100%; height: 100%; background: rgba(72,72,72,0.8); opacity: 0; - -webkit-transition: opacity 0.4s; - transition: opacity 0.4s; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; } #curtain.visible { pointer-events: auto; diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index b2f89a28..e0183655 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -350,6 +350,7 @@ <script src="js/vendor/view/view.js"></script> <script src="js/vendor/view/formview.js"></script> <script src="js/vendor/view/router.js"></script> +<script src="js/vendor/view/scrollable.js"></script> <script src="js/lib/cart/CartView.js"></script> <script src="js/lib/cart/CartBilling.js"></script> diff --git a/StoneIsland/www/js/lib/_router.js b/StoneIsland/www/js/lib/_router.js index 567d1aad..8a117e39 100644 --- a/StoneIsland/www/js/lib/_router.js +++ b/StoneIsland/www/js/lib/_router.js @@ -43,6 +43,7 @@ var SiteRouter = Router.extend({ product: function(code){ app.view = app.product app.product.load(code) + app.product.show() }, hub: function(){ diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js index 13bacb22..783254cc 100644 --- a/StoneIsland/www/js/lib/blogs/ArchiveView.js +++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js @@ -20,11 +20,12 @@ var ArchiveView = View.extend({ this.data = data this.$loader.hide() this.$content.empty() + + // id title images[ uri label code caption ] this.data.forEach(function(row){ - var t = this.template.replace(/{{image}}/, row.image.url) + var t = this.template.replace(/{{image}}/, row.images[0].uri) .replace(/{{code}}/, row.code) .replace(/{{title}}/, row.title) - .replace(/{{body}}/, row.body) this.$content.append(t) }.bind(this)) }, diff --git a/StoneIsland/www/js/lib/blogs/BlogView.js b/StoneIsland/www/js/lib/blogs/BlogView.js index 70fc910a..573fe3c3 100644 --- a/StoneIsland/www/js/lib/blogs/BlogView.js +++ b/StoneIsland/www/js/lib/blogs/BlogView.js @@ -19,13 +19,13 @@ var BlogView = View.extend({ success: function(data){ this.loaded = true this.data = data - this.loader.preloadImage(data.archive[0].image.url, function(img){ + this.loader.preloadImage(data.archive[0].images[0].uri, function(img){ app.archive.populate(data.archive) }) - this.loader.preloadImage(data.hub[0].image.url, function(img){ + this.loader.preloadImage(data.hub[0].image.uri, function(img){ app.hub.populate(data.hub) }) - this.loader.preloadImage(data.story[0].image.url, function(img){ + this.loader.preloadImage(data.story[0].image.uri, function(img){ app.story.populate(data.story) }) }, diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js index 95cdef3f..62e8d10f 100644 --- a/StoneIsland/www/js/lib/blogs/HubView.js +++ b/StoneIsland/www/js/lib/blogs/HubView.js @@ -20,14 +20,15 @@ var HubView = View.extend({ this.data = data this.$loader.hide() this.$content.empty() + // id date subtitle body link image[uri caption] this.data.forEach(function(row){ - var t = this.template.replace(/{{image}}/, row.image.url) + var t = this.template.replace(/{{image}}/, row.images[0].uri) .replace(/{{date}}/, row.date) .replace(/{{code}}/, row.code) .replace(/{{title}}/, row.title) .replace(/{{subtitle}}/, row.subtitle) .replace(/{{link}}/, row.link) - .replace(/{{body}}/, row.body) + .replace(/{{body}}/, row.body.replace(/\n/g, "<br>")) this.$content.append(t) }.bind(this)) }, diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js index b47b0488..efdd65a7 100644 --- a/StoneIsland/www/js/lib/blogs/StoryView.js +++ b/StoneIsland/www/js/lib/blogs/StoryView.js @@ -4,6 +4,7 @@ var StoryView = View.extend({ template: $("#story .template").html(), events: { + "load img": "image_loaded" }, initialize: function(){ @@ -20,13 +21,17 @@ var StoryView = View.extend({ 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(/{{image}}/, row.image.url) + var t = this.template.replace(/{{image}}/, row.image.uri) .replace(/{{date}}/, row.date) .replace(/{{title}}/, row.title) - .replace(/{{body}}/, row.body) + .replace(/{{body}}/, row.body.replace(/\n/g, "<br>")) this.$content.append(t) }.bind(this)) }, + + image_loaded: function(){ + }, })
\ No newline at end of file diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js index d638171b..a1a506a3 100644 --- a/StoneIsland/www/js/lib/products/CollectionView.js +++ b/StoneIsland/www/js/lib/products/CollectionView.js @@ -1,4 +1,5 @@ -var CollectionView = View.extend({ + +var CollectionView = ScrollableView.extend({ el: "#collection", template: $("#collection .template").html(), @@ -25,18 +26,25 @@ var CollectionView = View.extend({ }, fetch: function(){ + if (this.loaded) return this.$loader.show() sdk.product.collection({ - gallery_id: 31617, + gallery_id: 32780, success: this.populate.bind(this) }) }, populate: function(data){ + if (this.loaded && ! data) { + data = this.data + } + else { + this.data = data + } + this.loaded = true this.$loader.hide() this.$content.empty() // DefaultCode10 - console.log(data) data.SearchResponseFull.Results.Items.forEach(function(item){ this.items[ item['Code8'] ] = item var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f')) @@ -44,10 +52,9 @@ var CollectionView = View.extend({ this.$content.append(t) }.bind(this)) - setTimeout(function(){ - this.scroller.refresh() - app.collection.scroller.scrollTo(0, 0) - }.bind(this), 0) + this.deferScrollToTop() + + this.afterFetchCallback && this.afterFetchCallback() }, pick: function(e){ diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js index c0a1ee79..0e4063df 100644 --- a/StoneIsland/www/js/lib/products/ProductView.js +++ b/StoneIsland/www/js/lib/products/ProductView.js @@ -8,7 +8,7 @@ var SIZE_LOOKUP = { "XXXL": "XXX-LARGE", }; -var ProductView = View.extend({ +var ProductView = ScrollableView.extend({ el: "#product", @@ -44,7 +44,16 @@ var ProductView = View.extend({ cache: {}, load: function(code, data){ - window.location.href = "#/product/" + code + this.show() + if (! app.collection.loaded) { + app.collection.afterFetchCallback = this.load.bind(this, code, data) + app.collection.fetch() + return + } + else { + app.collection.afterFetchCallback = null + } + window.location.href = "#/store/" + code data = data || app.collection.items[code] if (code in this.cache) { return this.populate(data, this.cache[code]) @@ -59,6 +68,8 @@ var ProductView = View.extend({ }, populate: function(data, details){ + this.show() +console.log(data, details) var name_partz = data['ModelNames'].split(' ') var num = name_partz.shift() var title = name_partz.join(' ') diff --git a/StoneIsland/www/js/vendor/view/router.js b/StoneIsland/www/js/vendor/view/router.js index d766880f..a8ec331f 100644 --- a/StoneIsland/www/js/vendor/view/router.js +++ b/StoneIsland/www/js/vendor/view/router.js @@ -14,8 +14,10 @@ var Router = View.extend({ }, parseRoute: function(pathname){ - - if (pathname[0] !== "/" && pathname[0] !== "#") { pathname = "/" + pathname } + + pathname = pathname.replace(/^#/, "") + + if (pathname[0] !== "/") { pathname = "/" + pathname } var routes = this.routes, path = pathname.split("/"); @@ -25,7 +27,7 @@ var Router = View.extend({ path[i] = null } } - + if (pathname in routes) { this[this.routes[pathname]]() return diff --git a/StoneIsland/www/js/vendor/view/scrollable.js b/StoneIsland/www/js/vendor/view/scrollable.js new file mode 100644 index 00000000..d3540723 --- /dev/null +++ b/StoneIsland/www/js/vendor/view/scrollable.js @@ -0,0 +1,12 @@ +var ScrollableView = View.extend({ + + deferScrollToTop: function(){ + setTimeout(this.scrollToTop.bind(this), 0) + }, + + scrollToTop: function(){ + this.scroller.refresh() + app.collection.scroller.scrollTo(0, 0) + }, + +})
\ No newline at end of file |