Improvements to the native dialog ui #195

Merged
merged 8 commits into from Jun 2, 2011
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../jquery.wysiwyg.css" type="text/css"/>
<link rel="stylesheet" href="../lib/ui/jquery.ui.all.css" type="text/css"/>
<link rel="stylesheet" href="../lib/ui/jquery.ui.dialog.css" type="text/css"/>
-<link rel="stylesheet" href="../../plugins/fileManager/wysiwyg.fileManager.css" type="text/css"/>
+<link rel="stylesheet" href="../../plugins/fileManager/wysiwyg.fileManager.css" type="text/css"/>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../lib/ui/jquery.ui.widget.js"></script>
@@ -24,9 +24,9 @@
<script type="text/javascript">
(function($) {
$(document).ready(function() {
- $('#wysiwyg').wysiwyg({
+ $("#wysiwyg").wysiwyg({
controls: {
- 'fileManager': {
+ "fileManager": {
visible: true,
groupIndex: 12,
tooltip: "File Manager",
@@ -39,6 +39,7 @@
}
});
$.wysiwyg.fileManager.setAjaxHandler("http://localhost/cgi-bin/file_manager.pl");
+
});
})(jQuery);
</script>
View
@@ -77,12 +77,13 @@ box-shadow :inset 0 0 10px rgba(0, 0, 0, 0.4);
background-color:white; padding:0px; margin:0; display:block; width: 100%; }
/* dialog */
-.wysiwyg-dialog { position:fixed; top:50px; left:50px; width:450px; height:300px; background:white; font:14px "Helvetic Neue", Helvetica,Arial,sans-serif; }
+.wysiwyg-dialog { position:fixed; top:50px; left:50px; width:450px; height:300px; background:transparent; font:14px "Helvetic Neue", Helvetica,Arial,sans-serif; }
.wysiwyg-dialog .wysiwyg-dialog-topbar { background:#333; border:1px #111 solid; color:white; padding:10px; position:relative; }
.wysiwyg-dialog .wysiwyg-dialog-topbar .wysiwyg-dialog-close-wrapper .wysiwyg-dialog-close-button { color:white; text-decoration:none; display:block; padding:6px 10px; position:absolute; right:12px; top:50%; height:14px; margin-top:-12px; }
.wysiwyg-dialog .wysiwyg-dialog-topbar .wysiwyg-dialog-close-wrapper a.wysiwyg-dialog-close-button:hover { background:#666; }
.wysiwyg-dialog .wysiwyg-dialog-topbar .wysiwyg-dialog-title { font-size:20px; font-weight:bold; padding:5px; }
.wysiwyg-dialog .wysiwyg-dialog-content { border:1px #ccc solid; border-top:0; padding:15px; background:white; }
+.wysiwyg-dialog-modal-div { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:rgb(255,255,255); background-color:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
.wysiwyg-dialog-content form.wysiwyg fieldset { border:1px #ccc solid; }
.wysiwyg-dialog-content form.wysiwyg legend { padding:7px; }
.wysiwyg-dialog-content form.wysiwyg .form-row { clear:both; padding:4px 0; }
@@ -91,4 +92,4 @@ background-color:white; padding:0px; margin:0; display:block; width: 100%; }
.wysiwyg-dialog-content form.wysiwyg .form-row input.width-auto { width:auto; }
.wysiwyg-dialog-content form.wysiwyg input.width-small { width:50px; min-width:50px; max-width:50px; }
.wysiwyg-dialog-content form.wysiwyg input, .wysiwyg-dialog form.wysiwyg select { padding:2px; width:100%; margin:2px; }
-.wysiwyg-dialog-content form.wysiwyg input[type=submit], .wysiwyg-dialog form.wysiwyg input[type=reset] { padding:2px 7px; width:auto; }
+.wysiwyg-dialog-content form.wysiwyg input[type=submit], .wysiwyg-dialog form.wysiwyg input[type=reset] { padding:2px 7px; width:auto; }
View
@@ -2053,8 +2053,10 @@
obj = $.wysiwyg.dialog.createDialog(theme),
that = this,
$that = $(that);
-
+
this.options = {
+ "modal": true,
+ "draggable": true,
"title": "Title",
"content": "Content",
"width":"auto",
@@ -2075,6 +2077,7 @@
var $dialog = obj.show.apply(that, []);
$that.trigger("afterOpen", [$dialog]);
+
};
this.show = function () {
@@ -2108,6 +2111,7 @@
obj.destroy.apply(that, []);
$that.trigger("afterClose", [$dialog]);
+
};
if (this.options.open) {
@@ -2159,14 +2163,16 @@
that._$dialog = $('<div></div>').attr('title', this.options.title).html(content);
- console.log(that._$dialog);
+ var dialogHeight = this.options.height == 'auto' ? 300 : this.options.height,
+ dialogWidth = this.options.width == 'auto' ? 450 : this.options.width;
+
+ // console.log(that._$dialog);
+
that._$dialog.dialog({
- modal: true,
- height: this.options.height,
- width: this.options.width,
- close: function () {
- abstractDialog.close();
- }
+ modal: this.options.modal,
+ draggable: this.options.draggable,
+ height: dialogHeight,
+ width: dialogWidth
});
return that._$dialog;
@@ -2215,16 +2221,21 @@
$link.click(function () {
abstractDialog.close(); // this is important it makes sure that is close from the abstract $.wysiwyg.dialog instace, not just locally
});
-
+
$topbar.find('.wysiwyg-dialog-close-wrapper').prepend($link);
var $dcontent = $('<div class="wysiwyg-dialog-content">'+content+'</div>');
that._$dialog.append($topbar).append($dcontent);
-
+
+ // Set dialog's height & width, and position it correctly:
+ var dialogHeight = this.options.height == 'auto' ? 300 : this.options.height,
+ dialogWidth = this.options.width == 'auto' ? 450 : this.options.width;
that._$dialog.hide().css({
- "width":this.options.width == 'auto' ? 450 : this.options.width,
- "height":this.options.height == 'auto' ? 300 : this.options.height
+ "width": dialogWidth,
+ "height": dialogHeight,
+ "left": (($(window).width() - dialogWidth) / 2),
+ "top": (($(window).height() - dialogHeight) / 3)
});
$("body").append(that._$dialog);
@@ -2233,8 +2244,48 @@
};
this.show = function () {
+
+ // Modal feature:
+ if (this.options.modal) {
+ that._$dialog.wrap('<div class="wysiwyg-dialog-modal-div"></div>');
+ }
+
+ // Draggable feature:
+ if (this.options.draggable) {
+
+ var mouseDown = false;
+
+ that._$dialog.find("div.wysiwyg-dialog-topbar").bind("mousedown", function (e) {
+ e.preventDefault();
+ $(this).css({ "cursor": "move" });
+ var $topbar = $(this),
+ _dialog = $(this).parents(".wysiwyg-dialog"),
+ offsetX = (e.pageX - parseInt(_dialog.css("left"))),
+ offsetY = (e.pageY - parseInt(_dialog.css("top")));
+ mouseDown = true;
+ $(this).css({ "cursor": "move" });
+
+ $(document).bind("mousemove", function (e) {
+ e.preventDefault();
+ if (mouseDown) {
+ _dialog.css({
+ "top": (e.pageY - offsetY),
+ "left": (e.pageX - offsetX)
+ });
+ }
+ }).bind("mouseup", function (e) {
+ e.preventDefault();
+ mouseDown = false;
+ $topbar.css({ "cursor": "auto" });
+ $(document).unbind("mousemove").unbind("mouseup");
+ });
+
+ });
+ }
+
that._$dialog.show();
return that._$dialog;
+
};
this.hide = function () {
@@ -2243,6 +2294,17 @@
};
this.destroy = function() {
+
+ // Modal feature:
+ if (this.options.modal) {
+ that._$dialog.unwrap();
+ }
+
+ // Draggable feature:
+ if (this.options.draggable) {
+ that._$dialog.find("div.wysiwyg-dialog-topbar").unbind("mousedown");
+ }
+
that._$dialog.remove();
return that._$dialog;
};