OOEventDispatcher example

example.js

(function() {
	var BindKeyboard = new Class({
		handleKeyboardInput: function(code) {
			switch (code) {
			case 37:
				return 'left';
			case 38:
				return 'up';
			case 39:
				return 'right';
			case 40:
				return 'down';
			case 13:
				return 'ok';
			case 73:
				return 'info';
			case 36:
				return 'home';
			case 77:
				//m
				return 'mute';
			case 67:
				//c used as re-C-all
				return 'recall';
			default:
				return null;
			}
		}
	});
	var EventDispatcher = new Class({
		Implements: BindKeyboard,
		Eevents: {},
		initialize: function() {
			var supportedEvents = [
				'display',
				'volup', 'voldown', 'mute',
				'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'zero',
				'pound', 'star',
				'recall', 'home', 'info', 'return', 'ok',
				'left', 'right', 'up', 'down',
				'play', 'stop', 'ff', 'rw'
				];
			var defaultEventHandler = function(a) {
					pcli('Default event handler for ' + a);
				},
				i;
			for (i = 0; i < supportedEvents.length; i++) {
				this.Eevents[supportedEvents[i]] = [defaultEventHandler];
			}
		},
		dispatchEvent: function(keycode) {
			if (keycode) {
				this.Eevents[keycode][this.Eevents[keycode].length - 1](keycode);
			}
		},
		addEventHandler: function(name, func) {
			if (typeof this.Eevents[name] === 'undefined' || typeof func !== 'function') {
				return false;
			}
			this.Eevents[name].push(func);
			return true;
		}.protect(),
		removeEventHandler: function(name, func) {
			if (typeof this.Eevents[name] === 'undefined' || this.Eevents[name].length === 1) {
				return true;
			}
			for (var i = this.Eevents[name].length - 1; i > 0; i--) {
				if (this.Eevents[name][i] === func) {
					this.Eevents[name].splice(i, 1);
					return false;
				}
			}
			return true;
		}.protect(),
		addCustomHandlers: function(ev_list) {
			var k;
			for (k in ev_list) {
				ev_list[k].attached = this.addEventHandler(ev_list[k].name, ev_list[k].func);
			}
		},
		removeCustomHandlers: function(ev_list) {
			var k;
			for (k in ev_list) {
				if (ev_list[k].attached === true) {
					ev_list[k].attached = this.removeEventHandler(ev_list[k].name, ev_list[k].func);
				}
			}
		},
		bindToWindow: function() {
			window.addEvent('keydown', function(a) {
				if (a.key == 'r' && a.control) {
					return;
				}
				a.stop();
				var ev = this.handleKeyboardInput(a.code);
				this.dispatchEvent(ev);
			}.bind(this));
		}
	});
	var InputsSelection = new Class({
		Implements: [Options, Events, EventDispatcher],
		options: {
			Container: $$('body')[0],
			selectedIndex: 0,
			activeLiClass: 'selectedli'
		},
		UIEvents: {},
		initialize: function(options) {
			if (HAVESMJS) this.dmc = new DMC();
			this.setOptions(options);
			this.listItems = options.listItems;
			if (this.options.listItems.length === 0) return;
			var b = new Templates('pops');
			this.dom = b.getNode('.popAllDialog');
			this.ULContainer = this.dom.getElement('.popUpList');
			this.populateSelection();
			if (HAVESMJS) this.dmc.Init();
			this.UIEvents = {
				up: {
					name: 'up',
					func: function(actName) {
						this.move(actName);
					}.bind(this),
					attached: false
				},
				down: {
					name: 'down',
					func: function(actName) {
						this.move(actName);
					}.bind(this),
					attached: false
				}
			};
			this.attachToWin();
		},
		attachToWin: function() {
			this.addCustomHandlers(this.UIEvents);
			this.bindToWindow();
			GKH = function(k) {
				this.dispatchEvent(k);
			}.bind(this);
			if (HAVESMJS) this.dmc.onKeyPress(GKH);
			this.Fx = new Fx.Scroll(this.ULContainer.getParent(), {
				link: 'chain',
				duration: 100
			});
		},
		move: function(direction) {
			this.ULContainer.getElements('li')[this.selectedIndex].toggleClass(this.options.activeLiClass);
			if (direction === 'down' && this.selectedIndex < this.listItems.length - 1) {
				this.selectedIndex++;
			} else if (direction === 'up' && this.selectedIndex > 0) {
				this.selectedIndex--;
			}
			this.ULContainer.getElements('li')[this.selectedIndex].toggleClass(this.options.activeLiClass);
			this.Fx.start(0, this.selectedIndex * 20);
		},
		populateSelection: function() {
			var i, elems;
			for (i = 0; i < this.listItems.length; i++) {
				this.ULContainer.adopt(new Element('li', {
					text: this.listItems[i]
				}));
			}
			if (this.listItems.length > this.options.selectedIndex) {
				this.selectedIndex = this.options.selectedIndex;
			} else {
				this.selectedIndex = 0;
			}
			this.ULContainer.getElements('li')[this.selectedIndex].toggleClass(this.options.activeLiClass);
			this.show();
			this.fireEvent('selectionChanged');
		},
		show: function() {
			this.options.Container.adopt(this.dom);
		}
	});

	function Start() {
		new InputsSelection({
			listItems: ['Bulgarian', 'English', 'Chinese', 'Japanese', 'Romanian', 'Russian', 'Hebrew', 'Arabic',
				            'Hindu', 'Mongolian', 'Spanish', 'Italian'],
			selectedIndex: 0
		});
	}
	Start();
})();