From 37c15b310917cadcd05ce8c62dffefa08fc16608 Mon Sep 17 00:00:00 2001 From: Norbert Pomaroli Date: Wed, 13 Jun 2012 11:28:20 +0200 Subject: [PATCH] Fixed characterpicker plugin to be configurable per editable. Made characterpicker jslint compliant. Updated guides for characterpicker. --- doc/guides/output/plugin_characterpicker.html | 602 +++++++++++++----- doc/guides/output/plugin_commands.html | 144 +++++ .../output/plugin_highlighteditables.html | 186 ++++++ .../source/plugin_characterpicker.textile | 65 +- .../lib/characterpicker-plugin.js | 189 +++--- 5 files changed, 923 insertions(+), 263 deletions(-) create mode 100644 doc/guides/output/plugin_commands.html create mode 100644 doc/guides/output/plugin_highlighteditables.html diff --git a/doc/guides/output/plugin_characterpicker.html b/doc/guides/output/plugin_characterpicker.html index 0311f2a0e0..865b42bb4f 100644 --- a/doc/guides/output/plugin_characterpicker.html +++ b/doc/guides/output/plugin_characterpicker.html @@ -1,155 +1,447 @@ - - - - - : Characterpicker Plugin - - - - - - - - - - - - - - - -
-
-

- Aloha Editor -

- -
-
- -
-
-
- -

-

These guides help you to make your content editable and to develop Aloha.

-
-
- - Guides Index ▸ - - -
-
-
- -
-
-
-
-

Characterpicker Plugin

-

The Characterpicker Plugin allows you to insert special characters into your text. Position your cursor, click the icon and choose the character you’d like to insert from the overlay menu.

- -
-

Components

-
    -
  • characterpicker – brings up the overlay to select a character
    • -
-

Configuration settings

-
-
-
-// specify characters for insertion in a space-separated string
-// this is the basic set of characters available for the plugin
-Aloha.settings.plugins.characterpicker.characters = '& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′ ″ § ¶ ß ‹ › « » ‘ ’ “ ” ‚ „ < > ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ ° − ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞ √ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪ ∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý Ÿ Þ à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø œ š ù ú û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘ ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦';
-
- -
-
- -
-
-
- -
- - - - - - - - - - - - - - + + + + + : Characterpicker Plugin + + + + + + + + + + + + + + + +
+
+

+ Aloha Editor +

+ +
+
+ +
+
+
+ +

+

These guides help you to make your content editable and to develop Aloha.

+
+
+ + Guides Index ▸ + + +
+
+
+ +
+
+
+
+

Characterpicker Plugin

+

The Characterpicker Plugin allows you to insert special characters into your text. Position your cursor, click the icon and choose the character you’d like to insert from the overlay menu.

+ +
+

Components

+
    +
  • characterpicker – brings up the overlay to select a character
    • +
+

Configuration settings

+

The characterpicker will by default support the following characters:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′
″ § ß ‹ › « » ‘ ’ “ ” ‚ „ <
> ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ °
− ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞
√ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪
∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À
Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý
Ÿ Þ à á â ã ä å æ ç è é ê ë ì
í î ï ð ñ ò ó ô õ ö ø œ š ù ú
û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ
Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α
β γ δ ε ζ η θ ι κ λ μ ν ξ ο π
ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘
ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃
⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠
♣ ♥ ♦
+

It is possible to configure the global character set and to configure character sets for specific editables (identified by jQuery selectors):

+
+
+
+Aloha.settings = {
+	plugins: {
+		characterpicker: {
+			// this is the global setting
+			config: '&#38; &#34; &#162; &#8364;',
+			editables: {
+				// this will disable the characterpicker for the header
+				'#header': '',
+				// allow more characters for editables with class 'article'
+				'.article': '&#38; &#34; &#162; &#8364; &#163; &#165;'
+			}
+		}
+	}
+}
+
+ +
+
+ +
+
+
+ +
+ + + + + + + + + + + + + + diff --git a/doc/guides/output/plugin_commands.html b/doc/guides/output/plugin_commands.html new file mode 100644 index 0000000000..46b1c53957 --- /dev/null +++ b/doc/guides/output/plugin_commands.html @@ -0,0 +1,144 @@ + + + + + : Commands Plugin + + + + + + + + + + + + + + + +
+
+

