summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--StoneIsland/scripts/plist-hook.js2
-rwxr-xr-xStoneIsland/www/css/blogs.css20
-rwxr-xr-xStoneIsland/www/css/products.css6
-rwxr-xr-xStoneIsland/www/index.html11
-rwxr-xr-xStoneIsland/www/js/index.js35
-rwxr-xr-xStoneIsland/www/js/lib/blogs/ArchiveView.js2
-rwxr-xr-xStoneIsland/www/js/lib/blogs/HubView.js24
-rw-r--r--StoneIsland/www/js/lib/etc/accessibility.js2
-rwxr-xr-xStoneIsland/www/js/lib/nav/FooterView.js2
-rwxr-xr-xStoneIsland/www/js/lib/products/GalleryView.js35
-rwxr-xr-xStoneIsland/www/js/lib/products/ProductView.js2
11 files changed, 110 insertions, 31 deletions
diff --git a/StoneIsland/scripts/plist-hook.js b/StoneIsland/scripts/plist-hook.js
index a1827079..623080f0 100644
--- a/StoneIsland/scripts/plist-hook.js
+++ b/StoneIsland/scripts/plist-hook.js
@@ -9,6 +9,8 @@ module.exports = function (context) {
var obj = plist.parse(xml);
obj.NSLocationWhenInUseUsageDescription = "Stone Island needs to serve content based on your location."
+ obj.NSLocationAlwaysAndWhenInUseUsageDescription = "Stone Island needs to serve content based on your location."
+ obj.NSLocationAlwaysUsageDescription = "Stone Island needs to serve content based on your location."
xml = plist.build(obj);
fs.writeFileSync(FILEPATH, xml, { encoding: 'utf8' });
diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index f857db9e..c4b74c19 100755
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -186,6 +186,9 @@
height:100px;
box-sizing:border-box
}
+.vscroll .fade-cover {
+ display: none;
+}
/*
.fade-cover::before {
@@ -264,6 +267,13 @@ ul.links {
transform-origin: 50% 50%;
transform: translateZ(0) translateX(-50%) translateY(-50%);
}
+#archive .menu {
+ position: fixed;
+ display: none;
+}
+#archive.menu .menu {
+ display: block;
+}
.accessible #archive .row .image,
.accessible #archive .row .text {
@@ -353,6 +363,16 @@ ul.links {
width: 90%;
}
+.gallery-target {
+ display: none;
+}
+.accessible .gallery-target {
+ display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100vw;
+ height: 52vh;
+}
.gallery-video-post {
position:relative;
}
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 5efef660..e15e0e54 100755
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -55,6 +55,7 @@
}
.gallery .item {
+ display: block;
width: 100vw;
height: 52vh;
background-size: contain;
@@ -93,6 +94,11 @@
text-align: center;
width: 100%;
}
+#closed .closed_target {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+}
.product .content {
box-sizing:border-box;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 06f4455f..a422832c 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -138,10 +138,11 @@
<script type="text/html" class="template">
<div class="hub_item" data-id="{{id}}">
<div class="gallery gallery-{{id}}" role="carousel"></div>
+ <div role="button" class="gallery-target gallery-target-{{id}}"></div>
<div role="button" aria-label='Scroll gallery to the left' class="gallery-left"></div>
<div role="button" aria-label='Scroll gallery to the right' class="gallery-right"></div>
<div role="heading" class="content-header">
- <div role="button" class="content-share">
+ <div role="button" class="content-share" aria-label="Share this post">
SHARE +
</div>
<span role="heading" aria-details="{{cleantitle}}" class="title">{{title}}</span>
@@ -312,6 +313,7 @@
<div role="link" class="item" aria-label="{{alt}}" style="background-image:url({{image}})"></div>
</script>
</div>
+ <div role="button" class="gallery-target"></div>
<div role="button" class="gallery-left" aria-label="Scroll gallery left"></div>
<div role="button" class="gallery-right" aria-label="Scroll gallery right"></div>
<div class="content">
@@ -335,7 +337,7 @@
</div>
</div>
</span>
- <span role="button" class="share">SHARE +</span>
+ <span role="button" class="share" aria-label="Share this product">SHARE +</span>
</div>
<div class="fit">Fits Large</div>
<div class='fitHeader'></div>
@@ -352,15 +354,16 @@
</div>
<div id="closed" role="region" aria-label="The store is closed">
+ <div class="closed_target" role="button" aria-label="The store is closed. Placeholder image of a Stone Island model wearing a jacket."></div>
<div class="closed_store_msg">
<h3>
LOADING THE STORE, PLEASE WAIT
</h3>
<h4>
</h4>
- <div role="link" class="website_link">
+ <div role="link" class="website_link" aria-label='Visit w w w dot stone island dot com'>
visit<br>
- <b aria-label='w w w dot stone island dot com'>www.stoneisland.com</b>
+ <b role='link' aria-label='w w w dot stone island dot com'>www.stoneisland.com</b>
</div>
</div>
</div>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index b90f74b1..42cec6f1 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/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/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 2fd2497b..92427b6f 100755
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -60,7 +60,7 @@ var ArchiveView = ScrollableView.extend({
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)
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index a0ee9dd0..d3b15f77 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/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/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js
index 8108e461..31ddaf23 100644
--- a/StoneIsland/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/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/www/js/lib/nav/FooterView.js b/StoneIsland/www/js/lib/nav/FooterView.js
index 8641668f..855c37bd 100755
--- a/StoneIsland/www/js/lib/nav/FooterView.js
+++ b/StoneIsland/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/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index d6f5723c..e84caa68 100755
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/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/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index 4320043c..f834b1c5 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -370,12 +370,14 @@ var ProductView = ScrollableView.extend({
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()
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-12 22:47:50 +0000