locomotive-aloha-rails 0.20.1.5 → 0.23.2.1

data/vendor/assets/javascripts/aloha/plugins/common/block/lib/editor.js

@@ -1,17 +1,36 @@
-/*!
-* Aloha Editor
-* Author & Copyright (c) 2010 Gentics Software GmbH
-* aloha-sales@gentics.com
-* Licensed unter the terms of http://www.aloha-editor.com/license.html
-*/
-
+/* editor.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-2012 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.
+ */
 /**
  * @name block.editor
  * @namespace Block attribute editors
  */
-define(['aloha/jquery', 'aloha/observable'],
-function(jQuery, Observable) {
-	
+define(['jquery', 'aloha/observable', 'util/class'],
+function(jQuery, Observable, Class) {
+	"use strict";
 
 	/**
 	 * This is the base class for all editors in the sidebar. You need to extend
@@ -309,4 +328,4 @@ function(jQuery, Observable) {
 		SelectEditor: SelectEditor,
 		ButtonEditor: ButtonEditor
 	}
-});
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/lib/editormanager.js

@@ -1,14 +1,33 @@
-/*!
- * Aloha Editor
- * Author & Copyright (c) 2010 Gentics Software GmbH
- * aloha-sales@gentics.com
- * Licensed unter the terms of http://www.aloha-editor.com/license.html
+/* editormanager.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-2012 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.
  */
-
 define(
 ['aloha/registry'],
 function(Registry) {
-	
+	"use strict";
 
 	/**
 	 * The Editor Manager maps data types to editor classes.

data/vendor/assets/javascripts/aloha/plugins/common/block/lib/sidebarattributeeditor.js

@@ -1,13 +1,32 @@
-/*!
- * Aloha Editor
- * Author & Copyright (c) 2010 Gentics Software GmbH
- * aloha-sales@gentics.com
- * Licensed unter the terms of http://www.aloha-editor.com/license.html
-*/
-
-define([ 'aloha/jquery', 'block/blockmanager', 'aloha/sidebar', 'block/editormanager'],
-	function (jQuery, BlockManager, Sidebar, EditorManager) {
-	
+/* sidebarattributeeditor.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-2012 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.
+ */
+define([ 'jquery', 'block/blockmanager', 'aloha/sidebar', 'block/editormanager', 'util/class'],
+	function (jQuery, BlockManager, Sidebar, EditorManager, Class) {
+	"use strict";
 
 	/**
 	 * The Sidebar Attribute Editor is the connector which listens on Aloha Blocks and
@@ -42,8 +61,8 @@ define([ 'aloha/jquery', 'block/blockmanager', 'aloha/sidebar', 'block/editorman
 			}
 			// TODO: Clearing the whole sidebar might not be what we want; instead we might only want
 			// to clear certain panels.
-			that._sidebar.container.find('.aloha-sidebar-panels').children().remove();
-			that._sidebar.panels = {};
+			// that._sidebar.container.find('.aloha-sidebar-panels').children().remove();
+			// that._sidebar.panels = {};
 
 			jQuery.each(selectedBlocks, function() {
 				var schema = this.getSchema(),
@@ -96,7 +115,8 @@ define([ 'aloha/jquery', 'block/blockmanager', 'aloha/sidebar', 'block/editorman
 
 						// This code is from the superclass
 						this.isActive = false;
-						this.content.parent('li').hide();
+						// TODO check if this is needed in current block implementation
+						// this.content.parent('li').hide();
 						this.effectiveElement = null;
 					}
 				});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/ca/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Habilita/deshabilita la funcionalitat d\'arrossegar i deixar anar"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/de/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Drag & Drop umschalten"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/i18n.js

@@ -0,0 +1,12 @@
+define({
+	"root":  {
+		"button.toggledragdrop.tooltip": "Toggle Drag & Drop"
+	},
+		"ca": true,
+		"de": true,
+		"mk": true,
+		"pt-br": true,
+		"ru": true,
+		"uk": true,
+		"zh-hans": true
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/mk/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Уклучи/Исклучи Влечи и Пушти"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/pt-br/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Alternar Drag & Drop"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/ru/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Переключатель Drag & Drop"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/uk/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "Перемикач Drag & Drop"
+});

data/vendor/assets/javascripts/aloha/plugins/common/block/nls/zh-hans/i18n.js

@@ -0,0 +1,3 @@
+define({
+	"button.toggledragdrop.tooltip": "切换拖放功能"
+});

data/vendor/assets/javascripts/aloha/plugins/common/characterpicker/css/characterpicker.css

@@ -1,38 +1,41 @@
-.aloha-character-picker-overlay {
-    position: absolute;
-    display: none;
-    float: left;
-    padding: 3px;
-    top: 0;
-    left: 0;
-    border: 1px solid #afafaf;
-    border-collapse: separate;
-    background-color: #fff;
-    z-index: 12000;
+.aloha-character-picker-overlay{
+	position: absolute;
+	display: none;
+	float: left;
+	padding: 0;
+	top: 0;
+	left: 0;
+	border: none;
+	border-collapse: collapse;
+	z-index: 999999;
 }
 
-.aloha-character-picker-overlay {
-	border-collapse:collapse;
+.aloha-character-picker-overlay{
+	border-collapse: collapse;
 }
 
-.aloha-character-picker-overlay td {
-    width: 1.5em;
-    height: 1.5em;
-    border: 1px solid #afafaf;
-    font-size: 0.8em;
-    padding: 0.05em;
+.aloha-character-picker-overlay tr,
+.aloha-character-picker-overlay th {
+	background: none;
 }
 
-.aloha-character-picker-overlay td.mouseover {
-    border: 1px solid #fdea83;
-    background-color: #fefce1;
+.aloha-character-picker-overlay td{
+	width: 1.2em;
+	height: 1.2em;
+	line-height: 1.2em;
+	font-size: 1em;
+	padding: 0.1em;
+	cursor: pointer;
+	border: 1px solid #afafaf;
+	background-color: #fff;
+	text-align: center;
 }
 
 .aloha-character-picker-overlay td.focused {
-    border: 1px solid #407bcf;
-    background-color: #b9d6f9;
+	border: 1px solid #407bcf;
+	background-color: #b9d6f9;
 }
 
-.x-btn button.aloha-button-characterpicker {
-    background: url( '../img/icon.png' );
+.aloha .ui-icon.aloha-icon-characterpicker {
+	background: url('../img/icon.png');
 }

data/vendor/assets/javascripts/aloha/plugins/common/characterpicker/lib/characterpicker-plugin.js

@@ -1,239 +1,469 @@
-/*
-* Aloha Editor
-* Author & Copyright (c) 2010 Gentics Software GmbH
-* aloha-sales@gentics.com
-* Licensed unter the terms of http://www.aloha-editor.com/license.html
-*/
-define(
-	['aloha', 
-	'aloha/jquery', 
-	'aloha/plugin', 
-	'aloha/floatingmenu', 
-	'i18n!characterpicker/nls/i18n', 
-	'i18n!aloha/nls/i18n', 
-	'css!characterpicker/css/characterpicker.css'],
-function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) {
-	
-
-	var
-		GENTICS = window.GENTICS;
-
-	function CharacterOverlay(characters, onSelectCallback) {
-		var self = this;
-		self.$node = jQuery('<table class="aloha-character-picker-overlay" role="dialog"><tbody></tbody></table>');
-		// don't let the mousedown bubble up. otherwise there won't be an activeEditable 
-		self.$node.mousedown(function(e) {
-			return false;
+/* characterpicker-plugin.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.
+ */
+
+define([
+	'aloha',
+	'jquery',
+	'aloha/plugin',
+	'ui/ui',
+	'ui/button',
+	'ui/floating',
+	'PubSub',
+	'i18n!characterpicker/nls/i18n'
+], function (
+	Aloha,
+	$,
+	Plugin,
+	Ui,
+	Button,
+	Floating,
+	PubSub,
+	i18n
+) {
+	'use strict';
+
+	var $DOCUMENT = $(document);
+	var $WINDOW = $(window);
+
+	/**
+	 * Tracks the range at the point at which the editor opens the character
+	 * picker.
+	 *
+	 * @type {Range}
+	 */
+	var rangeAtOpen;
+
+	/**
+	 * A cache of all the overlay configurations. If all editables have the same
+	 * configuration, only a single overlay will be created that will be used by
+	 * all editables.
+	 *
+	 * @type {object<string, Overlay>}
+	 */
+	var configs = {};
+
+	/**
+	 * Checks whether the character picker overlay.
+	 *
+	 * @param {Overlay} overlay
+	 * @return {boolean} True if the overlay is visible.
+	 */
+	function isOverlayVisible(overlay) {
+		return overlay.$element.css('display') === 'table';
+	}
+
+	/**
+	 * Prepares the overlay to close when a click event is triggered on the body
+	 * document.
+	 *
+	 * @param {Overlay} overlay
+	 */
+	function hideOnBodyClick(overlay) {
+		overlay.$element.click(function ($event) {
+			$event.stopPropagation();
+		});
+
+		$('body').click(function ($event) {
+			// Because we click events on the overlay ui should not cause it to
+			// hide itself.
+			if (!overlay._overlayActive
+					|| ($event.target === overlay.$element[0])
+					|| $(event.target).is('.aloha-icon-characterpicker')
+					|| $(event.target).find('.aloha-icon-characterpicker').length) {
+				return;
+			}
+			overlay.hide();
 		});
-		self.$tbody = self.$node.find('tbody');
-		self.$node.appendTo(jQuery('body'));
-		self._createCharacterButtons(self.$node, characters, onSelectCallback);
-		self._initHideOnDocumentClick();
-		self._initHideOnEsc();
-		self._initCursorFocus(onSelectCallback);
-		self._initEvents();
 	}
-	CharacterOverlay.prototype = {
-		show: function( insertButton ) {
-			var self = this;
-			// position the overlay relative to the insert-button
-			self.$node.css(jQuery(insertButton).offset());
-			self.$node.show();
-			// focus the first character
-			self.$node.find('.focused').removeClass('focused');
-			jQuery(self.$node.find('td')[0]).addClass('focused');
-		},
-		_initHideOnDocumentClick: function() {
-			var self = this;
-			// if the user clicks somewhere outside of the layer, the layer should be closed
-			// stop bubbling the click on the create-dialog up to the body event
-			self.$node.click(function(e) {
-				e.stopPropagation();
-			});
-			// hide the layer if user clicks anywhere in the body
-			jQuery('body').click(function(e) {
-				var overlayVisibleAndNotTarget
-					=  (self.$node.css('display') === 'table')
-					&& (e.target != self.$node[0])
-				    // don't consider clicks to the 'show' button.
-					&& !jQuery(e.target).is('button.aloha-button-characterpicker');
-				if(overlayVisibleAndNotTarget) {
-					self.$node.hide();
-				}
+
+	/**
+	 * Prepares the given overlay to close when the ESC button is clicked.
+	 *
+	 * @param {Overlay} overlay
+	 */
+	function hideOnEsc(overlay) {
+		$DOCUMENT.keyup(function ($event) {
+			if ((27 === $event.keyCode) && isOverlayVisible(overlay)) {
+				overlay.hide();
+			}
+		});
+	}
+
+	/**
+	 * Helper function that takes the computed style-property of one element and
+	 * applies it to another one, depending on the browser implementation.
+	 *
+	 * @param {HTMLElement} source The element of which the style element is
+	 *                             taken.
+	 * @param {HTMLElement} target Where the style will be applied.
+	 * @param {string} styleProp The css property which shall be copied.
+	 * @return {jQuery.<HTMLElement>}
+	 */
+	function copyStyle(source, target, styleProp) {
+		// Move to strings.js
+		var camelize = function (str) {
+			return str.replace(/\-(\w)/g, function (str, letter) {
+				return letter.toUpperCase();
 			});
-		},
-		_initHideOnEsc: function() {
-			var self = this;
-			// escape closes the overlay
-			jQuery(document).keyup(function(e) {
-				var overlayVisibleAndEscapeKeyPressed = (self.$node.css('display') === 'table') && (e.keyCode === 27);
-				if(overlayVisibleAndEscapeKeyPressed) {
-					self.$node.hide();
+		};
+
+		var style;
+
+		if (source.currentStyle) {
+			style = source.currentStyle[camelize(styleProp)];
+		} else if (document.defaultView
+		        && document.defaultView.getComputedStyle) {
+			style = document.defaultView
+			                .getComputedStyle(source, null)
+			                .getPropertyValue(styleProp);
+		} else {
+			style = source.style[camelize(styleProp)];
+		}
+
+		return style ? target.css(styleProp, style) : null;
+	}
+
+	/**
+	 * Enables navigation through the character table with the arrow keys and
+	 * select one with the enter key.
+	 *
+	 * @param {Overlay} overlay
+	 * @param {function} onSelect Function to invoke when Enter is pressed.
+	 */
+	function cursorMovements(overlay, onSelect) {
+		var movements = {
+			// ←┘
+			13: function select($current) {
+				overlay.hide();
+				onSelect($current.text());
+			},
+			// ←
+			37: function left($current) {
+				var $prev = $current.prev();
+				if ($prev.length) {
+					$prev.addClass('focused');
+					$current.removeClass('focused');
 				}
-			});
-		},
-		_initCursorFocus: function( onSelectCallback ) {
-			var self = this;
-			// you can navigate through the character table with the arrow keys
-			// and select one with the enter key
-			var $current, $next, $prev, $nextRow, $prevRow;
-			var movements = {
-				13: function select() {
-					$current = self.$node.find('.focused');
-					self.$node.hide();
-					onSelectCallback($current.text());
-				},
-				37: function left() {
-					$current = self.$node.find('.focused');
-					$prev = $current.prev().addClass('focused');
-					if($prev.length > 0) {
-						$current.removeClass('focused');
-					}
-				},
-				38: function up() {
-					$current = self.$node.find('.focused');
-					$prevRow = $current.parent().prev();
-					if($prevRow.length > 0) {
-						$prev = jQuery($prevRow.children()[$current.index()]).addClass('focused');
-						if($prev.length > 0) {
-							$current.removeClass('focused');
-						}
-					}
-				},
-				39: function right() {
-					$current = self.$node.find('.focused');
-					$next = $current.next().addClass('focused');
-					if($next.length > 0) {
+			},
+			// ↑
+			38: function up($current) {
+				var $prevRow = $current.parent().prev();
+				if ($prevRow.length) {
+					var $prev = $(
+						$prevRow.children()[$current.index()]
+					).addClass('focused');
+					if ($prev.length) {
 						$current.removeClass('focused');
 					}
-				},
-				40: function down() {
-					$current = self.$node.find('.focused');
-					$nextRow = $current.parent().next();
-					if($nextRow.length > 0) {
-						$next = jQuery($nextRow.children()[$current.index()]).addClass('focused');
-						if($next.length > 0) {
-							$current.removeClass('focused');
-						}
-					}
 				}
-			};
-			jQuery(document).keydown(function(e) {
-				e.stopPropagation( );
-				var isOverlayVisible = self.$node.css('display') === 'table';
-				if(isOverlayVisible) {
-					// check if there is a move-command for the pressed key
-					var moveCommand = movements[e.keyCode];
-					if(moveCommand) {
-						moveCommand();
-						return false;
+			},
+			// →
+			39: function right($current) {
+				var $next = $current.next().addClass('focused');
+				if ($next.length) {
+					$current.removeClass('focused');
+				}
+			},
+			// ↓
+			40: function down($current) {
+				var $nextRow = $current.parent().next();
+				if ($nextRow.length) {
+					var $next = $(
+						$nextRow.children()[$current.index()]
+					).addClass('focused');
+					if ($next.length) {
+						$current.removeClass('focused');
 					}
 				}
-			});
-		},
-		_initEvents: function() {
-			var self = this;
-			// when the editable is deactivated, hide the layer
-			Aloha.bind('aloha-editable-deactivated', function(event, rangeObject) {
-				self.$node.hide();
-			});
-		},
-		_createCharacterButtons: function($node, characters, onSelectCallback) {
-			var self = this;
-			function htmlEntityToSingleCharacter(character) {
-				// isn't there any better way?
-				var textarea = document.createElement('textarea');
-				textarea.innerHTML = character;
-				return textarea.value;
 			}
-			function mkButton(c) {
-				var character = htmlEntityToSingleCharacter(c)
-				return jQuery('<td>' + character + '</td>')
-					.mouseover(function() {
-						jQuery(this).addClass('mouseover');
-					})
-					.mouseout(function() {
-						jQuery(this).removeClass('mouseover');
-					})
-					.click(function(e) {
-						self.$node.hide();
-						onSelectCallback(character);
-						return false;
-					});
-			}
-			function addRow() {
-				return jQuery('<tr></tr>').appendTo(self.$tbody);
+		};
+
+		$DOCUMENT.keydown(function ($event) {
+			$event.stopPropagation();
+			if (movements[$event.keyCode] && isOverlayVisible(overlay)) {
+				movements[$event.keyCode](overlay.$element.find('.focused'));
+				return false;
 			}
-			var characterList = jQuery.grep(
-				characters.split(' '),
-				function filterOutEmptyOnces(e) {
-					return e != '';
-				}
-			);
-			var i=0, char;
-			var $row;
-			while(char = characterList[i]) {
-				// make a new row every 15 characters
-				if(((i%15)===0)) {
-					$row = addRow();
-				}
-				mkButton(char).appendTo($row);
-				i++;
+		});
+	}
+
+	/**
+	 * Generates a map of the given list character on the overlay.
+	 *
+	 * @param {Overlay} overlay
+	 * @param {String} characters
+	 */
+	function generateCharacterTable(overlay, characters) {
+		var textarea = document.createElement('textarea');
+		textarea.innerHTML = characters;
+
+		var list = $.grep(textarea.value.split(' '), function (chr) {
+			return '' !== chr;
+		});
+
+		var table = ['<tr>'];
+		var i = 0;
+		var chr;
+		while ((chr = list[i])) {
+			// New row every 15 characters
+			if (0 !== i && (0 === (i % 15))) {
+				table.push('</tr><tr>');
 			}
+			table.push('<td unselectable="on">' + chr + '</td>');
+			i++;
+		}
+		table.push('</tr>');
+
+		overlay.$tbody.empty().append(table.join(''));
+
+		overlay.$element.delegate('td', 'mouseover', function () {
+			overlay.$element.find('.focused').removeClass('focused');
+			$(this).addClass('focused');
+		}).delegate('td', 'mouseout', function () {
+			$(this).removeClass('focused');
+		}).delegate('td', 'click', function () {
+			overlay.$element.hide();
+			overlay.onSelect($(this).text());
+		});
+	}
+
+	/**
+	 * @param {Overlay} overlay
+	 * @param {jQuery.<HTMLElement>} $element A DOM element around which to
+	 *                                        calculate the offset.
+	 */
+	function calculateOffset(overlay, $element) {
+		var offset = $element.offset();
+		if ('fixed' === Floating.POSITION_STYLE) {
+			offset.top -= $WINDOW.scrollTop();
+			offset.left -= $WINDOW.scrollLeft();
+		}
+		return {
+			top: overlay.offset.top + (offset.top - overlay.offset.top),
+			left: overlay.offset.left + (offset.left - overlay.offset.left)
+		};
+	}
+
+	/**
+	 * Insert the selected character, at the editor's selection.
+	 *
+	 * @param {String} character
+	 */
+	function onSelectCharacter(character) {
+		if (Aloha.activeEditable) {
+			rangeAtOpen.select();
+			Aloha.execCommand('insertHTML', false, character);
+
+			// Because after the character was inserted, move the selection
+			// forward.
+			rangeAtOpen.endContainer = rangeAtOpen.startContainer;
+			rangeAtOpen.endOffset = ++rangeAtOpen.startOffset;
+			rangeAtOpen.select();
+		}
+	}
+
+	/**
+	 * The Character Picker Overlay.
+	 *
+	 * @param {function} onSelect
+	 * @type {Overlay}
+	 */
+	function Overlay(onSelect) {
+		var overlay = this;
+
+		overlay.$element = $('<table class="aloha-character-picker-overlay" ' +
+			'unselectable="on" role="dialog"><tbody></tbody></table>');
+
+		// Because if mousedown bubbles up, there won't be an activeEditable.
+		// FIXME: The above needs to be better explained.
+		overlay.$element.mousedown(function ($event) {
+			return false;
+		});
+
+		overlay.onSelect = onSelect;
+		overlay.$tbody = overlay.$element.find('tbody');
+		overlay.$element.appendTo($('body'));
+
+		hideOnBodyClick(overlay);
+		hideOnEsc(overlay);
+		cursorMovements(overlay, onSelect);
+
+		Aloha.bind('aloha-editable-deactivated', function () {
+			overlay.hide();
+		});
+	}
+
+	Overlay.prototype = {
+		offset: {
+			top: 0,
+			left: 0
+		},
+
+		/**
+		 * Show the character overlay at the insert button's position.
+		 *
+		 * @param {jQuery.<HTMLElement>} $insert Insert button.
+		 */
+		show: function ($insert) {
+			var overlay = this;
+
+			// Because the overlay needs to be reposition relative its button.
+			overlay.$element
+			       .css(calculateOffset(overlay, $insert))
+			       .css('position', Floating.POSITION_STYLE)
+			       .show()
+			       .find('.focused')
+			       .removeClass('focused');
+
+			overlay.$element
+			       .find('td')
+			       .eq(0)
+			       .addClass('focused');
+
+			overlay._overlayActive = true;
+		},
+
+		hide: function () {
+			this.$element.hide();
+			this._overlayActive = false;
 		}
 	};
 
-	return Plugin.create('characterpicker', {
-		_constructor: function(){
+	/**
+	 * Generate an character picker overlay for the given editable.
+	 *
+	 * Because each editable may have its own configuration and therefore may
+	 * have its own overlay.
+	 *
+	 * @param {CharacterPicker} characterpicker
+	 * @param {Aloha.Editable} editable
+	 * @return {Overlay|null} The generated character picker overlay, or null
+	 *                        of the editable is not configured for the
+	 *                        character picker.
+	 */
+	function generateOverlay(characterpicker, editable) {
+		var config = characterpicker.getEditableConfig(editable);
+		if (!config) {
+			return null;
+		}
+		var characters = $.isArray(config) ? config.join(' ') : config;
+		var overlay = configs[characters];
+		if (!overlay) {
+			overlay = new Overlay(onSelectCharacter);
+			generateCharacterTable(overlay, characters);
+			configs[characters] = overlay;
+		}
+		return overlay;
+	}
+
+	/**
+	 * @type {Plugin}
+	 */
+	var CharacterPicker =  Plugin.create('characterpicker', {
+
+		settings: {},
+
+		config: '&#38; &#34; &#162; &#8364; &#163; &#165; &#169; &#174; &#8482; &#8240; &#181; &#183; &#8226; &#8230; &#8242; &#8243; &#167; &#182; &#223; &#8249; &#8250; &#171; &#187; &#8216; &#8217; &#8220; &#8221; &#8218; &#8222; &#60; &#62; &#8804; &#8805; &#8211; &#8212; &#175; &#8254; &#164; &#166; &#168; &#161; &#191; &#710; &#732; &#176; &#8722; &#177; &#247; &#8260; &#215; &#185; &#178; &#179; &#188; &#189; &#190; &#402; &#8747; &#8721; &#8734; &#8730; &#8764; &#8773; &#8776; &#8800; &#8801; &#8712; &#8713; &#8715; &#8719; &#8743; &#8744; &#172; &#8745; &#8746; &#8706; &#8704; &#8707; &#8709; &#8711; &#8727; &#8733; &#8736; &#180; &#184; &#170; &#186; &#8224; &#8225; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#338; &#352; &#217; &#218; &#219; &#220; &#221; &#376; &#222; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#339; &#353; &#249; &#250; &#251; &#252; &#253; &#254; &#255; &#913; &#914; &#915; &#916; &#917; &#918; &#919; &#920; &#921; &#922; &#923; &#924; &#925; &#926; &#927; &#928; &#929; &#931; &#932; &#933; &#934; &#935; &#936; &#937; &#945; &#946; &#947; &#948; &#949; &#950; &#951; &#952; &#953; &#954; &#955; &#956; &#957; &#958; &#959; &#960; &#961; &#962; &#963; &#964; &#965; &#966; &#967; &#968; &#969; &#8501; &#982; &#8476; &#977; &#978; &#8472; &#8465; &#8592; &#8593; &#8594; &#8595; &#8596; &#8629; &#8656; &#8657; &#8658; &#8659; &#8660; &#8756; &#8834; &#8835; &#8836; &#8838; &#8839; &#8853; &#8855; &#8869; &#8901; &#8968; &#8969; &#8970; &#8971; &#9001; &#9002; &#9674; &#9824; &#9827; &#9829; &#9830;',
+
+		_constructor: function () {
 			this._super('characterpicker');
 		},
-		languages: ['en'],
-		init: function() {
-			var self = this;
-			if (!Aloha.settings.plugins.characterpicker) {
-				Aloha.settings.plugins.characterpicker = {}
-			}
-			self.settings = Aloha.settings.plugins.characterpicker || {};
-			if(!self.settings.characters) {
-				self.settings.characters = '&#38; &#34; &#162; &#8364; &#163; &#165; &#169; &#174; &#8482; &#8240; &#181; &#183; &#8226; &#8230; &#8242; &#8243; &#167; &#182; &#223; &#8249; &#8250; &#171; &#187; &#8216; &#8217; &#8220; &#8221; &#8218; &#8222; &#60; &#62; &#8804; &#8805; &#8211; &#8212; &#175; &#8254; &#164; &#166; &#168; &#161; &#191; &#710; &#732; &#176; &#8722; &#177; &#247; &#8260; &#215; &#185; &#178; &#179; &#188; &#189; &#190; &#402; &#8747; &#8721; &#8734; &#8730; &#8764; &#8773; &#8776; &#8800; &#8801; &#8712; &#8713; &#8715; &#8719; &#8743; &#8744; &#172; &#8745; &#8746; &#8706; &#8704; &#8707; &#8709; &#8711; &#8727; &#8733; &#8736; &#180; &#184; &#170; &#186; &#8224; &#8225; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#216; &#338; &#352; &#217; &#218; &#219; &#220; &#221; &#376; &#222; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#248; &#339; &#353; &#249; &#250; &#251; &#252; &#253; &#254; &#255; &#913; &#914; &#915; &#916; &#917; &#918; &#919; &#920; &#921; &#922; &#923; &#924; &#925; &#926; &#927; &#928; &#929; &#931; &#932; &#933; &#934; &#935; &#936; &#937; &#945; &#946; &#947; &#948; &#949; &#950; &#951; &#952; &#953; &#954; &#955; &#956; &#957; &#958; &#959; &#960; &#961; &#962; &#963; &#964; &#965; &#966; &#967; &#968; &#969; &#8501; &#982; &#8476; &#977; &#978; &#8472; &#8465; &#8592; &#8593; &#8594; &#8595; &#8596; &#8629; &#8656; &#8657; &#8658; &#8659; &#8660; &#8756; &#8834; &#8835; &#8836; &#8838; &#8839; &#8853; &#8855; &#8869; &#8901; &#8968; &#8969; &#8970; &#8971; &#9001; &#9002; &#9674; &#9824; &#9827; &#9829; &#9830;';
+
+		init: function () {
+			var characterpicker = this;
+
+			if (Aloha.settings.plugins
+					&& Aloha.settings.plugins.characterpicker) {
+				characterpicker.settings
+						= Aloha.settings.plugins.characterpicker;
 			}
-			var insertButton = new Aloha.ui.Button({
-				'name': 'characterpicker',
-				'iconClass': 'aloha-button-characterpicker',
-				'size': 'small',
-				'onclick': function(element, event) { self.characterOverlay.show(element.btnEl.dom); },
-				'tooltip': i18n.t('button.addcharacter.tooltip'),
-				'toggle': false
+
+			var button = Ui.adopt('characterPicker', Button, {
+				tooltip: i18n.t('button.addcharacter.tooltip'),
+				icon: 'aloha-icon-characterpicker',
+				scope: 'Aloha.continuoustext',
+				click: function () {
+					if (characterpicker.overlay) {
+						rangeAtOpen = Aloha.Selection.rangeObject;
+
+						var from = rangeAtOpen.startContainer.parentNode;
+						var to = characterpicker.overlay.$element;
+
+						copyStyle(from, to, 'font-family');
+						copyStyle(from, to, 'font-weight');
+						copyStyle(from, to, 'font-style');
+
+						characterpicker.overlay.show(this.element);
+					}
+				}
 			});
-			FloatingMenu.addButton(
-				'Aloha.continuoustext',
-				insertButton,
-				i18nCore.t('floatingmenu.tab.insert'),
-				1
-			);
-			self.characterOverlay = new CharacterOverlay(self.settings.characters, self.onCharacterSelect);
-		},
-		/**
-		 * insert a character after selecting it from the list
-		*/
-		onCharacterSelect: function(character) {
-			var self = this;
-			var range = Aloha.Selection.getRangeObject();
-			
-			if( Aloha.activeEditable ) {
-				var charNode = jQuery(document.createTextNode(character));
-				GENTICS.Utils.Dom.insertIntoDOM(
-					charNode,
-					range,
-					jQuery(Aloha.activeEditable.obj),
-					true
-				);
-				range.startContainer = range.endContainer = charNode.get( 0 );
-				range.startOffset = range.endOffset = charNode.length;
-				range.select();
+
+			/**
+			 * Pre-generate overlays to so that they will be ready when the
+			 * editor click on an editable.
+			 *
+			 * @param {number} editableIndex
+			 */
+			function pregenerateOverlays(editableIndex) {
+				if (editableIndex < Aloha.editables.length) {
+					generateOverlay(characterpicker,
+							Aloha.editables[editableIndex]);
+					setTimeout(function () {
+						pregenerateOverlays(editableIndex + 1);
+					}, 100);
+				}
 			}
+
+			// FIXME: ... but why?
+			setTimeout(function () {
+				pregenerateOverlays(0);
+			}, 100);
+
+			Aloha.bind('aloha-editable-activated', function ($event, data) {
+				characterpicker.overlay =
+						generateOverlay(characterpicker, data.editable);
+				if (characterpicker.overlay) {
+					button.show();
+				} else {
+					button.hide();
+				}
+			});
+
+			PubSub.sub('aloha.floating.changed', function (message) {
+				if (characterpicker.overlay) {
+					characterpicker.overlay.offset = message.position.offset;
+					characterpicker.overlay.$element.css(
+						calculateOffset(characterpicker.overlay, button.element)
+					);
+				}
+			});
 		}
+
 	});
 
+	return CharacterPicker;
 });
-// vim: noexpandtab