Index: typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js (révision 7077) +++ typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/character-map.js (copie de travail) @@ -34,46 +34,296 @@ * TYPO3 SVN ID: $Id$ */ CharacterMap = HTMLArea.Plugin.extend({ - constructor : function(editor, pluginName) { this.base(editor, pluginName); }, - /* * This function gets called by the class constructor */ configurePlugin : function(editor) { - /* * Registering plugin "About" information */ var pluginInformation = { - version : "1.3", - developer : "Holger Hees, Bernhard Pfeifer, Stanislas Rolland", - developerUrl : "http://www.fructifor.ca/", - copyrightOwner : "Holger Hees, Bernhard Pfeifer, Stanislas Rolland", - sponsor : "System Concept GmbH, Bernhard Pfeifer, Fructifor Inc.", - sponsorUrl : "http://www.fructifor.ca/", - license : "GPL" + version : '2.0', + developer : 'Holger Hees, Bernhard Pfeifer, Stanislas Rolland', + developerUrl : 'http://www.sjbr.ca/', + copyrightOwner : 'Holger Hees, Bernhard Pfeifer, Stanislas Rolland', + sponsor : 'System Concept GmbH, Bernhard Pfeifer, SJBR', + sponsorUrl : 'http://www.sjbr.ca/', + license : 'GPL' }; this.registerPluginInformation(pluginInformation); - /* * Registering the button */ - var buttonId = "InsertCharacter"; + var buttonId = 'InsertCharacter'; var buttonConfiguration = { id : buttonId, - tooltip : this.localize(buttonId + "-Tooltip"), - action : "onButtonPress", + tooltip : this.localize(buttonId + '-Tooltip'), + action : 'onButtonPress', dialog : true }; this.registerButton(buttonConfiguration); return true; }, - /* + * Character maps + */ + maps: { + general: [ + [' ', ' '], + ['À', 'À'], + ['à', 'à'], + ['Á', 'Á'], + ['á', 'á'], + ['Â', 'Â'], + ['â', 'â'], + ['Ã', 'Ã'], + ['ã', 'ã'], + ['Ä', 'Ä'], + ['ä', 'ä'], + ['Å', 'Å'], + ['å', 'å'], + ['Æ', 'Æ'], + ['æ', 'æ'], + ['ª', 'ª'], + ['Ç', 'Ç'], + ['ç', 'ç'], + ['Ð', 'Ð'], + ['ð', 'ð'], + ['È', 'È'], + ['è', 'è'], + ['É', 'É'], + ['é', 'é'], + ['Ê', 'Ê'], + ['ê', 'ê'], + ['Ë', 'Ë'], + ['ë', 'ë'], + ['Ì', 'Ì'], + ['ì', 'ì'], + ['Í', 'Í'], + ['í', 'í'], + ['Î', 'Î'], + ['î', 'î'], + ['Ï', 'Ï'], + ['ï', 'ï'], + ['Ñ', 'Ñ'], + ['ñ', 'ñ'], + ['Ò', 'Ò'], + ['ò', 'ò'], + ['Ó', 'Ó'], + ['ó', 'ó'], + ['Ô', 'Ô'], + ['ô', 'ô'], + ['Õ', 'Õ'], + ['õ', 'õ'], + ['Ö', 'Ö'], + ['ö', 'ö'], + ['Ø', 'Ø'], + ['ø', 'ø'], + ['Œ', 'Œ'], + ['œ', 'œ'], + ['º', 'º'], + ['Š', 'Š'], + ['š', 'š'], + ['ß', 'ß'], + ['Þ', 'Þ'], + ['þ', 'þ'], + ['Ù', 'Ù'], + ['ù', 'ù'], + ['Ú', 'Ú'], + ['ú', 'ú'], + ['Û', 'Û'], + ['û', 'û'], + ['Ü', 'Ü'], + ['ü', 'ü'], + ['Ý', 'Ý'], + ['ý', 'ý'], + ['Ÿ', 'Ÿ'], + ['ÿ', 'ÿ'], + ['´', '´'], + ['ˆ', 'ˆ'], + ['˜', '˜'], + ['¨', '¨'], + ['¸', '¸'], + ['–', '–'], + ['—', '—'], + ['‘', '‘'], + ['’', '’'], + ['‚', '‚'], + ['“', '“'], + ['”', '”'], + ['„', '„'], + ['‹', '‹'], + ['›', '›'], + ['«', '«'], + ['»', '»'], + ['"', '"'], + ['…', '…'], + ['¿', '¿'], + ['¡', '¡'], + ['•', '•'], + ['†', '†'], + ['‡', '‡'], + ['¦', '¦'], + ['¶', '¶'], + ['§', '§'], + ['◊', '◊'], + ['@', '@'], + ['©', '©'], + ['®', '®'], + ['™', '™'], + ['¤', '¤'], + ['¢', '¢'], + ['€', '€'], + ['£', '£'], + ['¥', '¥'], + [' ', ' '], + [' ', ' '], + [' ', ' '], + ['‍', '‍'], + ['‌', '‌'] + ], + mathematical: [ + ['−', '−'], + ['±', '±'], + ['×', '×'], + ['÷', '÷'], + ['√', '√'], + ['⋅', '⋅'], + ['⊗', '⊗'], + ['∗', '∗'], + ['≥', '≥'], + ['≤', '≤'], + ['≠', '≠'], + ['≈', '≈'], + ['∼', '∼'], + ['∝', '∝'], + ['°', '°'], + ['′', '′'], + ['″', '″'], + ['µ', 'µ'], + ['∠', '∠'], + ['⊥', '⊥'], + ['‰', '‰'], + ['⁄', '⁄'], + ['¼', '¼'], + ['½', '½'], + ['¾', '¾'], + ['¹', '¹'], + ['²', '²'], + ['³', '³'], + ['¬', '¬'], + ['∧', '∧'], + ['∨', '∨'], + ['∴', '∴'], + ['≅', '≅'], + ['∈', '∈'], + ['∋', '∋'], + ['∉', '∉'], + ['⊂', '⊂'], + ['⊆', '⊆'], + ['⊄', '⊄'], + ['⊃', '⊃'], + ['⊇', '⊇'], + ['∩', '∩'], + ['∪', '∪'], + ['⊕', '⊕'], + ['∇', '∇'], + ['∅', '∅'], + ['≡', '≡'], + ['∑', '∑'], + ['∏', '∏'], + ['℘', '℘'], + ['∃', '∃'], + ['∀', '∀'], + ['∞', '∞'], + ['ℵ', 'ℵ'], + ['ℜ', 'ℜ'], + ['ℑ', 'ℑ'], + ['ƒ', 'ƒ'], + ['∫', '∫'], + ['∂', '∂'], + ['Α', 'Α'], + ['α', 'α'], + ['Β', 'Β'], + ['β', 'β'], + ['Γ', 'Γ'], + ['γ', 'γ'], + ['Δ', 'Δ'], + ['δ', 'δ'], + ['Ε', 'Ε'], + ['ε', 'ε'], + ['Ζ', 'Ζ'], + ['ζ', 'ζ'], + ['Η', 'Η'], + ['η', 'η'], + ['Θ', 'Θ'], + ['θ', 'θ'], + ['ϑ', 'ϑ'], + ['Ι', 'Ι'], + ['ι', 'ι'], + ['Κ', 'Κ'], + ['κ', 'κ'], + ['Λ', 'Λ'], + ['λ', 'λ'], + ['Μ', 'Μ'], + ['μ', 'μ'], + ['Ν', 'Ν'], + ['ν', 'ν'], + ['Ξ', 'Ξ'], + ['ξ', 'ξ'], + ['Ο', 'Ο'], + ['ο', 'ο'], + ['Π', 'Π'], + ['π', 'π'], + ['ϖ', 'ϖ'], + ['Ρ', 'Ρ'], + ['ρ', 'ρ'], + ['Σ', 'Σ'], + ['σ', 'σ'], + ['ς', 'ς'], + ['Τ', 'Τ'], + ['τ', 'τ'], + ['Υ', 'Υ'], + ['ϒ', 'ϒ'], + ['υ', 'υ'], + ['Φ', 'Φ'], + ['φ', 'φ'], + ['Χ', 'Χ'], + ['χ', 'χ'], + ['Ψ', 'Ψ'], + ['ψ', 'ψ'], + ['Ω', 'Ω'], + ['ω', 'ω'], + [' ', ' '] + ], + graphical: [ + ['↵', '↵'], + ['↑', '↑'], + ['↓', '↓'], + ['←', '←'], + ['→', '→'], + ['↔', '↔'], + ['⇑', '⇑'], + ['⇓', '⇓'], + ['⇐', '⇐'], + ['⇒', '⇒'], + ['⇔', '⇔'], + [' ', ' '], + [' ', ' '], + [' ', ' '], + [' ', ' '], + [' ', ' '], + ['♣', '♣'], + ['♦', '♦'], + ['♥', '♥'], + ['♠', '♠'] + ] + }, + /* * This function gets called when the button was pressed. * * @param object editor: the editor instance @@ -81,36 +331,128 @@ * * @return boolean false if action is completed */ - onButtonPress : function(editor, id) { - this.dialog = this.openDialog("InsertCharacter", this.makeUrlFromPopupName("select_character"), "insertCharacter", null, {width:485, height:330}); + onButtonPress: function (editor, id) { + // Could be a button or its hotkey + var buttonId = this.translateHotKey(id); + buttonId = buttonId ? buttonId : id; + this.openDialogue( + buttonId, + 'Insert special character', + this.getWindowDimensions({width:462, height:330}, buttonId), + this.buildTabItems() + ); return false; }, - /* + * Open the dialogue window + * + * @param string buttonId: the button id + * @param string title: the window title + * @param integer dimensions: the opening width of the window + * @param object tabItems: the configuration of the tabbed panel + * @param function handler: handler when the OK button if clicked + * + * @return void + */ + openDialogue: function (buttonId, title, dimensions, tabItems, handler) { + this.dialog = new Ext.Window({ + title: this.localize(title), + cls: 'htmlarea-window', + border: false, + width: dimensions.width, + height: 'auto', + // As of ExtJS 3.1, JS error with IE when the window is resizable + resizable: !Ext.isIE, + iconCls: buttonId, + listeners: { + close: { + fn: this.onClose, + scope: this + } + }, + items: { + xtype: 'tabpanel', + activeTab: 0, + listeners: { + activate: { + fn: this.resetFocus, + scope: this + }, + tabchange: { + fn: this.syncHeight, + scope: this + } + }, + items: tabItems + }, + buttons: [ + this.buildButtonConfig('Cancel', this.onCancel) + ] + }); + this.show(); + }, + /* + * Build the configuration of the the tab items + * + * @return array the configuration array of tab items + */ + buildTabItems: function () { + var tabItems = []; + Ext.iterate(this.maps, function (id, map) { + tabItems.push({ + xtype: 'box', + cls: 'character-map', + title: this.localize(id), + itemId: id, + tpl: new Ext.XTemplate( + '{0}' + ), + listeners: { + render: { + fn: this.renderMap, + scope: this + } + } + }); + }, this); + return tabItems; + }, + /* + * Render an array of characters + * + * @param object component: the box containing the characters + * + * @return void + */ + renderMap: function (component) { + component.tpl.overwrite(component.el, this.maps[component.itemId]); + component.mon(component.el, 'click', this.insertCharacter, this, {delegate: 'a'}); + }, + /* * Insert the selected entity * - * @param object entity: the chosen entity + * @param object event: the Ext event + * @param HTMLelement target: the html element target * - * @return boolean false + * @return void */ - insertCharacter : function(entity) { - if (typeof(entity) != "undefined") { + insertCharacter: function (event, target) { + this.editor.focus(); + this.restoreSelection(); + var entity = Ext.get(target).dom.innerHTML; + if (Ext.isIE) { this.editor.insertHTML(entity); - this.dialog.focus(); + this.saveSelection(); + } else { + this.editor.insertNodeAtSelection(this.editor.document.createTextNode(entity)); } - return false; }, - /* - * This function gets called when the toolbar is updated + * Reset focus on the the current selection, if at all possible * - * @return void */ - onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) { - // Reclaim focus - if (this.dialog) { - this.dialog.focus(); - } + resetFocus: function () { + this.editor.focus(); + this.restoreSelection(); } }); - Index: typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xml =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xml (révision 7077) +++ typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/locallang.xml (copie de travail) @@ -9,6 +9,9 @@ + + + Index: typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/popups/select_character.html =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/popups/select_character.html (révision 7077) +++ typo3/sysext/rtehtmlarea/htmlarea/plugins/CharacterMap/popups/select_character.html (copie de travail) @@ -1,240 +0,0 @@ - - - - - Insert special character - - - - -
-
Insert special character
-
-
HTML value:
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 ÀàÁáÂâÃãÄäÅåÆæª
ÇçÐðÈèÉéÊêËëÌìÍí
ÎîÏïÑñÒòÓóÔôÕõÖö
ØøŒœºŠšßÞþÙùÚúÛû
ÜüÝýŸÿ´ˆ˜¨¸
«»"¿¡§
@©®¤¢£¥±×÷¼½¾
°¹²³ƒ¬αβγδµπΩ 
-
- -
-
-
- - Index: typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css =================================================================== --- typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (révision 7077) +++ typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css (copie de travail) @@ -457,12 +457,12 @@ width: 150px; } .htmlarea-window .emoticon { - display: block; - float: left; - padding: 5px; - width: 20px; - height: 20px; - vertical-align: middle; + display: block; + float: left; + padding: 5px; + width: 20px; + height: 20px; + vertical-align: middle; } /* Selectors for the FindReplace dialogue */ .htmlarea-find-replace .long-label { @@ -470,29 +470,20 @@ width:30em; } /* Selectors for the CharacterMap dialogue */ -.htmlarea-character-map #selectedCharacter { - margin:5px 5px 10px 5px; - white-space:nowrap; +.htmlarea-window .character-map .character { + display: block; + float: left; + width: 20px; + font-size: 14px; + font-weight: bold; + text-align: center; + padding: 5px 3px; + border: 1px solid transparent; } -.htmlarea-character-map #selectedCharacter div { - display:inline; +.htmlarea-window .character-map .character:hover { + background-color: #FFFFFF; + border: 1px solid #A2AAB8; } -.htmlarea-character-map #showcharacter { - background-color:#FFF; -} -.htmlarea-character-map table { - cursor:pointer; - background-color:#ADAD9C; - border:1px inset; -} -.htmlarea-character-map td.character { - font-size:14px;font-weight:bold; - text-align:center; - background-color:#FFF; -} -.htmlarea-character-map td.character-hilite { - background-color:Highlight;color:HighlightText; -} /* Selectors for the SpellChecker dialogue */ .htmlarea-spell-check .dictionaries { float:right; Index: typo3/sysext/t3skin/rtehtmlarea/htmlarea.css =================================================================== --- typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (révision 7077) +++ typo3/sysext/t3skin/rtehtmlarea/htmlarea.css (copie de travail) @@ -464,12 +464,12 @@ width: 150px; } .htmlarea-window .emoticon { - display: block; - float: left; - padding: 5px; - width: 20px; - height: 20px; - vertical-align: middle; + display: block; + float: left; + padding: 5px; + width: 20px; + height: 20px; + vertical-align: middle; } /* Selectors for the FindReplace dialogue */ .htmlarea-find-replace .long-label { @@ -477,29 +477,20 @@ width:30em; } /* Selectors for the CharacterMap dialogue */ -.htmlarea-character-map #selectedCharacter { - margin:5px 5px 10px 5px; - white-space:nowrap; +.htmlarea-window .character-map .character { + display: block; + float: left; + width: 20px; + font-size: 14px; + font-weight: bold; + text-align: center; + padding: 5px 3px; + border: 1px solid transparent; } -.htmlarea-character-map #selectedCharacter div { - display:inline; +.htmlarea-window .character-map .character:hover { + background-color: #FFFFFF; + border: 1px solid #A2AAB8; } -.htmlarea-character-map #showcharacter { - background-color:#FFF; -} -.htmlarea-character-map table { - cursor:pointer; - background-color:#ADAD9C; - border:1px inset; -} -.htmlarea-character-map td.character { - font-size:14px;font-weight:bold; - text-align:center; - background-color:#FFF; -} -.htmlarea-character-map td.character-hilite { - background-color:Highlight;color:HighlightText; -} /* Selectors for the SpellChecker dialogue */ .htmlarea-spell-check .dictionaries { float:right;