Make modal window optionally "persistent" (not destroied when hidden, and accumulate...

[gpl/argeo-slc.git] / org.argeo.slc.webapp / src / main / webapp / argeo-ria-src / class / org / argeo / ria / components / Modal.js

diff --git a/org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/Modal.js b/org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/Modal.js
index e0895f48ccb84582b55ca94a1d48b5ed59b66883..3d2c2c81bb12c9925d84fe7dfb795d82fa2c49e2 100644 (file)
--- a/org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/Modal.js
+++ b/org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/Modal.js
@@ -7,6 +7,19 @@ qx.Class.define("org.argeo.ria.components.Modal",
 {\r
        extend : qx.ui.window.Window,\r
   \r
+       properties : {\r
+               persistent : {\r
+                       check : "Boolean",\r
+                       init : false\r
+               }\r
+       },\r
+       \r
+       events : {\r
+               /**\r
+                * Triggered when the user clicks the "ok" button. \r
+                */\r
+               "ok" : "qx.event.type.Event"\r
+       },\r
        /**\r
         * \r
         * @param caption {String} Title of the window\r
@@ -30,27 +43,57 @@ qx.Class.define("org.argeo.ria.components.Modal",
        },\r
        \r
        members : {\r
+               \r
+               addCenter : function(component){\r
+                       if(!this.getPersistent()){\r
+                               this.add(component, {edge : 'center', width:'100%'});\r
+                       }else{\r
+                               if(!this.centerScroller){\r
+                                       this.centerScroller = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));                                  \r
+                                       this.add(new qx.ui.container.Scroll(this.centerScroller), {edge : 'center', width:'100%', height:'100%'});\r
+                               }\r
+                               this.centerScroller.add(component);\r
+                       }\r
+               },\r
+               \r
                /**\r
                 * Display text inside the popup\r
                 * @param text {String} A string content for the popup\r
                 */\r
                addLabel:function(text){\r
-                       this.add(new qx.ui.basic.Label(text), {edge:'center', width:'100%'});           \r
+                       var label = new qx.ui.basic.Label(text);\r
+                       label.setRich(true);\r
+                       label.setTextAlign("center");\r
+                       this.addCenter(label);\r
                        this.addCloseButton();\r
                },\r
+               /**\r
+                * Add a question and ok / cancel buttons\r
+                * @param text {String} The question to ask to the user\r
+                */\r
+               addConfirm : function(text){\r
+                       var label = new qx.ui.basic.Label(text);\r
+                       label.setRich(true);\r
+                       label.setTextAlign("center");\r
+                       this.addCenter(label);\r
+                       this.addOkCancel();\r
+               },\r
                /**\r
                 * Display a component (panel) in the center of the popup\r
                 * @param panel {qx.ui.core.Widget} A gui component (will be set at width 100%).\r
                 */\r
                addContent: function(panel){\r
-                       this.add(panel, {edge:'center', width:'100%'});\r
+                       this.addCenter(panel);\r
                        this.addCloseButton();\r
                },\r
                /**\r
                 * Automatically attach to the application root, then show.\r
                 */\r
                attachAndShow:function(){\r
-                       org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);                     \r
+                       if(!this.attached){\r
+                               org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);\r
+                               this.attached = true;\r
+                       }\r
                        this.show();\r
                },\r
                /**\r
@@ -70,10 +113,14 @@ qx.Class.define("org.argeo.ria.components.Modal",
                        buttonPane.setAlignX("center");\r
                        this.add(buttonPane, {edge:"south"});\r
                        this.okButton = new qx.ui.form.Button("Ok");\r
+                       this.okButton.addListener("execute", function(e){\r
+                               this.fireEvent("ok");\r
+                               this._closeAndDestroy();\r
+                       }, this);\r
                        this.cancelButton = new qx.ui.form.Button("Cancel");\r
                        this.cancelButton.addListener("execute", this._closeAndDestroy, this);\r
-                       buttonPane.add(this.cancelButton);\r
                        buttonPane.add(this.okButton);\r
+                       buttonPane.add(this.cancelButton);\r
                },\r
                /**\r
                 * Adds a prompt form to the popup : a question, followed by a text input.\r
@@ -82,9 +129,13 @@ qx.Class.define("org.argeo.ria.components.Modal",
                 * @param callbackContext {Object} Context for the callback, optional.\r
                 */\r
                makePromptForm:function(questionString, validationCallback, callbackContext){\r
-                       this.add(new qx.ui.basic.Label(questionString), {edge:'north'});\r
+                       var label = new qx.ui.basic.Label(questionString);\r
+                       label.setRich(true);\r
+                       label.setTextAlign("center");\r
+                       this.add(label, {edge:'north'});\r
                        var textField = new qx.ui.form.TextField();\r
-                       textField.setMarginTop(20);\r
+                       textField.setMarginTop(10);\r
+                       textField.setMarginBottom(10);\r
                        this.add(textField, {edge:'center'});\r
                        this.addOkCancel();\r
                        if(callbackContext){\r
@@ -100,7 +151,11 @@ qx.Class.define("org.argeo.ria.components.Modal",
                 */\r
                _closeAndDestroy : function(){\r
                        this.hide();\r
-                       this.destroy();                 \r
+                       if(!this.getPersistent()){\r
+                               this.destroy();\r
+                       }else{\r
+                               if(this.centerScroller) this.centerScroller.removeAll();\r
+                       }\r
                }\r
        }\r
 });
\ No newline at end of file