From ddda0714b603f834db44b645e6bcd0cd58fdf705 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Sat, 21 Nov 2009 02:37:34 +0000
Subject: [PATCH] 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      |  7 +---
 javascript/LeftAndMain.js | 88 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php
index 0ef67938..038c3ecb 100644
--- a/code/LeftAndMain.php
+++ b/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');
@@ -215,10 +216,6 @@ class LeftAndMain extends Controller {
 		Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/scriptaculous/effects.js');
 		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',
diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js
index 3e267de0..3db70908 100644
--- a/javascript/LeftAndMain.js
+++ b/javascript/LeftAndMain.js
@@ -228,15 +228,91 @@
 	
 	/**
 	 * 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{
-		onclick: function(e) {
-			GB_show('Edit Profile', this.attr('href'), 290, 500);
+	$('a#EditMemberProfile').concrete('ss', function($){return{
+		
+		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: '/'}
+				);
+			}
 		}
-	}});	
-	
+	}});
+		
 })(jQuery);