ENHANCEMENT Replaced custom profile dialog JS with generic ssui-core.js functionality. Removed cookie state saving abilities for now, not a high priority to re-implement)

admin/css/screen.css

@@ -115,7 +115,7 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .field .chzn-container-single .chzn-single { height: 26px; line-height: 26px; /* not relative, as then we'd had to redo most of chzn */ font-size: 12px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
 .field .chzn-container-single .chzn-single:hover, .field .chzn-container-single .chzn-single:focus, .field .chzn-container-single .chzn-single:active { text-decoration: none; outline: none; }
 .field .chzn-container-single .chzn-single div { width: 24px; }
-.field .chzn-container-single .chzn-single div b { background-position: 1px 4px; }
+.field .chzn-container-single .chzn-single div b { background-position: 4px 0px; }
 .field input.hasDatepicker { width: 50%; max-width: 96px; }
 
 /** ---------------------------------------------------- Buttons ---------------------------------------------------- */
@@ -304,7 +304,7 @@ body.cms { overflow: hidden; }
 .cms-content-tools td { border-bottom: 1px solid #ced7dc; padding: 7px 2px; font-size: 11px; }
 
 /**  CMS Batch actions */
-.cms-content-batchactions, .cms-content-constructive-actions { float: right; }
+.cms-content-constructive-actions { float: left; }
 
 .cms-content-batchactions { float: right; position: relative; display: block; margin-right: 8px; }
 .cms-content-batchactions form > * { display: block; float: left; }
@@ -385,7 +385,8 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
 .cms .ui-widget-overlay { background-color: #000; background-image: none; }
 
 .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; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
+.ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; background-color: #92a5b2; padding: 4px 4px 4px 16px; border-bottom: 2px solid #8399a7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
+.ui-dialog.loading { background-image: url(../images/spinner.gif); background-position: 50% 50%; background-repeat: no-repeat; }
 
 body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; }
 

admin/javascript/LeftAndMain.js

@@ -261,172 +261,27 @@
 		});
 
 		/**
-		 * Class: a#profile-link
+		 * Trigger dialogs with iframe based on the links href attribute (see ssui-core.js).
-		 * 
-		 * Link for editing the profile for a logged-in member through a modal dialog.
 		 */
