From 55ddbd38bcfbe29319dbcd7d36c9694efac3d429 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Wed, 8 Feb 2012 15:34:06 +0100 Subject: [PATCH] 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) --- admin/css/screen.css | 7 +- admin/javascript/LeftAndMain.js | 175 +++----------------------------- admin/javascript/ssui.core.js | 75 ++++++++++++++ admin/scss/_style.scss | 10 +- 4 files changed, 102 insertions(+), 165 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 2d34fcd29..7f1ec0a7e 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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; } diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index 032b70f6c..7ccf39819 100644 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -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( - '
' - + '' - + '
' - ); - - $('#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 = $('
'); + $('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: '/'} - ); - } } }); diff --git a/admin/javascript/ssui.core.js b/admin/javascript/ssui.core.js index d29e26852..f900c5882 100644 --- a/admin/javascript/ssui.core.js +++ b/admin/javascript/ssui.core.js @@ -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.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() { diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index c3548e749..d9d607fd6 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -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 {