- Extract Browser capabilities from Discourse namespace into a Singleton.

- Change Scrolling slack based on Android / Touch / Desktop

Author: eviltrout

app/assets/javascripts/discourse.js

@@ -75,34 +75,6 @@ Discourse = Ember.Application.createWithMixins(Discourse.Ajax, {
     @method bindDOMEvents
   **/
   bindDOMEvents: function() {
-    var $html, hasTouch;
-
-    $html = $('html');
-    hasTouch = false;
-
-    if ($html.hasClass('touch')) {
-      hasTouch = true;
-    }
-
-    if (Modernizr.prefixed("MaxTouchPoints", navigator) > 1) {
-      hasTouch = true;
-    }
-
-    if (hasTouch) {
-      $html.addClass('discourse-touch');
-      this.touch = true;
-      this.hasTouch = true;
-    } else {
-      $html.addClass('discourse-no-touch');
-      this.touch = false;
-    }
-
-    $('#main').on('click.discourse', '[data-not-implemented=true]', function(e) {
-      e.preventDefault();
-      alert(I18n.t('not_implemented'));
-      return false;
-    });
-
     $('#main').on('click.discourse', 'a', function(e) {
       if (e.isDefaultPrevented() || e.shiftKey || e.metaKey || e.ctrlKey) { return; }
 

app/assets/javascripts/discourse/initializers/sniff_capabilities.js

@@ -0,0 +1,26 @@
+/*global Modernizr:true*/
+
+/**
+  Initializes the `Discourse.Capabilities` singleton by sniffing out the browser
+  capabilities.
+**/
+Discourse.addInitializer(function() {
+  var $html = $('html'),
+      touch = $html.hasClass('touch') || (Modernizr.prefixed("MaxTouchPoints", navigator) > 1),
+      caps = Discourse.Capabilities.current();
+
+  // Store the touch ability in our capabilities object
+  caps.set('touch', touch);
+  $html.addClass(touch ? 'discourse-touch' : 'discourse-no-touch');
+
+  // Detect Android
+  if (navigator) {
+    var ua = navigator.userAgent;
+    caps.set('android', ua && ua.indexOf('Android') !== -1);
+  }
+
+  // We consider high res a device with 1280 horizontal pixels. High DPI tablets like
+  // iPads should report as 1024.
+  caps.set('highRes', Modernizr.mq("only screen and (min-width: 1280px)"));
+
+});

app/assets/javascripts/discourse/lib/capabilities.js

@@ -0,0 +1,30 @@
+/**
+  Singleton to store the application's capabilities
+
+  @class Capabilities
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.Capabilities = Ember.Object.extend({
+
+  /**
+    How much slack we should allow with infinite scrolling.
+
+    @property slackRatio
+  **/
+  slackRatio: function() {
+    // Android is slow, so we use a really small slack
+    if (this.get('android')) { return 0.5; }
+
+    // Touch devices get more slack due to inertia
+    if (this.get('touch')) { return 1.5; }
+
+    // Higher resolution devices (likely laptops/desktops) should get more slack because they
+    // can handle the perf.
+    return this.get('highRes') ? 2.0 : 0.75;
+
+  }.property('android', 'touch', 'highRes')
+
+});
+
+Discourse.Capabilities.reopenClass(Discourse.Singleton);

app/assets/javascripts/discourse/views/cloaked_collection_view.js

@@ -14,9 +14,7 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
     var cloakView = this.get('cloakView'),
         idProperty = this.get('idProperty') || 'id';
 
-    // Give ourselves more slack on touch devices
-    this.set('slackRatio', Discourse.touch ? 1.5 : 0.75);
-
+    this.set('slackRatio', Discourse.Capabilities.currentProp('slackRatio'));
     this.set('itemViewClass', Discourse.CloakedView.extend({
       classNames: [cloakView + '-cloak'],
       cloaks: Em.String.classify(cloakView) + 'View',

app/assets/javascripts/main_include.js

@@ -27,7 +27,7 @@
 //= require jquery.sortable.js
 //= require lodash.js
 //= require md5.js
-//= require modernizr.custom.95264.js
+//= require modernizr.custom.00874.js
 //= require mousetrap.js
 //= require rsvp.js
 //= require show-html.js
@@ -70,3 +70,4 @@
 //= require_tree ./discourse/helpers
 //= require_tree ./discourse/templates
 //= require_tree ./discourse/routes
+//= require_tree ./discourse/initializers

test/javascripts/test_helper.js

@@ -47,7 +47,7 @@
 //= require jquery.tagsinput.js
 //= require lodash.js
 //= require md5.js
-//= require modernizr.custom.95264.js
+//= require modernizr.custom.00874.js
 //= require mousetrap.js
 //= require rsvp.js
 //= require show-html.js