gnuside-aloha-rails 0.23.3

data/vendor/assets/javascripts/aloha/plugins/common/ui/lib/context.js

@@ -0,0 +1,53 @@
+/**
+ * The context module provides functions to get at the context element
+ * for widgets.
+ *
+ * Many widgets are created dynamically and append themselves to the
+ * body so that they can be shown to the user. The context element is
+ * just a div appended to the body, that provides a common parent for
+ * these widget elements.
+ * 
+ * Appending widget elements to the context element provides two benefits:
+ * 1 - it would be cleaner for all aloha-specific elements to be
+ *     appended to one common parent.
+ * 2 - all css rules should have a .aloha context class, and the common
+ *     parent provides this class.
+ */
+define([
+	'aloha',
+	'jquery',
+	'util/class'
+], function(
+	Aloha,
+	$,
+	Class
+) {
+	'use strict';
+
+	var id = 'aloha-ui-context',
+	    selector = '#' + id,
+	    element;
+
+	// There is just a single context element in the page
+	element = $(selector);
+	if (!element.length) {
+		element = $('<div>', {'class': 'aloha', 'id': id});
+		// In the built aloha.js, init will happend before the body has
+		// finished loading, so we have to defer appending the element.
+		$(function(){ element.appendTo('body'); });
+	}
+
+	var Context =  Class.extend({
+		surfaces: [],
+		containers: []
+	});
+
+	// static fields
+
+	$.extend(Context, {
+		selector: selector,
+		element: element
+	});
+
+	return Context;
+});

data/vendor/assets/javascripts/aloha/plugins/common/ui/lib/dialog.js

