BootstrapDialog and fixing LinkEditor

mindplot/src/main/javascript/libraries/bootstrap/BootstrapDialog.js

@@ -1,31 +1,70 @@
 var BootstrapDialog = new Class({
+    Implements: Options,
 
-    initialize: function () {
+    options: {
-        this._native = $('<div></div>');
+        cancelButton: false,
+        closeButton: false,
+        acceptButton: true
+    },
+
+    initialize: function (title, options) {
+        this.setOptions(options);
+        this._native = $('<div class="modal fade"></div>').append('<div class="modal-dialog"></div>');
+        var content = $('<div class="modal-content"></div>');
+        var header = this._buildHeader(title);
+        if (header) {
+            content.append(header);
+        }
+        content.append('<div class="modal-body"></div>');
+        var footer = this._buildFooter();
+        if (footer) {
+            content.append(footer);
+        }
+
+        this._native.append(content);
+    },
+
+    _buildFooter: function() {
+        var footer = null;
+        if (this.options.acceptButton || this.options.cancelButton) {
+            footer = $('<div class="modal-footer">');
+        }
+        if (this.options.acceptButton) {
+            footer.append('<button type="button" class="btn btn-primary">'+ $msg('ACCEPT') +'</button>')
+        }
+        if (this.options.cancelButton) {
+            footer.append('<button type="button" class="btn btn-default" data-dismiss="modal">'+ $msg('CANCEL') +'</button>');
+        }
+        return footer;
+    },
+
+    _buildHeader: function(title) {
+        var header = null;
+        if (this.options.closeButton || title) {
+            header = $('<div class="modal-header"></div>');
+        }
+        if (this.options.closeButton) {
+            header.append(
+                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
+            );
+        }
+        if (title) {
+            header.append('<h3 class="modal-title">' + title + '</h3>');
+        }
+        return header;
     },
 
 
-    show: function (title) {
+    show: function () {
-        $assert(title, "message can not be null");
+        this._native.modal();
-
-        var modalDialog = $(
-            '<div class="modal fade">' +
-                '<div class="modal-dialog">' +
-                    '<div class="modal-content">' +
-                        '<div class="modal-header">' +
-                            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-                            '<h3 class="modal-title">' + title + '</h3>' +
-                        '</div>' +
-                        '<div class="modal-body">' +
-                            this._native.html() +
-                        '</div>' +
-                    '</div>' +
-                '</div>' +
-            '</div>');
-        modalDialog.modal();
     },
 
     setContent: function(content) {
-        this._native.append(content);
+        // faltaria remover body previo
+        this._native.find('.modal-body').append(content);
+    },
+
+    close: function() {
+        this._native.modal('hide');
     }
 });

mindplot/src/main/javascript/widget/LinkEditor.js

@@ -18,50 +18,12 @@
 
 mindplot.widget.LinkEditor = new Class({
     Extends:BootstrapDialog,
+
     initialize:function (model) {
         $assert(model, "model can not be null");
-        this.parent();
+        this.parent($msg("LINK"));
         var panel = this._buildPanel(model);
-//        this.parent({
+        this.setContent(panel);
-//            closeButton:true,
-//            destroyOnClose:true,
-//            title:$msg('LINK'),
-//            onInitialize:function (wrapper) {
-//                wrapper.setStyle('opacity', 0);
-//                this.fx = new Fx.Morph(wrapper, {
-//                    duration:600,
-//                    transition:Fx.Transitions.Bounce.easeOut
-//                });
-//            },
-//
-//            onBeforeOpen:function () {
-//                this.overlay = new Overlay(this.options.inject, {
-//                    duration:this.options.duration
-//                });
-//                if (this.options.closeOnOverlayClick)
-//                    this.overlay.addEvent('click', this.close.bind(this));
-//
-//                this.overlay.open();
-//
-//                this.fx.start({
-//                    'margin-top':[-200, -100],
-//                    opacity:[0, 1]
-//                }).chain(function () {
-//                    this.fireEvent('show');
-//                }.bind(this));
-//            },
-//
-//            onBeforeClose:function () {
-//                this.fx.start({
-//                    'margin-top':[-100, 0],
-//                    opacity:0
-//                }).chain(function () {
-//                    this.fireEvent('hide');
-//                }.bind(this));
-//                this.overlay.destroy();
-//            }
-//        });
-        this.appendToContent(panel);
     },
 
     _buildPanel:function (model) {
@@ -75,7 +37,7 @@ mindplot.widget.LinkEditor = new Class({
         // Add Input
         var input = $('<input>').attr(
             'placeholder','http://www.example.com/').attr(
-            'type','url').attr(
+            'type','url').attr( //FIXME: THIS not work on IE, see workaround below
             'required','true').attr(
             'autofocus','autofocus'
             );
@@ -97,11 +59,6 @@ mindplot.widget.LinkEditor = new Class({
         form.append(input);
         form.append(open);
 
-//        openButton.addEvent('click',function(){
-//            window.open(input.value,"_blank", "status=1,width=700,height=450,resizable=1");
-//        });
-//
-//
         // Register submit event ...
         form.submit(function (event) {
 //            event.stopPropagation();
@@ -129,16 +86,6 @@ mindplot.widget.LinkEditor = new Class({
         var buttonContainer = $('<div></div>');
         buttonContainer.css('paddingTop','5').css('textAlign','center');
 //        var buttonContainer = new Element('div').setStyles({paddingTop:5, textAlign:'center'});
-//
-        // Create accept button ...
-        var okButton = $('<input>');
-        okButton.attr('type','submit').attr(
-                'value',$msg('ACCEPT')).attr(
-                'class','btn-primary');
-        buttonContainer.append(okButton);
-
-//        var okButton = new Element('input', {type:'submit', value:$msg('ACCEPT'), 'class':'btn-primary'});
-//        okButton.addClass('button');
 //
         // Create remove button ...
 
@@ -156,15 +103,6 @@ mindplot.widget.LinkEditor = new Class({
 //            buttonContainer.inject(form);
 //        }
 
-        // Create cancel button ...
-
-        var cancelButton = $('<input>');
-        cancelButton.attr('id','cancel').attr('type','button').attr(
-            'value',$msg('CANCEL')).attr(
-            'class','btn-secondary');
-        cancelButton.css('margin','5px');
-        cancelButton.click(function () {this.close();});
-        buttonContainer.append(cancelButton);
         form.append(buttonContainer);
 //        var cButton = new Element('input', {type:'button', value:$msg('CANCEL'), 'class':'btn-secondary'});
 //        cButton.setStyle('margin', '5px');
@@ -181,9 +119,5 @@ mindplot.widget.LinkEditor = new Class({
 
         result.append(form);
         return result;
-    },
-
-    show:function () {
-        this.parent("Link");
     }
 });