locomotive-aloha-rails 0.20.1.5 → 0.23.2.1

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

@@ -0,0 +1,169 @@
+define([
+	'jquery',
+	'ui/component',
+	'ui/utils',
+	'jqueryui'
+], function (
+	$,
+	Component,
+	Utils
+) {
+	'use strict';
+
+	var MenuButton = Component.extend({
+		init: function () {
+			this.element = MenuButton.makeMenuButton(this);
+		}
+	});
+
+	// static functions
+
+	/**
+	 * @param props button properties:
+	 *        click - if provided will generate a split button,
+	 *                  otherwise just a normal select button.
+	 *        menu - array of props for nested buttons
+	 *        text - button text
+	 *        html - button html
+	 *        iconUrl - button icon url
+	 *        siblingContainer
+	 *             - a $ object that will be searched for other split buttons.
+	 *               If a split button is expanded, all the other split buttons in
+	 *               this container will be closed.
+	 */
+	MenuButton.makeMenuButton = function (props) {
+		var wrapper = $('<div>'   , {'class': 'aloha-ui-menubutton-container'});
+		var expand  = Utils.makeButtonElement({'class': 'aloha-ui-menubutton-expand'});
+		var menu    = $('<ul>'    , {'class': 'aloha-ui-menubutton-menu'});
+		var action = null;
+		var buttonset = null;
+
+		if ($.browser.msie) {
+			wrapper.addClass('aloha-ui-menubutton-iehack');
+		}
+
+		if (props.click) {
+			action = Utils.makeButton(Utils.makeButtonElement({'class': 'aloha-ui-menubutton-action'}), props)
+				.click(props.click);
+
+			Utils.makeButton(expand, {}, true);
+
+			buttonset = $('<div>')
+				.buttonset()
+				.append(action)
+				.append(expand);
+		} else {
+			Utils.makeButton(expand, props, true)
+			      .addClass('aloha-ui-menubutton-single');
+		}
+
+		if (!props.menu) {
+			return wrapper.append(action);
+		}
+
+		function hideMenu(menu) {
+			menu.hide().parent().removeClass('aloha-ui-menubutton-pressed');
+		}
+
+		expand
+			.click(function (){
+				wrapper.addClass('aloha-ui-menubutton-pressed');
+
+				if (props.siblingContainer) {
+					props.siblingContainer
+						.find('.aloha-ui-menubutton-menu')
+						.each(function (){
+							if (this !== menu[0]) {
+								hideMenu($(this));
+							}
+						});
+				}
+
+				if (menu.is(':visible')) {
+					hideMenu(menu);
+					return;
+				}
+
+				menu.show().position({
+					my: 'left top',
+					at: 'left bottom',
+					of: action || expand
+				});
+
+				// In order to prevent the floating menu from being partially
+				// covered by the ribbon, we use "position: relative" and an
+				// invisible border to pad the top of the document.  This
+				// throws off the offset to the menu button so we need to
+				// compensate in ordet to ensure that the menu is placed
+				// underneatht the menubutton.
+				// NB: For the time being we are not using the above fix.
+				/*
+				var target = action || expand;
+				var bodyOffset = parseInt($('body').css('border-top-width'), 10) || 0;
+				menu.css('top', target.height() + target.offset().top + bodyOffset);
+				*/
+
+				$(document).bind('click', function (event){
+					$(this).unbind(event);
+					menu.hide();
+					wrapper.removeClass('aloha-ui-menubutton-pressed');
+				});
+
+				return false;
+			});
+
+		wrapper.append(buttonset || expand).append(menu);
+
+		menu.append(makeNestedMenus(makeCloseHandler(menu), props.menu));
+
+		menu.hide().menu({
+			'select': onSelect
+		});
+
+		return wrapper;
+	};
+
+	function makeNestedMenus(parentCloseHandler, menu){
+		var elems = [];
+		$.each(menu, function (_, item) {
+			var elem = $('<li>');
+			elem.append($('<a>', {'href': 'javascript:void 0', 'html': Utils.makeButtonLabelWithIcon(item)}));
+			if (item.click) {
+				elem.data('aloha-ui-menubutton-select', function (){
+					parentCloseHandler();
+					item.click();
+				});
+			}
+			if (item.menu) {
+				var nestedMenu = $('<ul>').appendTo(elem);
+				nestedMenu.append(
+					makeNestedMenus(makeCloseHandler(nestedMenu, parentCloseHandler),
+									item.menu));
+			}
+			elems.push(elem[0]);
+		});
+		return elems;
+	}
+
+	function makeCloseHandler(menu, parentCloseHandler) {
+		parentCloseHandler = parentCloseHandler || $.noop;
+		return function (){
+			// We must blur the parent menu otherwise it will remain in
+			// focused state and not expand the next time it is hovered over
+			// after the user has selected an item.
+			menu.blur().hide();
+			menu.parent().removeClass('aloha-ui-menubutton-pressed');
+			parentCloseHandler();
+		};
+	}
+
+	function onSelect(event, ui) {
+		var clickHandler = ui.item.data('aloha-ui-menubutton-select');
+		clickHandler && clickHandler(event, ui);
+		// We use preventDefault() to keep a click on a menu item from
+		// scrolling to the top of the page.
+		event.preventDefault();
+	}
+
+	return MenuButton;
+});

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

