enyo.attach prototype

Exercise to allow an enyo kind to "attach" to existing markup for progressive enhancement, web component-style integration, or preference for markup over enyo-style components[] block author(s): Ryan Duffy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.4/polymer.js"></script>
<div id="panels" class="enyo-fit" data-kind="enyo.Panels" arranger-kind="enyo.CarouselArranger" wrap>
    <div>
        <ex-hello greeting="Hola">Ryan</ex-hello>
        <label data-kind="onyx.InputDecorator">
            <input name="email" placeholder="Email Address" data-kind="onyx.Input" />
        </label>
    </div>
    <div>
        <label name="second" data-kind="onyx.InputDecorator">
            <input name="noKind" type="checkbox"/>
            Here's the content
        </label>
        <button data-kind="onyx.Button" ontap="buttonTapped">I'm a button</button>
    </div>
    <div>
        I'm the third panel
    </div>
</div>

CSS

.enyo-panels > * {
    background: #f8f8f8;
    width: 320px;
    margin: 1em;
    padding: 1em;
}

JavaScript

(function (enyo) {
    if(!enyo) return;
    
    function getPublished(ctor) {
        if(ctor) {
            return enyo.mixin(enyo.clone(ctor.prototype.published), getPublished(ctor.prototype.base));
        } else {
            return {};
        }
    }

    enyo.dispatcher.connect = function(_doc) {
        var doc = _doc || document;
        var d = enyo.dispatcher, i, n;
        for (i=0; (n=d.events[i]); i++) {
            d.listen(doc, n);
        }
        for (i=0; (n=d.windowEvents[i]); i++) {
            // Chrome Packaged Apps don't like "unload"
            if(n === "unload" &&
               (typeof window.chrome === "object") &&
               window.chrome.app) {
                continue;
            }
            
            d.listen(window, n);
        }
    }
    
    enyo.Control.prototype.getDocument = function() {
        var c = this.container;
        this.document = this.document || (c && c.getDocument && c.getDocument()) || document;
        return this.document;
    }
    
    enyo.Control.prototype.findNodeById = function() {
        return this.id && (this.node = enyo.dom.byId(this.id, this.getDocument()));
	},

    enyo.registerAsWebComponent = function(ctor, config) {
        config = enyo.mixin({
            // because content will only be inserted once, if a kind provides an instance of enyo.Content
            // injecting another enyo.Content will have no effect (unless the provided is scoped by select)
            // by making the default true, any kind can be easily wrapped as a web component and only disabled
            // if the provider wants to ignore any consumer-provided content
            wrapContent: true,
            
            // default tag is the kindName (swapping . for -)
            tag: ctor.prototype.kindName.replace(".", "-")
        }, config);
        
        // ensure tag starts with x-
        //if(config.tag.indexOf("x-") !== 0) {
        //    config.tag = "x-"+config.tag;
        //}
        
...