mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Min/max constraints for CMS dialog
This commit is contained in:
Ingo Schommer
parent
5ff69b98ab
commit
9f600ada2c
@ -616,13 +616,13 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
|
||||
|
||||
.cms .ui-widget-overlay { background-color: #000; background-image: none; }
|
||||
|
||||
.cms .ui-dialog { min-width: 570px; }
|
||||
.cms .ui-dialog .htmleditorfield-dialog { min-width: 570px; }
|
||||
.cms .ui-dialog .ss-ui-dialog.ui-dialog-content { padding-top: 0px; }
|
||||
|
||||
.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; padding: 0; border: none; background-color: transparent; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; }
|
||||
.ui-dialog .ui-dialog-titlebar.ui-widget-header .ui-dialog-title { position: absolute; }
|
||||
.ui-dialog .ui-dialog-content { overflow: auto; }
|
||||
.ui-dialog .ui-dialog-content.loading { background-image: url(../images/spinner.gif); background-position: 50% 50%; background-repeat: no-repeat; }
|
||||
.ui-dialog .cms-dialog-content { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; padding-bottom: 8px; padding-top: 0px; }
|
||||
.ui-dialog .cms-dialog-content .Actions { overflow: auto; margin: 8px 0; padding-bottom: 8px; float: right; }
|
||||
.ui-dialog .cms-dialog-content .ui-tabs { position: static; }
|
||||
|
||||
@ -115,6 +115,13 @@
|
||||
/**
|
||||
* Extends jQueryUI dialog with iframe abilities (and related resizing logic),
|
||||
* and sets some CMS-wide defaults.
|
||||
*
|
||||
* Additional settings:
|
||||
* - 'autoPosition': Automatically reposition window on resize based on 'position' option
|
||||
* - 'widthRatio': Sets width based on percentage of window (value between 0 and 1)
|
||||
* - 'heightRatio': Sets width based on percentage of window (value between 0 and 1)
|
||||
* - 'reloadOnOpen': Reloads the iframe whenever the dialog is reopened
|
||||
* - 'iframeUrl': Create an iframe element and load this URL when the dialog is created
|
||||
*/
|
||||
$.widget("ssui.ssdialog", $.ui.dialog, {
|
||||
options: {
|
||||
@ -124,12 +131,17 @@
|
||||
dialogExtraClass: '',
|
||||
|
||||
// Defaults
|
||||
width: '80%',
|
||||
height: 500,
|
||||
position: 'center',
|
||||
modal: true,
|
||||
bgiframe: true,
|
||||
autoOpen: false
|
||||
autoOpen: false,
|
||||
autoPosition: true,
|
||||
minWidth: 500,
|
||||
maxWidth: 700,
|
||||
minHeight: 300,
|
||||
maxHeight: 600,
|
||||
widthRatio: 0.8,
|
||||
heightRatio: 0.8,
|
||||
resizable: false
|
||||
},
|
||||
_create: function() {
|
||||
$.ui.dialog.prototype._create.call(this);
|
||||
@ -150,7 +162,7 @@
|
||||
this.element.append(iframe);
|
||||
|
||||
// Let the iframe handle its scrolling
|
||||
this.element.css('overflow', 'hidden');
|
||||
if(this.options.iframeUrl) this.element.css('overflow', 'hidden');
|
||||
},
|
||||
open: function() {
|
||||
$.ui.dialog.prototype.open.call(this);
|
||||
@ -165,7 +177,6 @@
|
||||
}
|
||||
|
||||
// Resize events
|
||||
this.uiDialog.bind('resize.ssdialog', function() {self._resizeIframe();});
|
||||
$(window).bind('resize.ssdialog', function() {self._resizeIframe();});
|
||||
},
|
||||
close: function() {
|
||||
@ -175,18 +186,33 @@
|
||||
$(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'))
|
||||
);
|
||||
var opts = {}, newWidth, newHeight;
|
||||
if(this.options.widthRatio) {
|
||||
newWidth = $(window).width() * this.options.widthRatio;
|
||||
if(this.options.minWidth && newWidth < this.options.minWidth) {
|
||||
opts.width = this.options.minWidth
|
||||
} else if(this.options.maxWidth && newWidth > this.options.maxWidth) {
|
||||
opts.width = this.options.maxWidth;
|
||||
} else {
|
||||
opts.width = newWidth;
|
||||
}
|
||||
}
|
||||
if(this.options.heightRatio) {
|
||||
newHeight = $(window).height() * this.options.heightRatio;
|
||||
if(this.options.minHeight && newHeight < this.options.minHeight) {
|
||||
opts.height = this.options.minHeight
|
||||
} else if(this.options.maxHeight && newHeight > this.options.maxHeight) {
|
||||
opts.height = this.options.maxHeight;
|
||||
} else {
|
||||
opts.height = newHeight;
|
||||
}
|
||||
}
|
||||
if(this.options.autoPosition) {
|
||||
opts.position = this.options.position;
|
||||
}
|
||||
if(!jQuery.isEmptyObject(opts)) {
|
||||
this._setOptions(opts);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1262,10 +1262,6 @@ form.member-profile-form {
|
||||
}
|
||||
|
||||
.cms .ui-dialog{
|
||||
min-width:570px;
|
||||
.htmleditorfield-dialog{
|
||||
min-width:570px;
|
||||
}
|
||||
.ss-ui-dialog.ui-dialog-content {
|
||||
padding-top: 0px; //removes padding so that tabs are flush with header
|
||||
}
|
||||
@ -1296,6 +1292,16 @@ form.member-profile-form {
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
overflow: auto; // TODO Replace with proper $.layout grid
|
||||
|
||||
&.loading {
|
||||
background-image: url(../images/spinner.gif);
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.cms-dialog-content {
|
||||
background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4;
|
||||
padding-bottom: $grid-y;
|
||||
|
||||
@ -372,6 +372,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
|
||||
$('body').append(dialog);
|
||||
$.ajax({
|
||||
url: url,
|
||||
complete: function() {
|
||||
dialog.removeClass('loading');
|
||||
},
|
||||
success: function(html) {
|
||||
dialog.html(html);
|
||||
dialog.trigger('dialogopen');
|
||||
@ -384,11 +387,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
|
||||
$('.htmleditorfield-dialog').entwine({
|
||||
onadd: function() {
|
||||
// Create jQuery dialog
|
||||
|
||||
var height = $(window).height() * 0.8;
|
||||
var width = $(window).width() * 0.8;
|
||||
|
||||
if (!this.is('.ui-dialog-content')) this.dialog({autoOpen: true, bgiframe: true, modal: true, height: height, width: width, ghost: true});
|
||||
if (!this.is('.ui-dialog-content')) {
|
||||
this.ssdialog({autoOpen: true});
|
||||
}
|
||||
|
||||
this._super();
|
||||
},
|
||||
@ -397,10 +398,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
|
||||
return this.find('form');
|
||||
},
|
||||
open: function() {
|
||||
this.dialog('open');
|
||||
this.ssdialog('open');
|
||||
},
|
||||
close: function() {
|
||||
this.dialog('close');
|
||||
this.ssdialog('close');
|
||||
},
|
||||
toggle: function(bool) {
|
||||
if(this.is(':visible')) this.close();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user