intercooler.js library updated with WP goodness

An update to the plugin following an update to the library.

intercooler.js updated

The intercooler.js library has been updated to version 0.9.0 and following along I’ve updated the wp-intercooler plugin to that version.
While the plugin is not doing anything more the library itself packs some changes and some deprecations that can be seen here.

TodoMVC WordPress theme updated

Since I’ve developed a Todo-mvc porting based on a WordPress backend and an intercooler.js powered AJAX interaction I’ve made some adjustments to the theme (the format of the porting) to accommodate for deprecation and new functions.

Transitions

Transitions have been moved to CSS and hence the direction I was using in the theme JavaScript file is deprecated

Intercooler.defaultTransition( 'none' );

I used this to have no transitions between UI updates; this has its counterpart in the use of the ic-transition attribute so the markup changed from this

<div id="todo-list" <?php echo todomvc_get_display() ?>>
    <?php todomvc_the_list() ?>
</div>

to this

<div id="todo-list" <?php echo todomvc_get_display() ?> ic-transition-duration="0ms">
    <?php todomvc_the_list() ?>
</div>

Little pain and a clean approach.

Global require

The feature I’m coveting is the addition of the ic-global-include attribute.
To secure almost any application with a front-end facing website users WordPress will use nonces and this, in practical terms, means a wp_nonce_field function call (or something similar in scope) will be made to render the markup initial state.
To include such an input in any request made to the backend I was using an intercooler.js provided hook function in the theme JavaScript file

$( 'section.todoapp' ).on( 'beforeSend.ic', function ( evt, elt, data, settings) {
    var nonce = '&_wpnonce=' + $( '#_wpnonce' ).val()
    switch ( settings.type ) {
        case 'GET'    :
            settings.url = settings.url + nonce;
            break;
        default :
            settings.data = data + nonce;
            data = data + nonce;
            break;
    }
} );

I was able to remove this whole code block just adding the new attribute to the markup

<section class="todoapp" ic-global-include="#_wpnonce">
    <?php wp_nonce_field( 'todo-mvc' ) ?>
    <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="What needs to be done?" autofocus="" ic-post-to="/tasks" name="task-title"
               ic-target="#todo-list">
    </header>
    <div id="todo-list" <?php echo todomvc_get_display() ?> ic-transition-duration="0ms">
        <?php todomvc_the_list() ?>
    </div>
</section>

The theme is not the edge of excellency in coding terms but it’s a reference point about intercooler.js usages together with WordPress.

On GitHub

I’ve pushed the version of the theme contemporary to this post to GitHub tagged version 0.2.0.

I appreciate your input