diff --git a/admin/css/screen.css b/admin/css/screen.css index c5ad9343a..cef9d589e 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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; } diff --git a/admin/javascript/ssui.core.js b/admin/javascript/ssui.core.js index bcdcd380f..74efe5095 100644 --- a/admin/javascript/ssui.core.js +++ b/admin/javascript/ssui.core.js @@ -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); + } } }); diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 26531ab35..2c7973266 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -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; diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js index 3b2e5cf74..01a0e9bdc 100644 --- a/javascript/HtmlEditorField.js +++ b/javascript/HtmlEditorField.js @@ -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();