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
This commit is contained in:
Ingo Schommer 2009-11-21 02:37:34 +00:00
parent ba0e2ffb86
commit ddda0714b6
2 changed files with 83 additions and 12 deletions

View File

@ -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',

View File

@ -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);