@@ -0,0 +1,237 @@
+/*global define: true */
+/**
+ * The multiSplit component groups multiple buttons and other
+ * button-like items into an expandable menu.
+ */
+define([
+	'jquery',
+	'ui/component',
+	'ui/button',
+	'ui/utils'
+], function (
+	$,
+	Component,
+	Button,
+	Utils
+) {
+	'use strict';
+
+	/**
+	 * MultiSplit component type.
+	 * @class
+	 * @api
+	 * @extends {Component}
+	 */
+	var MultiSplit = Component.extend({
+
+		_activeButton: null,
+		_isOpen: false,
+
+		/**
+		 * @override
+		 */
+		init: function () {
+			this._super();
+			var multiSplit = this;
+			var element = this.element = $('<div>', {
+				'class': 'aloha-multisplit'
+			});
+			var content = this.contentElement = $('<div>', {
+				'class': 'aloha-multisplit-content'
+			}).appendTo(element);
+			var toggle = this.toggleButton = Utils.makeButtonElement({
+				'class': 'aloha-multisplit-toggle',
+				click: function () {
+					multiSplit.toggle();
+				}
+			}).button().appendTo(element);
+
+			this.buttons = [];
+
+			var buttons = this.getButtons();
+
+			if (0 === buttons.length) {
+				element.hide();
+			}
+
+			for (var i = 0; i < buttons.length; i++) {
+				this.addButton(buttons[i]);
+			}
+
+			$('body').click(function (event) {
+				if (multiSplit._isOpen &&
+			        !multiSplit.element.is(event.target) &&
+			        0 === multiSplit.element.find(event.target).length) {
+					multiSplit.close();
+				}
+			});
+		},
+
+		/**
+		 * Adds a button to this multisplit component.
+		 *
+		 * @param button
+		 *        - name 
+		 *          The name of the button.
+		 *          Used by setActiveButton(name), show(name),
+		 *          hide(name) to identify the correct button.
+		 *
+		 *        - tooltip
+		 *        - icon
+		 *          The tooltip and icon. 
+		 *
+		 *        - wide
+		 *          A boolean indicating whether the button should
+		 *          extend the entire width of the multi split button.
+		 *
+		 *        - init
+		 *          An optional init function. Will be invoked with the
+		 *          button component instance as context.
+		 *
+		 *        - click
+		 *          A click handler for the button.
+		 * @api
+		 */
+		addButton: function (props) {
+			var multiSplit = this;
+
+			var component = new (Button.extend({
+				tooltip: props.tooltip,
+				icon: props.wide ? props.icon : 'aloha-large-icon ' + props.icon,
+				iconOnly: props.wide ? false : true,
+				init: function () {
+					this._super();
+					if (props.init) {
+						props.init.call(this);
+					}
+				},
+				click: function () {
+					props.click.apply(multiSplit, arguments);
+					multiSplit.close();
+				}
+			}))();
+			if (!props.wide) {
+				component.element.addClass('aloha-large-button');
+			}
+
+			multiSplit.buttons[props.name] = {
+				settings: props,
+				component: component,
+				element: component.element,
+				visible: true
+			};
+
+			// Ensure non-wide buttons always come before wide buttons
+			var fullwidthButtons = this.contentElement.children('.aloha-ui-multisplit-fullwidth');
+			if (!props.wide && fullwidthButtons.length) {
+				fullwidthButtons.before(component.element[0]);
+			} else {
+				this.contentElement.append(component.element[0]);
+			}
+		},
+
+		/**
+		 * @api
+		 */
+		setActiveButton: function (name) {
+			if (!name) {
+				name = null;
+			}
+			if (null !== this._activeButton) {
+				this.buttons[this._activeButton]
+				    .element.removeClass('aloha-multisplit-active');
+			}
+			this._activeButton = name;
+			if (null !== name) {
+				this.buttons[name]
+				    .element.addClass('aloha-multisplit-active');
+			}
+		},
+
+		/**
+		 * Toggles the multisplit menu
+		 * @api
+		 */
+		toggle: function () {
+			this.element.toggleClass('aloha-multisplit-open');
+			this._isOpen = !this._isOpen;
+		},
+
+		/**
+		 * Opens the multisplit menu
+		 * @api
+		 */
+		open: function () {
+			this.element.addClass('aloha-multisplit-open');
+			this._isOpen = true;
+		},
+
+		/**
+		 * Closes the multisplit menu
+		 * @api
+		 */
+		close: function () {
+			this.element.removeClass('aloha-multisplit-open');
+			this._isOpen = false;
+		},
+
+		/**
+		 * Show the button with given index
+		 * @api
+		 * @param {Number} index button index
+		 */
+		show: function (name) {
+			if (!name) {
+				name = null;
+			}
+			if (null !== name && this.buttons[name] !== undefined) {
+				this.buttons[name].element.show();
+				this.buttons[name].visible = true;
+				// since we show at least one button now, we need to show the multisplit button
+				this.element.show();
+			}
+		},
+
+		/**
+		 * Hide the button with given index
+		 * @api
+		 * @param {Number} index button index
+		 */
+		hide: function (name) {
+			var button, visible = false;
+
+			if (!name) {
+				name = null;
+			}
+			if (null !== name && this.buttons[name] !== undefined) {
+				this.buttons[name].element.hide();
+				this.buttons[name].visible = false;
+
+				// now check, if there is a visible button
+				for (button in this.buttons) {
+					if (this.buttons.hasOwnProperty(button)) {
+						if (this.buttons[button].visible) {
+							this.element.show();
+							visible = true;
+							break;
+						}
+					}
+				}
+
+				if (!visible) {
+					this.element.hide();
+				}
+			}
+		}
+	});
+
+	/**
+	 * This module is part of the Aloha API.
+	 * It is valid to override this module via requirejs to provide a
+	 * custom behaviour. An overriding module must implement all API
+	 * methods. Every member must have an api annotation. No non-api
+	 * members are allowed.
+	 * @api
+	 */
+	return MultiSplit;
+});

