mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-01 21:58:51 +02:00
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)
This commit is contained in:
Ingo Schommer
parent
4126b95cf7
commit
55ddbd38bc
@ -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; }
|
||||
|
||||
|
||||
@ -261,172 +261,27 @@
|
||||
});
|
||||
|
||||
/**
|
||||
* Class: a#profile-link
|
||||
*
|
||||
* Link for editing the profile for a logged-in member through a modal dialog.
|
||||
* Trigger dialogs with iframe based on the links href attribute (see ssui-core.js).
|
||||
*/
|
||||
$('.cms-container .profile-link').entwine({
|
||||
DialogPadding: 40,
|
||||
MaxHeight: 800,
|
||||
MaxWidth: 800,
|
||||
MinHeight: 120,
|
||||
MinWidth: 120,
|
||||
|
||||
/**
|
||||
* Constructor: onmatch
|
||||
*/
|
||||
$('.cms-container .ss-ui-dialog-link').entwine({
|
||||
UUID: null,
|
||||
onmatch: function() {
|
||||
this.bind('click', function(e) {
|
||||
return self._openPopup();
|
||||
});
|
||||
|
||||
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();
|
||||
this._super();
|
||||
this.setUUID(new Date().getTime());
|
||||
},
|
||||
|
||||
/**
|
||||
* Function: redraw
|
||||
*
|
||||
* Returns: void
|
||||
*/
|
||||
redraw: function() {
|
||||
var self = this;
|
||||
var useCookie = false;
|
||||
var cookieVal = false;
|
||||
|
||||
if(useCookie && jQuery.cookie && jQuery.cookie('ss-ui-dialog')) {
|
||||
cookieVal = JSON.parse(jQuery.cookie('ss-ui-dialog'));
|
||||
onclick: function() {
|
||||
this._super();
|
||||
|
||||
var self = this, id = 'ss-ui-dialog-' + this.getUUID();
|
||||
|
||||
var dialog = $('#' + id);
|
||||
if(!dialog.length) {
|
||||
dialog = $('<div class="ss-ui-dialog" id="' + id + '" />');
|
||||
$('body').append(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');
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 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');
|
||||
|
||||
dialog.ssdialog({iframeUrl: this.attr('href'), autoOpen: true});
|
||||
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: '/'}
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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-bottom(0px);
|
||||
// @include border-radius-top(4px);
|
||||
// @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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user