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

This commit is contained in:
Tyler Renelle
2012-07-31 12:59:42 -04:00
parent 6f0520a5e4
commit 630a6bf9ce
5 changed files with 77 additions and 60 deletions

View File

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

View File

@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.3.3 // 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'); http = require('http');
@@ -17,8 +17,6 @@ serverError = require('./serverError');
racer = require('derby/node_modules/racer'); racer = require('derby/node_modules/racer');
racer.use(racer.logPlugin);
racer.set('transports', ['xhr-polling']); racer.set('transports', ['xhr-polling']);
expressApp = express(); expressApp = express();
@@ -47,6 +45,13 @@ root = path.dirname(path.dirname(__dirname));
publicPath = path.join(root, 'public'); 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, { expressApp.use(express.favicon()).use(gzippo.staticGzip(publicPath, {
maxAge: ONE_YEAR maxAge: ONE_YEAR
})).use(express.compress()).use(express.cookieParser()).use(store.sessionMiddleware({ })).use(express.compress()).use(express.cookieParser()).use(store.sessionMiddleware({
@@ -54,7 +59,7 @@ expressApp.use(express.favicon()).use(gzippo.staticGzip(publicPath, {
cookie: { cookie: {
maxAge: ONE_YEAR 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) { expressApp.all('*', function(req) {
throw "404: " + req.url; throw "404: " + req.url;

View File

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

View File

@@ -9,7 +9,7 @@ serverError = require './serverError'
## RACER CONFIGURATION ## ## RACER CONFIGURATION ##
racer = require 'derby/node_modules/racer' racer = require 'derby/node_modules/racer'
racer.use(racer.logPlugin) # racer.use(racer.logPlugin)
racer.set('transports', ['xhr-polling']) racer.set('transports', ['xhr-polling'])
# racer.set('bundle timeout', 10000) # racer.set('bundle timeout', 10000)
@@ -30,6 +30,12 @@ ONE_YEAR = 1000 * 60 * 60 * 24 * 365
root = path.dirname path.dirname __dirname root = path.dirname path.dirname __dirname
publicPath = path.join root, 'public' 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 expressApp
.use(express.favicon()) .use(express.favicon())
# Gzip static files and serve from memory # Gzip static files and serve from memory
@@ -51,6 +57,9 @@ expressApp
# Adds req.getModel method # Adds req.getModel method
.use(store.modelMiddleware()) .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 # Creates an express middleware from the app's routes
.use(app.router()) .use(app.router())
.use(expressApp.router) .use(expressApp.router)

View File

@@ -158,6 +158,7 @@
Copyright &copy; 2012 Tyler Renelle&nbsp;&nbsp;&nbsp; Copyright &copy; 2012 Tyler Renelle&nbsp;&nbsp;&nbsp;
</td> </td>
{#unless _mobileDevice}
<td> <td>
<!-- Github --> <!-- Github -->
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=lefnire&repo=habitrpg&type=watch&count=true" <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 --> <!-- AddThis Button END -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="lefnire">Tweet</a> <a href="https://twitter.com/share" class="twitter-share-button" data-via="lefnire">Tweet</a>
</td> </td>
{/}
</tr> </tr>
</table> </table>
@@ -287,7 +289,7 @@
<!-- Required scripts, needed by ready() --> <!-- Required scripts, needed by ready() -->
<Scripts:> <Scripts:>
<script src=/js/jquery.min.js></script><!-- http://code.jquery.com/jquery-1.7.2.min.js --> <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/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/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 --> <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) --> <!-- Scripts not needed right away (google charts) or entirely optional (analytics) -->
<Tail:> <Tail:>
{#unless _mobileDevice}
<script src=/js/google-jsapi.js></script><!-- https://www.google.com/jsapi --> <script src=/js/google-jsapi.js></script><!-- https://www.google.com/jsapi -->
<script type="text/javascript"> <script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]}); google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){}); google.setOnLoadCallback(function(){});
</script> </script>
{/}
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
@@ -317,5 +321,5 @@
<!--<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"></script>--> <!--<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire"></script>-->
<!-- Twitter --> <!-- 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>{/}