Remove loading of a bunch of external javascript files if usign mobile device

lib/app/index.js

@@ -59,10 +59,6 @@ get('/:uidParam?', function(page, model, _arg) {
 
 getHabits = function(page, model, userId) {
   return model.subscribe("users." + userId, function(err, user) {
-    console.log({
-      userId: userId,
-      err: err
-    }, "app/index.coffee: model.subscribe");
     model.ref('_user', user);
     model.set('_items', {
       armor: content.items.armor[parseInt(user.get('items.armor')) + 1],
@@ -89,32 +85,34 @@ ready(function(model) {
   model.on('set', '*', function() {
     return $('[rel=popover]').popover();
   });
-  setupSortable = function(type) {
-    return $("ul." + type + "s").sortable({
-      dropOnEmpty: false,
-      cursor: "move",
-      items: "li",
-      opacity: 0.4,
-      scroll: true,
-      axis: 'y',
-      update: function(e, ui) {
-        var domId, id, item, to;
-        item = ui.item[0];
-        domId = item.id;
-        id = item.getAttribute('data-id');
-        to = $("ul." + type + "s").children().index(item);
-        return model.at("_" + type + "List").pass({
-          ignore: domId
-        }).move({
-          id: id
-        }, to);
-      }
-    });
-  };
-  _ref1 = ['habit', 'daily', 'todo', 'reward'];
-  for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-    type = _ref1[_i];
-    setupSortable(type);
+  if (!(model.get('_mobileDevice') === true)) {
+    setupSortable = function(type) {
+      return $("ul." + type + "s").sortable({
+        dropOnEmpty: false,
+        cursor: "move",
+        items: "li",
+        opacity: 0.4,
+        scroll: true,
+        axis: 'y',
+        update: function(e, ui) {
+          var domId, id, item, to;
+          item = ui.item[0];
+          domId = item.id;
+          id = item.getAttribute('data-id');
+          to = $("ul." + type + "s").children().index(item);
+          return model.at("_" + type + "List").pass({
+            ignore: domId
+          }).move({
+            id: id
+          }, to);
+        }
+      });
+    };
+    _ref1 = ['habit', 'daily', 'todo', 'reward'];
+    for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
+      type = _ref1[_i];
+      setupSortable(type);
+    }
   }
   tour = new Tour();
   _ref2 = content.tourSteps;

lib/server/index.js

@@ -1,5 +1,5 @@
 // Generated by CoffeeScript 1.3.3
-var ONE_YEAR, app, derby, express, expressApp, gzippo, http, path, publicPath, racer, root, server, serverError, store;
+var ONE_YEAR, app, derby, express, expressApp, gzippo, http, mobileMiddleware, path, publicPath, racer, root, server, serverError, store;
 
 http = require('http');
 
@@ -17,8 +17,6 @@ serverError = require('./serverError');
 
 racer = require('derby/node_modules/racer');
 
-racer.use(racer.logPlugin);
-
 racer.set('transports', ['xhr-polling']);
 
 expressApp = express();
@@ -47,6 +45,13 @@ root = path.dirname(path.dirname(__dirname));
 
 publicPath = path.join(root, 'public');
 
+mobileMiddleware = function(req, res, next) {
+  var model;
+  model = req.getModel();
+  model.set('_mobileDevice', /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(req.header('User-Agent')));
+  return next();
+};
+
 expressApp.use(express.favicon()).use(gzippo.staticGzip(publicPath, {
   maxAge: ONE_YEAR
 })).use(express.compress()).use(express.cookieParser()).use(store.sessionMiddleware({
@@ -54,7 +59,7 @@ expressApp.use(express.favicon()).use(gzippo.staticGzip(publicPath, {
   cookie: {
     maxAge: ONE_YEAR
   }
-})).use(store.modelMiddleware()).use(app.router()).use(expressApp.router).use(serverError(root));
+})).use(store.modelMiddleware()).use(mobileMiddleware).use(app.router()).use(expressApp.router).use(serverError(root));
 
 expressApp.all('*', function(req) {
   throw "404: " + req.url;

src/app/index.coffee

@@ -53,7 +53,7 @@ get '/:uidParam?', (page, model, {uidParam}) ->
 getHabits = (page, model, userId) ->  
 
   model.subscribe "users.#{userId}", (err, user) ->
-    console.log {userId:userId, err:err}, "app/index.coffee: model.subscribe"
+    # console.log {userId:userId, err:err}, "app/index.coffee: model.subscribe"
     # => {userId: 26c48325-2fea-4e2e-a60f-a5fa28d7b410, err: Unauthorized: No access control declared for path users.26c48325-2fea-4e2e-a60f-a5fa28d7b410 }
     model.ref '_user', user
     
@@ -87,28 +87,29 @@ ready (model) ->
   model.on 'set', '*', ->
     $('[rel=popover]').popover()
   
-  # Make the lists draggable using jQuery UI
-  # Note, have to setup helper function here and call it for each type later
-  # due to variable binding of "type"
-  setupSortable = (type) ->
-    $("ul.#{type}s").sortable
-      dropOnEmpty: false
-      cursor: "move"
-      items: "li"
-      opacity: 0.4
-      scroll: true
-      axis: 'y'
-      update: (e, ui) ->
-        item = ui.item[0]
-        domId = item.id
-        id = item.getAttribute 'data-id'
-        to = $("ul.#{type}s").children().index(item)
-        # Use the Derby ignore option to suppress the normal move event
-        # binding, since jQuery UI will move the element in the DOM.
-        # Also, note that refList index arguments can either be an index
-        # or the item's id property
-        model.at("_#{type}List").pass(ignore: domId).move {id}, to
-  setupSortable(type) for type in ['habit', 'daily', 'todo', 'reward']
+  unless (model.get('_mobileDevice') == true) #don't do sortable on mobile
+    # Make the lists draggable using jQuery UI
+    # Note, have to setup helper function here and call it for each type later
+    # due to variable binding of "type"
+    setupSortable = (type) ->
+      $("ul.#{type}s").sortable
+        dropOnEmpty: false
+        cursor: "move"
+        items: "li"
+        opacity: 0.4
+        scroll: true
+        axis: 'y'
+        update: (e, ui) ->
+          item = ui.item[0]
+          domId = item.id
+          id = item.getAttribute 'data-id'
+          to = $("ul.#{type}s").children().index(item)
+          # Use the Derby ignore option to suppress the normal move event
+          # binding, since jQuery UI will move the element in the DOM.
+          # Also, note that refList index arguments can either be an index
+          # or the item's id property
+          model.at("_#{type}List").pass(ignore: domId).move {id}, to
+    setupSortable(type) for type in ['habit', 'daily', 'todo', 'reward']
   
   tour = new Tour()
   for step in content.tourSteps

src/server/index.coffee

@@ -9,7 +9,7 @@ serverError = require './serverError'
 ## RACER CONFIGURATION ##
 
 racer = require 'derby/node_modules/racer'
-racer.use(racer.logPlugin)
+# racer.use(racer.logPlugin)
 racer.set('transports', ['xhr-polling'])
 # racer.set('bundle timeout', 10000)
 
@@ -30,6 +30,12 @@ ONE_YEAR = 1000 * 60 * 60 * 24 * 365
 root = path.dirname path.dirname __dirname
 publicPath = path.join root, 'public'
 
+# Custom request object middleware
+mobileMiddleware = (req, res, next) ->
+  model = req.getModel()
+  model.set '_mobileDevice', /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(req.header 'User-Agent')
+  next()
+  
 expressApp
   .use(express.favicon())
   # Gzip static files and serve from memory
@@ -51,6 +57,9 @@ expressApp
 
   # Adds req.getModel method
   .use(store.modelMiddleware())
+  # Middelware can be inserted after the modelMiddleware and before
+  # the app router to pass server accessible data to a model
+  .use(mobileMiddleware)
   # Creates an express middleware from the app's routes
   .use(app.router())
   .use(expressApp.router)

views/app/index.html

@@ -158,6 +158,7 @@
           Copyright © 2012 Tyler Renelle   
         </td>
         
+        {#unless _mobileDevice}
         <td>
           <!-- Github -->
           <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true"
@@ -178,6 +179,7 @@
           <!-- AddThis Button END -->
           <a href="https://twitter.com/share" class="twitter-share-button" data-via="lefnire">Tweet</a>
         </td>
+        {/}
          
       </tr>
     </table>
@@ -287,7 +289,7 @@
 <!-- Required scripts, needed by ready() -->
 <Scripts:>
   <script src=/js/jquery.min.js></script><!-- http://code.jquery.com/jquery-1.7.2.min.js -->
-  <script src=/js/jquery-ui.min.js></script>
+  {#unless _mobileDevice}<script src=/js/jquery-ui.min.js></script>{/}
   <script src=/js/underscore-min.js></script><!-- http://underscorejs.org/underscore-min.js -->
   <script src=/js/bootstrap.min.js></script><!-- http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js -->
   <script src=/js/jquery.cookie.js></script><!-- https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js -->
@@ -295,11 +297,13 @@
   
 <!-- Scripts not needed right away (google charts) or entirely optional (analytics) -->
 <Tail:>
+  {#unless _mobileDevice}
   <script src=/js/google-jsapi.js></script><!-- https://www.google.com/jsapi -->
   <script type="text/javascript">
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback(function(){});
   </script>
+  {/}
   
   <script type="text/javascript">
     var _gaq = _gaq || [];
@@ -317,5 +321,5 @@
   <!--<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"></script>-->
   
   <!-- Twitter -->
-  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  {#unless _mobileDevice}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>{/}