Jump to content
pwFoo

AjaxIntercoolerJS

Recommended Posts

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 by pwFoo
  • Like 9

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Brian Peat
      Hello! I've got a single client on Processwire and it's completely foreign to me. I've been able to find most things, but they've asked for a custom designed page with a full width header image/section, and then a body block and a right side bar below the header. They're using a landing page template, so I duplicated that, figured out how to add it in the admin, and assigned it to the page. Nothing. It doesn't change a thing.
      I feel like I'm missing something obvious. I've made sure all the fields are the same, I tried to set up the parent/child stuff though this page doesn't have a parent that I can tell (though it's under Landing Pages). If I can get the template to actually kick in, I think I can use a bit of code to check for the hero section and load it at the top. I also made a copy of the widget template and set that to load instead of the original. But again, since my main page template isn't kicking in, neither is the new widget template.
      I'd just love some tips on what to check or change to get a landing page to actually render what's in the assigned page template.
      Hopefully I've used the correct terminology here to make sense.
      Thanks!
    • By rookie
      hi there,
      Is there a module or other solution to select a template with a preview image? Sometimes it is not that easy to describe a template.
      e.g. Template with 3 columns (image, title, content, button) or template for a slider with max. 4 pictures.
      Even if it is nice to have a description field for a template, a picture says more than thousand words could describe.
      And no, I don't think I could develop something like that. I don't even know where to start.🙄
    • By muzzer
      I have just upgraded a site from 2.7 to latest v3.
      I have run into a weird issue where a page template setting for slashUrls changes from No to Yes immediately after an ajax call, causing the second ajax call on the page to use the wrong setting.
      There is no reference to the $template->slashUrls() in any of my code.
      This happens every time I load the page, it's 100% consistent.
      I have this running on a second machine under v2.7 and no such weirdness.
      I'm lost as to why this is happening, what would cause a PW setting change for slashUrls? Anyone have any ideas?
       
       
       
    • By Pip
      Hi everyone, 
      Is there a way for us to replicate the "http://mydomain.com/processwire/page/edit/?id=xxx" and change the template to match my site template? 
      I'm terribly happy with the admin / backend page edit. It covers literaly everything I want to empower my non super admin user in updating pages such as validation, repeater management, file upload. 
      I wish not to allow the users to see the backend for both security and aesthetic reasons. 
      Thanks and hope to hear from you soon. 
       
    • By ICF Church
      Hi 👋
      Anyone else having this problem?
      Requirements:
      - Repeater (matrix & normal) with mutlilanguage fields (text, textarea…) 
      - Backend language set to something other than default (ie. German) 
      Reproduce:
      - Add a new repeater Item (ajax, I found no way to possible to disable it with matrix)

      (Notice how the default language tab is active instead of the backend language…)
      - Write something into the (default language) field
      - Try to save, if field is required, this will not work. If not required, then when reloading, the content will be inside the backend language field, instead of the default language field who was (presumably) active
      Analysis:
      When  loading  a new repeater element with ajax, the default langue tab is active, but the backend language inputfield is visible (with no visual indication). When writing into the field, it will populate the backend language. When manually clicking on the default language tab (which is already active), the field will switch to the actual default language field (which is [now] empty) (that can now be populated…)
      Also Notice, the labels of the elements to be added are in default language as well instead of the translated label (images instead of Bilder)…
      ProcessWire 3.0.148, Profields 0.0.5…
      Is it my system configuration, or does anyone else have the same issue? This is a screen recording of the problem:
      Issue: https://github.com/processwire/processwire-issues/issues/1179

      Screen Recording 2020-02-25 at 14.18.31.mov
×
×
  • Create New...