Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Injection Engine (gallery-injection-engine) on cdn

Last Updated: 07/5/11

+ 0 -

Caridy Patino

YUI Contributor

See 11 more by this user.

Created: 05/1/11
Last CDN Push: 10/27/11
Build Tag: gallery-2011.10.27-17-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Overview

Injection Engine for Plug and Play widget. This class is a phantom class for a Bootstrap Engine (gallery-bootstrap-engine). It will facilitate the execution of the bootstrap engine in an iframe sandbox while provide an easy way to set properties and capture events from the real bootstrap object.

Usage

InjectionEngine extends Base, here is the syntax to create a engine obj:

// Call the "use" method, passing in "gallery-injection-engine". This will 

// load the injection engine module and all the required dependencies. 

YUI().use('gallery-injection-engine', function(Y) {

var obj = new Y.InjectionEngine({

        css: 'http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css',

        js: [

            'http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js',

            'http://mycompany.com/my/widget/boot.js'

        ],

        container: '#demo',

        tete: 1,

        lolo: 'a dynamic attribute',

        dynamicAttrs: ['tete', 'lolo'],

        dynamicEvents: ['foo', 'bar']

    });

// boot the iframe with the bootstrap engine within it

    obj.boot();

});

Use "css" and "js" attributes to inject them into an iframe on boot:

container: the placeholder for the dynamic iframe.
dynamicAttrs: list of attributes that can be propagated from the phantom to the bootstrap engine object.
dynamicEvents: list of events that can be broadcasted from the bootstrap engine object to the phantom object.

Tests

Run this test in your browser and report any issue.

http://caridy.name/sandbox/yui3-gallery/src/gallery-injection-engine/tests/test_injection.html

Note: Make sure you include OS, Browser Version and the test result from YUI Console in your ticket.

CHANGELOG

Check the latest changes in this module.

http://github.com/caridy/yui3-gallery/tree/master/src/gallery-injection-engine/

Tags:
caridy

Few facts about this example:

CSS and JS can be an string or an array. They can represent external references or inline blocks as well.
CSS and JS assets will be injected in the iframe after calling "boot".
Boot can be triggered at any given time after the initialization routine.
"container" represents the placeholder (selector) for the dynamic iframe that will be created after calling boot.
"dynamicAttrs" represents a list of attributes (by their names) that will be created automatically. Any change in any of those attributes will be propagated to the bootstrap engine that will run into the iframe after calling boot. They can be updated at any given time, before or after boot, and they will be propagated in the same way.
"dynamicEvents" represents a list of events (by their names) that will broadcasted from the bootstrap engine running in the iframe after calling boot. These events can be renamed on the fly, stopped, or transformed in many different ways. This is an easy way to get notifications form within the iframe scope.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.27-17-03'
}).use('gallery-injection-engine', function(Y) {
 
    var obj = new Y.InjectionEngine({
        css: 'http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css',
        js: [
            '(function(){ var foo = 1; })();',
            'http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js',
            'http://mycompany.com/my/widget/boot.js'
        ],
        container: '#demo',
        tete: 1,
        lolo: 'a dynamic attribute',
        dynamicAttrs: ['tete', 'lolo'],
        dynamicEvents: [
            'foo', 
            {
                name: 'bar', 
                rename: 'bar2'
            }, 
            {
                name: 'bar',
                rename: 'bar2'
            },
            {
                name: 'baz',
                fn: function (ev, name, o) {
                    return false; // avoiding firing the original event "baz"
                }
            }
        ]
    });
 
    // modifying some attributes before the boot
    obj.set('tete', 3)
    // some listeners before the boot
    obj.on('foo', function() {
        // fired when "foo" happens within the bootstrap engine in the iframe
    });
 
    // boot the iframe with the bootstrap engine within it
    obj.boot();
 
    // modifying some attributes after the boot
    obj.set('lolo', 'this value will be propagated to the bootstrap engine object');
    // some listeners after the boot
    obj.on('bar2', function () {
        // fired when "bar" happens within the bootstrap engine in the iframe
    });
 
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.10.27-17-03'
}).use('gallery-injection-engine', function(Y) {

// modifying some attributes before the boot
    obj.set('tete', 3)
    // some listeners before the boot
    obj.on('foo', function() {
        // fired when "foo" happens within the bootstrap engine in the iframe
    });

// boot the iframe with the bootstrap engine within it
    obj.boot();

// modifying some attributes after the boot
    obj.set('lolo', 'this value will be propagated to the bootstrap engine object');
    // some listeners after the boot
    obj.on('bar2', function () {
        // fired when "bar" happens within the bootstrap engine in the iframe
    });

});

Forum Posts

No forum posts for this module.