ditching iscroll

23 files changed, 117 insertions, 35 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 88022823..9204d94d 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -54,10 +54,15 @@ a, a:visited {
   to {-webkit-transform: rotate(360deg)}
 }
 
-.scroll {
+.iscroll .scroll {
   position: absolute;
   width: 100%;
 }
+.vscroll .scroll {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
 
 .error_hilite {
   color: red !important;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index c46e37c3..e3cac6e5 100755
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -1311,6 +1311,7 @@
 <script src="js/lib/etc/sim.js"></script>
 <script src="js/lib/etc/backup_db.js"></script>
 <script src="js/lib/etc/accessibility.js"></script>
+<script src="js/lib/etc/scroll.js"></script>
 
 <script src="js/lib/view/View.js"></script>
 <script src="js/lib/view/Router.js"></script>
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index 69a0a3e0..b2c70bee 100755
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -12,6 +12,10 @@ 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()
     
@@ -86,15 +90,6 @@ var app = (function(){
       sim.fetch(app.api_ready)
       var image = new Image
       image.src = "./img/compass-logo.png"
-
-      MobileAccessibility.usePreferredTextZoom(true);
-      MobileAccessibility.getTextZoom(function getTextZoomCallback(textZoom) {
-        console.log('WebView text should be scaled to the preferred value ' + textZoom + '%')
-        if (textZoom > 100) {
-          app.accessible = true
-          $("html").addClass('accessible')
-        }
-      });
     }
     else {
       app.api_ready()
diff --git a/StoneIsland/www/js/lib/account/OrdersView.js b/StoneIsland/www/js/lib/account/OrdersView.js
index ee0eb277..1522a096 100755
--- a/StoneIsland/www/js/lib/account/OrdersView.js
+++ b/StoneIsland/www/js/lib/account/OrdersView.js
@@ -26,7 +26,7 @@ var OrdersView = ScrollableView.extend({
     this.$shipping_address = this.$(".shipping_address")
     this.$shipping_method = this.$(".shipping_method")
 
-    this.scroller = new IScroll('#orders', app.iscroll_options)
+    this.scroller = ScrollFactory('#orders', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/account/PaymentView.js b/StoneIsland/www/js/lib/account/PaymentView.js
index 0fcf7e8f..8767b39f 100755
--- a/StoneIsland/www/js/lib/account/PaymentView.js
+++ b/StoneIsland/www/js/lib/account/PaymentView.js
@@ -29,7 +29,7 @@ var PaymentView = FormView.extend({
     this.$msg = this.$(".msg")
     this.address = new AddressView ({ parent: this, checkPhone: false })
     this.cc = new CreditCardView ({ parent: this })
-    this.scroller = new IScroll('#payment', app.iscroll_options)
+    this.scroller = ScrollFactory('#payment', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/account/ProfileView.js b/StoneIsland/www/js/lib/account/ProfileView.js
index a4e06791..4a081b38 100755
--- a/StoneIsland/www/js/lib/account/ProfileView.js
+++ b/StoneIsland/www/js/lib/account/ProfileView.js
@@ -11,7 +11,7 @@ var ProfileView = FormView.extend({
   initialize: function(){
     this.$form = this.$(".form")
     this.$msg = this.$(".msg")
-    this.scroller = new IScroll('#profile', app.iscroll_options)
+    this.scroller = ScrollFactory('#profile', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/account/SettingsView.js b/StoneIsland/www/js/lib/account/SettingsView.js
index 5586e0fd..196b7759 100755
--- a/StoneIsland/www/js/lib/account/SettingsView.js
+++ b/StoneIsland/www/js/lib/account/SettingsView.js
@@ -12,7 +12,7 @@ var SettingsView = FormView.extend({
     this.$msg = this.$(".msg")
     this.$store = this.$("[name=store]")
     this.$hub = this.$("[name=hub]")
-    this.scroller = new IScroll('#settings', app.iscroll_options)
+    this.scroller = ScrollFactory('#settings', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/account/ShippingView.js b/StoneIsland/www/js/lib/account/ShippingView.js
index c1bac782..4c45e97f 100755
--- a/StoneIsland/www/js/lib/account/ShippingView.js
+++ b/StoneIsland/www/js/lib/account/ShippingView.js
@@ -27,7 +27,7 @@ var ShippingView = FormView.extend({
     this.$form = this.$(".form")
     this.$msg = this.$(".msg")
     this.address = new AddressView ({ parent: this })
-    this.scroller = new IScroll('#shipping', app.iscroll_options)
+    this.scroller = ScrollFactory('#shipping', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/auth/LoginView.js b/StoneIsland/www/js/lib/auth/LoginView.js
index c3d839a5..7458d159 100755
--- a/StoneIsland/www/js/lib/auth/LoginView.js
+++ b/StoneIsland/www/js/lib/auth/LoginView.js
@@ -13,7 +13,7 @@ var LoginView = FormView.extend({
   initialize: function(){
     this.$form = this.$(".form")
     this.$msg = this.$(".msg")
-    this.scroller = new IScroll('#login', app.iscroll_options)
+    this.scroller = ScrollFactory('#login', app.iscroll_options)
   },
   
   show: function(){
diff --git a/StoneIsland/www/js/lib/auth/SignupView.js b/StoneIsland/www/js/lib/auth/SignupView.js
index ef7dd6aa..66d8f239 100755
--- a/StoneIsland/www/js/lib/auth/SignupView.js
+++ b/StoneIsland/www/js/lib/auth/SignupView.js
@@ -26,7 +26,7 @@ var SignupView = FormView.extend({
   initialize: function(){
     this.$form = this.$(".form")
     this.$msg = this.$(".msg")
-    this.scroller = new IScroll('#signup', app.iscroll_options)
+    this.scroller = ScrollFactory('#signup', app.iscroll_options)
   },
   
   show: function(){
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 0d769e95..b79b8421 100755
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -18,7 +18,7 @@ var ArchiveView = ScrollableView.extend({
     this.$menu_items = this.$(".menu .items")
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#archive .scroll', app.iscroll_options)
+    this.scroller = ScrollFactory('#archive .scroll', app.iscroll_options)
     this.$subtitle = this.$('.subtitle')
     this.subtitle_html = this.$subtitle.html()
   },
diff --git a/StoneIsland/www/js/lib/blogs/BlogView.js b/StoneIsland/www/js/lib/blogs/BlogView.js
index e58c975c..9190634c 100755
--- a/StoneIsland/www/js/lib/blogs/BlogView.js
+++ b/StoneIsland/www/js/lib/blogs/BlogView.js
@@ -54,7 +54,7 @@ var BlogView = View.extend({
         app.closed.storeClosedMessageTwo = app.store.StoreClosedMessageTwo
         break
     }
-    console.log(data)
+    // console.log(data)
 
     if (app.closed.storeIsClosed && sdk.env !== 'test') {
       app.closed.populate(app.store.ClosedStoreImages)
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index c4ebd716..b2baf4e7 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -14,7 +14,7 @@ var HubView = ScrollableView.extend({
   initialize: function(){
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#hub', app.iscroll_options)
+    this.scroller = ScrollFactory('#hub', app.iscroll_options)
     HubLoader.init(this)
   },
 
diff --git a/StoneIsland/www/js/lib/blogs/PageView.js b/StoneIsland/www/js/lib/blogs/PageView.js
index ae18091a..9a7b4962 100755
--- a/StoneIsland/www/js/lib/blogs/PageView.js
+++ b/StoneIsland/www/js/lib/blogs/PageView.js
@@ -9,7 +9,7 @@ var PageView = ScrollableView.extend({
     this.setElement("#" + opt.page)
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#' + this.page, app.iscroll_options)
+    this.scroller = ScrollFactory('#' + this.page, app.iscroll_options)
   },
 
   show: function(){
@@ -26,7 +26,7 @@ var PageView = ScrollableView.extend({
         href = href.substr(1, href.length-2)
         $(this).attr("href", href)
       }
-      console.log(href)
+      // console.log(href)
       $(this).attr("target", "_system")
     })
   },
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 924a7355..dae79cb9 100755
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -16,7 +16,7 @@ var StoryView = ScrollableView.extend({
     this.$links = this.$(".links")
     this.$loader = this.$(".loader")
     this.loader = new Loader ()
-    this.scroller = new IScroll('#story', app.iscroll_options)
+    this.scroller = ScrollFactory('#story', app.iscroll_options)
   },
 
   show: function(){
diff --git a/StoneIsland/www/js/lib/cart/CartConfirm.js b/StoneIsland/www/js/lib/cart/CartConfirm.js
index 031e3359..6909dcc3 100755
--- a/StoneIsland/www/js/lib/cart/CartConfirm.js
+++ b/StoneIsland/www/js/lib/cart/CartConfirm.js
@@ -22,7 +22,7 @@ var CartConfirm = FormView.extend({
     this.$payment_method = this.$(".payment_method")
     this.$payment_address = this.$(".payment_address")
     
-    this.scroller = new IScroll('#cart_confirm', app.iscroll_options)
+    this.scroller = ScrollFactory('#cart_confirm', app.iscroll_options)
   },
   
   show: function(){
diff --git a/StoneIsland/www/js/lib/cart/CartPayment.js b/StoneIsland/www/js/lib/cart/CartPayment.js
index 3a9e6412..40d08d9e 100755
--- a/StoneIsland/www/js/lib/cart/CartPayment.js
+++ b/StoneIsland/www/js/lib/cart/CartPayment.js
@@ -34,7 +34,7 @@ var CartPayment = FormView.extend({
 
     this.address = new AddressView ({ parent: this, checkPhone: false })
     this.cc = new CreditCardView ({ parent: this })
-    this.scroller = new IScroll('#cart_payment', app.iscroll_options)
+    this.scroller = ScrollFactory('#cart_payment', app.iscroll_options)
     this.scroller.on('scrollStart', function(){
       if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'SELECT') {
         document.activeElement.blur()
diff --git a/StoneIsland/www/js/lib/cart/CartShipping.js b/StoneIsland/www/js/lib/cart/CartShipping.js
index ef8f94b7..b5d6647b 100755
--- a/StoneIsland/www/js/lib/cart/CartShipping.js
+++ b/StoneIsland/www/js/lib/cart/CartShipping.js
@@ -21,7 +21,7 @@ var CartShipping = FormView.extend({
     this.$address_form = this.$(".address")
     this.$msg = this.$(".msg")
     this.address = new AddressView ({ parent: this })
-    this.scroller = new IScroll('#cart_shipping', app.iscroll_options)
+    this.scroller = ScrollFactory('#cart_shipping', app.iscroll_options)
     this.address.disabled = true
   },
 
diff --git a/StoneIsland/www/js/lib/cart/CartSummary.js b/StoneIsland/www/js/lib/cart/CartSummary.js
index bf150791..51aa35ef 100755
--- a/StoneIsland/www/js/lib/cart/CartSummary.js
+++ b/StoneIsland/www/js/lib/cart/CartSummary.js
@@ -15,7 +15,7 @@ var CartSummary = ScrollableView.extend({
     this.$loader = this.$(".loader")
     this.$cart_body = this.$(".cart_body")
     this.$cart_empty = this.$(".cart_empty")
-    this.scroller = new IScroll('#cart_summary', app.iscroll_options)
+    this.scroller = ScrollFactory('#cart_summary', app.iscroll_options)
 
     this.$rows = this.$(".rows")
     this.$subtotal = this.$(".subtotal")
diff --git a/StoneIsland/www/js/lib/etc/accessibility.js b/StoneIsland/www/js/lib/etc/accessibility.js
index 614c3796..c1f5ce5d 100644
--- a/StoneIsland/www/js/lib/etc/accessibility.js
+++ b/StoneIsland/www/js/lib/etc/accessibility.js
@@ -1,9 +1,61 @@
-$(function(){
-  $("h1").each(function(){
-    this['aria-label'] = 'Section title is ' + this.innerText
-  })
-})
+var accessibility = (function() {
+
+  var accessibility = {}
+  accessibility.voiceOver = false
+
+  accessibility.init = function(ready) {
+    accessibility.bind()
+    if ('MobileAccessibility' in window) {
+      accessibility.build(ready)
+    } else {
+      ready()
+    }
+  }
+
+  accessibility.build = function(ready) {
+    MobileAccessibility.usePreferredTextZoom(true);
+    MobileAccessibility.getTextZoom(function getTextZoomCallback(textZoom) {
+      console.log('WebView text should be scaled to the preferred value ' + textZoom + '%')
+      if (textZoom > 100) {
+        app.accessible = true
+        $("html").addClass('accessible')
+      }
+    });
+    MobileAccessibility.isVoiceOverRunning(function(state){
+      console.log('Screen reader: ' + state)
+      accessibility.voiceOver = state
+      if (state) {
+        $('html').addClass('iscroll')
+      } else {
+        $('html').addClass('vscroll')
+      }
+      ready()
+    })
+  }
+
+  accessibility.bind = function() {
+    $("h1").each(function(){
+      this['aria-label'] = 'Section title is ' + this.innerText
+    })
+    if ('MobileAccessibilityNotifications' in window) {
+      window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED,
+        accessibility.onScreenReaderStatusChanged, false)
+    }
+  }
+
+  accessibility.onScreenReaderStatusChanged = function(info) {
+    if (info && typeof info.isScreenReaderRunning !== "undefined") {
+      if (info.isScreenReaderRunning) {
+        console.log("Screen reader: ON");
+      } else {
+        console.log("Screen reader: OFF");
+      }
+    }
+  }
+
+  return accessibility
+})()
 
 function stonewash (s) {
   return s.replace(/'0/g, '20').replace(/_/g, ' ')
-}
\ No newline at end of file
+}
diff --git a/StoneIsland/www/js/lib/etc/scroll.js b/StoneIsland/www/js/lib/etc/scroll.js
new file mode 100644
index 00000000..253921e1
--- /dev/null
+++ b/StoneIsland/www/js/lib/etc/scroll.js
@@ -0,0 +1,29 @@
+// stub for native scroller when in voiceover mode
+function NativeScroll(el) {
+  var Scroller = {
+    x: 0,
+    y: 0,
+    $el: $(el),
+  }
+
+  Scroller.refresh = function(){}
+  Scroller.on = function(){}
+  Scroller.off = function(){}
+
+  Scroller.scrollTo = function(x, y) {
+    Scroller.$el.scrollTop(y)
+  }
+  Scroller.scrollToElement = function(selector) {
+    var y = $(selector).offset().top
+    Scroller.$el.scrollTop(y)
+  }
+
+  return Scroller
+}
+
+function ScrollFactory (el, opt) {
+  if (accessibility.voiceOver) {
+    return NativeScroll(el)
+  }
+  return new IScroll(el, opt)
+}
diff --git a/StoneIsland/www/js/lib/products/CollectionView.js b/StoneIsland/www/js/lib/products/CollectionView.js
index b7af235a..d3343652 100755
--- a/StoneIsland/www/js/lib/products/CollectionView.js
+++ b/StoneIsland/www/js/lib/products/CollectionView.js
@@ -22,7 +22,7 @@ var CollectionView = ScrollableView.extend({
     this.$title = this.$("h1")
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
-    this.scroller = new IScroll('#collection', app.iscroll_options)
+    this.scroller = ScrollFactory('#collection', app.iscroll_options)
     this.departmentFilterView = new DepartmentFilter ({ parent: this })
     this.sizeFilterView = new SizeFilter ({ parent: this })
   },
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index c47dfddd..62a6de18 100755
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -15,7 +15,7 @@ var ProductView = ScrollableView.extend({
   
   initialize: function(){
     this.gallery = new GalleryView ()
-    this.scroller = new IScroll('#product', app.iscroll_options)
+    this.scroller = ScrollFactory('#product', app.iscroll_options)
     
     this.$productHeader = this.$(".product-header")
     this.$title = this.$(".title")