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 new file mode 100644 index 00000000..db5dcf0c --- /dev/null +++ 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. + + + + +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) \ No newline at end of file diff --git a/www/attributes/ic-switch-class.html b/www/attributes/ic-switch-class.html index 90a6f162..ce545dff 100644 --- a/www/attributes/ic-switch-class.html +++ b/www/attributes/ic-switch-class.html @@ -34,12 +34,12 @@

Example

         <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>
@@ -47,23 +47,19 @@

Example

- Pick a tab + Tab 1
diff --git a/www/docs.html b/www/docs.html index a0f277e8..69fe5006 100644 --- a/www/docs.html +++ b/www/docs.html @@ -23,6 +23,7 @@

Table Of Contents

  • CSS Element Transitions
  • Client Side Tools
  • History
    • +
  • Progressive Enhancement
  • Server Sent Events BETA
  • Anatomy of an Intercooler Request
  • Anatomy of an Intercooler Response
    • @@ -579,6 +580,14 @@

    Disabling Elements

    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.

    +

    The ic-global-indicator Attribute

    + +

    + The ic-global-indicator attribute is similar to the ic-indicator attribute, but + will be shown in addition to any local indicators. This can be used to implement a site-wide progress indicator. +

    + +
    @@ -855,6 +864,64 @@

    Client-Side Actions

    +

    Switch Class

    + +

    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.

    + +

    Intercooler has an attribute, ic-switch-class 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.

    + +

    Below is an example of a tabbed UI using this technique. Note that the tabs are not replaced, but the + active class is switched between them as they are clicked.

    + + 
    +        <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">
+          Pick a tab
+        </div>
+
    + +
    + + + + +
    + Tab 1 +
    + +
    + + 
    +  <a ic-action="slideToggle" ic-target="#chesterton-quote">Toggle Chesterton!</a>
+
    + +
    + Toggle Chesterton! + +
    +
    @@ -926,6 +993,47 @@

    Conditionally Updating The Location/History

    use the history support.

    +
    + +
    + + +

    Progressive Enhancement

    + +

    Intercooler provides a mechanism for + progressive enhancement. The + ic-enhance attribute can be set to true + on an element, all child anchor tags and form tags will be converted to their equivalent intercooler + implementations.

    + +

    Anchor tags (links) will be converted to ic-get-from with ic-push-url set to true.

    + +

    Forms will be converted to the intercooler equivalent action (e.g. a POST form will convert to ic-post-to)

    + +

    Commonly you will have an ic-target set up at the top level of your DOM, paired with a + ic-enhance attribute. You can differentiate on the server side between normal and AJAX requests + by looking for the intercooler headers.

    + +

    Here is an example:

    + + 
    +    <div ic-enhance="true">
+      <a href="/enhancement_example">Click Me!</a>
+    </div>
+
    + +
    + +
    + Click Me! +
    +
    +
    diff --git a/www/release/CHANGES.html b/www/release/CHANGES.html index 23fc0a0d..7e990bed 100644 --- a/www/release/CHANGES.html +++ b/www/release/CHANGES.html @@ -7,7 +7,7 @@

    - Intercooler 1.2.1 - March 29, 2019 + Intercooler 1.2.2 - March 29, 2019