A simple example for an extended symbol

hype stable symbol example.js

function symbolInit (hypeDocument, element, event){
	console.log('HypeSymbolInit');
	var symbolInstance = hypeDocument.getSymbolInstanceForElement(element);
	var symbolElement = symbolInstance.element();
	switch (symbolInstance.symbolName()){
		case 'counter':
			Object.assign( symbolInstance, {
				_counter: 0,
				
				increase: function(){
					this._counter++;
					this.refresh();
				},
				
				decrease: function(){
					this._counter--;
					this.refresh();
				},
			
				getValue: function(){
					return this._counter;
				},
				refresh: function(){
					symbolElement.querySelector('.display').innerHTML = this._counter;
				},
				
			});
				
			symbolElement.querySelector('.upBtn').onclick = function(){
				symbolInstance.increase();
			}
			
			symbolElement.querySelector('.downBtn').onclick = function(){
				symbolInstance.decrease();
			}
			
			symbolInstance.refresh();
			break;
	}
}
function symbolLoad (hypeDocument, element, event){
	var symbolInstance = hypeDocument.getSymbolInstanceForElement(element);
	switch (symbolInstance.symbolName()){
		case 'counter':
			symbolInstance.refresh();
			break;
	}
}


window.HYPE_eventListeners.push({"type":"HypeSymbolInit", "callback":symbolInit});
window.HYPE_eventListeners.push({"type":"HypeSymbolLoad", "callback":symbolLoad});