finish up release

bigskysoftware · Mar 29, 2019 · c4d269d · c4d269d
1 parent 14eff63
commit c4d269d
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 16 deletions.
diff --git a/www/_posts/2019-3-29-intercooler-1.2.2-released.md b/www/_posts/2019-3-29-intercooler-1.2.2-released.md
@@ -0,0 +1,27 @@
+---
+layout: blog_post
+nav: blog
+---
+
+I have released intercooler v1.2.2, available on the main site, as well as through bower and NPM.
+
+  <http://intercoolerjs.org/download.html>
+
+
+Changes in this release are:
+
+*   Added `[ic-enhance](/attributes/ic-enhance.html)` attribute, which enhances standard anchor and form tags with the 
+    intercooler equivalent attributes, allowing for graceful degradation in non-javascript environments.
+*   Added `[ic-global-indicator](/attributes/ic-global-indicator.html)` attribute, which sets a global indicator to be 
+   shown when a request is in flight, even along side any local indicators specified by the triggering element.
+*   Added `[ic-switch-class](/attributes/ic-switch-class.html)` attribute, which switches a class between siblings when 
+    an intercooler request is caused within one. This can be uses, for example, to update the "active" state of tabs 
+    without replacing the tab UI.
+*   `LeadDyno.startPolling()` and `LeadDyno.stopPolling()` were added to the Javascript API
+*   Added `X-IC-Title-Encoded` response header to handle URI encoded titles for international users
+*   Removed the legacy debugger
+*   Bug fixes  
+
+Enjoy, and thanks for using intercooler!  
+
+Carson / [@carson_gross](https://twitter.com/carson_gross)
diff --git a/www/attributes/ic-switch-class.html b/www/attributes/ic-switch-class.html
@@ -34,36 +34,32 @@ <h3>Example</h3>
 
       <pre>
         &lt;ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
-          &lt;li class="active">&lt;a ic-get-from="/tabs">Tab1&lt;/a>&lt;/li>
-          &lt;li>&lt;a ic-get-from="/tabs">Tab2&lt;/a>&lt;/li>
-          &lt;li>&lt;a ic-get-from="/tabs">Tab3&lt;/a>&lt;/li>
+          &lt;li class="active">&lt;a ic-get-from="/tab1">Tab1&lt;/a>&lt;/li>
+          &lt;li>&lt;a ic-get-from="/tab2">Tab2&lt;/a>&lt;/li>
+          &lt;li>&lt;a ic-get-from="/tab3">Tab3&lt;/a>&lt;/li>
         &lt;/ul>
         &lt;div id="content">
-          Pick a tab
+          Tab 1
         &lt;/div>
       </pre>
 
       <div class="live-demo">
         <script>
           (function () {
             var i = 0;
-            $.mockjax({
-              'url': '/tabs',
-              'response': function () {
-                i++;
-                this.responseText = "You have changed tabs " + i + " times...";
-              }
-            });
+            $.mockjax({'url': '/tab1', 'responseText': "Tab 1"});
+            $.mockjax({'url': '/tab2', 'responseText': "Tab 2"});
+            $.mockjax({'url': '/tab3', 'responseText': "Tab 3"});
           })();
         </script>
 
         <ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
-          <li class="active"><a ic-get-from="/tabs">Tab1</a></li>
-          <li><a ic-get-from="/tabs">Tab2</a></li>
-          <li><a ic-get-from="/tabs">Tab3</a></li>
+          <li class="active"><a ic-get-from="/tab1">Tab1</a></li>
+          <li><a ic-get-from="/tab2">Tab2</a></li>
+          <li><a ic-get-from="/tab3">Tab3</a></li>
         </ul>
         <div id="content">
-          Pick a tab
+          Tab 1
         </div>
 
       </div>

diff --git a/www/docs.html b/www/docs.html
@@ -23,6 +23,7 @@ <h3>Table Of Contents</h3>
           <li><a href="#transitions">CSS Element Transitions</a></li>
           <li><a href="#client-side">Client Side Tools</a></li>
           <li><a href="#history">History</a></li>
+          <li><a href="#progressive_enhancement">Progressive Enhancement</a></li>
           <li><a href="#sse">Server Sent Events <sub>BETA</sub></a></li>
           <li><a href="#requests">Anatomy of an Intercooler Request</a></li>
           <li><a href="#responses">Anatomy of an Intercooler Response</a></li>
@@ -579,6 +580,14 @@ <h3>Disabling Elements</h3>
         <p>In the above demos you will see that the button greys out during
           the request, which is due to Bootstrap's handling of this CSS class.</p>
 
+        <h3>The <code>ic-global-indicator</code> Attribute</h3>
+
+        <p>
+          The <code><a href="/attributes/ic-global-indicator.html">ic-global-indicator</a></code> attribute is similar to the <code>ic-indicator</code> attribute, but
+          will be shown in addition to any local indicators.  This can be used to implement a site-wide progress indicator.
+        </p>
+
+
       </section>
 
       <section>
@@ -855,6 +864,64 @@ <h3>Client-Side Actions</h3>
           </blockquote>
         </div>
 
+        <h3>Switch Class</h3>
+
+        <p>Sometimes you may want to switch a class between siblings in a DOM without replacing the HTML.  A
+        common situation where this comes up is in tabbed UIs, where the target is within the tabbed UI, but the
+        tabs themselves are not replaced.</p>
+
+        <p>Intercooler has an attribute, <code><a href="/attributes/ic-switch-class.html">ic-switch-class</a></code> that
+        enabled this pattern.  It is placed on the parent element and the value is the name of the class that will be
+        switched to the element causing the intercooler request.</p>
+
+        <p>Below is an example of a tabbed UI using this technique.  Note that the tabs are not replaced, but the
+        <code>active</code> class is switched between them as they are clicked.</p>
+
+        <pre>
+        &lt;ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
+          &lt;li class="active">&lt;a ic-get-from="/tab1">Tab1&lt;/a>&lt;/li>
+          &lt;li>&lt;a ic-get-from="/tab2">Tab2&lt;/a>&lt;/li>
+          &lt;li>&lt;a ic-get-from="/tab3">Tab3&lt;/a>&lt;/li>
+        &lt;/ul>
+        &lt;div id="content">
+          Pick a tab
+        &lt;/div>
+        </pre>
+
+        <div class="live-demo">
+
+          <script>
+            (function () {
+              var i = 0;
+              $.mockjax({'url': '/tab1', 'responseText': "Tab 1"});
+              $.mockjax({'url': '/tab2', 'responseText': "Tab 2"});
+              $.mockjax({'url': '/tab3', 'responseText': "Tab 3"});
+            })();
+          </script>
+
+          <ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active">
+            <li class="active"><a ic-get-from="/tab1">Tab1</a></li>
+            <li><a ic-get-from="/tab2">Tab2</a></li>
+            <li><a ic-get-from="/tab3">Tab3</a></li>
+          </ul>
+          <div id="content">
+            Tab 1
+          </div>
+
+        </div>
+
+        <pre>
+  &lt;a ic-action="slideToggle" ic-target="#chesterton-quote">Toggle Chesterton!&lt;/a>
+        </pre>
+
+        <div class="live-demo">
+          <a class="btn btn-primary" ic-action="slideToggle" ic-target="#chesterton-quote">Toggle Chesterton!</a>
+          <blockquote id="chesterton-quote" style="display: none">
+            “Without education, we are in a horrible and deadly danger of taking educated people seriously.”<br/>
+            --GK Chesterton
+          </blockquote>
+        </div>
+
       </section>
 
       <section>
@@ -926,6 +993,47 @@ <h3>Conditionally Updating The Location/History</h3>
           use
           the history support.</p>
 
+      </section>
+
+        <section>
+        <a class="anchor" id="progressive_enhancement"></a>
+
+        <h2>Progressive Enhancement<i class=""></i></h2>
+
+        <p>Intercooler provides a mechanism for
+          <a href="https://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a>.  The
+          <code><a href="/attributes/ic-enhance.html">ic-enhance</a></code> attribute can be set to <code>true</code>
+        on an element, all child anchor tags and form tags will be converted to their equivalent intercooler
+        implementations.</p>
+
+          <p>Anchor tags (links) will be converted to <code>ic-get-from</code> with <code>ic-push-url</code> set to true.</p>
+
+          <p>Forms will be converted to the intercooler equivalent action (e.g. a POST form will convert to <code>ic-post-to</code>)</p>
+
+        <p>Commonly you will have an <code>ic-target</code> set up at the top level of your DOM, paired with a
+        <code>ic-enhance</code> attribute.  You can differentiate on the server side between normal and AJAX requests
+        by looking for the intercooler headers.</p>
+
+        <p>Here is an example:</p>
+
+  <pre>
+    &lt;div ic-enhance="true">
+      &lt;a href="/enhancement_example">Click Me!&lt;/a>
+    &lt;/div>
+  </pre>
+
+        <div class="live-demo">
+          <script>
+            $.mockjax({
+              url: '/enhancement_example',
+              responseText: "Link was clicked!"
+            });
+          </script>
+          <div ic-enhance="true">
+            <a href="/enhancement_example">Click Me!</a>
+          </div>
+        </div>
+
       </section>
 
         <section>

diff --git a/www/release/CHANGES.html b/www/release/CHANGES.html
@@ -7,7 +7,7 @@
 
   <a class="anchor" id="1_2_2"></a>
   <h2>
-    Intercooler 1.2.1 - March 29, 2019
+    Intercooler 1.2.2 - March 29, 2019
   </h2>
   <ul>
     <li>