+ Aloha Editor +

+ +
+
+ +
+
+
+ +

+

These guides help you to make your content editable and to develop Aloha.

+
+
+ + Guides Index ▸ + + +
+
+
+ +
+
+
+
+

Commands Plugin

+

The Commands Plugin adds additional commands to the Aloha Editor core. Currently it only provides the inserthtml command which the Paste Plugin and many others will make use of. There is no configuration or settings for the Commands Plugin. For more information see our guide on Aloha Commands

+ +
+ + +
+
+ +
+
+
+ +
+ + + + + + + + + + + + + + diff --git a/doc/guides/output/plugin_highlighteditables.html b/doc/guides/output/plugin_highlighteditables.html new file mode 100644 index 0000000000..39e575f9ce --- /dev/null +++ b/doc/guides/output/plugin_highlighteditables.html @@ -0,0 +1,186 @@ + + + + + : Highlight Editables Plugin + + + + + + + + + + + + + + + +
+
+

+ Aloha Editor +

+ +
+
+ +
+
+
+ +

+

These guides help you to make your content editable and to develop Aloha.

+
+
+ + Guides Index ▸ + + +
+
+
+ +
+
+
+
+

Highlight Editables Plugin

+

The Highlight Editables Plugin provides a visual hint when moving the mouse to outline editables.

+ +
+

1 Overview

+

With this plugin editable areas will be outlined when the user moves the mouse.
+An active editable will be outlined with a different color.

+

2 Usage

+

Activate the plugin and decide if you want to highlight all editables.
+You can use CSS to configure the look (see: Configuration).

+

3 Components

+
    +
  • No components for user interaction
    • +
+

4 Configuration

+
+
+
+	Aloha.settings.plugins: {
+		highlighteditables: {
+			config: [ 'highlight' ],
+			
+			editables: {
+				'#one': [ 'highlight' ],
+				'#two': [ ] // do not show visual effect for this editable
+			}
+		}
+	}
+

CSS you can adapt to your needs.

