AJAX navigation menu – 04

More steps back to an easier road

I’ve watched CSS-Tricks' “AJAXing a WordPress theme” screen cast and got struck in the face by my ignorance. It turns out that the whole Handlebars templating thing is not necessary at all.
Digging into WordPress theme clubhouse displays the “All AJAX” theme made during the tutorial and that’s what I want to accomplish.

I can then, probably, use Headway

What I was doing, and that was “preventing” me from using Headway, was trying to understand the WordPress query encoded in an URL and fetch the corresponding template populated with the requested information. Since Headway sports no templates that was an impossible task.
What I will be doing here is make normal GET requests to WordPress, be the theme Headway or not, and keep the part of the page response that I will use to fill the content area.
I will resume using Headway from now on but will try to be as framework agnostic as possible.

And drop Thermal API

As much as I liked the idea of using Thermal API for the project it is no more a convenient solution. Pulling in completely formed and context-aware HTML markup from WordPress itself makes pulling in data to create markup not a wise choice.

First iteration

For the first working iteration I will get back to Headway to speed things up and will create a simple page layout like this one [caption id=“attachment_899” align=“aligncenter” width=“1024”] Nav and content layout[/caption] which will become, in the rendered page, this [caption id=“attachment_900” align=“aligncenter” width=“1024”] The rendered glory[/caption] Nothing related to AJAX is happening here and it’s just WordPress working as usual. The first iteration to add AJAX ability to the page is to write a script to pull page contents into the content area. In Headway this requires a simple setup operation first: I will be giving the content block the custom theContent CSS class to be able to refer that no matter the layout at hand. [caption id=“attachment_901” align=“aligncenter” width=“1024”] Adding the custom CSS class[/caption] the block will take care to queue a script to the page

public static function enqueue_action($block_id, $block, $original_block = null)
{
    $handle = 'ajaxnav';
    $src = Script::suffix(AJAXNAV_URL . 'assets/js/ajax_navigation.js');
    $deps = array('jquery');
    wp_enqueue_script($handle, $src, $deps);
}

and the script is really simple

/*global jQuery, $, document, console, Spinner*/
/**
 * AJAX Navigation Block
 * http://theaveragedev.local
 *
 * Copyright (c) 2014 theAverageDev (Luca Tumedei)
 * Licensed under the GPLv2+ license.
 */

jQuery(document).ready(function($) {
    // cache the content area that will be filled with content
    // and the anchor tags that will benefit from the AJAX
    var $contentArea = $('.theContent.block-type-content .block-content'),
        $anchors = $('.menu-ajax a:not(.openMenu,.closeMenu)');

    // all the anchor tags save for the ones used in the menu
    // should pull content via AJAX
    $anchors.on('click', function(ev) {

        // cache the clicked anchor
        var $this = $(this),
            url = '',
            spinner = new Spinner().spin();

        // set the spinner
        spinner.el.style.top = '50%';
        spinner.el.style.left = '50%';

        // do not follow the link
        ev.preventDefault();

        // get the linked url
        url = $this.attr('href');

        // fade the content area and append the spinner in its place
        $contentArea.fadeOut().parent().append(spinner.el);

        // spinner = new Spinner().spin($contentArea.)
        $contentArea.load(url + ' .theContent', function(data) {
            // when the new content is there stop the spinner
            spinner.stop();
            // fade in the new content
            $contentArea.fadeIn('fast');
        });
    });
});

please note that I’m using the spin.js library to create the spinner animation and the Spinner object is defined there.
I’m not posting a movie or image of the site in action but it works provided that the content area of each template has the theContent class.

It’s even easier with Headway

Since Headway will wrap the content of the Content block in the .block-type-content > .block-content class that selector could be used in place of the .theContent class.
Using .theContent class (or any class name for the matter) gives a theme developer more flexibility when it comes to pulling in the right piece of content.

Next steps

I will add some settings to have a more granular control of what is being pulled in and will add a more robust link check to avoid trying to pull in content from external links added to menus.