move some more client setup to browser.coffee

This commit is contained in:
Tyler Renelle 2013-01-20 17:55:45 -05:00
parent ff2fb0f643
commit ca91a3a07d
2 changed files with 88 additions and 76 deletions

View file

@ -1,3 +1,84 @@
content = require('./content')
###
Loads JavaScript files from (1) public/js/* and (2) external sources
We use this file (instead of <Scripts:> or <Tail:> 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('<i class="icon-chevron-up"></i> Level Up!', 'info')
###
Loads JavaScript files from (1) public/js/* and (2) external sources
We use this file (instead of <Scripts:> or <Tail:> 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('<i class="icon-chevron-up"></i> Level Up!', 'info')

View file

@ -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