[bugzilla-gnome-org-extensions] Add a modal dialog class

[Krzesimir Nowak <krnowak src gnome org>]

commit 0d7956fa2f93432a7b8c4c30ca8fd121111da59d
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sun Oct 4 19:06:12 2009 -0400

    Add a modal dialog class
    
    Add a simple implementation of a "lightboxed" modal dialog; this
    will be useful when adding confirmation for discarding a draft
    review. (Avoids the [ OK ] [ Cancel ] buttons of window.confirm().)

 Makefile         |    1 +
 js/dialog.js     |   80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/splinter.css |   41 +++++++++++++++++++++++++++
 3 files changed, 122 insertions(+), 0 deletions(-)
---
diff --git a/Makefile b/Makefile
index e74f6af..fe0c31b 100644
--- a/Makefile
+++ b/Makefile
@@ -10,6 +10,7 @@ jstest: jstest.o
 JS_FILES =                                     \
        js/bug.js                               \
        js/bugFromText.js                       \
+       js/dialog.js                            \
        js/patch.js                             \
        js/review.js                            \
        js/reviewStorage.js                     \
diff --git a/js/dialog.js b/js/dialog.js
new file mode 100644
index 0000000..bcab36e
--- /dev/null
+++ b/js/dialog.js
@@ -0,0 +1,80 @@
+/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
+
+/* This is a simple "lightboxed" modal dialog. The only reason I wrote it was
+ * so that the the "Cancel" button for a review wouldn't put up a:
+ *
+ * 'Really discard your changes?' [ OK ] [ Cancel ]
+ *
+ * dialog with Cancel meaning the opposite thing as the first Cancel - that's
+ * what you'd get with window.confirm(). Maybe it has other uses.
+ *
+ * Usage is:
+ *
+ *  var dialog = new Dialog(<prompt>, <button_label1>, <callback1>)
+ *  dialog.show();
+ *  dialog.focus(<button_label1>)
+ */
+
+function Dialog() {
+    this._init.apply(this, arguments);
+}
+
+Dialog.prototype = {
+    _init: function(prompt) {
+        var q = $("<div id='modalContainer' style='display: none;'>"
+                  + "<div id='modalBackground' style='display: none;'></div>"
+                  + "<table>"
+                  + "<tr><td>"
+                  + "<div id='dialog'>"
+                  + "<div id='dialogText'></div>"
+                  + "<div id='dialogButtons'></div>"
+                  + "<div class='clear'></div>"
+                  + "</div>"
+                  + "</td></tr>"
+                  + "</table>"
+                  + "</div>")
+                      .find("#dialogText").text(prompt).end()
+                      .appendTo(document.body);
+
+        this.div = q.get(0);
+
+        if (arguments.length % 2 != 1)
+            throw new Error("Must be an even number of label/callback pairs");
+
+        for (var i = 1; i < arguments.length; i += 2) {
+            this.addButton(arguments[i], arguments[i + 1]);
+        }
+
+        var me = this;
+        this._keypress = function(e) {
+            if (e.keyCode == 27)
+                me.destroy();
+        };
+        $("body").keypress(this._keypress);
+    },
+
+    addButton: function(label, callback) {
+        var me = this;
+        $("<input type='button' />")
+            .val(label)
+            .click(function() {
+                       me.destroy();
+                       callback();
+                   })
+            .appendTo($(this.div).find("#dialogButtons"));
+    },
+
+    destroy: function() {
+        $(this.div).remove();
+        $("body").unbind('keypress', this._keypress);
+    },
+
+    focus: function(label) {
+        $(this.div).find('input[value=' + label + ']').focus();
+    },
+
+    show: function() {
+        $(this.div).show();
+        $(this.div).find("#modalBackground").fadeIn(250);
+    }
+};
diff --git a/web/splinter.css b/web/splinter.css
index 1d71d99..55ffb4b 100644
--- a/web/splinter.css
+++ b/web/splinter.css
@@ -397,3 +397,44 @@ div.review-patch-comment-text {
     bottom: 0px;
     right: 0px;
 }
+
+/* dialog.js */
+
+#modalContainer {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+#modalBackground {
+    position: absolute;
+    background: black;
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+}
+
+#modalContainer table {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+#dialog {
+    border: 1px solid black;
+    background: white;
+    padding: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    width: 30em;
+}
+
+#dialogButtons {
+    float: right;
+}
+
+#dialogButtons input {
+    margin-left: 1em;
+}