diff options
Diffstat (limited to 'StoneIsland')
| -rw-r--r-- | StoneIsland/www/css/nav.css | 15 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 18 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/nav/CurtainView.js | 17 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/CollectionView.js | 44 | ||||
| -rw-r--r-- | StoneIsland/www/js/lib/products/Selector.js | 16 |
5 files changed, 83 insertions, 27 deletions
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css index e1e045a3..3173135e 100644 --- a/StoneIsland/www/css/nav.css +++ b/StoneIsland/www/css/nav.css @@ -204,15 +204,26 @@ opacity: 1; z-index: 2; } +#curtain.white { + background: rgba(255,255,255,0.8); +} /* SELECTOR */ #selector { display: none; - height: 100%; width: 100%; - position: absolute; top: 0; left: 0; + width: 100%; + position: absolute; bottom: 0; left: 0; background: #fff; + z-index: 2; +} +#selector .options div { + width: 100%; + background: white; + text-align: center; + padding: 5px; + font-size: 14px; } /* CONTENT */ diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html index 410bd36d..be6502e4 100644 --- a/StoneIsland/www/index.html +++ b/StoneIsland/www/index.html @@ -193,15 +193,6 @@ </div> </div> - <div id="selector"> - <span class="close"></span> - <div class="options"> - <script type="text/html" class="template"> - <span data-id="{{id}}">{{value}}</span> - </script> - </div> - </div> - <!-- ACCOUNT ================================================ --> @@ -364,9 +355,16 @@ </div> - <div id="curtain"></div> + <div id="selector"> + <div class="options"> + <script type="text/html" class="template"> + <div data-id="{{id}}">{{label}}</div> + </script> + </div> + </div> + </div> <script type="text/html" id="creditcard_template"> diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js index ad478335..d444fd60 100644 --- a/StoneIsland/www/js/lib/nav/CurtainView.js +++ b/StoneIsland/www/js/lib/nav/CurtainView.js @@ -9,18 +9,31 @@ var CurtainView = View.extend({ initialize: function(){ }, - show: function(){ + klass: null, + show: function(klass){ this.$el.addClass("visible") + if (klass) { + this.klass = klass + this.$el.addClass(klass) + } }, - hide: function(){ + hide: function(k){ this.$el.removeClass("visible") + if (this.klass) { + setTimeout( function(){ + this.$el.removeClass(this.klass) + }.bind(this), 200 ) + } }, click: function(){ if (document.body.classList.contains("nav")) { app.nav.hide() } + if (app.selector.visible) { + app.selector.hide() + } }, })
\ 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 dbece93b..652aa92b 100644 --- a/StoneIsland/www/js/lib/products/CollectionView.js +++ b/StoneIsland/www/js/lib/products/CollectionView.js @@ -32,7 +32,34 @@ var CollectionView = ScrollableView.extend({ }, ok: function(){ - // this.filter() + var cats = this.data.SearchResponseFull.Refinements.Filters.Categories.map(function(cat){ + return { + id: cat.Id, + label: cat.Value + } + }) + if (this.filter_choice) { + cats.push({ + id: "__remove_filter", + label: "REMOVE FILTER", + }) + } + app.selector.select(cats, this.filter.bind(this)) + }, + filter_choice: null, + filter: function(choice){ + this.$content.empty() + if (choice.id == "__remove_filter") { + this.filter_choice = null + this.data.SearchResponseFull.Results.Items.forEach(this.append.bind(this)) + } + else { + this.filter_choice = choice + this.data.SearchResponseFull.Results.Items.filter(function(item){ + return item.MacroCategory == choice.label + }).forEach(this.append.bind(this)) + } + this.deferScrollToTop() }, fetch: function(){ @@ -56,18 +83,19 @@ var CollectionView = ScrollableView.extend({ this.$loader.hide() this.$content.empty() // DefaultCode10 - data.SearchResponseFull.Results.Items.forEach(function(item){ - this.items[ item['Code8'] ] = item - var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f')) - .replace(/{{code8}}/, item['Code8']) - this.$content.append(t) - }.bind(this)) - + data.SearchResponseFull.Results.Items.forEach(this.append.bind(this)) this.deferScrollToTop() } this.afterFetchCallback && this.afterFetchCallback() }, + append: function(item){ + this.items[ item['Code8'] ] = item + var t = this.template.replace(/{{image}}/, sdk.image(item['DefaultCode10'], '11_f')) + .replace(/{{code8}}/, item['Code8']) + this.$content.append(t) + }, + pick: function(e){ var code = $(e.currentTarget).data("code") var data = this.items[code] diff --git a/StoneIsland/www/js/lib/products/Selector.js b/StoneIsland/www/js/lib/products/Selector.js index 1580624b..76c498ec 100644 --- a/StoneIsland/www/js/lib/products/Selector.js +++ b/StoneIsland/www/js/lib/products/Selector.js @@ -5,7 +5,7 @@ var Selector = View.extend({ events: { "click .close": "hide", - "click span": "pick", + "click .options div": "pick", }, initialize: function(){ @@ -15,26 +15,32 @@ var Selector = View.extend({ lookup: null, callback: null, select: function(options, callback){ - var lookup = this.lookup = {} + this.lookup = {} + this.callback = callback || function(item){ console.log(item) } this.$options.empty() options.forEach(function(opt){ - lookup[opt.id] = opt + this.lookup[String(opt.id)] = opt var t = this.template.replace(/{{id}}/, opt.id) .replace(/{{label}}/, opt.label) this.$options.append(t) - }) + }.bind(this)) this.$el.show() + app.curtain.show("white") + this.visible = true }, hide: function(){ this.lookup = this.callback = null this.$el.hide() + app.curtain.hide() + this.visible = false }, pick: function(e){ var $option = $(e.currentTarget) - var id = $option.data("id") + var id = String($option.data("id")) var selection = this.lookup[id] + this.callback( selection ) this.hide() }, |