move all javascript file loading (/public/js/* and external scripts)

from html file to javascript load function. This way we can utilize
require() for concatenation & faster page load, and $.getScript() for
async script-loading
This commit is contained in:
Tyler Renelle 2012-12-05 08:09:27 -08:00
parent 2a8bc2abe2
commit b8d4a9d6a2
3 changed files with 50 additions and 42 deletions

View file

@ -78,6 +78,8 @@ get '/:uid?', (page, model, {uid}, next) ->
# ========== CONTROLLER FUNCTIONS ==========
ready (model) ->
require('./loadJavascripts')(model)
# Setup model in scoring functions
scoring.setModel(model)

View file

@ -0,0 +1,47 @@
###
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 = (model) ->
# Load public/js/* files
# TODO use Bower
require '../../public/js/jquery.min'
require '../../public/js/jquery-ui.min' unless model.get('_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('_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: ->}
# 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>-->
# Google Analyatics
if model.get('_nodeEnv') == 'production'
_gaq = _gaq || []
_gaq.push(['_setAccount', 'UA-33510635-1'])
_gaq.push(['_trackPageview'])
(->
ga = document.createElement("script")
ga.type = "text/javascript"
ga.async = true
ga.src = ((if "https:" is document.location.protocol then "https://ssl" else "http://www")) + ".google-analytics.com/ga.js"
s = document.getElementsByTagName("script")[0]
s.parentNode.insertBefore ga, s
)()

View file

@ -400,45 +400,4 @@
</div>
<div class="task-text"><img src="/img/BrowserQuest/habitrpg_mods/{:item.icon}.png" /> {:item.text}</div>
</pre>
</li>
<!-- Required scripts, needed by ready() -->
<Scripts:>
<script src=/js/jquery.min.js></script>
{#unless _mobileDevice}<script src=/js/jquery-ui.min.js></script>{/}
<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/bootstrap-tour.js></script><!-- https://raw.github.com/pushly/bootstrap-tour/master/bootstrap-tour.js -->
<script src=/js/jquery.bootstrap-growl.min.js></script>
<!-- Scripts not needed right away (google charts) or entirely optional (analytics) -->
<Tail:>
{#unless _mobileDevice}
<!-- Google Charts -->
<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>
<!-- Addthis -->
<script type="text/javascript" src="https://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>-->
{/}
{#if equal(_nodeEnv,'production')}
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33510635-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{/}
</li>