complete docs

www/attributes/ic-enhance.html

@@ -41,10 +41,16 @@ <h3>Example</h3>
       Below is a live demo of an achor tag that has been enhanced.  Note that it is a standard anchor tag, but
       if you click on it it will issue an AJAX request and update the navigation bar.
 
+      <pre>
+      &lt;div ic-enhance="true">
+        &lt;h3>Here is an enhanced link&lt;/h3>
+        &lt;a href="/ic-enhance">A Link&lt;/a>
+      &lt;/div>
+      </pre>
+
       <div class="live-demo">
         <script>
           (function () {
-            var init = Math.floor(new Date().getTime() / 1000);
             $.mockjax({
               'url': '/ic-enhance',
               'response': function () {
@@ -54,7 +60,7 @@ <h3>Example</h3>
           })();
         </script>
 
-        <div ic-enhance="true"">
+        <div ic-enhance="true">
           <h3>Here is an enhanced link</h3>
           <a href="/ic-enhance">A Link</a>
         </div>

www/attributes/ic-global-indicator.html

@@ -0,0 +1,59 @@
+---
+layout: default
+nav: attributes > ic-indicator
+---
+
+<div class="container">
+
+  <div class="row">
+    <div class="col-md-12">
+
+      <h2><code>ic-indicator</code> - The Global Indicator Attribute</h2>
+
+      <h3>Summary</h3>
+
+      <p>The global indicator attribute can be used to show an indicator while a request is in process.  This
+      indicator will be shown in addition to any local request indicators otherwise specified.</p>
+
+      <h3>Syntax</h3>
+
+      <p>The value of the attribute should be a valid selector of the indicator element to show, or
+      <code>false</code> if you wish for an element to not show a global indicator specified on a
+      parent element.</p>
+
+      <h3>Example</h3>
+
+<pre>
+  &lt;div ic-global-indicator="#indicator">
+    &lt;button ic-post-to="/target_url" >
+      Click Me!
+      &lt;i class="fa fa-spinner fa-spin ic-indicator" style="display:none">&lt;/i>
+    &lt;/button>
+    &lt;br/>
+    Global Indicator: &lt;i id="indicator" class="fa fa-spinner fa-spin" style="display:none">&lt;/i>
+  &lt;/div>
+</pre>
+
+
+      <div class="live-demo">
+        <script>
+          $.mockjax({
+            'url': '/target_url',
+            responseTime: 1500
+          });
+        </script>
+
+        <div ic-global-indicator="#indicator">
+        <button ic-post-to="/target_url" >
+        Click Me!
+        <i class="fa fa-spinner fa-spin ic-indicator" style="display:none"></i>
+        </button>
+
+          <br/>
+
+        Global Indicator: <i id="indicator" class="fa fa-spinner fa-spin" style="display:none"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

www/attributes/ic-switch-class.html

@@ -0,0 +1,73 @@
+---
+layout: default
+nav: attributes > ic-switch-class
+---
+
+<div class="container">
+
+  <div class="row">
+    <div class="col-md-12">
+
+      <h2><code>ic-switch-class</code> - The Switch Class Attribute</h2>
+
+      <h3>Summary</h3>
+
+      <p>The <code>ic-switch-class</code> attribute allows you to switch classes
+        between elements after a response has been received.  This allows you to
+        for example update a tab state without replacing the tabs in the server
+        response.</p>
+
+      <h3>Syntax</h3>
+
+      <p>The value of this attribute should be the name of the class to be switched between sibling
+      elements and the attribute should be placed on the parent element.</p>
+
+      <h3>Dependencies</h3>
+
+      <p>The <code>ic-switch-class</code> attribute has no effect on dependencies.</p>
+
+      <h3>Example</h3>
+
+      <p>Here is a simple bootstrap tab example.  Note that the body of the tabbed UI is
+      replaced with new HTML, but the tabs are not, since we are targeting <code>#content</code>.
+      The tabs update based on switching the class <code>active</code> between them.</p>
+
+      <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;/ul>
+        &lt;div id="content">
+          Pick a tab
+        &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...";
+              }
+            });
+          })();
+        </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>
+        </ul>
+        <div id="content">
+          Pick a tab
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</div>

www/reference.html

@@ -303,7 +303,7 @@ <h3><i class="fa fa-code"></i> HTML Attributes</h3>
             </tr>
 
             <tr>
-              <td><a href="/attributes/ic-switch-class.html">ic-swap-style</a></td>
+              <td><a href="/attributes/ic-switch-class.html">ic-switch-class</a></td>
               <td>Allows you to swap a class amongst sibling elements in a DOM when an intercooler event is triggered.
               This can be used, for example, to switch an <code>active</code> class between tabs without replacing
               the HTML.</td>

www/release/CHANGES.html

@@ -11,15 +11,15 @@ <h2>
   </h2>
   <ul>
     <li>
-      Added <code>ic-enhance</code> attribute, which enhances standard anchor and form tags with the intercooler
+      Added <code><a href="/attributes/ic-enhance.html">ic-enhance</a></code> attribute, which enhances standard anchor and form tags with the intercooler
       equivalent attributes, allowing for graceful degradation in non-javascript environments.
     </li>
     <li>
-      Added <code>ic-global-indicator</code> attribute, which sets a global indicator to be shown when a request
+      Added <code><a href="/attributes/ic-global-indicator.html">ic-global-indicator</a></code> 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.
     </li>
     <li>
-      Added <code>ic-switch-class</code> attribute, which switches a class between siblings when an intercooler request
+      Added <code><a href="/attributes/ic-switch-class.html">ic-switch-class</a></code> 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.
     </li>