+
+
+
+.aloha-editable-highlight {
+	outline: #FFE767 solid 5px;
+}
+
+.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
+	outline: #80B5F2 solid 5px;
+}
+
+ +
+ +
+
+ +
+ + + + + + + + + + + + + + diff --git a/doc/guides/source/plugin_characterpicker.textile b/doc/guides/source/plugin_characterpicker.textile index 5c94f84a15..469bf48b93 100644 --- a/doc/guides/source/plugin_characterpicker.textile +++ b/doc/guides/source/plugin_characterpicker.textile @@ -1,17 +1,50 @@ -h2. Characterpicker Plugin - -The Characterpicker Plugin allows you to insert special characters into your text. Position your cursor, click the icon and choose the character you'd like to insert from the overlay menu. - -endprologue. - -h4. Components - -* characterpicker - brings up the overlay to select a character - -h4. Configuration settings - - -// specify characters for insertion in a space-separated string -// this is the basic set of characters available for the plugin -Aloha.settings.plugins.characterpicker.characters = '& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′ ″ § ¶ ß ‹ › « » ‘ ’ “ ” ‚ „ < > ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ ° − ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞ √ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪ ∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý Ÿ Þ à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø œ š ù ú û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘ ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦'; +h2. Characterpicker Plugin + +The Characterpicker Plugin allows you to insert special characters into your text. Position your cursor, click the icon and choose the character you'd like to insert from the overlay menu. + +endprologue. + +h4. Components + +* characterpicker - brings up the overlay to select a character + +h4. Configuration settings + +The characterpicker will by default support the following characters: + +| & | " | ¢ | € | £ | ¥ | © | ® | ™ | ‰ | µ | · | • | … | ′ | +| ″ | § | ¶ | ß | ‹ | › | « | » | ‘ | ’ | “ | ” | ‚ | „ | < | +| > | ≤ | ≥ | – | — | ¯ | ‾ | ¤ | ¦ | ¨ | ¡ | ¿ | ˆ | ˜ | ° | +| − | ± | ÷ | ⁄ | × | ¹ | ² | ³ | ¼ | ½ | ¾ | ƒ | ∫ | ∑ | ∞ | +| √ | ∼ | ≅ | ≈ | ≠ | ≡ | ∈ | ∉ | ∋ | ∏ | ∧ | ∨ | ¬ | ∩ | ∪ | +| ∂ | ∀ | ∃ | ∅ | ∇ | ∗ | ∝ | ∠ | ´ | ¸ | ª | º | † | ‡ | À | +| Á |  | à | Ä | Å | Æ | Ç | È | É | Ê | Ë | Ì | Í | Î | Ï | +| Ð | Ñ | Ò | Ó | Ô | Õ | Ö | Ø | Œ | Š | Ù | Ú | Û | Ü | Ý | +| Ÿ | Þ | à | á | â | ã | ä | å | æ | ç | è | é | ê | ë | ì | +| í | î | ï | ð | ñ | ò | ó | ô | õ | ö | ø | œ | š | ù | ú | +| û | ü | ý | þ | ÿ | Α | Β | Γ | Δ | Ε | Ζ | Η | Θ | Ι | Κ | +| Λ | Μ | Ν | Ξ | Ο | Π | Ρ | Σ | Τ | Υ | Φ | Χ | Ψ | Ω | α | +| β | γ | δ | ε | ζ | η | θ | ι | κ | λ | μ | ν | ξ | ο | π | +| ρ | ς | σ | τ | υ | φ | χ | ψ | ω | ℵ | ϖ | ℜ | ϑ | ϒ | ℘ | +| ℑ | ← | ↑ | → | ↓ | ↔ | ↵ | ⇐ | ⇑ | ⇒ | ⇓ | ⇔ | ∴ | ⊂ | ⊃ | +| ⊄ | ⊆ | ⊇ | ⊕ | ⊗ | ⊥ | ⋅ | ⌈ | ⌉ | ⌊ | ⌋ | 〈 | 〉 | ◊ | ♠ | +| ♣ | ♥ | ♦ | + +It is possible to configure the global character set and to configure character sets for specific editables (identified by jQuery selectors): + + +Aloha.settings = { + plugins: { + characterpicker: { + // this is the global setting + config: '& " ¢ €', + editables: { + // this will disable the characterpicker for the header + '#header': '', + // allow more characters for editables with class 'article' + '.article': '& " ¢ € £ ¥' + } + } + } +} \ No newline at end of file diff --git a/src/plugins/common/characterpicker/lib/characterpicker-plugin.js b/src/plugins/common/characterpicker/lib/characterpicker-plugin.js index 38a1154110..04fe343cae 100644 --- a/src/plugins/common/characterpicker/lib/characterpicker-plugin.js +++ b/src/plugins/common/characterpicker/lib/characterpicker-plugin.js @@ -1,3 +1,5 @@ +/*global window:true, define:true, document:true */ + /* * Aloha Editor * Author & Copyright (c) 2010 Gentics Software GmbH @@ -12,29 +14,33 @@ define( 'i18n!characterpicker/nls/i18n', 'i18n!aloha/nls/i18n', 'css!characterpicker/css/characterpicker.css'], -function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { +function (Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore) { "use strict"; var GENTICS = window.GENTICS; - function CharacterOverlay(characters, onSelectCallback) { + function CharacterOverlay(onSelectCallback) { var self = this; self.$node = jQuery(''); // don't let the mousedown bubble up. otherwise there won't be an activeEditable - self.$node.mousedown(function(e) { + self.$node.mousedown(function (e) { return false; }); + self.onSelectCallback = onSelectCallback; 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 ) { + /** + * Show the character overlay at the insert button's position + * @param insertButton insert button + */ + show: function (insertButton) { var self = this; // position the overlay relative to the insert-button self.$node.css(jQuery(insertButton).offset()); @@ -43,36 +49,45 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { self.$node.find('.focused').removeClass('focused'); jQuery(self.$node.find('td')[0]).addClass('focused'); }, - _initHideOnDocumentClick: function() { + + /** + * Set the characters, that shall be selectable + * @param {string} characters characters in a string, separated by spaces + */ + setCharacters: function (characters) { + this._createCharacterButtons(characters); + }, + + _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) { + self.$node.click(function (e) { e.stopPropagation(); }); // hide the layer if user clicks anywhere in the body - jQuery('body').click(function(e) { + jQuery('body').click(function (e) { var overlayVisibleAndNotTarget - = (self.$node.css('display') === 'table') - && (e.target != self.$node[0]) + = (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) { + !jQuery(e.target).is('button.aloha-button-characterpicker'); + if (overlayVisibleAndNotTarget) { self.$node.hide(); } }); }, - _initHideOnEsc: function() { + _initHideOnEsc: function () { var self = this; // escape closes the overlay - jQuery(document).keyup(function(e) { + jQuery(document).keyup(function (e) { var overlayVisibleAndEscapeKeyPressed = (self.$node.css('display') === 'table') && (e.keyCode === 27); - if(overlayVisibleAndEscapeKeyPressed) { + if (overlayVisibleAndEscapeKeyPressed) { self.$node.hide(); } }); }, - _initCursorFocus: function( onSelectCallback ) { + _initCursorFocus: function (onSelectCallback) { var self = this; // you can navigate through the character table with the arrow keys // and select one with the enter key @@ -86,16 +101,16 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { 37: function left() { $current = self.$node.find('.focused'); $prev = $current.prev().addClass('focused'); - if($prev.length > 0) { + if ($prev.length > 0) { $current.removeClass('focused'); } }, 38: function up() { $current = self.$node.find('.focused'); $prevRow = $current.parent().prev(); - if($prevRow.length > 0) { + if ($prevRow.length > 0) { $prev = jQuery($prevRow.children()[$current.index()]).addClass('focused'); - if($prev.length > 0) { + if ($prev.length > 0) { $current.removeClass('focused'); } } @@ -103,42 +118,42 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { 39: function right() { $current = self.$node.find('.focused'); $next = $current.next().addClass('focused'); - if($next.length > 0) { + if ($next.length > 0) { $current.removeClass('focused'); } }, 40: function down() { $current = self.$node.find('.focused'); $nextRow = $current.parent().next(); - if($nextRow.length > 0) { + if ($nextRow.length > 0) { $next = jQuery($nextRow.children()[$current.index()]).addClass('focused'); - if($next.length > 0) { + if ($next.length > 0) { $current.removeClass('focused'); } } } }; - jQuery(document).keydown(function(e) { - e.stopPropagation( ); + jQuery(document).keydown(function (e) { + e.stopPropagation(); var isOverlayVisible = self.$node.css('display') === 'table'; - if(isOverlayVisible) { + if (isOverlayVisible) { // check if there is a move-command for the pressed key var moveCommand = movements[e.keyCode]; - if(moveCommand) { + if (moveCommand) { moveCommand(); return false; } } }); }, - _initEvents: function() { + _initEvents: function () { var self = this; // when the editable is deactivated, hide the layer - Aloha.bind('aloha-editable-deactivated', function(event, rangeObject) { + Aloha.bind('aloha-editable-deactivated', function (event, rangeObject) { self.$node.hide(); }); }, - _createCharacterButtons: function($node, characters, onSelectCallback) { + _createCharacterButtons: function (characters) { var self = this; function htmlEntityToSingleCharacter(character) { // isn't there any better way? @@ -147,17 +162,17 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { return textarea.value; } function mkButton(c) { - var character = htmlEntityToSingleCharacter(c) + var character = htmlEntityToSingleCharacter(c); return jQuery('' + character + '') - .mouseover(function() { + .mouseover(function () { jQuery(this).addClass('mouseover'); }) - .mouseout(function() { + .mouseout(function () { jQuery(this).removeClass('mouseover'); }) - .click(function(e) { + .click(function (e) { self.$node.hide(); - onSelectCallback(character); + self.onSelectCallback(character); return false; }); } @@ -167,14 +182,16 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { var characterList = jQuery.grep( characters.split(' '), function filterOutEmptyOnces(e) { - return e != ''; + return e !== ''; } ); - var i=0, char; + var i = 0, char; var $row; - while(char = characterList[i]) { + // remove existing rows + self.$tbody.find('tr').remove(); + while ((char = characterList[i])) { // make a new row every 15 characters - if(((i%15)===0)) { + if (((i % 15) === 0)) { $row = addRow(); } mkButton(char).appendTo($row); @@ -184,74 +201,62 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { }; return Plugin.create('characterpicker', { - _constructor: function(){ + _constructor: function () { this._super('characterpicker'); }, languages: ['en'], - config: [ 'characterpicker' ], - init: function() { - var self = this; - - Aloha.bind('aloha-editable-activated', function ( event, data ) { - self.applyConfig( data.editable.obj ); - }); - }, - + /** - * Applys a configuration specific for an editable - * buttons not available in this configuration are hidden - * @param {jQuery} obj jQuery object of the activated editable + * Default configuration */ - applyConfig: function ( obj ) { - var that = this, - characters = '& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′ ″ § ¶ ß ‹ › « » ‘ ’ “ ” ‚ „ < > ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ ° − ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞ √ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪ ∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý Ÿ Þ à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø œ š ù ú û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘ ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦'; + config: '& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′ ″ § ¶ ß ‹ › « » ‘ ’ “ ” ‚ „ < > ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ ° − ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞ √ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪ ∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý Ÿ Þ à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø œ š ù ú û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘ ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦', - that.config = that.getEditableConfig( obj ); - - that.settings = {}; - - /* - if ( Aloha.settings.plugins.characterpicker && Aloha.settings.plugins.characterpicker.characters ) { - that.settings.characters = Aloha.settings.plugins.characterpicker.characters; - }*/ + init: function () { + var self = this; - if ( typeof that.config !== 'undefined' ) { - that.settings.characters = that.config; - } else if ( !that.settings.characters ) { - that.settings.characters = characters; - } + self.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 + }); + FloatingMenu.addButton( + 'Aloha.continuoustext', + self.insertButton, + i18nCore.t('floatingmenu.tab.insert'), + 1 + ); + self.characterOverlay = new CharacterOverlay(self.onCharacterSelect); - if ( jQuery.isArray(that.settings.characters) ) { - that.settings.characters = that.settings.characters.join(', '); - } - - if ( that.settings.characters.length > 0 ) { - var insertButton = new Aloha.ui.Button({ - 'name': 'characterpicker', - 'iconClass': 'aloha-button-characterpicker', - 'size': 'small', - 'onclick': function(element, event) { that.characterOverlay.show(element.btnEl.dom); }, - 'tooltip': i18n.t('button.addcharacter.tooltip'), - 'toggle': false - }); - FloatingMenu.addButton( - 'Aloha.continuoustext', - insertButton, - i18nCore.t('floatingmenu.tab.insert'), - 1 - ); - that.characterOverlay = new CharacterOverlay(that.settings.characters, that.onCharacterSelect); - } + // when an editable is activated, we get the config for the editable + Aloha.bind('aloha-editable-activated', function (event, data) { + var config = self.getEditableConfig(data.editable.obj); + + // make a space separated string out of arrays + if (jQuery.isArray(config)) { + config = config.join(' '); + } + + if (config) { + self.characterOverlay.setCharacters(config); + self.insertButton.show(); + } else { + self.insertButton.hide(); + } + }); }, - /** * insert a character after selecting it from the list */ - onCharacterSelect: function(character) { + onCharacterSelect: function (character) { var self = this; var range = Aloha.Selection.getRangeObject(); - if( Aloha.activeEditable ) { + if (Aloha.activeEditable) { var charNode = jQuery(document.createTextNode(character)); GENTICS.Utils.Dom.insertIntoDOM( charNode, @@ -260,7 +265,7 @@ function( Aloha, jQuery, Plugin, FloatingMenu, i18n, i18nCore ) { true ); - range.startContainer = range.endContainer = charNode.get( 0 ); + range.startContainer = range.endContainer = charNode.get(0); range.startOffset = range.endOffset = charNode.length; range.select();