fx-listener.html

<!--
    Listens for external elements and notifies locally. Target can be any window
    accessible property path, for example "document" or "screen.orientation". By
    default if no path is specified events are listened for on the window
    itself.

    The presence of an attribute that starts with "on-" will trigger a listener
    on the target for the event name following the dash. This works implicitly
    in polymer's declarative event handlers. If you're not using polymer, or are
    creating an element programatically you can add an attribute
    "on-{eventname}" to the element with no value.

    Dynamically changing the target or event attributes after inserting into the
    document is not supported.

    Usage:

    <fx-listener on-hashchange="{{ handleHashChange }}"></fx-listener>
    <fx-listener
        target="screen.orientation"
        on-orientationchange="{{ handleHashChange }}"></fx-listener>
-->
<link href="../polymer/polymer.html" rel="import">

<polymer-element name="fx-listener" constructor="FxListener" attributes="target">
<script>
(function() {
    var listeners = {};

    function addEventListener(target, eventName, listener) {
        if (!target || !target.addEventListener || !eventName)
            return;
        var data = findListenerData(target, eventName);
        if (!data) {
            data = {
                target: target,
                listeners: [],
                handler: function(event) {
                    dispatchEvents(event, data.listeners);
                },
            };
            listeners[eventName] = listeners[eventName] || [];
            listeners[eventName].push(data);
            target.addEventListener(eventName, data.handler);
        }
        if (!data.listeners.find(listener))
            data.listeners.add(listener);
    }

    function removeEventListener(target, eventName, listener) {
        if (!target || !target.addEventListener || !eventName)
            return;
        var data = findListenerData(target, eventName);
        if (!data)
            return;
        data.listeners.remove(listener);
        if (!data.listeners.length) {
            listeners[eventName].remove(data);
            target.removeEventListener(eventName, data.handler);
        }
    }

    function dispatchEvents(event, listeners) {
        listeners.forEach(function(listener) {
            if (!listener.active)
                return;
            listener.fire(event.type, event, /*onNode*/ null, /*bubbles*/ false,
                /*cancelable*/ false);
        });
    }

    function findListenerData(target, eventName) {
        var entries = listeners[eventName] || [];
        for (var i = 0; i < entries.length; ++i) {
            if (entries[i].target == target)
                return entries[i];
        }
        return null;
    }

    function findTarget(path) {
        var object = window;
        var parts = path.split(".");
        for (var i = 0; i < parts.length && object; ++i) {
            if (parts[i])
                object = object[parts[i]];
        }
        return object;
    }

    function findEventNames(element) {
        var eventsNames = [];
        for (var i = 0; i < element.attributes.length; ++i) {
            var name = element.attributes[i].name;
            if (name.to(3) != "on-")
                return;
            var eventName = name.from(3);
            if (eventName)
                eventsNames.push(eventName);
        }
        return eventsNames;
    }

    Polymer({
        target: "",
        events: null,
        active: false,
        created: function() {
            this.style.display = "none";
        },
        attached: function() {
            this.active = true;
            this.events = findEventNames(this);
            if (!this.events.length)
                return;
            var target = findTarget(this.target);
            for (var i = 0; i < this.events.length; ++i)
                addEventListener(target, this.events[i], this);
        },
        detached: function() {
            if (!this.events || !this.events.length)
                return;
            var target = findTarget(this.target);
            for (var i = 0; i < this.events.length; ++i)
                removeEventListener(target, this.events[i], this);
            this.active = false;
        },
    });
})();
</script>
</polymer-element>