actually get scrolling working!

10 files changed, 85 insertions, 27 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 9204d94d..83b3353a 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -60,10 +60,41 @@ a, a:visited {
 }
 .vscroll .scroll {
   width: 100%;
-  height: 100%;
+/*  height: calc(100vh - 2.5rem);
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+*/
+}
+.vscroll body,
+html.vscroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.vscroll #header,
+.vscroll #footer,
+.vscroll #nav {
+  position: fixed;
+}
+.vscroll #story,
+.vscroll #hub,
+.vscroll #archive,
+.vscroll .page,
+.vscroll #collection,
+.vscroll #product,
+.vscroll #search,
+.vscroll #closed,
+.vscroll #login,
+.vscroll #logout,
+.vscroll #signup,
+.vscroll #cart,
+.vscroll #profile,
+.vscroll #shipping,
+.vscroll #payment,
+.vscroll #settings,
+.vscroll #content,
+.vscroll #orders {
   overflow: auto;
 }
-
 .error_hilite {
   color: red !important;
   border-color: red !important;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index e3cac6e5..da63d3ac 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -44,7 +44,7 @@
       <span role="menuitem" class="archive">ARCHIVE</span>
     </div>
     <div role="menu" aria-label="Account Menu" class="account_menu">
-      <span role="menuitem" class="account_back menu-emphasis">&lt; MY ACCOUNT</span>
+      <span role="menuitem" aria-label="Back to main menu" class="account_back menu-emphasis">&lt; MY ACCOUNT</span>
       <span role="menuitem" class="profile">MY PROFILE</span>
       <span role="menuitem" class="payment">MY CARD</span>
       <span role="menuitem" class="shipping">ADDRESS BOOK</span>
@@ -54,7 +54,7 @@
       <span role="menuitem" class="settings">NOTIFICATIONS</span>
     </div>
     <div role="menu" aria-label="FAQ Menu" class="faq_menu">
-      <span role="menuitem" class="faq_back menu-emphasis">&lt; FAQ</span>
+      <span role="menuitem" aria-label="Back to main menu" class="faq_back menu-emphasis">&lt; FAQ</span>
       <span role="menuitem" class="privacy">PRIVACY POLICY</span>
       <span role="menuitem" class="account_terms">MY ACCOUNT TERMS AND CONDITIONS OF USE</span>
       <span role="menuitem" class="terms">TERMS AND CONDITIONS</span>
@@ -109,7 +109,7 @@
   </div>
 
   <div id="header" role="menubar" aria-label="Menu bar">
-    <span role="menu" aria-label="Show main menu" class="burger ion-android-menu"></span>
+    <span role="link" aria-label="Show main menu" class="burger ion-android-menu"></span>
     <span role="link" aria-label="Homepage. Stone Island logo" class="logo"></span>
     <span role="link" aria-label="View cart" class="cart_rapper"><span class="cart"><span role="display" class="cart_count">0</span></span></span>
   </div>
@@ -138,20 +138,20 @@
         <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-left"></div>
-            <div role="button" class="gallery-right"></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">
-              SHARE +
-            </div>
-            <span role="heading" aria-details="{{cleantitle}}" class="title">{{title}}</span>
-            <span role="heading" aria-details="{{cleansubtitle}}"class="subtitle">{{subtitle}}</span>
-            <span class="date">
-              {{date}}
-              <span class="store">
-                | <b><u>STORE</u></b>
+              <div role="button" class="content-share">
+                SHARE +
+              </div>
+              <span role="heading" aria-details="{{cleantitle}}" class="title">{{title}}</span>
+              <span role="heading" aria-details="{{cleansubtitle}}"class="subtitle">{{subtitle}}</span>
+              <span class="date">
+                {{date}}
+                <span class="store">
+                  | <b><u>STORE</u></b>
+                </span>
               </span>
-            </span>
             </div>
             <div class="body">{{body}}</div>
           </div>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index b2c70bee..b90f74b1 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -109,6 +109,7 @@ var app = (function(){
     // }
     //   else {
     //   }
+    push.init()
 
     if (navigator.onLine) {
       app.account.connect(window.deepLinkRoute || '/intro')
@@ -123,8 +124,6 @@ var app = (function(){
       app.router.go("intro")
       app.finished_launching()
     }
-    
-    push.init()
   }
   
   app.finished_launching = function(){
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index b79b8421..f10f7744 100755
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -26,6 +26,7 @@ var ArchiveView = ScrollableView.extend({
   back: function(){
     this.$el.addClass("menu")
     app.header.set_back(false)
+    this.scroller.scrollTo(0, 0)
     this.$subtitle.html( this.subtitle_html )
   },
 
@@ -60,6 +61,7 @@ var ArchiveView = ScrollableView.extend({
 
       var t = this.menu_template.replace(/{{title}}/, row.title)
       var $t = $(t)
+      $t.data("aria-label", stonewash(row.title.replace(/'/g, " '").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 b2baf4e7..a0ee9dd0 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -93,6 +93,7 @@ var HubView = ScrollableView.extend({
         var url = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
         app.fullscreenViewer.show(url, url)
       })
+      $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Image gallery, use the arrows to scroll.")
     }
     else {
       // single image
@@ -103,7 +104,6 @@ var HubView = ScrollableView.extend({
       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")
@@ -111,7 +111,7 @@ var HubView = ScrollableView.extend({
         $(".gallery-" + row.id).append(play)
         $(".gallery-" + row.id).addClass("gallery-video-post")
         $(".gallery-" + row.id).attr('role', 'link')
-        $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Watch the video on Youtube")
+        $(".gallery-" + 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];
@@ -121,6 +121,7 @@ var HubView = ScrollableView.extend({
         $(el).click(function(){
           app.fullscreenViewer.show(row.image[0].uri)
         })
+        $(".gallery-" + row.id).attr('aria-label', stonewash(row.title) + ". Main image")
       }
       $t.find(".gallery-left").remove()
       $t.find(".gallery-right").remove()
@@ -140,6 +141,7 @@ var HubView = ScrollableView.extend({
     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()
@@ -170,6 +172,7 @@ var HubLoader = (function(){
     HubLoader.load()
   }
   HubLoader.load = function(){
+    if (!queue) return
     item = queue.shift()
     count++
     if (! item || loading) return
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index dae79cb9..0b3b17d7 100755
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -41,7 +41,7 @@ var StoryView = ScrollableView.extend({
       var li = document.createElement("li")
       li.dataset.id = row.id
       li.innerHTML = row.title
-      li.role = "button"
+      li.setAttribute('role', "link")
       this.sections[row.id] = row
       this.$links.append(li)
       this.$content.append(t)
diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js
index c1f5ce5d..3cbda2a0 100644
--- a/StoneIsland/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/www/js/lib/etc/accessibility.js
@@ -3,8 +3,19 @@ var accessibility = (function() {
   var accessibility = {}
   accessibility.voiceOver = false
 
+  accessibility.DEBUG = true
+
   accessibility.init = function(ready) {
+    console.log('Accessibility init')
     accessibility.bind()
+    if (accessibility.DEBUG) {
+      console.log('Accessibility debug mode')
+      app.accessible = true
+      accessibility.voiceOver = true
+      $('html').addClass('vscroll')
+      $('html').addClass('accessible')
+      return ready()
+    }
     if ('MobileAccessibility' in window) {
       accessibility.build(ready)
     } else {
@@ -25,9 +36,12 @@ var accessibility = (function() {
       console.log('Screen reader: ' + state)
       accessibility.voiceOver = state
       if (state) {
-        $('html').addClass('iscroll')
-      } else {
+        console.log(">>>>>> actual debug mode!")
+        app.accessible = true
+        $("html").addClass('accessible')
         $('html').addClass('vscroll')
+      } else {
+        $('html').addClass('iscroll')
       }
       ready()
     })
@@ -57,5 +71,5 @@ var accessibility = (function() {
 })()
 
 function stonewash (s) {
-  return s.replace(/'0/g, '20').replace(/_/g, ' ')
+  return s.replace(/'9/g, '19').replace(/'0/g, '20').replace(/_/g, ' ').replace(/-/g, ' - ').replace(/^[013456789][0-9]+/, '')
 }
diff --git a/StoneIsland/www/js/lib/etc/push.js b/StoneIsland/www/js/lib/etc/push.js
index 746172eb..74aaf7b5 100755
--- a/StoneIsland/www/js/lib/etc/push.js
+++ b/StoneIsland/www/js/lib/etc/push.js
@@ -37,6 +37,10 @@ var push = (function(){
     push.settings.hub = hub_status == "true"
     push.settings.store = store_status == "true"
     
+    if (push.settings.requested) {
+      return
+    }
+    // not sure why we're also signing up for notifications here??    
     if (! hub_status || hub_status == "true") {
       push.subscribe("hub")
     }
@@ -46,7 +50,7 @@ var push = (function(){
   }
   push.got_registration = function(data){
     var registrationId = data.registrationId
-    var oldRegistrationId =  localStorage.getItem("yoox.registrationId")
+    var oldRegistrationId = localStorage.getItem("yoox.registrationId")
     // console.log(registrationId, oldRegistrationId)
     
     if (registrationId !== oldRegistrationId || ! push.settings.requested) {
diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js
index d444fd60..ddb6bc19 100755
--- a/StoneIsland/www/js/lib/nav/CurtainView.js
+++ b/StoneIsland/www/js/lib/nav/CurtainView.js
@@ -28,7 +28,7 @@ var CurtainView = View.extend({
   },
   
   click: function(){
-    if (document.body.classList.contains("nav")) {
+    if (document.body.classList.contains("nav") && !app.accessible) {
       app.nav.hide()
     }
     if (app.selector.visible) {
diff --git a/StoneIsland/www/js/lib/nav/NavView.js b/StoneIsland/www/js/lib/nav/NavView.js
index 958bc8ad..1655b7f8 100755
--- a/StoneIsland/www/js/lib/nav/NavView.js
+++ b/StoneIsland/www/js/lib/nav/NavView.js
@@ -45,6 +45,10 @@ var NavView = View.extend({
   show: function(klass){
     $("body").addClass("nav")
     app.curtain.show("dark")
+    doneShowingNav = false
+    setTimeout(function(){
+      doneShowingNav = true
+    }, 800)
     if (klass) {
       setTimeout(function(){
         this.addClass(klass)
@@ -53,6 +57,7 @@ var NavView = View.extend({
   },
   
   hide: function(){
+    if (!doneShowingNav) return
     $("body").removeClass("nav")
     app.curtain.hide("dark")
   },