data/vendor/assets/javascripts/aloha/plugins/common/ui/lib/port-helper-attribute-field.js

@@ -0,0 +1,444 @@
+/**
+ * This is a helper module for porting plugins from the old
+ * ui-attributefield.js in the aloha core to the new ui-plugin.
+ * This interface is obsolete and must not be used for new implementations.
+ */
+define([
+	'jquery',
+	'ui/ui',
+	'ui/component',
+	'ui/scopes',
+	'ui/context',
+	'ui/utils',
+	'aloha/repositorymanager',
+	'aloha/selection',
+	'aloha/console',
+	'ui/vendor/jquery-ui-autocomplete-html'
+], function (
+	$,
+	Ui,
+	Component,
+	Scopes,
+	Context,
+	Utils,
+	RepositoryManager,
+	Selection,
+	console
+) {
+	'use strict';
+
+	// Main responsibilities implemented by the attribute-field are
+	//
+	// * setting a target object and attribute and the subsequent change of
+	//   that target attribute (example link plugin, table plugin)
+	// * background color highlighting of the target object (example link plugin)
+	// * a placeholder in the attribute field with a grey foreground color
+	//   (example link plugin)
+	// * maintain a current repository item to distinguish link plugin
+	//   repository items from literal values typed in the attribute field
+	//   (example link plugin)
+	// * repository manager markObject on the target object if a repository
+	//   item was selected (example link plugin)
+
+	/**
+	 * Creates a new attribute field.
+	 *
+	 * @param {!Object} props
+	 *        A map containing the following properties
+	 *        name         -
+	 *        label        - some text that will be displayed alongside
+	 *                       the attribute field,
+	 *        labelClass   - a class to identify the label element,
+	 *        valueField   -
+	 *        displayField -
+	 *        objectTypeFilter -
+	 *        placeholder  -
+	 *        noTargetHighlight -
+	 *        targetHighlightCass - a class to be identify focused element
+	 *        cls          -
+	 *        width        -
+	 *        scope        -
+	 *        element      - the <input> element to use.
+	 *                       If not supplied, a new one will be created.
+	 */
+	var AttributeField = function (props) {
+		var valueField = props.valueField || 'id',
+			displayField = props.displayField || 'name',
+			objectTypeFilter = props.objectTypeFilter || ['all'],
+			placeholder = props.placeholder,
+			noTargetHighlight = !!props.noTargetHighlight,
+			targetHighlightClass = props.targetHighlightClass,
+			element = props.element ? $(props.element) : $('<input id="aloha-attribute-field-' + props.name + '">'),
+			component,
+			template,
+			resourceItem,
+			resourceValue,
+			targetObject,
+			targetAttribute,
+			lastAttributeValue;
+
+		if (props.cls) {
+			element.addClass(props.cls);
+		}
+		if (props.width) {
+			element.width(props.width);
+		}
+
+		component = Ui.adopt(props.name, Component, {
+			scope: props.scope,
+			init: function(){
+
+				if (props.element) {
+					this.element = element;
+				} else {
+					if (props.label) {
+						this.element = Utils.wrapWithLabel(props.label, element);
+						if (props.labelClass) {
+							this.element.addClass(props.labelClass);
+						}
+					} else {
+						// Why do we have to wrap the element in a span? It
+						// doesn't seem to work otherwise.
+						this.element = $('<span>').append(element);
+					}
+				}
+
+				element.autocomplete({
+					'html': true,
+					'appendTo': Context.selector,
+					'source': function( req, res ) {
+						RepositoryManager.query({
+							queryString: req.term,
+							objectTypeFilter: objectTypeFilter
+						}, function( data ) {
+							res($.map(data.items, function(item) {
+								return {
+									label: parse(template, item),
+									value: item.name,
+									obj: item
+								};
+							}));
+						});
+					},
+					"select": onSelect
+				});
+			}
+		});
+
+		element
+			.bind("focus", onFocus)
+			.bind("blur", onBlur)
+			.bind("keydown", onKeyDown)
+			.bind("keyup", onKeyup);
+
+		setPlaceholder();
+
+		// Because IE7 doesn't give us the blur event when the editable
+		// is deactivated and the toolbar disappears (other browsers do).
+		// TODO unbind, otherwise mermory leak
+		Aloha.bind('aloha-editable-deactivated', onBlur);
+
+		function onSelect(event, ui) {
+			if (ui.item) {
+				setItem(ui.item.obj);
+			}
+			finishEditing();
+		}
+
+		function onBlur() {
+			finishEditing();
+		}
+
+		function onFocus(event, ui) {
+			if ( ! $(event.target).is(':visible') ) {
+				// The check for visible fixes the bug that the background
+				// color of the target element is not restored.
+				// Rationale: it's possible for the input to receive the focus event,
+				// for example if it was triggered programatically, even if
+				// it isn't visible. Problem is, if it's not visible, then
+				// it will not really get focused and consequently, there
+				// will be no blur event either. However, we must be able to
+				// assume that the blur event will be fired so that we can
+				// clean up the background color.
+				return;
+			}
+			changeTargetBackground();
+
+			// Remove placeholder
+			if (getValue() === placeholder) {
+				setValue('');
+			}
+		}
+
+		function onKeyDown(event){
+			// on ENTER or ESC leave the editing
+			if ( event.keyCode == 13 || event.keyCode == 27 ) {
+				event.preventDefault();
+			}
+		}
+
+		function onKeyup(event) {
+			// If this attribute field currently refers to a repository
+			// item, and the user edits the contents of the input field,
+			// this attribute field seizes to refer to the repository item.
+			if (resourceItem && resourceValue !== getValue()) {
+				resourceItem = null;
+				resourceValue = null;
+			}
+
+			// This handles attribute updates for non-repository, literal urls typed into the input field.
+			// Input values that refer to a repository item are handled via setItem().
+			if ( ! resourceItem ) {
+				setAttribute(targetAttribute, getValue());
+			}
+
+			if ( ( event.keyCode == 13 || event.keyCode == 27 ) ) {
+				// Set focus to link element and select the object
+				Selection.getRangeObject().select();
+				finishEditing();
+			}
+		}
+
+		function finishEditing() {
+			restoreTargetBackground();
+
+			if ( ! targetObject || lastAttributeValue === $(targetObject).attr(targetAttribute)) {
+				return;
+			}
+
+			// when no resource item was selected, remove any marking of the target object
+			if ( ! resourceItem ) {
+				RepositoryManager.markObject( targetObject );
+			}
+
+			if (getValue() === '') {
+				setPlaceholder();
+			}
+		}
+
+		function changeTargetBackground() {
+			var target = $(targetObject);
+			if (target && targetHighlightClass) {
+				target.addClass(targetHighlightClass);
+			}
+
+			if (noTargetHighlight) {
+				return;
+			}
+
+			// Make sure that multiple invokations of
+			// changeTargetBackground don't set an incorrect
+			// data-original-background-color.
+			restoreTargetBackground();
+
+			// set background color to give visual feedback which link is modified
+			if (target && target.context && target.context.style &&
+				target.context.style['background-color']) {
+				target.attr('data-original-background-color',
+							target.context.style['background-color']);
+			}
+			target.css('background-color', '#80B5F2');
+		}
+
+		function restoreTargetBackground() {
+			var target = $(targetObject);
+			if (targetHighlightClass) {
+				target.removeClass(targetHighlightClass);
+			}
+			if (noTargetHighlight || !target) {
+				return;
+			}
+			// Remove the highlighting and restore original color if was set before
+			var color = target.attr('data-original-background-color');
+			if (color) {
+				target.css('background-color', color);
+			} else {
+				target.css('background-color', '');
+			}
+			if (!target.attr('style')) {
+				target.removeAttr('style');
+			}
+			target.removeAttr('data-original-background-color');
+		}
+
+		function parse(template, item) {
+			return template.replace( /\{([^}]+)\}/g, function(_, name) {
+				return name in item ? item[ name ] : "";
+			});
+		}
+
+		function setPlaceholder() {
+			if (null === placeholder) {
+				return;
+			}
+			element.css('color', '#AAA');
+			element.val(placeholder);
+		}
+
+		function setTemplate(tmpl){
+			template = tmpl;
+		}
+
+		/**
+		 * When at least on objectType is set the value in the Attribute field does a query to all registered repositories.
+		 * @param {Array} objectTypeFilter The array of objectTypeFilter to be searched for.
+		 * @void
+		 */
+		function setObjectTypeFilter(objTypeFilter) {
+			objectTypeFilter = objTypeFilter;
+		}
+
+		/**
+		 * Adding a listener to the field
+		 * @param {String} eventname The name of the event. Ex. 'keyup'
+		 * @param {function} handler The function that should be called when the event happens.
+		 */
+		function addListener(eventName, handler) {
+			element.bind(eventName, $.proxy(handler, attrField));
+		}
+
+		function getValue() {
+			return element.val();
+		}
+
+		function setValue(value) {
+			element.val(value);
+			element.css('color', 'black');
+		}
+
+		function setItem(item) {
+			resourceItem = item;
+
+			if (item) {
+				// TODO split display field by '.' and get corresponding attribute, because it could be a properties attribute.
+				var v = item[displayField];
+				// set the value into the field
+				setValue(v);
+				// store the value to be the "reference" value for the currently selected resource item
+				resourceValue = v;
+				setAttribute(targetAttribute, item[valueField]);
+				RepositoryManager.markObject(targetObject, item);
+			} else {
+				resourceValue = null;
+			}
+		}
+
+		function getItem() {
+			return resourceItem;
+		}
+
+		/**
+		 * Sets an attribute optionally based on a regex on reference
+		 * @param {String} attr The Attribute name which should be set. Ex. "lang"
+		 * @param {String} value The value to set. Ex. "de-AT"
+		 * @param {String} regex The regex when the attribute should be set. The regex is applied to the value of refernece.
+		 * @param {String} reference The value for the regex.
+		 */
+		function setAttribute(attr, value, regex, reference) {
+			if (targetObject) {
+				// check if a reference value is submitted to check against with a regex
+				var setAttr = true;
+				if (typeof reference != 'undefined') {
+					var regxp = new RegExp(regex);
+					if ( ! reference.match(regxp) ) {
+						setAttr = false;
+					}
+				}
+
+				// if no regex was successful or no reference value
+				// was submitted remove the attribute
+				if ( setAttr ) {
+					$(targetObject).attr(attr, value);
+				} else {
+					$(targetObject).removeAttr(attr);
+				}
+			}
+		}
+
+		/**
+		 * Sets the target Object of which the Attribute should be modified
+		 * @param {jQuery} obj the target object
+		 * @param {String} attr Attribute to be modified ex. "href" of a link
+		 * @void
+		 */
+		function setTargetObject(obj, attr) {
+			targetObject = obj;
+			targetAttribute = attr;
+
+			setItem(null);
+			
+			if (obj && attr) {
+				lastAttributeValue = $(obj).attr(attr);
+				setValue($(targetObject).attr(targetAttribute));
+			} else {
+				setValue('');
+				return;
+			}
+
+			// check whether a repository item is linked to the object
+			RepositoryManager.getObject( obj, function ( items ) {
+				if (items && items.length > 0) {
+					setItem(items[0]);
+				}
+			} );
+		}
+
+		function getTargetObject() {
+			return targetObject;
+		}
+
+		function focus() {
+			component.focus();
+			element.focus();
+		}
+
+		function foreground() {
+			component.foreground();
+		}
+
+		function show() {
+			element.show();
+		}
+
+		function hide() {
+			element.hide();
+		}
+
+		function getInputId(){
+			return element.attr("id");
+		}
+
+		function hasInputElem() {
+			return true;
+		}
+
+		function getInputElem() {
+			return element[0];
+		}
+
+		var attrField = {
+			getInputElem: getInputElem,
+			hasInputElem: hasInputElem,
+			getInputId: getInputId,
+			hide: hide,
+			show: show,
+			foreground: foreground,
+			focus: focus,
+			getTargetObject: getTargetObject,
+			setTargetObject: setTargetObject,
+			setAttribute: setAttribute,
+			getItem: getItem,
+			setItem: setItem,
+			setValue: setValue,
+			getValue: getValue,
+			addListener: addListener,
+			setObjectTypeFilter: setObjectTypeFilter,
+			setTemplate: setTemplate,
+			setPlaceholder: setPlaceholder
+		};
+
+		return attrField;
+	};
+
+	return AttributeField;
+});