AJAX navigation menu – 06

I’m documenting the creation of an Headway Themes block plugin meant to be an AJAX-powered navigation menu. This article is a follow up from a previous one and that, in turn is a follow up of a previous one and so on.

Developer or user?

I’ve previously shown the interface the block plugin will present to the theme developer [caption id=“attachment_945” align=“aligncenter” width=“1024”] Setting callbacks[/caption] and have thought a little about the possibility it offers to theme developers to set callback functions for events the jQuery ajaxify plugin will offer. [caption id=“attachment_946” align=“aligncenter” width=“1024”] Real JS[/caption] It’s not dissimilar in function and possibility to the one Headway offers in its Custom Code Block and hence that’s probably not a terrible solution.
Leaving it like that means steering the block interface offered to the theme developer very much toward developers leaving less code savvy block users behind.
What other options might there be? In the future, I code for my own usage mainly, I can very well see an interface added to allow users to set transitions and effects using sliders and select inputs.

The empowering technology

To allow theme developers to set their own callback without much hassle and writing normal JavaScript code I will use the JsObject class and will modify the code in the \ajaxnav\Block class from

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', 'jquery-ajaxify');
    wp_enqueue_script($handle, $src, $deps);
    // retrieve this block settings
    if ($original_block) {
        $block = $original_block;
    }
    // settings for the block will be stored in the $settings->data key/value
    // array
    $settings = new \tad\wrappers\headway\BlockSettings($block);
    wp_localize_script($handle, 'ajaxNavMenuOptions', $settings->data);
}

to

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', 'jquery-ajaxify');
    wp_enqueue_script($handle, $src, $deps);
    // retrieve this block settings
    if ($original_block) {
        $block = $original_block;
    }
    // print the options object to the page
    $settings = new Settings($block);
    if (!$settings->data) {
        return;
    }
    JsObject::on($settings->data)->localize($handle, 'ajaxNavMenuOptions');
}

to have a usable JavaScript object featuring values and callback functions ready to use on the page. The script that will kickstart the AJAX part of the block reads like

/**
 * AJAX Navigation Block
 * http://theaveragedev.local
 *
 * Copyright (c) 2014 theAverageDev (Luca Tumedei)
 * Licensed under the GPLv2+ license.
 */

jQuery(document).ready(function($) {
    $('.menu-ajax').ajaxify(ajaxNavMenuOptions);
}); 

where the JavaScript object printed to the page is directly fed to the plugin as the its options.

Next steps

Some more testing and the creation of a live search AJAX-powered companion block.