/** * *REALLY* Small framework for creating/manipulating/deleting gui elements in a browser. * * TODO / TBI * . finer append_*() layout control (as opposed to current append at the end of the window) * . finer print control (as opposed to current append at the end of main window) * . replicate ui.EVENTS for style properties * . complete this list * * Author: Raphael Mannadiar * Date: 2014/08/14 */ ['svg'].forEach( function(dependency) {if( this[dependency] === undefined ) throw 'Missing dependency: ' + dependency;}); ui = {}; ui.window = window; ui.__nextWindowId = 0; ui.EVENTS = { KEY_PRESS: 'keydown', MOUSE_CLICK: 'click', MOUSE_MOVE: 'mousemove', MOUSE_PRESS: 'mousedown', MOUSE_RELEASE: 'mouseup', MOUSE_RIGHT_CLICK: 'contextmenu', WINDOW_CLOSE: 'unload' }; ui.MOUSE_BUTTONS = { LEFT: 0, MIDDLE: 1, RIGHT: 2 }; ui.KEYCODES = { DELETE: 46 }; ui.append_button = function(_window,text) { var button = _window.document.createElement('button'); button.innerHTML = text; _window.document.body.appendChild(button); return ui.wrap_element(button); }; ui.append_canvas = function(_window,width,height,style) { var canvas = _window.document.createElementNS('http://www.w3.org/2000/svg', 'svg'); canvas.setAttribute('width', width); canvas.setAttribute('height', height); for( var key in style ) canvas.style[key] = style[key]; _window.document.body.appendChild(canvas); return new svg.canvas_wrapper(canvas); }; ui.bind_event = function(source,event,target,raise_name,port,time_offset,cond) { if( port === undefined) port = "ui"; if( time_offset === undefined ) time_offset = 0.0; if( cond === undefined) cond = function(e) {return true;}; var args = []; switch(event) { case ui.EVENTS.KEY_PRESS: args = function(e) {return [e.keyCode, e.view]}; source = source.document; break; case ui.EVENTS.MOUSE_CLICK: case ui.EVENTS.MOUSE_MOVE: case ui.EVENTS.MOUSE_PRESS: cond = function(e) {return e.button == 0;} case ui.EVENTS.MOUSE_RELEASE: cond = function(e) {return e.button == 0;} case ui.EVENTS.MOUSE_RIGHT_CLICK: args = function(e) {return [e.clientX, e.clientY, e.button]}; if( source instanceof svg.element_wrapper ) source = source.element; break; case ui.EVENTS.WINDOW_CLOSE: args = function() {return [source]}; break; default: throw 'Unsupported event'; } source.addEventListener( event, (function (target, raise_name, port, time_offset, cond) { return function(e) { if (cond(e)) { e.preventDefault(); e.stopPropagation(); target.addInput(new Event(raise_name, port, args(e)), time_offset); return false; }};} )(target, raise_name, port, time_offset, cond)); }; ui.close_window = function(_window) { _window.close(); }; ui.log = function(value) { if( typeof(value) == 'object' ) console.log(JSON.stringify(value)); else console.log(value); }; ui.new_window = function(width,height) { // return window.open('',ui.__nextWindowId++,'width='+width+',height='+height); return window; }; ui.println = function(value,target) { if( target === undefined ) target = window.document.body; if( typeof(value) == 'object' ) target.innerHTML += JSON.stringify(value); else target.innerHTML += value; target.innerHTML += '
' }; ui.wrap_element = function(element) { return {element:element}; };