-		$('.cms-container .profile-link').entwine({
+		$('.cms-container .ss-ui-dialog-link').entwine({
-			DialogPadding: 40,
+			UUID: null,
-			MaxHeight: 800,
-			MaxWidth: 800,
-			MinHeight: 120,
-			MinWidth: 120,
-			
-			/**
-			 * Constructor: onmatch
-			 */
 			onmatch: function() {
-				this.bind('click', function(e) {
+				this._super();
-					return self._openPopup();
+				this.setUUID(new Date().getTime());
-				});
-				
-				var self = this;
-
-				$('body').append(
-					'<div id="ss-ui-dialog">'
-					+ '<iframe id="ss-ui-dialog-iframe" '
-					+ 'marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto">'
-					+ '</iframe>'
-					+ '</div>'
-				);
-
-				$('#ss-ui-dialog-iframe').bind('load', function(e) {
-					self._resize();
-				});
-				
-				$(window).bind('resize', function() {
-					self._resize();
-				});
-				
-				self.redraw();
 			},
-			
+			onclick: function() {
-			/**
+				this._super();
-			 * Function: redraw
+
-			 *
+				var self = this, id = 'ss-ui-dialog-' + this.getUUID();
-			 * Returns: void
+
-			 */
+				var dialog = $('#' + id);
-			redraw: function() {
+				if(!dialog.length) {
-				var self = this;
+					dialog = $('<div class="ss-ui-dialog" id="' + id + '" />');
-				var useCookie = false;
+					$('body').append(dialog);
-				var cookieVal = false;
-				
-				if(useCookie && jQuery.cookie && jQuery.cookie('ss-ui-dialog')) {
-					cookieVal = JSON.parse(jQuery.cookie('ss-ui-dialog'));
 				}
-
-				$("#ss-ui-dialog").dialog(jQuery.extend({
-					autoOpen: false,
-					bgiframe: true,
-					modal: true,
-					width: self._width(),
-					height: self._height(),
-					position: 'center',
-					
-					resizeStop: function(e, ui) {
-						self._resize();
-					},
-					
-					dragStop: function(e, ui) {
-						self._saveState();
-					},
-					// TODO i18n
-					title: 'Edit Profile'
-				}, cookieVal)).css('overflow', 'hidden');
-				
-			},
 			
-			/**
+				dialog.ssdialog({iframeUrl: this.attr('href'), autoOpen: true});
-			 * Function: _popupHeight
-			 * 
-			 * Returns a value > minHeight < max height
-			 * Returns: Int
-			 */
-			_height: function() {
-				var marginTop = parseInt($(this).css('margin-top').replace('px', ''));
-				var marginBottom = parseInt($(this).css('margin-bottom').replace('px', ''));
-				var body = $("body").height();
-
-				var height = body - (marginTop + marginBottom) - (this.getDialogPadding() * 2);
-				
-				if(height > this.getMaxHeight()) 
-					return this.getMaxHeight();
-				else if(height < this.getMinHeight())
-					return this.getMinHeight();
-				
-				return height;
-			},
-			
-			/**
-			 * Function: _popupWidth
-			 *
-			 * Returns: Int
-			 */
-			_width: function() {
-				var body = $("body").width();
-				var width = body - (this.getDialogPadding() * 2);	
-				
-				if(width > this.getMaxWidth()) 
-					return this.getMaxWidth();
-				else if(width < this.getMinWidth())
-					return this.getMinWidth();
-					
-				return width;
-			},
-
-			/**
-			 * Function: _openPopup
-			 */
-			_openPopup: function(e) {
-				$('#ss-ui-dialog-iframe').attr('src', this.attr('href'));
-
-				$("#ss-ui-dialog").dialog('open');
-
 				return false;
-			},
-
-			/**
-			 * Function: _resize
-			 */
-			_resize: function() {
-				var iframe = $('#ss-ui-dialog-iframe');
-				var container = $('#ss-ui-dialog');
-				
-				container.dialog("option", "width", this._width());
-				container.dialog("option", "height", this._height());
-				container.dialog('option', 'position', 'center');
-				
-				iframe.attr('width', 
-					container.innerWidth() 
-					- parseFloat(container.css('paddingLeft'))
-					- parseFloat(container.css('paddingRight'))
-				);
-				iframe.attr('height', 
-					container.innerHeight()
-					- parseFloat(container.css('paddingTop')) 
-					- parseFloat(container.css('paddingBottom'))
-				);
-				
-				this._saveState();
-			},
-
-			/**
-			 * Function: _saveState
-			 */
-			_saveState: function() {
-				var container = $('#ss-ui-dialog');
-
-				// save size in cookie (optional)
-				if(jQuery.cookie && container.width() && container.height()) {
-					jQuery.cookie(
-						'ss-ui-dialog',
-						JSON.stringify({
-							width: parseInt(container.width(), 10), 
-							height: parseInt(container.height(), 10)
-						}),
-						{ expires: 30, path: '/'}
-					);
-				}
 			}
 		});
 

admin/javascript/ssui.core.js

@@ -28,6 +28,81 @@
 			this.addClass(cls).siblings().not(this).removeClass(cls);
 		}
 	});
+
+	/**
+	 * Extends jQueryUI dialog with iframe abilities (and related resizing logic),
+	 * and sets some CMS-wide defaults.
+	 */
+	$.widget("ssui.ssdialog", $.ui.dialog, {
+		options: {
+			// Custom properties
+			iframeUrl: '',
+			reloadOnOpen: true,
+
+			// Defaults
+			width: '80%',
+			height: 500,
+			position: 'center',
+			modal: true,
+			bgiframe: true,
+			autoOpen: false
+		},
+		_create: function() {
+			$.ui.dialog.prototype._create.call(this);
+
+			var self = this;
+
+			// Create iframe
+			var iframe = $('<iframe marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"></iframe>');
+			iframe.bind('load', function(e) {
+				if($(this).attr('src') == 'about:blank') return;
+				
+				$(this).show();
+				self._resizeIframe();
+				self.uiDialog.removeClass('loading');
+			}).hide();
+			this.element.append(iframe);
+
+			// Let the iframe handle its scrolling
+			this.element.css('overflow', 'hidden');
+		},
+		open: function() {
+			$.ui.dialog.prototype.open.call(this);
+			
+			var self = this, iframe = this.element.children('iframe');
+
+			// Load iframe
+			if(!iframe.attr('src') || this.options.reloadOnOpen) {
+				iframe.hide();
+				iframe.attr('src', this.options.iframeUrl);
+				this.uiDialog.addClass('loading');
+			}
+
+			// Resize events
+			this.uiDialog.bind('resize.ssdialog', function() {self._resizeIframe();});
+			$(window).bind('resize.ssdialog', function() {self._resizeIframe();});
+		},
+		close: function() {
+			$.ui.dialog.prototype.close.call(this);
+
+			this.uiDialog.unbind('resize.ssdialog');
+			$(window).unbind('resize.ssdialog');
+		},
+		_resizeIframe: function() {
+			var el = this.element, iframe = el.children('iframe');
+
+			iframe.attr('width', 
+				el.innerWidth() 
+				- parseFloat(el.css('paddingLeft'))
+				- parseFloat(el.css('paddingRight'))
+			);
+			iframe.attr('height', 
+				el.innerHeight()
+				- parseFloat(el.css('paddingTop')) 
+				- parseFloat(el.css('paddingBottom'))
+			);
+		}
+	});
 	
 	$.widget("ssui.titlebar", {
 		_create: function() {

admin/scss/_style.scss

@@ -894,10 +894,16 @@ form.member-profile-form {
 		background-color: #92a5b2;
 		padding: $grid-vertical/2 $grid-horizontal/2 $grid-vertical/2 $grid-horizontal*2;
 		border-bottom: 2px solid #8399a7;
-		@include border-radius-top(4px);
+		// @include border-radius-top(4px);
-		@include border-radius-bottom(0px);
+		// @include border-radius-bottom(0px);
 		@include background-image(linear-gradient(#ced7dc, #92a5b2));
 	}
+
+	&.loading {
+		background-image: url(../images/spinner.gif);
+		background-position: 50% 50%;
+		background-repeat: no-repeat;
+	}
 }
 
 body.cms-dialog {