[bug 584776] Lazy load jqueryui JS.

* Include generic function to lazy load scripts and stylesheets.
* Add TODO for removing dependency on jqueryui CSS.

TODO: (future, if needed)
Lazy load jquery ui everywhere, and use a callback to resume running JS code that depends on it. (AMO is already doing this.)

apps/customercare/templates/customercare/base.html

@@ -1,4 +1,4 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "common/base.html" %}
 {% set styles = ('customercare', 'jqueryui/jqueryui') %}
-{% set scripts = ('customercare',) %}
+{% set scripts = ('customercare', 'libs/jqueryui') %}

apps/questions/templates/questions/base.html

@@ -1,7 +1,7 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
 {% extends "layout/base.html" %}
 {% set styles = ('questions', 'jqueryui/jqueryui') %}
-{% set scripts = ('questions',) %}
+{% set scripts = ('questions', 'libs/jqueryui') %}
 
 {% block content_area %}
 

apps/search/templates/search/form.html

@@ -6,7 +6,7 @@
 {% set classes = 'advanced_search' %}
 {% endif %}
 {% set styles = ('search',) %}
-{% set scripts = ('search',) %}
+{% set scripts = ('search', 'libs/jqueryui') %}
 
 {% block content %}
   {% if advanced != '0' %}

apps/wiki/templates/wiki/base.html

@@ -6,7 +6,7 @@
   {% set styles = ('wiki', 'jqueryui/jqueryui') %}
 {% endif %}
 {% if not scripts %}
-  {% set scripts = ('wiki',) %}
+  {% set scripts = ('wiki', 'libs/jqueryui') %}
 {% endif %}
 {% if not top_link %}
   {% set top_link = url('home') %}

media/js/main.js

@@ -2,6 +2,9 @@
 k = {};
 
 (function () {
+    k.LAZY_DELAY = 500;  // delay to lazy loading scripts, in ms
+    k.MEDIA_URL = '/media/';
+
     $(document).ready(function() {
         /* Focus form field when clicking on error message. */
         $('#content-inner ul.errorlist a').click(function () {
@@ -18,6 +21,7 @@ k = {};
         initAutoSubmitSelects();
         initSearchAutoFilters();
         disableFormsOnSubmit();
+        lazyLoadScripts();
 
     });
 
@@ -89,6 +93,53 @@ k = {};
         });
     }
 
+    /*
+     * This lazy loads our jQueryUI script.
+     */
+    function lazyLoadScripts() {
+        var scripts = ['js/libs/jqueryui-min.js'],
+            styles = [],  // was: ['css/jqueryui/jqueryui-min.css']
+                          // turns out this messes with search
+            i;
+
+        // Don't lazy load scripts that have already been loaded
+        $.each($('script'), function () {
+            var this_src = $(this).attr('src');
+            if (!this_src) return ;
+            remove_item(scripts, this_src);
+        });
+
+        // Don't lazy load stylesheets that have already been loaded
+        $.each($('link[rel="stylesheet"]'), function () {
+            remove_item(styles, $(this).attr('href'));
+        });
+
+        setTimeout(function lazyLoad() {
+            for (i in scripts) {
+                $.get(k.MEDIA_URL + scripts[i]);
+            }
+            for (i in styles) {
+                $('head').append(
+                    '<link rel="stylesheet" type="text/css" href="' +
+                    k.MEDIA_URL + styles[i] + '">');
+            }
+        }, k.LAZY_DELAY);
+    }
+
+    /*
+     * Remove an item from a list if it matches the substring match_against.
+     * Caution: modifies from_list.
+     * E.g. list = ['string'], remove_item(list, 'str') => list is [].
+     */
+    function remove_item(from_list, match_against) {
+        match_against = match_against.toLowerCase();
+        for (var i in from_list) {
+            if (match_against.indexOf(from_list[i]) >= 0) {
+                from_list.splice(i, 1);
+            }
+        }
+    }
+
 })();
 
 

media/js/screencast.js

@@ -5,7 +5,6 @@
 
 (function () {
     var VIDEO_ID_PREFIX = 'video-flash-', id_counter = 0,
-        MEDIA_URL = '/media/',  // same value as settings.py
         FLASH_VERSION = '9.0.0',
         params = {allowfullscreen: 'true'},
         flashvars = {
@@ -63,12 +62,12 @@
         if (flash_file.substr(-4) === '.swf') {
             swfobject.embedSWF(
                 flash_file, unique_id, width, height, FLASH_VERSION,
-                MEDIA_URL + '/media/swf/expressInstall.swf', flashvars, params);
+                k.MEDIA_URL + '/media/swf/expressInstall.swf', flashvars, params);
         } else if (flash_file) {
             flashvars.flv = flash_file;
             swfobject.embedSWF(
-                MEDIA_URL + 'swf/screencast.swf', unique_id, width, height,
-                FLASH_VERSION, MEDIA_URL + '/media/swf/expressInstall.swf',
+                k.MEDIA_URL + 'swf/screencast.swf', unique_id, width, height,
+                FLASH_VERSION, k.MEDIA_URL + '/media/swf/expressInstall.swf',
                 flashvars, params);
         } else {
             $video.hide();

settings.py

@@ -298,6 +298,7 @@ def JINJA_CONFIG():
             'css/main.css',
             'css/sidebar.css',
         ),
+        # TODO: remove dependency on jquery ui CSS and use our own
         'jqueryui/jqueryui': (
             'css/jqueryui/jqueryui.css',
         ),
@@ -347,8 +348,10 @@ def JINJA_CONFIG():
             'global/menu.js',
             'js/main.js',
         ),
-        'questions': (
+        'libs/jqueryui': (
             'js/libs/jqueryui.min.js',
+        ),
+        'questions': (
             'js/markup.js',
             'js/libs/jquery.ajaxupload.js',
             'js/libs/jquery.modal.js',
@@ -357,7 +360,6 @@ def JINJA_CONFIG():
             'js/tags.js',
         ),
         'search': (
-            'js/libs/jqueryui.min.js',
             'js/search.js',
         ),
         'forums': (
@@ -379,12 +381,10 @@ def JINJA_CONFIG():
             'js/libs/jquery.modal.js',
             'js/screencast.js',
             'js/wiki.js',
-            'js/libs/jqueryui.min.js',
             'js/tags.js',
             'js/dashboards.js',
         ),
         'customercare': (
-            'js/libs/jqueryui.min.js',
             'js/libs/jquery.NobleCount.js',
             'js/libs/jquery.cookie.js',
             'js/libs/jquery.bullseye-1.0.min.js',