AjaxIntercoolerJS

[pwFoo]

Module: http://modules.processwire.com/modules/ajax-intercooler-js/
Repo: https://bitbucket.org/pwFoo/ajaxintercoolerjs

 

AjaxIntercoolerJS module features

• integrates IntercoolerJS
• async CCS ("loadCSS") and JavaScript load / update
  • optional disable async css / js handling for blocks, sidebar, ...
• Intercooler X-IC response header support
• support / hook $session->redirect 
• multiple X-IC-Trigger handling
• multiple X-IC-Script handling

 

Usage

Basics

It's a autoload module, but you need to enable it inside of your templates, because scripts and dependencies ("JqueryCore") have to be loaded too.

You can enable / load it global inside of the TemplateFileHelper controller "_layout.php"

$ic->enable();

 

Some changes are needed to your main template "_layout.tpl".

<!-- IntercoolerJS needs a target with ID "pageContent" for (async) page content -->
<div id="pageContent"><?=$pageContent?></div>

And your navigation links need some IntercoolerJS attributes like that.

<a href="..." ic-get-from='/url-to-load' ic-target='#sidebar'>...</a>

Your just use and hook MarkupSimpleNavigation.

$nav = $modules->get('MarkupSimpleNavigation');
$opts = array(
    'show_root' => true,
    'item_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>",
    'item_current_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>",
);

// optional modify a specific link to use another target. For example "#sidebar"
$nav->addHookAfter('getTagsString', null, function($event) {
    $link = $event->arguments[1];
    if ($link->title == 'sidebar') {
        $event->return = "<a href='{$link->url}' ic-get-from='{$link->url}' ic-target='#sidebar'>{$link->title} (sidebar)</a>";
    }
});

// render and set as _layout.tpl template var
$layout->set('navigation', $nav->render($opts));

Disable CSS refresh (remove "current" styles and load the new one)

The current loaded page css shouldn't removed if the sidebar is updated. So it's possible to disable the asyncHandler inside of the "sidebar" template.

$ic->asyncHandler(false);

 

Quick and dirty FrontendUser integration

You just need a PW template file like that.

$fu = $modules->get('FrontendUser');

$fu->login();

$button = $fu->form->fhSubmitBtn;
$button->attr('ic-post-to', $page->url);
$button->attr('ic-target', '#pageContent');


if (!empty($_GET['logout'])) {
    $fu->logout($page->url);
}


// Workaround until IntercoolerJS 1.0.1 release
if ($input->post['ic-trigger-name']) {
    $input->post[$fu->form->fhSubmitBtn->name] = $input->post['ic-trigger-name'];
}


$processed = $fu->process($page->url);

if ($processed && !$user->isGuest()) {  // $processed == false if login failed (not submitted / login successful == true)
    echo "Hello $user->name!";
    echo "<a href='$page->url?logout=1'>Logout</a>";
} else {
    echo $fu->render();
}

 

X-IC Response Headers

    /**
     * Set x-ic-trigger response header
     * @param array $array One or more events with related data arrays
     */
    public function trigger($array) {
        $json = json_encode($array);
        header('x-ic-trigger: ' . $json);
    }

    /**
     * Set x-ic-script response header
     * @param string $js Valid javaScript code
     */
    public function script($js) {
        header('X-IC-Script: ' . $js);
    }

    /**
     * Stop current / parent element Intercooler polling
     */
    public function cancelPolling() {
        header ('x-ic-cancelPolling: true');
    }

    /**
     * Resume current / parent element Intercooler polling
     */
    public function resumePolling() {
        header ('x-ic-resumePolling: true');
    }

    /**
     * Set current / parent element Intercooler polling interval
     * @param string $interval
     */
    public function setPollInterval($interval) {
        header ('x-ic-setPollInterval: ' . $interval);
    }

    /**
     * Set x-ic-refresh response header
     * @param string $pathCsv Comma separated paths to refresh.
     */
    public function refresh($pathCsv) {
        header('x-ic-refresh: ' . $pathCsv);
    }

    /**
     * Set x-ic-open response header
     * @param string $url New window / tab address
     */
    public function open($url) {
        header('x-ic-open: ' . $url);
    }

    /**
     * Set x-ic-redirect response header
     * @param string $url Redirect destination address
     */
    public function redirect($url) {
        header('x-ic-redirect: ' .$url);
    }

Wrapper for X-IC-Trigger

Add a event trigger with event name ($event) and parameters array ($array). "addTrigger()" method is a wrapper for usage with multiple event triggers. Native method for a single execution is method "trigger()"

$ic->addTrigger($event, $array);

 

Wrapper for X-IC-Script

String of javascript code for client side execution. "addScript()" method is a wrapper for multiple usage of "script()" method.

$ic->addScript($javascript);

 

$session->redirect is hooked!

The module hooks $session->redirect() method for ajax calls. It's needed to execute redirects by IntercoolerJS X-IC-Redirect for ajax calls. Used for the FrontendUser integration.

Edited September 26, 2016 by pwFoo

[pwFoo]

Because I'll back at PW / PHP in the near future... Any idea how to improve this module?