PXN8’s Javascript Listeners explained…

First in a series explaining PXN8’s Javascript code…

The PXN8 javascript codebase underwent a major face-lift during the summer. We did a massive tidy-up of the code and made sure that all functions and variables where put in either the core PXN8 namespace or one of it’s sub-namespaces.
One such namespace is PXN8.listener. This consists of a handful of functions and event-types used by the PXN8 core itself and also usable by customers when customizing the behaviour of PXN8.

Events

The PXN8 namespace defines the following events…

  • PXN8.ON_ZOOM_CHANGE
  • PXN8.ON_SELECTION_CHANGE
  • PXN8.ON_IMAGE_CHANGE
  • PXN8.ON_IMAGE_ERROR
  • PXN8.ON_IMAGE_LOAD

“What’s the difference between ON_IMAGE_CHANGE and ON_IMAGE_LOAD ?” you might ask – ON_IMAGE_LOAD listeners will be invoked even when the original photo is loaded into the editor. ON_IMAGE_CHANGE listeners are only invoked when the user either modifies the image or ‘undo’s or ‘redo’s a modification.

Listeners

In addition the PXN8.listener namespace defines the following functions…

  • PXN8.listener.add(eventType,callback)
  • PXN8.listener.remove(eventType,callback)
  • PXN8.listener.onceOnly(eventType,callback)
  • PXN8.listener.notify(eventType,source)

Where eventType is one of the events above and callback is a javascript function which will be invoked when that event is triggered. So for example, if you want to alert the user every time they change the image…

PXN8.listener.add(PXN8.ON_IMAGE_CHANGE,function(){ 
    alert("Hey ! you changed the image !");
});

Of course in practice such a listener would soon get irritating for the end-user.

Once and Once only…

I better explain the onceOnly function. This function lets you add a listener which will only be invoked once during the lifetime of an editing session. It’s probably best explained by the following sample code which will temporarily highlight the undo button the first (and only the first) time an image is modified.

    /**
     * The following code temporarily highlights the 'Undo' button
     * when the image is modified so that the user is subtly guided
     * to the location of the 'Undo' button.
     */
    PXN8.listener.onceOnly(PXN8.ON_IMAGE_CHANGE,function(){
        el = document.getElementById("undo").parentNode;
        el.style.backgroundColor = "#aaaaaa";
        setTimeout(function(){
            el.style.backgroundColor = "transparent";
        },2000);
    });

PXN8.listener is just one of the many PXN8 namespaces used by the Editor. This has been a brief overview of PXN8.listener. One down – many more to go…
(see all PXN8 documentation here)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: