diff --git a/js/css/plaza-ui.css b/js/css/plaza-ui.css new file mode 100644 index 0000000..d0bbbab --- /dev/null +++ b/js/css/plaza-ui.css @@ -0,0 +1,129 @@ +.plaza-widget{ + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: normal; + font-style: normal; + font-family: Tahoma, Geneva, arial, sans-serif; + vertical-align: baseline; + background-color:#eeeeee; + border:2px solid #aaaaaa; + margin: 5px +} + +.widget-header{ + background-color: black; + font-size: 120%; + color: white; + padding: 10px +} + + +/* entity debugger */ +.entity-debugger-widget{ + padding: 0px; + font-size: 70% +} + +.entity-debugger-widget-header{ + font-size: 120% +} + +.entity-debugger-widget-prop{ + background: white; + border:1px solid #aaaaaa; + margin: 3px; +} + +.entity-debugger-widget-prop-alias{ + padding: 3px; + margin-bottom: 3px; + background-color: #aaaaaa; + font-style: bold +} + +.entity-debugger-widget-prop-uri{ + padding: 3px +} + +.entity-debugger-widget-prop-val{ + padding: 3px +} + +/* TripleSpacesBrowser */ +.triple-spaces-browser-widget { + font-size: 70% +} + +.triple-space-browser-panel { + background: white; + border:1px solid #aaaaaa; + margin: 3px +} + +.triple-space-browser-panel-header { + background: #aaaaaa; + padding: 3px +} + +.triple-space-browser-panel-body { + text-align: right +} + +.triple-space-actions { + padding: 5px +} + +.triple-space-browser-panel-body input { + width: 350px; + margin: 5px +} + +.collection-triple-space-actions { + padding: 5px +} + +.overline { + border-top:1px solid #aaaaaa; + font-size: 80% +} + +/* Toolbox */ +.plaza-toolbox-widget { + font-size: 70% +} + +.toolbox-legend-fld { + width: 350px; + margin-left: 20px +} + +.entity-search-fld { + width: 450px; + margin-right: 20px +} + +.schema-uri-fld { + width: 450px; + margin-right: 10px; +} + +/* TriplesTable */ +.plaza-triples-table-widget { + font-size: 70% +} + +.plaza-triples-table-widget table { + width: 100% +} + +.plaza-triples-table-widget thead { + background-color: #E7EEF6; + font-weight: bold +} + +.plaza-triples-table-widget td { + background-color: white; + padding: 3px +} diff --git a/js/plaza-ui.js b/js/plaza-ui.js new file mode 100644 index 0000000..ba2254c --- /dev/null +++ b/js/plaza-ui.js @@ -0,0 +1,765 @@ +/** + * + * Plaza JS UI library + * @author Antonio Garrote + * @date 26.06.2010 + * + */ + +PlazaUI = {}; + +/** + * PlazaUI.Base + */ +PlazaUI.Base = function(){ + var base = { + build: function() { + this.__plz_id = "plz_"+PlazaUI._widgetCounter++; + }, + + extend: function() { + var F = function(){}; + F.prototype = this; + var w = new F(); + w.build(); + return w; + } + }; + + return base; +}(); + +// Counter for the widgets built +PlazaUI._widgetCounter = 0; + + +/** + * PlazaUI.EntityWidget + */ +PlazaUI.EntityWidget = function(){ + var w = PlazaUI.Base.extend(); + + w.build = function() { + PlazaUI.Base.build.apply(this,[]); + + this.entity = null; + this.connectedTo = null; + this.connections = []; + this.handlers = {} + }; + + w.updatedAdapter = function(uri, event, data){ + var fh = this.handlers["onUpdate"]; + fh.apply(this,[data]); + }; + + w.destroyedAdapter = function(uri, event, data){ + var fh = this.handlers["onDestroy"]; + fh.apply(this,[data]); + this.entity = null; + }; + + w.setEntity = function(uriOrEntity) { + var uri = uriOrEntity; + var ent = uriOrEntity; + + if(typeof(uriOrEntity) == "string") { + ent = Plaza.ABox.entitiesRegistry[uriOrEntity]; + } else { + uri = ent._uri; + } + + if(this.entity != null) { + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.DESTROYED, this); + } + + this.entity = ent + Plaza.ABox.startObservingEntity(uri, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingEntity(uri, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + + this.updatedAdapter(this.entity._uri, Plaza.ABox.EVENTS.UPDATED, this.entity); + + this.disconnect(); + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(this.entity); + } + }; + + w.connectionChangeAdapter = function(entity) { + if(this.entity != null) { + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.DESTROYED, this); + } + + this.entity = entity; + this.updatedAdapter(this.entity._uri, Plaza.ABox.EVENTS.UPDATED, this.entity); + + if(entity != null) { + Plaza.ABox.startObservingEntity(entity._uri, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingEntity(entity._uri, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + } + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(entity); + } + }; + + w.connect = function(widget) { + if(this.entity != null) { + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingEntity(this.entity._uri, Plaza.ABox.EVENTS.DESTROYED, this); + } + + this.entity = widget.entity; + this.updatedAdapter(this.entity); + + if(this.entity != null) { + Plaza.ABox.startObservingEntity(entity._uri, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingEntity(entity._uri, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + } + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(entity); + } + + this.disconnect(); + + this.connectedTo = widget; + widget.connections.push(this); + }; + + w.disconnectConnection = function(otherWidget) { + var newConnections = []; + for(var i in this.connections) { + if(this.connections[i] != otherWidget) { + newConnections.push(this.connections[i]); + } + } + this.connections = newConnections; + } + + w.disconnect = function() { + if(this.connectedTo != null) { + this.connectedTo.disconnectConnection(this); + } + }; + + return w; +}(); + + +/** + * PlazaUI.SpaceWidget + */ +PlazaUI.SpaceWidget = function(){ + var w = PlazaUI.Base.extend(); + + w.build = function() { + PlazaUI.Base.build.apply(this,[]); + + this.space = null; + this.connectedTo = null; + this.connections = []; + this.handlers = {} + }; + + w.createdAdapter = function(spaceId, event, data){ + var fh = this.handlers["onCreate"]; + fh.apply(this,[data]); + }; + + w.updatedAdapter = function(spaceId, event, data){ + var fh = this.handlers["onUpdate"]; + fh.apply(this,[data]); + }; + + w.destroyedAdapter = function(spaceId, event, data){ + var fh = this.handlers["onDestroy"]; + fh.apply(this,[data]); + this.entity = null; + }; + + w.setSpace = function(idOrSpace) { + var id = idOrSpace; + var ent = idOrSpace; + + if(typeof(idOrSpace) == "string") { + ent = Plaza.ABox.spacesRegistry[idOrSpace]; + } else { + id = ent.id; + } + + if(this.space != null) { + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.CREATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.DESTROYED, this); + } + + this.space = ent + Plaza.ABox.startObservingSpace(id, Plaza.ABox.EVENTS.CREATED, this, this.createdAdapter); + Plaza.ABox.startObservingSpace(id, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingSpace(id, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + + if (this.space != null) { + for(var i in this.space.entities) { + var e = this.space.entities[i]; + this.createdAdapter(this.space.id, Plaza.ABox.EVENTS.CREATED, e.value); + } + } + + this.disconnect(); + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(this.space); + } + }; + + w.connectionChangeAdapter = function(space) { + if(this.space != null) { + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.CREATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.DESTROYED, this); + } + + if(this.space != null) { + for(var i in this.space.entities) { + var e = this.space.entities[i]; + this.destroyedAdapter(space.id, Plaza.ABox.EVENTS.DESTROYED, e.value); + } + } + + this.space = space; + + if(space != null) { + + for(var i in this.space.entities) { + var e = this.space.entities[i]; + this.createdAdapter(this.space.id, Plaza.ABox.EVENTS.CREATED, e.value); + } + + Plaza.ABox.startObservingSpace(this.space.id, Plaza.ABox.EVENTS.CREATED, this, this.createdAdapter); + Plaza.ABox.startObservingSpace(this.space.id, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingSpace(this.space.id, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + } + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(this.space); + } + }; + + w.connect = function(widget) { + if(this.space != null) { + for(var i in this.space.entities) { + var e = this.space.entities[i]; + this.destroyedAdapter(this.space.id, Plaza.ABox.EVENTS.DESTROYED, e.value); + } + + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.CREATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.UPDATED, this); + Plaza.ABox.stopObservingSpace(this.space.id, Plaza.ABox.EVENTS.DESTROYED, this); + } + + this.space = widget.space; + this.updatedAdapter(this.space); + + if(this.space != null) { + for(var i in this.space.entities) { + var e = this.space.entities[i]; + this.createdAdapter(this.space.id, Plaza.ABox.EVENTS.CREATED, e.value); + } + + Plaza.ABox.startObservingSpace(this.space.id, Plaza.ABox.EVENTS.CREATED, this, this.createdAdapter); + Plaza.ABox.startObservingSpace(space.id, Plaza.ABox.EVENTS.UPDATED, this, this.updatedAdapter); + Plaza.ABox.startObservingSpace(space.id, Plaza.ABox.EVENTS.DESTROYED, this, this.destroyedAdapter); + } + + for(var i in this.connections) { + var c = this.connections[i]; + c.connectionChangeAdapter(space); + } + + this.disconnect(); + + this.connectedTo = widget; + widget.connections.push(this); + }; + + w.disconnectConnection = function(otherWidget) { + var newConnections = []; + for(var i in this.connections) { + if(this.connections[i] != otherWidget) { + newConnections.push(this.connections[i]); + } + } + this.connections = newConnections; + } + + w.disconnect = function() { + if(this.connectedTo != null) { + this.connectedTo.disconnectConnection(this); + } + }; + + return w; +}(); + + +/** + * PlazaUI.Widgets namespace + */ +PlazaUI.Widgets = { + makeClosable: function(widget) { + widget.find(".widget-header").append(''); + widget.find('.remove-widget').bind("click", function(){ + widget.remove(); + }); + } +}; + +/** + * PlazaUI.Widgets.EntityDebugger + */ + +PlazaUI.Widgets.EntityDebugger = function(){ + + var w = PlazaUI.EntityWidget.extend(); + + // Element where the widget will be inserted + w.attachedElement = null; + + w.build = function() { + PlazaUI.EntityWidget.build.apply(this,[]) + this.handlers = {}; + this.handlers["onUpdate"] = w.onUpdated; + this.handlers["onDestroy"] = w.onDestroyed; + }, + + // Insertes the widget in the DOM + w.attach = function() { + var elem = null; + if( arguments.length == 0) { + elem = jQuery("body"); + } else { + elem = arguments[0]; + }; + + this.attachedElement = jQuery("