From 23c042775c0b6d918e7f05229a834622382e66fb Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvoborni@redhat.com>
Date: Fri, 18 Oct 2013 12:14:25 +0200
Subject: RCUE dialog implementation

https://fedorahosted.org/freeipa/ticket/3904
---
 install/ui/src/freeipa/dialog.js | 236 +++++++++++++++++++++++++++------------
 1 file changed, 162 insertions(+), 74 deletions(-)

(limited to 'install/ui/src/freeipa/dialog.js')

diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index a289e52f..29f480c5 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -44,7 +44,6 @@ IPA.opened_dialogs = {
     focus_top: function() {
         var top = this.top_dialog();
         if (top) {
-            top.container.dialog('moveToTop'); //make sure the last dialog is top dialog
             top.focus_first_element();
         }
     },
@@ -79,6 +78,10 @@ IPA.dialog_button = function(spec) {
     that.click = spec.click || click;
     /** @property {boolean} visible=true Button should be visible */
     that.visible = spec.visible !== undefined ? spec.visible : true;
+    /** @property {boolean} enabled=true Button is enabled */
+    that.enabled = spec.enabled !== undefined ? spec.enabled : true;
+    /** @property {jQuery} element Button element */
+    that.element = null;
 
     function click() {
     }
@@ -88,10 +91,11 @@ IPA.dialog_button = function(spec) {
      * @param {boolean} enabled
      */
     that.set_enabled = function(enabled) {
-        if (enabled) {
-            that.element.removeClass('ui-state-disabled');
-        } else {
-            that.element.addClass('ui-state-disabled');
+
+        that.enabled = enabled;
+
+        if (that.element) {
+            that.element.prop('disabled', !enabled);
         }
     };
 
@@ -100,7 +104,7 @@ IPA.dialog_button = function(spec) {
      * @return {boolean}
      */
     that.is_enabled = function() {
-        return !that.element.hasClass('ui-state-disabled');
+        return that.enabled;
     };
 
     return that;
@@ -208,16 +212,92 @@ IPA.dialog = function(spec) {
         return null;
     };
 
+    /**
+     * Create
+     * @protected
+     * @return {jQuery} dom_node
+     */
+    that.create_dialog = function() {
+
+        if (that.dom_node) {
+            that.dom_node.empty();
+        }
+
+        that.dom_node = $('<div/>', {
+            'class': 'rcue-dialog-background'
+        });
+
+        var container_node = $('<div/>', {
+            'class': 'rcue-dialog-container'
+        }).appendTo(that.dom_node);
+
+        that.dialog_node = $('<div/>', {
+            'class': 'rcue-dialog',
+            id: that.get_id(),
+            'data-name' : that.name,
+            role: 'dialog',
+            tabIndex: -1 // make the div focusable
+        }).appendTo(container_node);
+
+        that.header_node = $('<header/>');
+        that.create_header();
+        that.header_node.appendTo(that.dialog_node);
+
+        that.body_node = $('<div/>', {
+            'class': 'rcue-dialog-body'
+        });
+        // for backwards compatibility
+        that.container = that.body_node;
+        that.create_content();
+        that.body_node.appendTo(that.dialog_node);
+
+        that.footer_node = $('<footer/>');
+        that.create_footer();
+        that.footer_node.appendTo(that.dialog_node);
+
+        that.policies.post_create();
+        return that.dom_node;
+    };
 
     /**
-     * Create content layout
+     * Create header
+     * @protected
+     * @return {jQuery} header_node
      */
-    that.create = function() {
+    that.create_header = function() {
+
+        that.header_node.empty();
+        that.title_node = $('<h1/>', {
+            text: that.title
+        }).appendTo(that.header_node);
+        that.title_close_button = $('<a/>', {
+            href: '#',
+            'class': 'rcue-button-close',
+            click: function() {
+                that.close();
+            }
+        }).appendTo(that.header_node);
+
+        return that.header_node;
+    };
+
+    /**
+     * Create content
+     *
+     * - custom dialogs should override this method
+     *
+     * @protected
+     * @deprecated
+     * @return {jQuery} footer_node
+     */
+    that.create_content = function() {
+
+        that.body_node.empty();
 
         that.message_container = $('<div/>', {
             style: 'display: none',
             'class': 'dialog-message ui-state-highlight ui-corner-all'
-        }).appendTo(that.container);
+        }).appendTo(that.body_node);
 
         var widgets = that.widgets.get_widgets();
         for (var i=0; i<widgets.length; i++) {
@@ -226,12 +306,59 @@ IPA.dialog = function(spec) {
             var div = $('<div/>', {
                 name: widget.name,
                 'class': 'dialog-section'
-            }).appendTo(that.container);
+            }).appendTo(that.body_node);
 
             widget.create(div);
         }
 
-        that.policies.post_create();
+        return that.body_node;
+    };
+
+    /**
+     * Create footer
+     * @protected
+     * @return {jQuery} footer_node
+     */
+    that.create_footer = function() {
+
+        that.footer_node.empty();
+
+        that.buttons_node = $('<div/>', {
+            'class': 'rcue-dialog-buttons'
+        }).appendTo(that.footer_node);
+
+        $("<div/>", { 'class': 'clear'}).appendTo(that.footer_node);
+
+        that.create_button_nodes();
+
+        return that.footer_node;
+    };
+
+    /**
+     * Create buttons HTML inside `buttons_node`
+     * @protected
+     * @return {jQuery} buttons_node
+     */
+    that.create_button_nodes = function() {
+
+        if (!that.buttons_node) return null;
+
+        that.buttons_node.empty();
+
+        for (var i=0; i<that.buttons.values.length; i++) {
+
+            var button = that.buttons.values[i];
+            if (!button.visible) continue;
+            var ui_button = IPA.button({
+                name: button.name,
+                label: button.label,
+                disabled: !button.enabled,
+                click: button.click
+            });
+            ui_button.appendTo(that.buttons_node);
+            button.element = ui_button;
+        }
+        return that.buttons_node;
     };
 
     /**
@@ -254,32 +381,12 @@ IPA.dialog = function(spec) {
      */
     that.open = function(container) {
 
-        that.container = $('<div/>', {
-            id : that.get_id(),
-            'data-name': that.name
-        });
-
-        if (container) {
-            container.append(that.container);
-        }
-
-        that.create();
+        that.create_dialog();
         that.reset();
 
-        that.container.dialog({
-            title: that.title,
-            modal: true,
-            closeOnEscape: that.close_on_escape,
-            width: that.width,
-            minWidth: that.width,
-            height: that.height,
-            minHeight: that.height,
-            close: function(event, ui) {
-                that.close();
-            }
-        });
+        container = container || document.body;
+        that.dom_node.appendTo(container);
 
-        that.set_buttons();
         that.register_listeners();
         IPA.opened_dialogs.add_dialog(that);
         that.focus_first_element();
@@ -291,18 +398,15 @@ IPA.dialog = function(spec) {
      */
     that.focus_first_element = function() {
 
-        var element = that.container;
-        var ui_dialog = that.container.parent('.ui-dialog'); // jq dialog div
-
-        // code taken from jquery dialog source code
-        $(element.find(':tabbable').get().concat(
-            ui_dialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
-                ui_dialog.get()))).eq(0).focus();
+        $(that.body_node.find(':tabbable').get().concat(
+            that.buttons_node.find(':tabbable').get().concat(
+                that.dom_node.get()))).eq(0).focus();
     };
 
     /**
      * Set jQuery dialog option
      * @protected
+     * @deprecated
      * @param {string} name
      * @param {Mixed} value
      */
@@ -311,31 +415,12 @@ IPA.dialog = function(spec) {
     };
 
     /**
-     * Set dialog buttons as jQuery dialog buttons
+     * Update UI of buttons
      * @protected
      */
     that.set_buttons = function() {
 
-        // create a map of button labels and handlers
-        var dialog_buttons = {};
-        for (var i=0; i<that.buttons.values.length; i++) {
-            var button = that.buttons.values[i];
-            if (!button.visible) continue;
-            dialog_buttons[button.label] = button.click;
-        }
-
-        //set buttons to dialog
-        that.option('buttons', dialog_buttons);
-
-        // find button elements
-        var parent = that.container.parent();
-        var buttons = $('.ui-dialog-buttonpane .ui-dialog-buttonset button', parent);
-
-        buttons.each(function(index, ui_button) {
-            var button = that.buttons.values[index];
-            $(ui_button).prop('name', button.name);
-            button.element = $(this);
-        });
+        that.create_button_nodes();
     };
 
     /**
@@ -368,9 +453,12 @@ IPA.dialog = function(spec) {
      * Close dialog
      */
     that.close = function() {
-        that.container.dialog('destroy');
-        that.container.remove();
+
         that.remove_listeners();
+
+        that.dom_node.remove();
+        that.dom_node = null;
+
         IPA.opened_dialogs.remove_dialog(that);
         IPA.opened_dialogs.focus_top();
     };
@@ -450,7 +538,7 @@ IPA.dialog = function(spec) {
 
     that.init();
 
-    that.dialog_create = that.create;
+    that.dialog_create_content = that.create_content;
     that.dialog_open = that.open;
     that.dialog_close = that.close;
     that.dialog_save = that.save;
@@ -581,9 +669,9 @@ IPA.adder_dialog = function(spec) {
     /**
      * @inheritDoc
      */
-    that.create = function() {
+    that.create_content = function() {
 
-        // do not call that.dialog_create();
+        // do not call that.dialog_create_content();
 
         var container = $('<div/>', {
             'class': 'adder-dialog'
@@ -826,7 +914,7 @@ IPA.adder_dialog = function(spec) {
 
     init();
 
-    that.adder_dialog_create = that.create;
+    that.adder_dialog_create_content = that.create_content;
 
     return that;
 };
@@ -878,7 +966,7 @@ IPA.deleter_dialog =  function (spec) {
     };
 
     /** @inheritDoc */
-    that.create = function() {
+    that.create_content = function() {
 
         $('<p/>', {
             'text': that.message
@@ -914,7 +1002,7 @@ IPA.deleter_dialog =  function (spec) {
         }
     };
 
-    that.deleter_dialog_create = that.create;
+    that.deleter_dialog_create_content = that.create_content;
 
     return that;
 };
@@ -943,7 +1031,7 @@ IPA.message_dialog = function(spec) {
 
     that.buttons.remove('cancel');
 
-    that.message_dialog_create = that.create;
+    that.message_dialog_create_content = that.create_content;
 
     return that;
 };
@@ -999,7 +1087,7 @@ IPA.confirm_dialog = function(spec) {
     that.confirm_on_enter = spec.confirm_on_enter !== undefined ? spec.confirm_on_enter : true;
 
     /** @inheritDoc */
-    that.create = function() {
+    that.create_content = function() {
         $('<p/>', {
             'text': that.message
         }).appendTo(that.container);
@@ -1117,7 +1205,7 @@ IPA.confirm_mixin = function() {
             register_listeners: function() {
                 var self = this;
                 this._on_key_up_listener = function(e) { self.on_key_up(e); };
-                var dialog_container = this.container.parent('.ui-dialog');
+                var dialog_container = this.dom_node;
                 dialog_container.bind('keyup', this._on_key_up_listener);
             },
 
@@ -1125,7 +1213,7 @@ IPA.confirm_mixin = function() {
              * Removal of registered event handlers
              */
             remove_listeners: function() {
-                var dialog_container = this.container.parent('.ui-dialog');
+                var dialog_container = this.dom_node;
                 dialog_container.unbind('keyup', this._on_key_up_listener);
             },
 
-- 
cgit