Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js') (more/less context) (ignore whitespace changes)
| -rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js | 611 |
1 files changed, 611 insertions, 0 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js new file mode 100644 index 0000000..26f2fc4 --- a/dev/null +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js @@ -0,0 +1,611 @@ +/* + +Copyright 2008-2011 Clipperz Srl + +This file is part of Clipperz's Javascript Crypto Library. +Javascript Crypto Library provides web developers with an extensive +and efficient set of cryptographic functions. The library aims to +obtain maximum execution speed while preserving modularity and +reusability. +For further information about its features and functionalities please +refer to http://www.clipperz.com + +* Javascript Crypto Library is free software: you can redistribute + it and/or modify it under the terms of the GNU Affero General Public + License as published by the Free Software Foundation, either version + 3 of the License, or (at your option) any later version. + +* Javascript Crypto Library is distributed in the hope that it will + be useful, but WITHOUT ANY WARRANTY; without even the implied + warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. + See the GNU Affero General Public License for more details. + +* You should have received a copy of the GNU Affero General Public + License along with Javascript Crypto Library. If not, see + <http://www.gnu.org/licenses/>. + +*/ + +Clipperz.Base.module('Clipperz.PM.UI.Common.Components'); + +//############################################################################# + +var _Clipperz_PM_Components_base_id_ = 0; + +//############################################################################# + +Clipperz.PM.UI.Common.Components.BaseComponent = function(args) { + args = args || {}; + Clipperz.PM.UI.Common.Components.BaseComponent.superclass.constructor.call(this, args); + + this._element = args.element || null; + this._ids = {}; + + this._slots = {}; + this._slotComponents = {}; + + this._components = {}; + + this._cachedSlots = {}; + + this._isModal = false; + + this._isActive = false; + this._elementUsedToEnterModalState; + + this._isFullyRendered = false; + this._renderingWaitingQueue = []; + +// this._slots = { +// 'header': 'header', +// 'body': 'body', +// 'footer': 'footer' +// }; + + return this; +} + +//============================================================================= + +//TODO get back to MochiKit.Base.update as we are not extending anything +//MochiKit.Base.update(Clipperz.PM.UI.Common.Components.BaseComponent.prototype, { +Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.BaseComponent, /*Ext.Component*/ Object, { + + 'isClipperzPMComponent': true, + + //------------------------------------------------------------------------- + + 'toString': function () { + return "Clipperz.PM.UI.Common.Components.BaseComponent component"; + }, + + 'componentId': function () { + return this.getId('_id_'); + }, + + //------------------------------------------------------------------------- +/* + 'slots': function() { + return this._slots; + }, +*/ + 'slotComponents': function() { + return this._slotComponents; + }, + + //------------------------------------------------------------------------- + + 'components': function () { + return this._components; + }, + + 'addComponent': function (aComponent) { + this.components()[aComponent.componentId()] = aComponent; + }, + + 'removeComponent': function (aComponent) { + var componentId; + + componentId = aComponent.componentId(); + this.components()[componentId].remove(); + delete this.components()[componentId]; + }, + + //------------------------------------------------------------------------- +/* + 'domHelper': function() { + return Clipperz.YUI.DomHelper; + }, +*/ + //------------------------------------------------------------------------- +/* + 'domHelperAppend': function(aValue) { + Clipperz.YUI.DomHelper.append(this.element().dom, aValue); + }, +*/ + //------------------------------------------------------------------------- + + 'element': function() { +//MochiKit.Logging.logDebug(">>> BaseComponent.element"); + return MochiKit.DOM.getElement(this._element); + }, + + 'setElement': function(aNode) { + this._element = aNode; + }, + + //----------------------------------------------------- + + 'displayElement': function() { + return this.element(); + }, + + //------------------------------------------------------------------------- + + 'renderInNode': function(aDomNode) { + this.setElement(aDomNode); + this.render(); + }, + + 'render': function() { + this.clear(); + this.renderSelf(); + this.renderComponents(); + if (this.shouldShowTranslationHints()) { + this.renderTranslationHints(); + } + if (this.shouldShowElementWhileRendering()) { + MochiKit.Style.showElement(this.displayElement()); + }; + + this._isFullyRendered = true; + + MochiKit.Iter.forEach(this.renderingWaitingQueue(), MochiKit.Base.methodcaller('callback')); + this.resetRenderingWaitingQueue(); + }, + + 'renderSelf': function() { + throw Clipperz.Base.exception.AbstractMethod; + }, + + 'renderComponents': function() { + var slotName; + + for (slotName in this.slotComponents()) { + this.slotComponents()[slotName].renderInNode(this.elementForSlotNamed(slotName)); + } + }, + + //......................................................................... + + 'isFullyRendered': function () { + return this._isFullyRendered; + }, + + //......................................................................... + + 'renderingWaitingQueue': function () { + return this._renderingWaitingQueue; + }, + + 'resetRenderingWaitingQueue': function () { + this._renderingWaitingQueue = []; + }, + + //......................................................................... + + 'waitUntilFullyRendered': function () { + var deferredResult; + + if (this.isFullyRendered() == true) { + deferredResult = MochiKit.Async.succeed + } else { + deferredResult = new Clipperz.Async.Deferred("BaseComponent.waitUntilFullyRendered", {trace:false}); + this.renderingWaitingQueue().push(deferredResult); + } + + return deferredResult; + }, + + //----------------------------------------------------- + + 'renderTranslationHints': function () { + var translatableItems; + + translatableItems = MochiKit.Selector.findChildElements(this.displayElement(), ['[stringID]']); + MochiKit.Iter.forEach(translatableItems, MochiKit.Base.method(this, 'enhanceTranslatableElement')) + }, + + 'enhanceTranslatableElement': function (anElement) { +//Clipperz.log(">>> enhanceTranslatableElement", anElement); +// new Clipperz.PM.UI.Common.Components.TranslatorWidget({ +// 'element': anElement +// }); + + MochiKit.Signal.connect(anElement, 'onmouseenter', MochiKit.Base.partial(Clipperz.PM.UI.Common.Components.TranslatorWidget.show, anElement, MochiKit.DOM.getNodeAttribute(anElement, 'stringID'))); + MochiKit.Signal.connect(anElement, 'onmouseleave', Clipperz.PM.UI.Common.Components.TranslatorWidget.hide); +//Clipperz.log("<<< enhanceTranslatableElement"); + }, + + //----------------------------------------------------- + + 'update': function(args) { + throw Clipperz.Base.exception.AbstractMethod; + }, + + 'updateSelf': function(args) { + throw Clipperz.Base.exception.AbstractMethod; + }, + + 'updateComponents': function(args) { + throw Clipperz.Base.exception.AbstractMethod; + }, + + //----------------------------------------------------- + + 'refresh': function() { + throw Clipperz.Base.exception.AbstractMethod; + }, + + 'refreshSelf': function() { + throw Clipperz.Base.exception.AbstractMethod; + }, + + 'refreshComponents': function(args) { + throw Clipperz.Base.exception.AbstractMethod; + }, + + //----------------------------------------------------- + + 'checkSlotNamed': function(aSlotName) { + if (typeof(this._slots[aSlotName]) == 'undefined') { + throw new Error("undefined slot"); + }; + }, + + //----------------------------------------------------- + + 'cachedSlots': function() { + return this._cachedSlots; + }, + + 'slotNamed': function(aSlotName) { + var result; + + this.checkSlotNamed(aSlotName); + if (typeof(this.cachedSlots()[aSlotName]) == 'undefined') { + this.cachedSlots()[aSlotName] = new Clipperz.PM.UI.Common.Components.ComponentSlot(this,aSlotName); + } + + result = this.cachedSlots()[aSlotName]; + + return result; + }, + + //----------------------------------------------------- + + 'elementForSlotNamed': function(aSlotName) { + return MochiKit.DOM.getElement(this._slots[aSlotName]); + }, + + //----------------------------------------------------- + + 'componentForSlotNamed': function(aSlotName) { + return this.slotComponents()[aSlotName]; + }, + + 'setComponentForSlotNamed': function(aComponent, aSlotName) { + var domNode; + + this.checkSlotNamed(aSlotName); + + if (this.slotComponents()[aSlotName] != null) { + this.slotComponents()[aSlotName].remove(); + } + + this.slotComponents()[aSlotName] = aComponent; + +// domNode = MochiKit.DOM.getElement(this.slotNamed(aSlotName)); + domNode = this.elementForSlotNamed(aSlotName); + + if (domNode != null) { + aComponent.renderInNode(domNode); + } + }, + + //----------------------------------------------------- +/* + 'purgeListeners': function() { +//MochiKit.Logging.logDebug(">>> Clipperz.PM.UI.Common.Components.BaseComponent.purgeListeners [" + this + "]"); +//MochiKit.Logging.logDebug("--- " + this + ".purgeListeners"); + Clipperz.NotificationCenter.unregister(this); + MochiKit.Signal.disconnectAllTo(this); +//MochiKit.Logging.logDebug("<<< Clipperz.PM.UI.Common.Components.BaseComponent.purgeListeners"); + }, +*/ + //----------------------------------------------------- + + 'clear': function() { + var slotName; + var componentId; + + MochiKit.Signal.disconnectAllTo(this); + + for (slotName in this.slotComponents()) { + this.slotComponents()[slotName].clear(); + } + + for (componentId in this.components()) { + this.components()[componentId].clear(); + } + +// if (this.element() != null) { +// this.element().innerHTML = ""; +// } + + if (this.displayElement() != null) { + if (this.element() != this.displayElement()) { + MochiKit.DOM.removeElement(this.displayElement()); + } else { + this.displayElement().innerHTML = ""; + } + } + + if (this.isModal()) { + // TODO: cleanup when the closed element was shown modally. + } + }, + + + 'remove': function() { + var slotName; + var componentId; + + for (slotName in this.slotComponents()) { + this.slotComponents()[slotName].remove(); + delete this.slotComponents()[slotName]; + } + + for (componentId in this.components()) { + this.components()[componentId].remove(); + delete this.components()[componentId]; + } + + this.clear(); + MochiKit.Signal.disconnectAll(this); + }, + + 'append': function(aNode, aValue) { + return Clipperz.DOM.Helper.append(aNode, aValue); + }, + + 'insertBefore': function (aNode, aValue) { + return Clipperz.DOM.Helper.insertBefore(aNode, aValue); + }, + + 'insertAfter': function (aNode, aValue) { + return Clipperz.DOM.Helper.insertAfter(aNode, aValue); + }, + + //------------------------------------------------------------------------- + + 'getId': function(aValue) { + var result; + + if (typeof(aValue) != 'undefined') { + result = this._ids[aValue]; + + if (typeof(result) == 'undefined') { + _Clipperz_PM_Components_base_id_ ++; + + result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_; + this._ids[aValue] = result; + } + } else { +// result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this); + throw "call to BaseComponent.getId with an undefined value"; + } + + return result; + }, + + //------------------------------------------------------------------------- + + 'getElement': function(aValue) { + return Clipperz.DOM.get(this.getId(aValue)); + }, + + //------------------------------------------------------------------------- + + 'hideElement': function(anElementName) { + MochiKit.Style.hideElement(this.getElement(anElementName)); + }, + + 'showElement': function(anElementName) { + MochiKit.Style.showElement(this.getElement(anElementName)); + }, + + //------------------------------------------------------------------------- + + 'activate': function () { + this._isActive = true; + }, + + 'deactivate': function () { + this._isActive = false; + }, + + 'isActive': function () { + return this._isActive; + }, + + //------------------------------------------------------------------------- + + 'hideSlot': function(aSlotName) { + if (this.componentForSlotNamed(aSlotName)) { + this.componentForSlotNamed(aSlotName).deactivate(); + } + MochiKit.Style.hideElement(this.elementForSlotNamed(aSlotName)); + }, + + 'showSlot': function(aSlotName) { + if (this.componentForSlotNamed(aSlotName)) { + this.componentForSlotNamed(aSlotName).activate(); + } + MochiKit.Style.showElement(this.elementForSlotNamed(aSlotName)); + }, + + //------------------------------------------------------------------------- + + 'shouldShowTranslationHints': function () { + return false; + }, + + 'shouldShowElementWhileRendering': function() { + return true; + }, + +// 'shouldRemoveElementWhenClearningUp': function () { +// return true; +// }, + + //------------------------------------------------------------------------- + + 'isModal': function() { + return this._isModal; + }, + + 'setIsModal': function(aValue) { + this._isModal = aValue; + }, + + //------------------------------------------------------------------------- + + 'elementUsedToEnterModalState': function () { + return this._elementUsedToEnterModalState; + }, + + 'setElementUsedToEnterModalState': function (aValue) { + this._elementUsedToEnterModalState = aValue; + }, + + //------------------------------------------------------------------------- + + 'modalDialogMask': function () { + return 'modalDialogMask'; + }, + + 'modalDialog': function () { + return 'modalDialog'; + }, + + 'modalDialogFrame': function() { + return 'modalDialogFrame' + }, + + //------------------------------------------------------------------------- + + 'deferredShowModal': function(args) { + var deferredResult; + + deferredResult = new Clipperz.Async.Deferred("BaseComponent.deferredShowModal", {trace:false}); + + deferredResult.addMethod(this, 'setIsModal', true); + deferredResult.addCallback(MochiKit.Style.showElement, this.modalDialogMask()); + deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) { + var result; + var duration; + var from; + var to; + + duration = someArgs.duration || 0.4; + + this.setElementUsedToEnterModalState(someArgs.openFromElement); + from = Clipperz.Style.getSizeAndPosition(someArgs.openFromElement); + this.renderInNode(this.modalDialog()); + MochiKit.DOM.addElementClass(this.modalDialog(), 'fixed'); + to = Clipperz.Style.getSizeAndPosition(this.displayElement()); + Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition = Clipperz.Base.deepClone(to); + + MochiKit.Style.hideElement(this.displayElement()); + MochiKit.Style.showElement(this.modalDialogFrame()); + + result = {from:from, to:to, duration:duration}; + return result; + }, this, args)); + deferredResult.addCallback(Clipperz.Visual.deferredResize, this.modalDialogFrame()); + deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) { + MochiKit.Style.hideElement(this.modalDialogFrame()); + MochiKit.Style.showElement(this.displayElement()); + }, this)); + deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]); + deferredResult.callback(); + + return deferredResult; + }, + + //------------------------------------------------------------------------- + + 'deferredHideModal': function(args) { + var deferredResult; + + args = args || {}; + + deferredResult = new Clipperz.Async.Deferred("BaseComponent.deferredHideModal", {trace:false}); + deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) { + var result; + var from; + var toElement; + var to; + var duration; + + toElement = args.closeToElement || this.elementUsedToEnterModalState(); + duration = someArgs.duration || 0.4; + from = Clipperz.Style.getSizeAndPosition(this.displayElement()); + to = Clipperz.Style.getSizeAndPosition(toElement); + + MochiKit.Style.hideElement(this.displayElement()); + MochiKit.Style.showElement(this.modalDialogFrame()); + + result = {from:from, to:to, duration:duration}; + return result; + }, this, args)); + deferredResult.addCallback(Clipperz.Visual.deferredResize, this.modalDialogFrame()); + deferredResult.addCallback(MochiKit.Base.bind(function() { + MochiKit.Style.hideElement(this.modalDialogFrame()); + MochiKit.Style.hideElement(this.modalDialogMask()); + }, this)); + deferredResult.addMethod(this, 'setIsModal', false); + deferredResult.addMethod(this, 'clear'); // ############## + deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]); + deferredResult.callback(); + + return deferredResult; + }, + + //------------------------------------------------------------------------- + + __syntaxFix__: "syntax fix" + +}); + +Clipperz.PM.UI.Common.Components.BaseComponent_modalDialog = function() { + Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, + {tag:'div', id:'modalDialogWrapper', cls:'modalDialogWrapper', children:[ + {tag:'div', id:'modalDialogMask', cls:'modalDialogMask'}, + {tag:'div', id:'modalDialogFrame', cls:'modalDialogFrame' /*, html:"modal dialog frame"*/}, + {tag:'div', id:'modalDialog', cls:'modalDialog'} +// {tag:'div', id:'modalDialog', cls:'modalDialog', children:[{tag:'div'}]} + ]} + ); + +// MochiKit.Style.hideElement('modalDialogWrapper'); + MochiKit.Style.hideElement('modalDialogMask'); + MochiKit.Style.hideElement('modalDialogFrame'); +// MochiKit.Style.hideElement('modalDialog'); + +}; + +//Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition = {'x':'X', 'y':'Y'}; + +MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.BaseComponent_modalDialog); |