diff options
Diffstat (limited to 'StoneIsland/platforms/android/assets/www/js')
8 files changed, 150 insertions, 66 deletions
diff --git a/StoneIsland/platforms/android/assets/www/js/index.js b/StoneIsland/platforms/android/assets/www/js/index.js index b90f74b1..42cec6f1 100755 --- a/StoneIsland/platforms/android/assets/www/js/index.js +++ b/StoneIsland/platforms/android/assets/www/js/index.js @@ -12,26 +12,11 @@ var app = (function(){ sdk.init({ env: "production" }) } - accessibility.init(app.prebuild) // check if we can do native scrolling before build - } - - app.prebuild = function(){ - app.bind() - app.build() - - app.iscroll_options = { - mouseWheel: true, - scrollbars: true, - disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues - disableTouch: false, // false if you want the slider to be usable with touch devices - disableMouse: false // false if you want the slider to be usable with a mouse (desktop) - } - if (window.cordova) { - document.addEventListener('deviceready', app.ready, false) + document.addEventListener('deviceready', app.device_ready, false) } else { - app.ready() + app.device_ready() } } @@ -77,8 +62,24 @@ var app = (function(){ app.selector = new Selector () } + app.device_ready = function(){ + accessibility.init(app.ready) // check if we can do native scrolling before build + } + app.ready = function(){ console.log(">> READY") + + app.bind() + app.build() + + app.iscroll_options = { + mouseWheel: true, + scrollbars: true, + disablePointer: is_android ? true : false, // important to disable the pointer events that causes the issues + disableTouch: false, // false if you want the slider to be usable with touch devices + disableMouse: false // false if you want the slider to be usable with a mouse (desktop) + } + if (window.cordova) { document.addEventListener('pause', app.paused, false) document.addEventListener('resume', app.resumed, false) diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js index f10f7744..92427b6f 100755 --- a/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/ArchiveView.js @@ -58,10 +58,9 @@ var ArchiveView = ScrollableView.extend({ // 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("aria-label", stonewash(row.title.replace(/'/g, " '").trim())) + $t.data("aria-label", stonewash(row.title.replace(/'0/g, " 20").replace(/'9/g, " 19").trim())) $t.data("title", row.title) $t.data("index", index) this.$menu_items.append($t) @@ -86,7 +85,7 @@ var ArchiveView = ScrollableView.extend({ var $t = $("<div>") $t.addClass("row").addClass("loading") var t = this.row_template.replace(/{{image}}/, cell.uri) - .replace(/{{label}}/, cell.label) + .replace(/{{label}}/g, cell.label) .replace(/{{code}}/, cell.code) .replace(/{{caption}}/, cell.caption) $t.html(t) diff --git a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js index a0ee9dd0..d3b15f77 100755 --- a/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/blogs/HubView.js @@ -94,10 +94,18 @@ var HubView = ScrollableView.extend({ app.fullscreenViewer.show(url, url) }) $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.") + if (accessibility.voiceOver) { + $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.") + $(".gallery-target-" + row.id).click(function(e){ + e && e.preventDefault() + var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"") + app.fullscreenViewer.show(url, url) + }) + } } else { // single image - var el = document.createElement("div") + var el = document.createElement(accessibility.voiceOver ? "a" : "div") if (row.image && row.image.length) { el.style.backgroundImage = "url(" + row.image[0].uri + ")" } @@ -112,16 +120,28 @@ var HubView = ScrollableView.extend({ $(".gallery-" + row.id).addClass("gallery-video-post") $(".gallery-" + row.id).attr('role', 'link') $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube") + // $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Tap to watch the video on Youtube") 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" } + // $(".gallery-target-" + row.id).click(function(e){ + // e && e.preventDefault() + // window.open(row.link, '_system') + // }) + $(".gallery-target-" + row.id).remove() } else { - $(el).click(function(){ + $(el).click(function(e){ + e && e.preventDefault() app.fullscreenViewer.show(row.image[0].uri) }) $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image") + $(".gallery-target-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image.") + $(".gallery-target-" + row.id).click(function(e){ + e && e.preventDefault() + app.fullscreenViewer.show(row.image[0].uri) + }) } $t.find(".gallery-left").remove() $t.find(".gallery-right").remove() diff --git a/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js b/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js index 8108e461..31ddaf23 100644 --- a/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/etc/accessibility.js @@ -17,8 +17,10 @@ var accessibility = (function() { return ready() } if ('MobileAccessibility' in window) { + console.log('init accessibility') accessibility.build(ready) } else { + console.log('MobileAccessibility not found') ready() } } diff --git a/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js b/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js index 8641668f..855c37bd 100755 --- a/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/nav/FooterView.js @@ -17,12 +17,14 @@ var FooterView = View.extend({ if (cancel) { this.$ok.removeClass("wide") this.$cancel.show().html(cancel) + this.$cancel.attr('aria-label', cancel.toLowerCase()) } else { this.$ok.addClass("wide") this.$cancel.hide() } this.$ok.html(ok) + this.$ok.attr('aria-label', ok.toLowerCase()) this.$el.show() }, diff --git a/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js b/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js index d6f5723c..e84caa68 100755 --- a/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/products/GalleryView.js @@ -58,19 +58,40 @@ var GalleryView = View.extend({ draggable: true, }) - this.gallery.on('staticClick', function(e){ - var currentImage = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"") + this.gallery.on('change', function(){ + var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"") var partz = currentImage.split("_") var head = partz[0] var size = partz[1] var tail = partz[2] var end_partz = tail.split(/\./) var style = end_partz[0] - var largest_size = large_styles[style] - var hiresImage = [head, largest_size, tail].join("_") - app.fullscreenViewer.show(currentImage, hiresImage) + var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view" + $("#product .gallery-target").attr('aria-label', label) }) + + this.gallery.on('staticClick', this.static_click.bind(this)) + + if (accessibility.voiceOver) { + $("#product .gallery-target").click(this.static_click.bind(this)) + $("#product .gallery-target").attr('aria-label', "Image: Front view") + } else { + $("#product .gallery-target").remove() + } }, + static_click: function(e){ + var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"") + var partz = currentImage.split("_") + var head = partz[0] + var size = partz[1] + var tail = partz[2] + var end_partz = tail.split(/\./) + var style = end_partz[0] + var largest_size = large_styles[style] + var hiresImage = [head, largest_size, tail].join("_") + app.fullscreenViewer.show(currentImage, hiresImage) + }, + touchstart: function(e){ }, touchmove: function(e){ @@ -82,7 +103,7 @@ var GalleryView = View.extend({ var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ") var YOOX_IMAGE_STYLE_LABELS = { - f: 'Front view', - r: 'Rear view', + f: 'Image: Front view', + r: 'Image: Rear view', } function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }
\ No newline at end of file diff --git a/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js b/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js index 62a6de18..f834b1c5 100755 --- a/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js +++ b/StoneIsland/platforms/android/assets/www/js/lib/products/ProductView.js @@ -1,4 +1,3 @@ - var ProductView = ScrollableView.extend({ el: "#product", @@ -6,8 +5,10 @@ var ProductView = ScrollableView.extend({ events: { "click .fit": "scroll_to_bottom", "click .notAvailableInCanada": "scroll_to_bottom", - "click .size": "select_size", - "click .color": "select_color", + "change select[name=size]": "select_size", + "change select[name=color]": "select_color", + // "click .size": "select_size", + // "click .color": "select_color", "click .share": "share", "click .gallery-left": "gallery_left", "click .gallery-right": "gallery_right", @@ -22,8 +23,12 @@ var ProductView = ScrollableView.extend({ this.$type = this.$(".type") this.$price = this.$(".price") this.$size = this.$(".size") - this.$share = this.$(".share") + this.$sizeSelect = this.$(".size select") + this.$sizeLabel = this.$(".size .label") this.$color = this.$(".color") + this.$colorSelect = this.$(".color select") + this.$colorLabel = this.$(".color .label") + this.$share = this.$(".share") this.$body = this.$(".body") this.$fit = this.$(".fit") this.$fitHeader = this.$('.fitHeader') @@ -123,7 +128,7 @@ var ProductView = ScrollableView.extend({ var descriptions = this.get_descriptions(details) - var title = data['ModelNames'] + var title = data['ModelNames'] || "" var type = title_case( data['MicroCategory'] ) var price = "$" + data['DiscountedPrice'] + ".00" var details_description = descriptions['Details'] || "" @@ -132,7 +137,7 @@ var ProductView = ScrollableView.extend({ // body = body.replace(/<br>/g, "<br><br>").replace(/(<br>)+$/, "") var default_color_id = this.populate_selectors(data, details) - + var notAvailableInCanada = !! app.store.NotAvailableInCanada app.product.$notAvailableInCanada.toggle( notAvailableInCanada ) @@ -166,14 +171,8 @@ var ProductView = ScrollableView.extend({ this.size = size this.is_onesize = !! this.sizes[1] - - this.$size.show().html(size_label) - if (color_label) { - this.$color.html(color_label) - } - else { - this.$color.hide() - } + this.set_size_label(size_label) + this.set_color_label(color_label) } // console.log(color, color_label, size, size_label) @@ -233,6 +232,9 @@ var ProductView = ScrollableView.extend({ this.$sizing.hide() } + this.populate_sizes() + this.populate_colors() + this.deferScrollToTop() }, @@ -314,37 +316,74 @@ var ProductView = ScrollableView.extend({ return default_color }, - select_size: function(){ + populate_sizes: function() { + console.log(this.sold_out, this.notAvailable, this.is_onesize, this.item) if (this.sold_out) { return } if (this.notAvailable) { return } - if (this.is_onesize) { return this.select_color() } - if (this.item['Sizes'].length == 0) { return } - var sizes = Object.keys(this.sizes).map(function(key){ - return this.sizes[key] - }.bind(this)) - - app.selector.select("style", sizes, function(size){ - console.log(size) - this.size = size.value - this.$size.html(size.label) + // if (this.is_onesize) { return this.select_color() } + if (this.details['ModelSizes'].length == 0) { return } + + this.$sizeSelect.empty() + var sizes = Object.keys(this.sizes).forEach(function(key){ + var size = this.sizes[key] + var option = document.createElement('option') + option.value = size.value + option.innerHTML = size.label + this.$sizeSelect.append(option) }.bind(this)) }, - - select_color: function(){ + + populate_colors: function() { if (this.sold_out) { return } if (this.notAvailable) { return } - if (this.item['Colors'].length == 0) { return } - var colors = Object.keys(this.colors).map(function(key){ - return this.colors[key] - }.bind(this)) - app.selector.select("style", colors, function(color){ - this.code = color.code - this.$color.html(color.label) - this.gallery.populate( color.code, this.details['ImageTypes'] ) - this.gallery_right() + if (this.details['ModelColors'].length == 0) { return } + + this.$colorSelect.empty() + Object.keys(this.colors).forEach(function(key){ + var color = this.colors[key] + var option = document.createElement('option') + option.value = key + option.innerHTML = color.label + this.$colorSelect.append(option) }.bind(this)) }, + select_size: function(){ + console.log(this.colors) + var value = this.$sizeSelect.val() + var size = this.sizes[value] + console.log(size) + this.set_size_label(size.label) + this.size = size.value + }, + + select_color: function(){ + var value = this.$colorSelect.val() + var color = this.colors[value] + console.log(color) + this.code = color.code + this.set_color_label(color.label) + this.gallery.populate( color.code, this.details['ImageTypes'] ) + this.gallery_right() + }, + + set_size_label: function(size_label){ + this.$size.show() + this.$sizeLabel.html(size_label) + this.$size.attr('aria-label', 'Tap to select size. Current size: ' + size_label) + }, + + set_color_label: function(color_label){ + if (color_label) { + this.$color.show() + this.$colorLabel.html(color_label) + this.$color.attr('aria-label', 'Tap to select color. Current color: ' + color_label) + } + else { + this.$color.hide() + } + }, + // ADD TO CART save: function(){ if (this.sold_out) { return } diff --git a/StoneIsland/platforms/android/assets/www/js/vendor/util.js b/StoneIsland/platforms/android/assets/www/js/vendor/util.js index 27bdf008..c44dda79 100755 --- a/StoneIsland/platforms/android/assets/www/js/vendor/util.js +++ b/StoneIsland/platforms/android/assets/www/js/vendor/util.js @@ -25,7 +25,7 @@ function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ va function parse_rgba_string (s) { return s.match(/(\d+)/g).slice(0,3) } function title_case (str) { - return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); + return (str || "").replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); } function pluralize (n,s,ss) { return n + " " + s + ( n == 1 ? "" : (ss || "s") ) } function as_cash(n){ |