@@ -0,0 +1,215 @@
+define([
+	'jquery',
+	'ui/component',
+	'i18n!ui/nls/i18n'
+], function (
+	$,
+	Component,
+	i18n
+) {
+	'use strict';
+
+	function makeDialogDiv(props) {
+		var textOrHtml = {};
+		if (props.text) {
+			textOrHtml.text = props.text;
+		}
+		if (props.html) {
+			textOrHtml.html = props.html;
+		}
+		return $('<div>', textOrHtml);
+	}
+
+	/**
+	 * Wraps the callback function so to destory the dialog when the callback is
+	 * invoked.
+	 *
+	 * @param {function} callback
+	 * @return {function} Wrapped callback.
+	 */
+	function callbackAndDestroy(callback) {
+		return function () {
+			callback.apply(this);
+			$(this).dialog('destroy').remove();
+		};
+	}
+
+	function wrapDialogButtons(buttons) {
+		// Buttons automatically close the dialog for convenience
+		var title;
+		for (title in buttons) {
+			if (buttons.hasOwnProperty(title)) {
+				buttons[title] = callbackAndDestroy(buttons[title]);
+			}
+		}
+		return buttons;
+	}
+
+	function makeDialogProps(props, defaultTitle) {
+		// All root elements of widgets added to the page by aloha should have the class 'aloha'.
+		// aloha-dialog is used for a hack to prevent a click in the
+		// dialog from bluggin the editable search for aloha-dialog in
+		// the aloha core for more information.
+		var cls = 'aloha aloha-dialog';
+		if (props.cls) {
+			cls += ' ' + props.cls;
+		}
+		return {
+			'resizable': false,
+			'modal': true,
+			'title': props.title || defaultTitle,
+			'dialogClass': cls,
+			'zIndex': 10200
+		};
+	}
+
+	return {
+		/**
+		 * Shows a confirm dialog.
+		 *
+		 * A confirm dialog has a confirm icon and style and yes and no buttons.
+		 *
+		 * @param props is an object with the following properties (all optional):
+		 *          title - the title of the dialog
+		 *           text - either the text inside the dialog
+		 *           html - or the html inside the dialog
+		 *            yes - makes a "Yes" button in the dialog and invokes the given callback if it is pressed.
+		 *             no - makes a "No" button in the dialog and invokes the given callback if it is pressed.
+		 *         answer - makes a "Yes" and "No" button in the dialog and pressing either will invoke the
+		 *                  callback with the answer as a boolean argument. Does not interfere with yes and
+		 *                  no properties.
+		 *            cls - the root element of the dialog will receive this class
+		 *        buttons - an object where the properties are button titles and the values are callbacks
+		 *        Button callbacks will receive the dialog element as context.
+		 *        Pressing any buttons in the dialog will automatically close the dialog.
+		 * @return
+		 *        A function that can be called to close the dialog.
+		 */
+		'confirm': function (props) {
+			var buttons = props.buttons || {};
+
+			var yesLabel = i18n.t('button.yes.label');
+			var noLabel = i18n.t('button.no.label');
+
+			// block adds backwards compatibility to still be able to use
+			// 'buttons.Yes/No' for setting functionality of basic buttons
+			if (buttons.Yes !== null && yesLabel !== 'Yes') {
+				buttons[yesLabel] = buttons.Yes;
+				delete buttons.Yes;
+			}
+			if (buttons.No !== null && noLabel !== 'No') {
+				buttons[noLabel] = buttons.No;
+				delete buttons.No;
+			}
+
+			buttons[yesLabel] = buttons[yesLabel] || props.yes || $.noop;
+			buttons[noLabel]  = buttons[noLabel]  || props.no  || $.noop;
+
+			if (props.answer) {
+				var yes = buttons[yesLabel];
+				var no  = buttons[noLabel];
+				buttons[yesLabel] = function () {
+					yes();
+					props.answer(true);
+				};
+				buttons[noLabel] = function () {
+					no();
+					props.answer(false);
+				};
+			}
+			var dialog = makeDialogDiv(props).dialog(
+				$.extend(makeDialogProps(props, 'Confirm'), {
+					'buttons': wrapDialogButtons(buttons)
+				})
+			);
+			return function () {
+				dialog.dialog('destroy').remove();
+			};
+		},
+
+		/**
+		 * Shows an alert dialog.
+		 *
+		 * An alert dialog has an alert icon and style and a dismiss button.
+		 *
+		 * @param props is an object with the following properties (all optional)
+		 *        title - the title of the dialog
+		 *        text - either the text inside the dialog
+		 *        html - or the html inside the dialog
+		 *        cls - the root element of the dialog will receive this class
+		 * @return
+		 *        A function that can be called to close the dialog.
+		 */
+		'alert': function (props) {
+			var propsExtended = {};
+			propsExtended[i18n.t('button.dismiss.label')] = $.noop;
+			var dialog = makeDialogDiv(props).dialog(
+				$.extend(makeDialogProps(props, 'Alert'), {
+					'buttons': wrapDialogButtons(propsExtended)
+				})
+			);
+			return function () {
+				dialog.dialog('destroy').remove();
+			};
+		},
+
+		/**
+		 * Shows a stripped down modal dialog that can be customized.
+		 *
+		 * @param {object} props Properties with which to customize the
+		 *                       modal.  All properties of
+		 *                       api.jqueryui.com/dialog apply, in addition to
+		 *                       the following optional properties:
+		 *                       html - HTML contents to be placed inside the
+		 *                              modal.
+		 *                        cls - Custom class to be given to the modal's
+		 *                              root element.
+		 * @return {jQuery.<HTMLElement>} jQuery object containing the dialog
+		 *                                DOM element.
+		 */
+		'modal': function (props) {
+			var $dialog = makeDialogDiv(props).dialog(
+				$.extend(makeDialogProps(props, ''), props)
+			);
+			$dialog.parent().find('.ui-dialog-titlebar').remove();
+			return $dialog;
+		},
+
+		/**
+		 * Shows a progress dialog.
+		 *
+		 * A progress dialog shows a progressbar and a message to
+		 * indicate that some process is in progress.
+		 *
+		 * @param props is an object with the following properties (all optional)
+		 *        title - the title of the dialog
+		 *         text - either the text inside the dialog
+		 *         html - or the html inside the dialog
+		 *          cls - the root element of the dialog will receive this class
+		 *        value - the intial value of the progressbar from 0 to 100
+		 * @return
+		 *        A function that can be called to update the progress bar with a value from 0 to 100.
+		 *        If null or undefined is passed, the dialog will be closed.
+		 */
+		'progress': function (props) {
+			var progressbar = $("<div>").progressbar({
+				// TODO if no initial value is specific, show a full but an animated progress bar instead
+				value: null != props.value ? props.value : 100
+			});
+			var dialog = makeDialogDiv(props).dialog(
+				$.extend(makeDialogProps(props, 'Progress'), {
+					open: function () {
+						$(this).append(progressbar);
+					}
+				})
+			);
+			return function (value) {
+				if (null != value) {
+					progressbar.progressbar({ value: value });
+				} else {
+					dialog.dialog('destroy').remove();
+				}
+			};
+		}
+	};
+});

