Element Prototype Extension - PlugIn

EPE provides a feature for writing plugins to avoid cluttering up the base code. Plugins are for solving issues with the native implementation not extending element features. If you merely want to augment the features of a given element you should use the prototyping mechanism. See the various demonstrations for more info on prototype extension.

EPE defines a plugin object which should be used for registering plugins which is named EPE.PlugIn. To construct a new plugin for any element you use the EPE.PlugIn object as any other JavaScript object.

 1 // Create new PlugIn for any element
 2 var plugin = new EPE.PlugIn();// Create new PlugIn for any element

var plugin = new EPE.PlugIn();

To create a plugin for a particular type of element you specify the tagname as the first parameter

 1 // Create new PlugIn for TABLE elements
 2 var tablePlugin = new EPE.PlugIn('table');// Create new PlugIn for TABLE elements
var tablePlugin = new EPE.PlugIn('table');

To provide functionality to your plugin simply define a new function

 1 // A function for the plugin
 2 function forAllElements() {
 3   // Some code
 4 }
 5 // If you don't want to clutter the global namespacee
 6 // you can register the function on the EPE.PlugIn
 7 // object like
 8 EPE.PlugIn.forTableElements =
 9   function(e) {
10     // Some code
11   };// A function for the plugin
function forAllElements() {
  // Some code
}

// If you don't want to clutter the global namespacee
// you can register the function on the EPE.PlugIn
// object like
EPE.PlugIn.forTableElements =
  function(e) {
    // Some code
  };

Once you have created your plugin object you can register it in EPE for 3 different kind of events

• Element.oncreate

  Functions which are registered for the oncreate event are executed when the element is created. Additionally these functions are fired once for all existing tags when the document is loaded. Keyword 'this' takes on the value of the newly created element. No parameters are passed to the function.

• Element.onchange

  Functions which are registered for the onchange event are executed when the element changes properties. Keyword 'this' takes on the value of the element which changed properties. The native IE event object is passed as the first and only parameter. This is an invocation of the 'onpropertychange' event of IE. See the MSDN reference for more info.

• Element.onattach

  Functions which are registered for the onattach event are executed when the element is attached to the DOM. Keyword 'this' takes on the value of the newly attached element. No parameters are passed to the function.

To register and deregister the plugin you use the two public methods

• EPE.PlugIn.addEPEListener

  Use this method to register a function for a given EPE event.

• EPE.PlugIn.removeEPEListener

  Use this method to deregister a function for a given EPE event.

So to register the plugin to execute whenever an element is created

 1 // Register the plugin to execute whenever an element is created
 2 plugin.addEPEListener('create',forAllElements);// Register the plugin to execute whenever an element is created
plugin.addEPEListener('create',forAllElements);

The above example will execute the function forAllElements whenever an element is created. Once the function is executing the keyword 'this' becomes a reference to the element which was created.

The next example registers a function which executes whenever a table property changes

 1 // Register the table plugin to execute whenever a table element
 2 // changes properties
 3 tablePlugin.addEPEListener('change',EPE.PlugIn.forTableElements);// Register the table plugin to execute whenever a table element
// changes properties
tablePlugin.addEPEListener('change',EPE.PlugIn.forTableElements);

Whenever a property of a table element changes the EPE.PlugIn.forTableElements function is executed. Once executing 'this' becomes the value of the actual table element which changed an and the value of e (the first parameter) is the native IE event object created from a onpropertychange event.

PlugIn Example - Object opacity

IE does not support the opacity style attribute but instead use the Microsoft DXImageTransform.Microsoft.Alpha filter. While the values for Mozilla is 0 to 1 IE's values are from 0 to 100. A simple fix making IE compliant is shown below.

First we define a plugin for all elements

 1 // New plugin for all elements
 2 EPE.PlugIn.SetOpacity = new EPE.PlugIn();// New plugin for all elements
EPE.PlugIn.SetOpacity = new EPE.PlugIn();

This plugin needs two functions. One for initially setting the opacity and one when an element is changing its style.opacity property. Elements which are specified in the document when it loads are subject to the EPE oncreate and we use this to set initial opacity values

 1 // Function for setting initial opacity
 2 EPE.PlugIn.SetOpacity.onCreate =
 3   function() {
 4     if (this.style.opacity)
 5       this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (parseFloat(this.style.opacity) * 100) + ')';
 6   };// Function for setting initial opacity
EPE.PlugIn.SetOpacity.onCreate =
  function() {
    if (this.style.opacity)
      this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (parseFloat(this.style.opacity) * 100) + ')';
  };

The second function is testing for the right property before it sets the opacity

 1 // Function for setting opacity when style.opacity changes
 2 EPE.PlugIn.SetOpacity.onChange =
 3   function(e) {
 4     if (e.propertyName == 'style.opacity')
 5       this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (parseFloat(this.style.opacity) * 100) + ')';
 6   };// Function for setting opacity when style.opacity changes
EPE.PlugIn.SetOpacity.onChange =
  function(e) {
    if (e.propertyName == 'style.opacity')
      this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (parseFloat(this.style.opacity) * 100) + ')';
  };

Finally we need to register both functions

 1 // Register function for oncreate event
 2 EPE.PlugIn.Opacity.addEPEListener('create',EPE.PlugIn.Opacity.onCreate);
 3 // Register function for onchange event
 4 EPE.PlugIn.Opacity.addEPEListener('change',EPE.PlugIn.Opacity.onChange);// Register function for oncreate event
EPE.PlugIn.Opacity.addEPEListener('create',EPE.PlugIn.Opacity.onCreate);
// Register function for onchange event
EPE.PlugIn.Opacity.addEPEListener('change',EPE.PlugIn.Opacity.onChange);

IE will now support the style.opacity attribute like any other compliant browser without you having to worry about the special IE syntax.