silverstripe-framework/admin/javascript/ssui.core.js

(function($) {

	/**
	 * Allows icon definition via HTML5 data attrs for easier handling in PHP.
	 *
	 * Adds an alternative appearance so we can toggle back and forth between them
	 * and register event handlers to add custom styling and behaviour. Example use
	 * is in the CMS with the saving buttons - depending on the page's state one of
	 * them will either say "Save draft" or "Saved", and will have different colour.
	 */
	$.widget('ssui.button', $.ui.button, {
		options: {
			alternate: {
				icon: null,
				text: null
			},
			showingAlternate: false
		},

		/**
		 * Switch between the alternate appearances.
		 */
		toggleAlternate: function() {
			if (this._trigger('ontogglealternate')===false) return;

			// Only switch to alternate if it has been enabled through options. 
			if (!this.options.alternate.icon && !this.options.alternate.text) return;

			this.options.showingAlternate = !this.options.showingAlternate;
			this.refresh();
		},

		/**
		 * Adjust the appearance to fit with the current settings.
		 */
		_refreshAlternate: function() {
			this._trigger('beforerefreshalternate');

			// Only switch to alternate if it has been enabled through options. 
			if (!this.options.alternate.icon && !this.options.alternate.text) return;

			if (this.options.showingAlternate) {
				this.element.find('.ui-button-icon-primary').hide();
				this.element.find('.ui-button-text').hide();
				this.element.find('.ui-button-icon-alternate').show();
				this.element.find('.ui-button-text-alternate').show();
			}
			else {
				this.element.find('.ui-button-icon-primary').show();
				this.element.find('.ui-button-text').show();
				this.element.find('.ui-button-icon-alternate').hide();
				this.element.find('.ui-button-text-alternate').hide();
			}

			this._trigger('afterrefreshalternate');
		},

		/**
		 * Construct button - pulls in options from data attributes.
		 * Injects new elements for alternate appearance (if requested via options).
		 */
		_resetButton: function() {
			var iconPrimary = this.element.data('icon-primary'),
				iconSecondary = this.element.data('icon-secondary');

			if (!iconPrimary) iconPrimary = this.element.data('icon');

			// TODO Move prefix out of this method, without requriing it for every icon definition in a data attr
			if(iconPrimary) this.options.icons.primary = 'btn-icon-' + iconPrimary;
			if(iconSecondary) this.options.icons.secondary = 'btn-icon-' + iconSecondary;

			$.ui.button.prototype._resetButton.call(this);

			// Pull options from data attributes. Overriden by explicit options given on widget creation.
			if (!this.options.alternate.text) {
				this.options.alternate.text = this.element.data('text-alternate');
			}
			if (!this.options.alternate.icon) {
				this.options.alternate.icon = this.element.data('icon-alternate');
			}
			if (!this.options.showingAlternate) {
				this.options.showingAlternate = this.element.hasClass('ss-ui-alternate');
			}

			// Create missing elements.
			if (this.options.alternate.icon) {
				this.buttonElement.append(
					"<span class='ui-button-icon-alternate ui-button-icon-primary ui-icon btn-icon-" 
					+ this.options.alternate.icon + "'></span>"
				);
			}
			if (this.options.alternate.text) {
				this.buttonElement.append(
					"<span class='ui-button-text-alternate ui-button-text'>" + this.options.alternate.text + "</span>"
				);
			}

			this._refreshAlternate();
		},

		refresh: function() {
			$.ui.button.prototype.refresh.call(this);

			this._refreshAlternate();
		},

		destroy: function() {
			this.element.find('.ui-button-text-alternate').remove();
			this.element.find('.ui-button-icon-alternate').remove();

			$.ui.button.prototype.destroy.call( this );
		}
	});

	/**
	 * 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: {
			// Custom properties
			iframeUrl: '',
			reloadOnOpen: true,
			dialogExtraClass: '',

			// Defaults
			modal: true,
			bgiframe: true,
			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);

			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;
				
				iframe.addClass('loaded').show(); // more reliable than 'src' attr check (in IE)
				self._resizeIframe();
				self.uiDialog.removeClass('loading');
			}).hide();
			
			if(this.options.dialogExtraClass) this.uiDialog.addClass(this.options.dialogExtraClass);
			this.element.append(iframe);

			// Let the iframe handle its scrolling
			if(this.options.iframeUrl) this.element.css('overflow', 'hidden');
		},
		open: function() {
			$.ui.dialog.prototype.open.call(this);
			
			var self = this, iframe = this.element.children('iframe');

			// Load iframe
			if(this.options.iframeUrl && (!iframe.hasClass('loaded') || this.options.reloadOnOpen)) {
				iframe.hide();
				iframe.attr('src', this.options.iframeUrl);
				this.uiDialog.addClass('loading');
			}

			// Resize events
			$(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 opts = {}, newWidth, newHeight, iframe = this.element.children('iframe');;
			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(!jQuery.isEmptyObject(opts)) {
				this._setOptions(opts);

				// Resize iframe within dialog
				iframe.attr('width', 
					opts.width 
					- parseFloat(this.element.css('paddingLeft'))
					- parseFloat(this.element.css('paddingRight'))
				);
				iframe.attr('height', 
					opts.height
					- parseFloat(this.element.css('paddingTop')) 
					- parseFloat(this.element.css('paddingBottom'))
				);

				// Enforce new position
				if(this.options.autoPosition) {
					this._setOption("position", this.options.position);
				}
			}
		}
	});
	
	$.widget("ssui.titlebar", {
		_create: function() {
			this.originalTitle = this.element.attr('title');

			var self = this;
			var options = this.options;

			var title = options.title || this.originalTitle || '&nbsp;';
			var titleId = $.ui.dialog.getTitleId(this.element);

			this.element.parent().addClass('ui-dialog');

			var uiDialogTitlebar = this.element.
				addClass(
					'ui-dialog-titlebar ' +
					'ui-widget-header ' +
					'ui-corner-all ' +
					'ui-helper-clearfix'
				);

				// By default, the

				if(options.closeButton) {
					var uiDialogTitlebarClose = $('<a href="#"/>')
						.addClass(
							'ui-dialog-titlebar-close ' +
							'ui-corner-all'
						)
						.attr('role', 'button')
						.hover(
							function() {
								uiDialogTitlebarClose.addClass('ui-state-hover');
							},
							function() {
								uiDialogTitlebarClose.removeClass('ui-state-hover');
							}
						)
						.focus(function() {
							uiDialogTitlebarClose.addClass('ui-state-focus');
						})
						.blur(function() {
							uiDialogTitlebarClose.removeClass('ui-state-focus');
						})
						.mousedown(function(ev) {
							ev.stopPropagation();
						})
						.appendTo(uiDialogTitlebar);

					var uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
						.addClass(
							'ui-icon ' +
							'ui-icon-closethick'
						)
						.text(options.closeText)
						.appendTo(uiDialogTitlebarClose);
				}

				var uiDialogTitle = $('<span/>')
					.addClass('ui-dialog-title')
					.attr('id', titleId)
					.html(title)
					.prependTo(uiDialogTitlebar);

				uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
		},

		destroy: function() {
			this.element
				.unbind('.dialog')
				.removeData('dialog')
				.removeClass('ui-dialog-content ui-widget-content')
				.hide().appendTo('body');

			(this.originalTitle && this.element.attr('title', this.originalTitle));
		}
	});
	
	$.extend($.ssui.titlebar, {
		version: "0.0.1",
		options: {
			title: '',
			closeButton: false,
			closeText: 'close'
		},

		uuid: 0,

		getTitleId: function($el) {
			return 'ui-dialog-title-' + ($el.attr('id') || ++this.uuid);
		}
	});
}(jQuery));