data/vendor/assets/javascripts/aloha/plugins/common/ui/lib/floating.js

@@ -0,0 +1,405 @@
+/* floating.js is part of Aloha Editor project http://aloha-editor.org
+ *
+ * Aloha Editor is a WYSIWYG HTML5 inline editing library and editor.
+ * Copyright (c) 2010-2013 Gentics Software GmbH, Vienna, Austria.
+ * Contributors http://aloha-editor.org/contribution.php
+ *
+ * Aloha Editor is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or any later version.
+ *
+ * Aloha Editor is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * As an additional permission to the GNU GPL version 2, you may distribute
+ * non-source (e.g., minimized or compacted) forms of the Aloha-Editor
+ * source code without the copy of the GNU GPL normally required,
+ * provided you include this license notice and a URL through which
+ * recipients can access the Corresponding Source.
+ *
+ * @overview
+ * Implements position and floating animation effect for UI surfaces.
+ */
+define([
+	'jquery',
+	'aloha/core',
+	'ui/surface',
+	'ui/subguarded',
+	'PubSub',
+	'vendor/amplify.store',
+	'util/browser'
+], function (
+	$,
+	Aloha,
+	Surface,
+	subguarded,
+	PubSub,
+	amplifyStore,
+	Browser
+) {
+	'use strict';
+
+	/**
+	 * The distance that the floating surface should maintain from the editable
+	 * it is floating to.
+	 *
+	 * @type {string}
+	 * @const
+	 */
+	var DISTANCE = 10;
+
+	/**
+	 * The duration of the floating animation in milliseconds.
+	 *
+	 * @type {number}
+	 * @const
+	 */
+	var DURATION = 500;
+
+	/**
+	 * jQuery unit set containing a feference to the global window.
+	 *
+	 * @type {jQuery.<window>}
+	 * @const
+	 */
+	var $WINDOW = $(window);
+
+	/**
+	 * The "position" style value.
+	 *
+	 * IE 7 does not support "fixed" position styling.  Since "fixed" position
+	 * results in smoother animation the use of "absolute" is made as a special
+	 * accomodation for IE 7.
+	 *
+	 * @type {string}
+	 * @const
+	 */
+	var POSITION_STYLE = Browser.ie7 ? 'absolute' : 'fixed';
+
+	/**
+	 * The position of the floating menu.
+	 *
+	 * Used to float dialoges (eg special character-picker) with the floating
+	 * menu.
+	 *
+	 * @type {object<string,*>}
+	 */
+	var POSITION = {
+		style: POSITION_STYLE,
+		offset: {
+			top: 0,
+			left: 0
+		}
+	};
+
+	/**
+	 * Animates a surface element to the given position.
+	 *
+	 * @param {jQuery.<HTMLElement>} $element jQuery unit set of the DOM
+	 *                                        element to move.
+	 * @param {object} position The x and y position to which the element
+	 *                          should end up.
+	 * @param {number} duration The length of time (in milliseconds) that the
+	 *                          animation should run for.
+	 * @param {function} callback Function to be invoked when animation
+	 *                            completes.
+	 */
+	function floatTo($element, position, duration, callback) {
+		if ('absolute' === POSITION_STYLE) {
+			position.top += $WINDOW.scrollTop();
+			position.left += $WINDOW.scrollLeft();
+		}
+
+		POSITION.offset = position;
+
+		$element.stop().animate(position, duration, function () {
+			callback(position);
+			PubSub.pub('aloha.floating.changed', {
+				position: $.extend({}, POSITION)
+			});
+		});
+	}
+
+	/**
+	 * Moves an element above the given coordinates.
+	 *
+	 * @param {jQuery.<HTMLElement>} $element jQuery unit set of the DOM
+	 *                                        element to move.
+	 * @param {object} position The x and y position to which the element
+	 *                          should end up.
+	 * @param {number} duration The length of time (in milliseconds) that the
+	 *                          animation should run for.
+	 * @param {function} callback Function to be invoked when animation
+	 *                            completes.
+	 */
+	function floatAbove($element, position, duration, callback) {
+		position.top -= $element.height() + DISTANCE;
+		floatTo($element, position, duration, callback);
+	}
+
+	/**
+	 * Moves the element below the given coordinates.
+	 *
+	 * @param {jQuery.<HTMLElement>} $element jQuery unit set of the DOM
+	 *                                        element to move.
+	 * @param {object} position The x and y position to which the element
+	 *                          should end up.
+	 * @param {number} duration The length of time (in milliseconds) that the
+	 *                          animation should run for.
+	 * @param {function} callback Function to be invoked when animation
+	 *                            completes.
+	 */
+	function floatBelow($element, position, duration, callback) {
+		position.top += DISTANCE;
+		floatTo($element, position, duration, callback);
+	}
+
+	/**
+	 * Persist the "top" and "left" positions of the FloatingMenu surface.
+	 */
+	function storePinPosition(offset) {
+		amplifyStore.store('Aloha.FloatingMenu.pinned', 'true');
+		amplifyStore.store('Aloha.FloatingMenu.top', offset.top);
+		amplifyStore.store('Aloha.FloatingMenu.left', offset.left);
+	}
+
+	/**
+	 * Clears persisted state of the FloatingMenu surface.
+	 */
+	function unstorePinPosition() {
+		amplifyStore.store('Aloha.FloatingMenu.pinned', null);
+		amplifyStore.store('Aloha.FloatingMenu.top', null);
+		amplifyStore.store('Aloha.FloatingMenu.left', null);
+	}
+
+	/**
+	 * Retreive the persisted pinned position of the FloatingMenu surface.
+	 *
+	 * @return {object}
+	 */
+	function getPinState() {
+		if (amplifyStore.store('Aloha.FloatingMenu.pinned') === 'true') {
+			return {
+				top: parseInt(amplifyStore.store('Aloha.FloatingMenu.top'), 10),
+				left: parseInt(amplifyStore.store('Aloha.FloatingMenu.left'), 10),
+				isPinned: true
+			};
+		}
+		return {
+			top: null,
+			left: null,
+			isPinned: false
+		};
+	}
+
+	/**
+	 * Constrains the given position coordinates to be within the viewport.
+	 *
+	 * @param {object} position "Top" and "left" coordinates.
+	 * @param {object} Constrained "top" and "left" coordinates.
+	 */
+	function forcePositionIntoWindow(position) {
+		var left = position.left;
+		var top = position.top;
+
+		if (top < 0) {
+			top = 0;
+		} else if (top > $WINDOW.height()) {
+			top = $WINDOW.height() / 2;
+		}
+
+		if (left < 0) {
+			left = 0;
+		} else if (left > $WINDOW.width()) {
+			left = $WINDOW.width() / 2;
+		}
+
+		return {
+			top: top,
+			left: left
+		};
+	}
+
+	/**
+	 * Floats a surface to the appropriate position around the given editable.
+	 *
+	 * @param {Surface} surface The surface to be positioned.
+	 * @param {Aloha.Editable} editable The editable around which the surface
+	 *                                  should be positioned.
+	 * @param {number} duration The length of time (in milliseconds) for the
+	 *                          animation should run.
+	 * @param {function} callback Function to be invoked after the animation
+	 *                            is completed.
+	 */
+	function floatSurface(surface, editable, duration, callback) {
+		if (typeof duration !== 'number') {
+			duration = DURATION;
+		}
+
+		var topGutter = (parseInt($('body').css('marginTop'), 10) || 0)
+		              + (parseInt($('body').css('paddingTop'), 10) || 0);
+		var $surface = surface.$element;
+		var offset = editable.obj.offset();
+		var top = offset.top;
+		var left = offset.left;
+		var scrollTop = $WINDOW.scrollTop();
+		var availableSpace = top - scrollTop - topGutter;
+		var horizontalOverflow = left + $surface.width() - $WINDOW.width();
+
+		if (horizontalOverflow > 0) {
+			left = Math.max(0, left - horizontalOverflow);
+		}
+
+		if (availableSpace >= $surface.height()) {
+			floatAbove($surface, {
+				top: top - scrollTop,
+				left: left
+			}, duration, callback);
+		} else if (availableSpace + $surface.height() >
+		           availableSpace + editable.obj.height()) {
+			floatBelow($surface, {
+				top: top + editable.obj.height(),
+				left: left
+			}, duration, callback);
+		} else {
+			floatBelow($surface, {
+				top: topGutter,
+				left: left
+			}, duration, callback);
+		}
+	}
+
+	/**
+	 * Pins a surface at the speficied position on the viewport.
+	 *
+	 * @param {Surface} surfaces The surfaces that are to be pinned.
+	 * @param {object} position The "top" and "left" position of where the
+	 *                          surface is to be pinned.
+	 * @param {boolean} isFloating Whether or not the surface type is in
+	 *                             "floating" mode or not.
+	 */
+	function togglePinSurface(surface, position, isFloating) {
+		var $surface = surface.$element;
+		if (isFloating) {
+			unstorePinPosition();
+			$surface.find('.aloha-ui-pin').removeClass('aloha-ui-pin-down');
+		} else {
+			storePinPosition(position);
+			$surface.find('.aloha-ui-pin').addClass('aloha-ui-pin-down');
+		}
+		$surface.css({
+			position: 'fixed',
+			top: position.top
+		});
+	}
+
+	/**
+	 * Filters surface activation events.
+	 */
+	function onActivatedSurface(tuples, eventName, $event, range, nativeEvent) {
+		var i;
+		for (i = 0; i < tuples.length; i++) {
+			if (tuples[i][0].isActive()) {
+				tuples[i][1]($event, range, nativeEvent);
+			}
+		}
+	}
+
+	/**
+	 * Sets the surface's DOM element's "position" property to "fixed."
+	 *
+	 * IE7 will not properly set the position property to "fixed" if our
+	 * element is not rendered.  We therefore have to do a rigmarole to
+	 * temorarily render the element in order to set the position correctly.
+	 *
+	 * @param {Surface} surface
+	 */
+	function setPositionStyleToFixed(surface) {
+		if ($.browser.msie) {
+			var $parent = surface.$element.parent();
+			surface.$element.appendTo('body');
+			surface.$element.css('position', POSITION_STYLE);
+			if ($parent.length) {
+				surface.$element.appendTo($parent);
+			} else {
+				surface.$element.detach();
+			}
+		} else {
+			surface.$element.css('position', POSITION_STYLE);
+		}
+	}
+
+	/**
+	 * Binds floating facilities on a surface.
+	 *
+	 * @TODO:
+	 * Resizable toolbars are possible, and would be a nice feature:
+	 * surface.$element.resizable();
+	 *
+	 * @param {Surface} surface A UI Surface instance.
+	 * @param {object} SurfaceTypeManager
+	 */
+	function makeFloating(surface, SurfaceTypeManager) {
+		subguarded([
+			'aloha-selection-changed',
+			'aloha.ui.container.selected'
+		], onActivatedSurface, surface, function () {
+			surface._move();
+		});
+
+		var updateSurfacePosition = function () {
+			var position = forcePositionIntoWindow({
+				top: SurfaceTypeManager.pinTop,
+				left: SurfaceTypeManager.pinLeft
+			});
+			SurfaceTypeManager.setFloatingPosition(position);
+			surface.$element.css({
+				top: position.top,
+				left: position.left
+			});
+		};
+
+		$WINDOW.scroll(function () {
+			// TODO: only do this for active surfaces.
+			surface._move(0);
+		});
+
+		$WINDOW.resize(function () {
+			if (!SurfaceTypeManager.isFloatingMode) {
+				updateSurfacePosition();
+			}
+		});
+
+		surface.addPin();
+		setPositionStyleToFixed(surface);
+
+		if (!SurfaceTypeManager.isFloatingMode) {
+			updateSurfacePosition();
+		}
+
+		surface.$element.css('z-index', 10100).draggable({
+			distance: 20,
+			stop: function (event, ui) {
+				SurfaceTypeManager.setFloatingPosition(ui.position);
+				if (!SurfaceTypeManager.isFloatingMode) {
+					storePinPosition(ui.position);
+				}
+			}
+		});
+	}
+
+	return {
+		getPinState: getPinState,
+		makeFloating: makeFloating,
+		floatSurface: floatSurface,
+		togglePinSurface: togglePinSurface,
+		POSITION_STYLE: POSITION_STYLE
+	};
+});