From b8d4a9d6a22c57c59bf84c96adcea76c99bfd866 Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Wed, 5 Dec 2012 08:09:27 -0800
Subject: [PATCH] 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

---
 src/app/index.coffee           |  2 ++
 src/app/loadJavascripts.coffee | 47 ++++++++++++++++++++++++++++++++++
 views/app/index.html           | 43 +------------------------------
 3 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 src/app/loadJavascripts.coffee

diff --git a/src/app/index.coffee b/src/app/index.coffee
index 9f6b8cc294..ca6e2e516c 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -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)
   
diff --git a/src/app/loadJavascripts.coffee b/src/app/loadJavascripts.coffee
new file mode 100644
index 0000000000..6394cf39f7
--- /dev/null
+++ b/src/app/loadJavascripts.coffee
@@ -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
+      )()
+
diff --git a/views/app/index.html b/views/app/index.html
index 024c32d11b..12c197d788 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -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>
\ No newline at end of file