Min/max constraints for CMS dialog

admin/css/screen.css

@@ -616,13 +616,13 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
 
 .cms .ui-widget-overlay { background-color: #000; background-image: none; }
 
-.cms .ui-dialog { min-width: 570px; }
-.cms .ui-dialog .htmleditorfield-dialog { min-width: 570px; }
 .cms .ui-dialog .ss-ui-dialog.ui-dialog-content { padding-top: 0px; }
 
 .ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; }
 .ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; padding: 0; border: none; background-color: transparent; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; }
 .ui-dialog .ui-dialog-titlebar.ui-widget-header .ui-dialog-title { position: absolute; }
+.ui-dialog .ui-dialog-content { overflow: auto; }
+.ui-dialog .ui-dialog-content.loading { background-image: url(../images/spinner.gif); background-position: 50% 50%; background-repeat: no-repeat; }
 .ui-dialog .cms-dialog-content { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; padding-bottom: 8px; padding-top: 0px; }
 .ui-dialog .cms-dialog-content .Actions { overflow: auto; margin: 8px 0; padding-bottom: 8px; float: right; }
 .ui-dialog .cms-dialog-content .ui-tabs { position: static; }

admin/javascript/ssui.core.js

@@ -115,6 +115,13 @@
 	/**
 	 * Extends jQueryUI dialog with iframe abilities (and related resizing logic),
 	 * and sets some CMS-wide defaults.
+	 *
+	 * Additional settings:
+	 * - 'autoPosition': Automatically reposition window on resize based on 'position' option
+	 * - 'widthRatio': Sets width based on percentage of window (value between 0 and 1)
+	 * - 'heightRatio': Sets width based on percentage of window (value between 0 and 1)
+	 * - 'reloadOnOpen': Reloads the iframe whenever the dialog is reopened
+	 * - 'iframeUrl': Create an iframe element and load this URL when the dialog is created
 	 */
 	$.widget("ssui.ssdialog", $.ui.dialog, {
 		options: {
@@ -124,12 +131,17 @@
 			dialogExtraClass: '',
 
 			// Defaults
-			width: '80%',
-			height: 500,
-			position: 'center',
 			modal: true,
 			bgiframe: true,
-			autoOpen: false
+			autoOpen: false,
+			autoPosition: true,
+			minWidth: 500,
+			maxWidth: 700,
+			minHeight: 300,
+			maxHeight: 600,
+			widthRatio: 0.8,
+			heightRatio: 0.8,
+			resizable: false
 		},
 		_create: function() {
 			$.ui.dialog.prototype._create.call(this);
@@ -150,7 +162,7 @@
 			this.element.append(iframe);
 
 			// Let the iframe handle its scrolling
-			this.element.css('overflow', 'hidden');
+			if(this.options.iframeUrl) this.element.css('overflow', 'hidden');
 		},
 		open: function() {
 			$.ui.dialog.prototype.open.call(this);
@@ -165,7 +177,6 @@
 			}
 
 			// Resize events
-			this.uiDialog.bind('resize.ssdialog', function() {self._resizeIframe();});
 			$(window).bind('resize.ssdialog', function() {self._resizeIframe();});
 		},
 		close: function() {
@@ -175,18 +186,33 @@
 			$(window).unbind('resize.ssdialog');
 		},
 		_resizeIframe: function() {
-			var el = this.element, iframe = el.children('iframe');
+			var opts = {}, newWidth, newHeight;
-
+			if(this.options.widthRatio) {
-			iframe.attr('width', 
+				newWidth = $(window).width() * this.options.widthRatio;
-				el.innerWidth() 
+				if(this.options.minWidth && newWidth < this.options.minWidth) {
-				- parseFloat(el.css('paddingLeft'))
+					opts.width = this.options.minWidth
-				- parseFloat(el.css('paddingRight'))
+				} else if(this.options.maxWidth && newWidth > this.options.maxWidth) {
-			);
+					opts.width = this.options.maxWidth;
-			iframe.attr('height', 
+				} else {
-				el.innerHeight()
+					opts.width = newWidth;
-				- parseFloat(el.css('paddingTop')) 
+				}
-				- parseFloat(el.css('paddingBottom'))
+			}
-			);
+			if(this.options.heightRatio) {
+				newHeight = $(window).height() * this.options.heightRatio;
+				if(this.options.minHeight && newHeight < this.options.minHeight) {
+					opts.height = this.options.minHeight
+				} else if(this.options.maxHeight && newHeight > this.options.maxHeight) {
+					opts.height = this.options.maxHeight;
+				} else {
+					opts.height = newHeight;
+				}
+			}
+			if(this.options.autoPosition) {
+				opts.position = this.options.position;
+			}
+			if(!jQuery.isEmptyObject(opts)) {
+				this._setOptions(opts);
+			}
 		}
 	});
 	

admin/scss/_style.scss

@@ -1262,10 +1262,6 @@ form.member-profile-form {
 }
 
 .cms .ui-dialog{
-	min-width:570px;
-	.htmleditorfield-dialog{
-		min-width:570px;
-	}
 	.ss-ui-dialog.ui-dialog-content {
 		padding-top: 0px; //removes padding so that tabs are flush with header
 	}
@@ -1296,6 +1292,16 @@ form.member-profile-form {
 		}
 	}
 
+	.ui-dialog-content {
+		overflow: auto; // TODO Replace with proper $.layout grid
+
+		&.loading {
+			background-image: url(../images/spinner.gif);
+			background-position: 50% 50%;
+			background-repeat: no-repeat;
+		}
+	}
+
 	.cms-dialog-content {
 		background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
 		padding-bottom: $grid-y;

javascript/HtmlEditorField.js

@@ -372,6 +372,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					$('body').append(dialog);
 					$.ajax({
 						url: url,
+						complete: function() {
+							dialog.removeClass('loading');
+						},
 						success: function(html) {
 							dialog.html(html);
 							dialog.trigger('dialogopen');
@@ -384,11 +387,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 		$('.htmleditorfield-dialog').entwine({
 			onadd: function() {
 				// Create jQuery dialog
-
+				if (!this.is('.ui-dialog-content')) {
-				var height = $(window).height() * 0.8; 
+					this.ssdialog({autoOpen: true});
-				var width = $(window).width() * 0.8;
+				}
-
-				if (!this.is('.ui-dialog-content')) this.dialog({autoOpen: true, bgiframe: true, modal: true, height: height, width: width, ghost: true});
 
 				this._super();
 			},
@@ -397,10 +398,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				return this.find('form');
 			},
 			open: function() {
-				this.dialog('open');
+				this.ssdialog('open');
 			},
 			close: function() {
-				this.dialog('close');
+				this.ssdialog('close');
 			},
 			toggle: function(bool) {
 				if(this.is(':visible')) this.close();