docs/partials/synth-example-source.mustache

	synth-example-source.mustache revision 350964af8dfc6ab5df9d3fb0f274f7d018986c5b
5895N/A<div id="demo">
5895N/A    <p>Step 1. <button type="button" id="attach" tabindex="1">subscribe</button> to the <code>arrow</code> event.<br>
5895N/A    <input type="checkbox" id="delegate" value="1" tabindex="1">
5895N/A        <label for="delegate">Use a delegated subscription</label></p>
5895N/A    <p>Step 2. Click on a robot and move it around with the arrow keys.</p>
5895N/A
5895N/A    <div id="homebase">
5895N/A        <div id="A" class="robot" tabindex="2"></div>
5895N/A        <div id="B" class="robot" tabindex="3"></div>
5895N/A    </div>
5895N/A
5895N/A    <button type="button" id="detach" tabindex="4">Detach subscriptions</button>
5895N/A</div>
5895N/A
5895N/A<script>
5895N/AYUI().use('node', 'event-synthetic', 'transition', function (Y) {
5895N/A
5895N/A    Y.Event.define("arrow", {
5895N/A        // Webkit and IE repeat keydown when you hold down arrow keys.
5895N/A        // Opera links keypress to page scroll; others keydown.
5895N/A        // Firefox prevents page scroll via preventDefault() on either
5895N/A        // keydown or keypress.
5895N/A        _event: (Y.UA.webkit || Y.UA.ie) ? 'keydown' : 'keypress',
5895N/A
5895N/A        _keys: {
5895N/A            '37': 'left',
5895N/A            '38': 'up',
6869N/A            '39': 'right',
6869N/A            '40': 'down'
6869N/A        },
5895N/A
5895N/A        _keyHandler: function (e, notifier) {
5895N/A            if (this._keys[e.keyCode]) {
5895N/A                e.direction = this._keys[e.keyCode];
6125N/A                notifier.fire(e);
5895N/A            }
5895N/A        },
5895N/A
5895N/A        on: function (node, sub, notifier) {
5895N/A            sub._detacher = node.on(this._event, this._keyHandler,
5895N/A                                    this, notifier);
5895N/A        },
5895N/A
5895N/A        detach: function (node, sub, notifier) {
5895N/A            sub._detacher.detach();
5895N/A        },
6255N/A
6255N/A        delegate: function (node, sub, notifier, filter) {
6255N/A            sub._delegateDetacher = node.delegate(this._event, this._keyHandler,
6255N/A                                                  filter, this, notifier);
6255N/A        },
6255N/A
6255N/A        detachDelegate: function (node, sub, notifier) {
5895N/A            sub._delegateDetacher.detach();
5895N/A        }
5895N/A    });
5895N/A
5895N/A
5895N/A    var robotA = Y.one('#A'),
5895N/A        robotB = Y.one('#B'),
5895N/A        subs;
5895N/A
5895N/A    robotA.setData('x', parseInt(robotA.getStyle('left'), 10));
5895N/A    robotA.setData('y', parseInt(robotA.getStyle('top'), 10));
5895N/A    robotB.setData('x', parseInt(robotB.getStyle('left'), 10));
5895N/A    robotB.setData('y', parseInt(robotB.getStyle('top'), 10));
5895N/A
5895N/A    function move(e) {
5895N/A        // to prevent page scrolling
5895N/A        e.preventDefault();
5895N/A
5895N/A        var xy = this.getData();
5895N/A
5895N/A        switch (e.direction) {
5895N/A            case 'up':    xy.y -= 10; break;
6125N/A            case 'down':  xy.y += 10; break;
5895N/A            case 'left':  xy.x -= 10; break;
5895N/A            case 'right': xy.x += 10; break;
5895N/A        }
6125N/A
        this.transition({
            top : (xy.y + 'px'),
            left: (xy.x + 'px'),
            duration: .2
        });
    }

    function detachSubs() {
        if (subs) {
            subs.detach();
            subs = null;
        }
    }

    Y.one("#attach").on("click", function (e) {
        detachSubs();

        if (Y.one("#delegate").get('checked')) {
            subs = Y.one('#demo').delegate('arrow', move, '.robot');
        } else {
            subs = new Y.EventHandle([
                robotA.on("arrow", move),
                robotB.on("arrow", move)
            ]);
        }
    });

    Y.one("#detach").on("click", detachSubs);

});
</script>