Really use the new intercooler this time

brutaldon/static/js/intercooler.js

@@ -24,7 +24,7 @@ var Intercooler = Intercooler || (function() {
 
   // work around zepto build issue TODO - fix me
   if((typeof Zepto !== "undefined") && ($ == null)) {
-    $ = Zepto
+    window["$"] = Zepto
   }
 
   //--------------------------------------------------
@@ -88,9 +88,10 @@ var Intercooler = Intercooler || (function() {
   }
 
   function hideIndicator(elt) {
-    if (elt.data('ic-use-transition')) {
+    if (elt.data('ic-use-transition') || elt.data('ic-indicator-cleared')) {
       elt.data('ic-use-transition', null);
       elt.addClass('ic-use-transition');
+      elt.data('ic-indicator-cleared', true);
     } else {
       elt.hide();
     }
@@ -259,6 +260,11 @@ var Intercooler = Intercooler || (function() {
       document.title = xhr.getResponseHeader("X-IC-Title");
     }
 
+    if (xhr.getResponseHeader("X-IC-Title-Encoded")) {
+      var decodedTitle = decodeURIComponent((xhr.getResponseHeader("X-IC-Title-Encoded")).replace(/\+/g, '%20'));
+      document.title = decodedTitle;
+    }
+
     if (xhr.getResponseHeader("X-IC-Refresh")) {
       var pathsToRefresh = xhr.getResponseHeader("X-IC-Refresh").split(",");
       log(elt, "X-IC-Refresh: refreshing " + pathsToRefresh, "DEBUG");
@@ -351,14 +357,19 @@ var Intercooler = Intercooler || (function() {
 
   function beforeRequest(elt) {
     elt.addClass('disabled');
+    elt.addClass('ic-request-in-flight');
     elt.data('ic-request-in-flight', true);
   }
 
-  function requestCleanup(indicator, elt) {
+  function requestCleanup(indicator, globalIndicator, elt) {
     if (indicator.length > 0) {
       hideIndicator(indicator);
     }
+    if (globalIndicator.length > 0) {
+      hideIndicator(globalIndicator);
+    }
     elt.removeClass('disabled');
+    elt.removeClass('ic-request-in-flight');
     elt.data('ic-request-in-flight', false);
     if (elt.data('ic-next-request')) {
       elt.data('ic-next-request')["req"]();
@@ -445,6 +456,12 @@ var Intercooler = Intercooler || (function() {
 
     data = replaceOrAddMethod(data, type);
 
+    // Global spinner support
+    var globalIndicator = findGlobalIndicator(elt);
+    if (globalIndicator && globalIndicator.length > 0) {
+      showIndicator(globalIndicator);
+    }
+
     // Spinner support
     var indicator = findIndicator(elt);
     if (indicator.length > 0) {
@@ -490,6 +507,7 @@ var Intercooler = Intercooler || (function() {
         }
 
         var beforeHeaders = new Date();
+        var oldTitle = document.title;
         try {
           if (processHeaders(elt, xhr)) {
             log(elt, "Processed headers for request " + requestId + " in " + (new Date() - beforeHeaders) + "ms", "DEBUG");
@@ -497,10 +515,10 @@ var Intercooler = Intercooler || (function() {
 
             if (xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-push-url') == "true") {
               try {
-                requestCleanup(indicator, elt); // clean up before snap-shotting HTML
+                requestCleanup(indicator, globalIndicator, elt); // clean up before snap-shotting HTML
                 var newUrl = xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-src');
                 if(_history) {
-                  _history.snapshotForHistory(newUrl);
+                  _history.snapshotForHistory(newUrl, oldTitle);
                 } else {
                   throw "History support not enabled";
                 }
@@ -531,7 +549,7 @@ var Intercooler = Intercooler || (function() {
       },
       complete: function(xhr, status) {
         log(elt, "AJAX request " + requestId + " completed in " + (new Date() - requestStart) + "ms", "DEBUG");
-        requestCleanup(indicator, elt);
+        requestCleanup(indicator, globalIndicator, elt);
         try {
           if ($.contains(document, elt[0])) {
             triggerEvent(elt, "complete.ic", [elt, data, status, xhr, requestId]);
@@ -557,14 +575,24 @@ var Intercooler = Intercooler || (function() {
     triggerEvent($(document), "beforeAjaxSend.ic", [ajaxSetup, elt]);
 
     if(ajaxSetup.cancel) {
-      requestCleanup(indicator, elt);
+      requestCleanup(indicator, globalIndicator, elt);
     } else {
       $.ajax(ajaxSetup)
     }
   }
 
+  function findGlobalIndicator(elt) {
+    var indicator = $([]);
+    elt = $(elt);
+    var attr = closestAttrValue(elt, 'ic-global-indicator');
+    if (attr && attr !== "false") {
+      indicator = $(attr).first();
+    }
+    return indicator;
+  }
+
   function findIndicator(elt) {
-    var indicator = null;
+    var indicator = $([]);
     elt = $(elt);
     if (getICAttribute(elt, 'ic-indicator')) {
       indicator = $(getICAttribute(elt, 'ic-indicator')).first();
@@ -727,6 +755,7 @@ var Intercooler = Intercooler || (function() {
       });
     } else {
       processMacros(elt);
+      processEnhancement(elt);
       processSources(elt);
       processPolling(elt);
       processEventSources(elt);
@@ -846,6 +875,18 @@ var Intercooler = Intercooler || (function() {
     }
   }
 
+  function processEnhancement(elt) {
+    if (elt.closest('.ic-ignore').length == 0) {
+      if(closestAttrValue(elt, 'ic-enhance') === 'true') {
+        enhanceDomTree(elt);
+      } else {
+        elt.find(getICAttributeSelector('ic-enhance')).each(function(){
+          enhanceDomTree($(this));
+        });
+      }
+    }
+  }
+
   function processEventSources(elt) {
     if (elt.closest('.ic-ignore').length == 0) {
       handleEventSource(elt);
@@ -1178,6 +1219,7 @@ var Intercooler = Intercooler || (function() {
       setIfAbsent(elt, 'ic-trigger-on', 'default');
       setIfAbsent(elt, 'ic-deps', 'ignore');
     }
+
     if (macroIs(macro, 'ic-action')) {
       setIfAbsent(elt, 'ic-trigger-on', 'default');
     }
@@ -1209,6 +1251,51 @@ var Intercooler = Intercooler || (function() {
     }
   }
 
+  function isLocalLink(anchor) {
+    return location.hostname === anchor[0].hostname &&
+      anchor.attr('href') &&
+      !anchor.attr('href').startsWith("#")
+  }
+
+  function enhanceAnchor(anchor) {
+    if (closestAttrValue(anchor, 'ic-enhance') === "true") {
+      if (isLocalLink(anchor)) {
+        setIfAbsent(anchor, 'ic-src', anchor.attr('href'));
+        setIfAbsent(anchor, 'ic-trigger-on', 'default');
+        setIfAbsent(anchor, 'ic-deps', 'ignore');
+        setIfAbsent(anchor, 'ic-push-url', 'true');
+      }
+    }
+  }
+
+  function determineFormVerb(form) {
+    return form.find('input[name="_method"]').val() || form.attr('method') || form[0].method;
+  }
+
+  function enhanceForm(form) {
+    if (closestAttrValue(form, 'ic-enhance') === "true") {
+      setIfAbsent(form, 'ic-src', form.attr('action'));
+      setIfAbsent(form, 'ic-trigger-on', 'default');
+      setIfAbsent(form, 'ic-deps', 'ignore');
+      setIfAbsent(form, 'ic-verb', determineFormVerb(form));
+    }
+  }
+
+  function enhanceDomTree(elt) {
+    if(elt.is('a')) {
+      enhanceAnchor(elt);
+    }
+    elt.find('a').each(function(){
+      enhanceAnchor($(this));
+    });
+    if(elt.is('form')){
+      enhanceForm(elt);
+    }
+    elt.find('form').each(function(){
+      enhanceForm($(this));
+    });
+  }
+
   function setIfAbsent(elt, attr, value) {
     if (getICAttribute(elt, attr) == null) {
       setICAttribute(elt, attr, value);
@@ -1352,6 +1439,19 @@ var Intercooler = Intercooler || (function() {
           if (forHistory != true) {
             maybeScrollToTarget(elt, target);
           }
+
+          var switchClass = elt.closest(getICAttributeSelector('ic-switch-class'));
+          var classToSwitch = switchClass.attr(fixICAttributeName('ic-switch-class'));
+          if(classToSwitch) {
+            switchClass.children().removeClass(classToSwitch);
+            switchClass.children().each(function(){
+              console.log($(this));
+              if($.contains($(this)[0], $(elt)[0]) || $(this)[0] == $(elt)[0]) {
+                $(this).addClass(classToSwitch);
+              }
+            })
+          }
+
         }
       };
 
@@ -1692,13 +1792,14 @@ var Intercooler = Intercooler || (function() {
       }
     }
 
-    function makeHistoryEntry(html, yOffset, url) {
+    function makeHistoryEntry(html, yOffset, url, title) {
       var restorationData = {
         "url": url,
         "id": HISTORY_SLOT_PREFIX + url,
         "content": html,
         "yOffset": yOffset,
-        "timestamp": new Date().getTime()
+        "timestamp": new Date().getTime(),
+        "title": title
       };
       updateLRUList(url);
       // save to the history slot
@@ -1724,18 +1825,18 @@ var Intercooler = Intercooler || (function() {
 
     function updateHistory() {
       if (_snapshot) {
-        pushUrl(_snapshot.newUrl, currentUrl(), _snapshot.oldHtml, _snapshot.yOffset);
+        pushUrl(_snapshot.newUrl, currentUrl(), _snapshot.oldHtml, _snapshot.yOffset, _snapshot.oldTitle);
         _snapshot = null;
       }
     }
 
-    function pushUrl(newUrl, originalUrl, originalHtml, yOffset) {
+    function pushUrl(newUrl, originalUrl, originalHtml, yOffset, originalTitle) {
 
-      var historyEntry = makeHistoryEntry(originalHtml, yOffset, originalUrl);
+      var historyEntry = makeHistoryEntry(originalHtml, yOffset, originalUrl, originalTitle);
       history.replaceState({"ic-id": historyEntry.id}, "", "");
 
       var t = getTargetForHistory($('body'));
-      var restorationData = makeHistoryEntry(t.html(), window.pageYOffset, newUrl);
+      var restorationData = makeHistoryEntry(t.html(), window.pageYOffset, newUrl, document.title);
       history.pushState({'ic-id': restorationData.id}, "", newUrl);
 
       triggerEvent(t, "pushUrl.ic", [t, restorationData]);
@@ -1748,7 +1849,10 @@ var Intercooler = Intercooler || (function() {
         if (historyData) {
           processICResponse(historyData["content"], getTargetForHistory($('body')), true);
           if (historyData["yOffset"]) {
-            window.scrollTo(0, historyData["yOffset"])
+            window.scrollTo(0, historyData["yOffset"]);
+          }
+          if (historyData["title"]) {
+            document.title = historyData["title"];
           }
           return true;
         } else {
@@ -1771,13 +1875,14 @@ var Intercooler = Intercooler || (function() {
       }
     }
 
-    function snapshotForHistory(newUrl) {
+    function snapshotForHistory(newUrl, oldTitle) {
       var t = getTargetForHistory($('body'));
       triggerEvent(t, "beforeHistorySnapshot.ic", [t]);
       _snapshot = {
         newUrl: newUrl,
         oldHtml: t.html(),
-        yOffset: window.pageYOffset
+        yOffset: window.pageYOffset,
+        oldTitle: oldTitle
       };
     }
 
@@ -1900,9 +2005,6 @@ var Intercooler = Intercooler || (function() {
         console.log("!!!! Please include the data module with Zepto!  Intercooler requires full data support to function !!!!")
       }
     }
-    if (location.search && location.search.indexOf("ic-launch-debugger=true") >= 0) {
-      Intercooler.debug();
-    }
   }
 
   $(function() {
@@ -1922,20 +2024,14 @@ var Intercooler = Intercooler || (function() {
     isDependent: isDependent,
     getTarget: getTarget,
     processHeaders: processHeaders,
+    startPolling: startPolling,
+    cancelPolling: cancelPolling,
     setIsDependentFunction: function(func) {
       _isDependentFunction = func;
     },
     ready: function(readyHandler) {
       _readyHandlers.push(readyHandler);
     },
-    debug: function() {
-      var debuggerUrl = closestAttrValue('body', 'ic-debugger-url') ||
-      "https://intercoolerreleases-leaddynocom.netdna-ssl.com/intercooler-debugger.js";
-      $.getScript(debuggerUrl)
-      .fail(function(jqxhr, settings, exception) {
-        log($('body'), formatError(exception), "ERROR");
-      });
-    },
     _internal: {
       init: init,
       replaceOrAddMethod: replaceOrAddMethod,

brutaldon/templates/base.html

@@ -71,9 +71,7 @@
 
 
     </head>
-    <body ic-enhance="true"
+    <body ic-global-include='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
-          ic-global-indicator="#page-load-indicator"
-          ic-global-include='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
         <div id="page-load-indicator"></div>
         <div id="new-toot-modal" class="modal"></div>
         {% block navbar %}
@@ -167,7 +165,8 @@
             </nav>
         {% endblock %}
 
-        <main id="main" class="section">
+            <main id="main" class="section" ic-enhance="true"
+                  ic-global-indicator="#page-load-indicator">
             <div class="container">
                 {% block content %}
                     <h1 class="title">