diff --git a/src/app/browser.coffee b/src/app/browser.coffee index 75ae8a961a..6c671920fc 100644 --- a/src/app/browser.coffee +++ b/src/app/browser.coffee @@ -1,3 +1,84 @@ +content = require('./content') + +### + Loads JavaScript files from (1) public/js/* and (2) external sources + We use this file (instead of or inside .html) so we can utilize require() to concatinate for + faster page load, and $.getScript for asyncronous external script loading +### +module.exports.loadJavaScripts = (model) -> + + # Load public/js/* files + # TODO use Bower + require '../../public/js/jquery.min' + require '../../public/js/jquery-ui.min' unless model.get('_view.mobileDevice') + require '../../public/js/bootstrap.min' #http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js + require '../../public/js/jquery.cookie' #https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js + require '../../public/js/bootstrap-tour' #https://raw.github.com/pushly/bootstrap-tour/master/bootstrap-tour.js + require '../../public/js/jquery.bootstrap-growl.min' + + # JS files not needed right away (google charts) or entirely optional (analytics) + # Each file getsload asyncronously via $.getScript, so it doesn't bog page-load + unless model.get('_view.mobileDevice') + + # Addthis + $.getScript "https://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire" + + # Google Charts + $.getScript "https://www.google.com/jsapi", -> + # Specifying callback in options param is vital! Otherwise you get blank screen, see http://stackoverflow.com/a/12200566/362790 + google.load "visualization", "1", {packages:["corechart"], callback: ->} + +# Note, Google Analyatics giving beef if in this file. Moved back to index.html. It's ok, it's async - really the +# syncronous requires up top are what benefit the most from this file. + +### + Setup jQuery UI Sortable +### +module.exports.setupSortable = (model) -> + unless (model.get('_view.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'] + +module.exports.setupTooltips = (model) -> + $('[rel=tooltip]').tooltip() + $('[rel=popover]').popover() + # FIXME: this isn't very efficient, do model.on set for specific attrs for popover + model.on 'set', '*', -> + $('[rel=tooltip]').tooltip() + $('[rel=popover]').popover() + + +module.exports.setupTour = (model) -> + tour = new Tour() + for step in content.tourSteps + tour.addStep + html: true + element: step.element + title: step.title + content: step.content + placement: step.placement + tour.start() + ### Sets up "+1 Exp", "Level Up", etc notifications ### @@ -38,35 +119,4 @@ module.exports.setupGrowlNotifications = (model) -> user.on 'set', 'stats.lvl', (captures, args) -> if captures > args - statsNotification(' Level Up!', 'info') - -### - Loads JavaScript files from (1) public/js/* and (2) external sources - We use this file (instead of or inside .html) so we can utilize require() to concatinate for - faster page load, and $.getScript for asyncronous external script loading -### -module.exports.loadJavaScripts = (model) -> - - # Load public/js/* files - # TODO use Bower - require '../../public/js/jquery.min' - require '../../public/js/jquery-ui.min' unless model.get('_view.mobileDevice') - require '../../public/js/bootstrap.min' #http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js - require '../../public/js/jquery.cookie' #https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js - require '../../public/js/bootstrap-tour' #https://raw.github.com/pushly/bootstrap-tour/master/bootstrap-tour.js - require '../../public/js/jquery.bootstrap-growl.min' - - # JS files not needed right away (google charts) or entirely optional (analytics) - # Each file getsload asyncronously via $.getScript, so it doesn't bog page-load - unless model.get('_view.mobileDevice') - - # Addthis - $.getScript "https://s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire" - - # Google Charts - $.getScript "https://www.google.com/jsapi", -> - # Specifying callback in options param is vital! Otherwise you get blank screen, see http://stackoverflow.com/a/12200566/362790 - google.load "visualization", "1", {packages:["corechart"], callback: ->} - - # Note, Google Analyatics giving beef if in this file. Moved back to index.html. It's ok, it's async - really the - # syncronous requires up top are what benefit the most from this file. + statsNotification(' Level Up!', 'info') \ No newline at end of file diff --git a/src/app/index.coffee b/src/app/index.coffee index 54965d51bf..de68dcab98 100644 --- a/src/app/index.coffee +++ b/src/app/index.coffee @@ -11,6 +11,7 @@ scoring = require './scoring' schema = require './schema' helpers = require './helpers' helpers.viewHelpers view +browser = require './browser' _ = require('lodash') @@ -79,54 +80,16 @@ get '/', (page, model, next) -> # ========== CONTROLLER FUNCTIONS ========== ready (model) -> - require('./browser').loadJavaScripts(model) + browser.loadJavaScripts(model) + browser.setupSortable() + browser.setupTooltips() + browser.setupTour() # Setup model in scoring functions scoring.setModel(model) require('../server/private').app(exports, model) - $('[rel=tooltip]').tooltip() - $('[rel=popover]').popover() - # FIXME: this isn't very efficient, do model.on set for specific attrs for popover - model.on 'set', '*', -> - $('[rel=tooltip]').tooltip() - $('[rel=popover]').popover() - - unless (model.get('_view.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 - tour.addStep - html: true - element: step.element - title: step.title - content: step.content - placement: step.placement - tour.start() - model.on 'set', '_user.tasks.*.completed', (i, completed, previous, isLocal, passed) -> return if passed? && passed.cron # Don't do this stuff on cron direction = () -> @@ -298,7 +261,6 @@ ready (model) -> # ========== CRON ========== - # FIXME seems can't call scoring.cron() instantly, have to call after some time (2s here) - # Doesn't do anything otherwise. Don't know why... model not initialized enough yet? + # FIXME add animated HP loss on timeout # setTimeout scoring.cron, 2000 # Run once on refresh # setInterval scoring.cron, 3600000 # Then run once every hour