ENHANCEMENT Replacing greybox library for admin/myprofile with a jQuery UI dialog, including iframe resizing and position/dimension saving into cookies

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92630 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/LeftAndMain.php

@@ -179,6 +179,7 @@ class LeftAndMain extends Controller {
 		Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.core.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.datepicker.js');
+		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.dialog.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.draggable.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.droppable.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.accordion.js');
@@ -216,10 +217,6 @@ class LeftAndMain extends Controller {
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/scriptaculous/dragdrop.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/scriptaculous/controls.js');
 		
-		Requirements::css(THIRDPARTY_DIR . '/greybox/greybox.css');
-		Requirements::javascript(THIRDPARTY_DIR . '/greybox/AmiJS.js');
-		Requirements::javascript(THIRDPARTY_DIR . '/greybox/greybox.js');
-		
 		Requirements::javascript(THIRDPARTY_DIR . '/tree/tree.js');
 		Requirements::css(THIRDPARTY_DIR . '/tree/tree.css');
 		
@@ -272,8 +269,6 @@ class LeftAndMain extends Controller {
 				'sapphire/thirdparty/scriptaculous/effects.js',
 				'sapphire/thirdparty/scriptaculous/dragdrop.js',
 				'sapphire/thirdparty/scriptaculous/controls.js',
-				'jsparty/greybox/AmiJS.js',
-				'jsparty/greybox/greybox.js',
 				'cms/javascript/LeftAndMain.js',
 				'cms/javascript/LeftAndMain_left.js',
 				'cms/javascript/LeftAndMain_right.js',

javascript/LeftAndMain.js

@@ -228,12 +228,88 @@
 	
 	/**
 	 * Link for editing the profile for a logged-in member
-	 * through a popup. Required "greybox" javascript library.
+	 * through a modal dialog.
 	 */
-	$('#EditMemberProfile').concrete('ss', function($){return{
+	$('a#EditMemberProfile').concrete('ss', function($){return{
-		onclick: function(e) {
+		
-			GB_show('Edit Profile', this.attr('href'), 290, 500);
+		onmatch: function() {
+			var self = this;
+			
+			this.bind('click', function(e) {return self._openPopup();});
+			
+			$('body').append(
+				'<div id="ss-ui-dialog">'
+				+ '<iframe id="ss-ui-dialog-iframe" '
+				+ 'marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto">'
+				+ '</iframe>'
+				+ '</div>'
+			);
+			
+			var cookieVal = (jQuery.cookie) ? JSON.parse(jQuery.cookie('ss-ui-dialog')) : false;
+			$("#ss-ui-dialog").dialog(jQuery.extend({
+				autoOpen: false,
+				bgiframe: true,
+				modal: true,
+				height: 300,
+				width: 500,
+				resizeStop: function(e, ui) {
+					self._resize();
+					self._saveState();
+				},
+				dragStop: function(e, ui) {
+					self._saveState();
+				},
+				// TODO i18n
+				title: 'Edit Profile'
+			}, cookieVal)).css('overflow', 'hidden');
+			
+			$('#ss-ui-dialog-iframe').bind('load', function(e) {self._resize();})
+		},
+		
+		_openPopup: function(e) {
+			$('#ss-ui-dialog-iframe').attr('src', this.attr('href'));
+			
+			$("#ss-ui-dialog").dialog('open');
+			
 			return false;
+		},
+		
+		_resize: function() {
+			var iframe = $('#ss-ui-dialog-iframe');
+			var container = $('#ss-ui-dialog');
+
+			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();
+		},
+		
+		_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()), 
+						height: parseInt(container.height()),
+						position: [
+							parseInt(container.offset().top),
+							parseInt(container.offset().left)
+						]
+					}),
+					{ expires: 30, path: '/'}
+				);
+			}
 		}
 	}});