JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.2.2
[ckeditor.git] / _source / plugins / specialchar / dialogs / specialchar.js
index 943e8cd..7c37603 100644 (file)
@@ -9,7 +9,32 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
         * Simulate "this" of a dialog for non-dialog events.\r
         * @type {CKEDITOR.dialog}\r
         */\r
-       var dialog;\r
+       var dialog,\r
+               lang = editor.lang.specialChar;\r
+\r
+       var insertSpecialChar = function ( specialChar )\r
+       {\r
+               var selection = editor.getSelection(),\r
+                       ranges    = selection.getRanges(),\r
+                       range, textNode;\r
+\r
+               editor.fire( 'saveSnapshot' );\r
+\r
+               for ( var i = 0, len = ranges.length ; i < len ; i++ )\r
+               {\r
+                       range = ranges[ i ];\r
+                       range.deleteContents();\r
+\r
+                       textNode =  CKEDITOR.dom.element.createFromHtml( specialChar );\r
+                       range.insertNode( textNode );\r
+               }\r
+\r
+               range.moveToPosition( textNode, CKEDITOR.POSITION_AFTER_END );\r
+               range.select();\r
+\r
+               editor.fire( 'saveSnapshot' );\r
+       };\r
+\r
        var onChoice = function( evt )\r
        {\r
                var target, value;\r
@@ -22,7 +47,12 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                {\r
                        target.removeClass( "cke_light_background" );\r
                        dialog.hide();\r
-                       editor.insertHtml( value );\r
+\r
+                       // Firefox has bug on insert chars into a element use its own API. (#5170)\r
+                       if ( CKEDITOR.env.gecko )\r
+                               insertSpecialChar( value );\r
+                       else\r
+                               editor.insertHtml( value );\r
                }\r
        };\r
 \r
@@ -80,36 +110,10 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                var element = ev.getTarget();\r
                var relative, nodeToMove;\r
                var keystroke = ev.getKeystroke();\r
+               var rtl = editor.lang.dir == 'rtl';\r
 \r
                switch ( keystroke )\r
                {\r
-                       // RIGHT-ARROW\r
-                       case 39 :\r
-                               // relative is TD\r
-                               if ( ( relative = element.getParent().getNext() ) )\r
-                               {\r
-                                       nodeToMove = relative.getChild( 0 );\r
-                                       if ( nodeToMove.type == 1 )\r
-                                       {\r
-                                               nodeToMove.focus();\r
-                                               onBlur( null, element );\r
-                                               onFocus( null, nodeToMove );\r
-                                       }\r
-                               }\r
-                               ev.preventDefault();\r
-                               break;\r
-                       // LEFT-ARROW\r
-                       case 37 :\r
-                               // relative is TD\r
-                               if ( ( relative = element.getParent().getPrevious() ) )\r
-                               {\r
-                                       nodeToMove = relative.getChild( 0 );\r
-                                       nodeToMove.focus();\r
-                                       onBlur( null, element );\r
-                                       onFocus( null, nodeToMove );\r
-                               }\r
-                               ev.preventDefault();\r
-                               break;\r
                        // UP-ARROW\r
                        case 38 :\r
                                // relative is TR\r
@@ -143,6 +147,9 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                onChoice( { data: ev } );\r
                                ev.preventDefault();\r
                                break;\r
+\r
+                       // RIGHT-ARROW\r
+                       case rtl ? 37 : 39 :\r
                        // TAB\r
                        case 9 :\r
                                // relative is TD\r
@@ -174,6 +181,9 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                                onBlur( null, element );\r
                                }\r
                                break;\r
+\r
+                       // LEFT-ARROW\r
+                       case rtl ? 39 : 37 :\r
                        // SHIFT + TAB\r
                        case CKEDITOR.SHIFT + 9 :\r
                                // relative is TD\r
@@ -204,7 +214,7 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
        });\r
 \r
        return {\r
-               title : editor.lang.specialChar.title,\r
+               title : lang.title,\r
                minWidth : 430,\r
                minHeight : 280,\r
                buttons : [ CKEDITOR.dialog.cancelButton ],\r
@@ -219,51 +229,84 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                '[',']','^','_','`',\r
                                'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',\r
                                'q','r','s','t','u','v','w','x','y','z',\r
-                               '{','|','}','~','&euro;','&lsquo;','&rsquo;','&rsquo;','&ldquo;',\r
-                               '&rdquo;','&ndash;','&mdash;','&iexcl;','&cent;','&pound;',\r
-                               '&curren;','&yen;','&brvbar;','&sect;','&uml;','&copy;','&ordf;',\r
-                               '&laquo;','&not;','&reg;','&macr;','&deg;','&plusmn;','&sup2;',\r
-                               '&sup3;','&acute;','&micro;','&para;','&middot;','&cedil;',\r
-                               '&sup1;','&ordm;','&raquo;','&frac14;','&frac12;','&frac34;',\r
-                               '&iquest;','&Agrave;','&Aacute;','&Acirc;','&Atilde;','&Auml;',\r
-                               '&Aring;','&AElig;','&Ccedil;','&Egrave;','&Eacute;','&Ecirc;',\r
-                               '&Euml;','&Igrave;','&Iacute;','&Icirc;','&Iuml;','&ETH;',\r
-                               '&Ntilde;','&Ograve;','&Oacute;','&Ocirc;','&Otilde;','&Ouml;',\r
-                               '&times;','&Oslash;','&Ugrave;','&Uacute;','&Ucirc;','&Uuml;',\r
-                               '&Yacute;','&THORN;','&szlig;','&agrave;','&aacute;','&acirc;',\r
-                               '&atilde;','&auml;','&aring;','&aelig;','&ccedil;','&egrave;',\r
-                               '&eacute;','&ecirc;','&euml;','&igrave;','&iacute;','&icirc;',\r
-                               '&iuml;','&eth;','&ntilde;','&ograve;','&oacute;','&ocirc;',\r
-                               '&otilde;','&ouml;','&divide;','&oslash;','&ugrave;','&uacute;',\r
-                               '&ucirc;','&uuml;','&uuml;','&yacute;','&thorn;','&yuml;',\r
-                               '&OElig;','&oelig;','&#372;','&#374','&#373','&#375;','&sbquo;',\r
-                               '&#8219;','&bdquo;','&hellip;','&trade;','&#9658;','&bull;',\r
-                               '&rarr;','&rArr;','&hArr;','&diams;','&asymp;'\r
+                               '{','|','}','~','&euro;(EURO SIGN)','&lsquo;(LEFT SINGLE QUOTATION MARK)','&rsquo;(RIGHT SINGLE QUOTATION MARK)','&ldquo;(LEFT DOUBLE QUOTATION MARK)',\r
+                               '&rdquo;(RIGHT DOUBLE QUOTATION MARK)','&ndash;(EN DASH)','&mdash;(EM DASH)','&iexcl;(INVERTED EXCLAMATION MARK)','&cent;(CENT SIGN)','&pound;(POUND SIGN)',\r
+                               '&curren;(CURRENCY SIGN)','&yen;(YEN SIGN)','&brvbar;(BROKEN BAR)','&sect;(SECTION SIGN)','&uml;(DIAERESIS)','&copy;(COPYRIGHT SIGN)','&ordf;(FEMININE ORDINAL INDICATOR)',\r
+                               '&laquo;(LEFT-POINTING DOUBLE ANGLE QUOTATION MARK)','&not;(NOT SIGN)','&reg;(REGISTERED SIGN)','&macr;(MACRON)','&deg;(DEGREE SIGN)','&plusmn;(PLUS-MINUS SIGN)','&sup2;(SUPERSCRIPT TWO)',\r
+                               '&sup3;(SUPERSCRIPT THREE)','&acute;(ACUTE ACCENT)','&micro;(MICRO SIGN)','&para;(PILCROW SIGN)','&middot;(MIDDLE DOT)','&cedil;(CEDILLA)',\r
+                               '&sup1;(SUPERSCRIPT ONE)','&ordm;(MASCULINE ORDINAL INDICATOR)','&raquo;(RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK)','&frac14;(VULGAR FRACTION ONE QUARTER)','&frac12;(VULGAR FRACTION ONE HALF)','&frac34;(VULGAR FRACTION THREE QUARTERS)',\r
+                               '&iquest;(INVERTED QUESTION MARK)','&Agrave;(LATIN CAPITAL LETTER A WITH GRAVE)','&Aacute;(LATIN CAPITAL LETTER A WITH ACUTE)','&Acirc;(LATIN CAPITAL LETTER A WITH CIRCUMFLEX)','&Atilde;(LATIN CAPITAL LETTER A WITH TILDE)','&Auml;(LATIN CAPITAL LETTER A WITH DIAERESIS)',\r
+                               '&Aring;(LATIN CAPITAL LETTER A WITH RING ABOVE)','&AElig;(LATIN CAPITAL LETTER AE)','&Ccedil;(LATIN CAPITAL LETTER C WITH CEDILLA)','&Egrave;(LATIN CAPITAL LETTER E WITH GRAVE)','&Eacute;(LATIN CAPITAL LETTER E WITH ACUTE)','&Ecirc;(LATIN CAPITAL LETTER E WITH CIRCUMFLEX)',\r
+                               '&Euml;(LATIN CAPITAL LETTER E WITH DIAERESIS)','&Igrave;(LATIN CAPITAL LETTER I WITH GRAVE)','&Iacute;(LATIN CAPITAL LETTER I WITH ACUTE)','&Icirc;(LATIN CAPITAL LETTER I WITH CIRCUMFLEX)','&Iuml;(LATIN CAPITAL LETTER I WITH DIAERESIS)','&ETH;(LATIN CAPITAL LETTER ETH)',\r
+                               '&Ntilde;(LATIN CAPITAL LETTER N WITH TILDE)','&Ograve;(LATIN CAPITAL LETTER O WITH GRAVE)','&Oacute;(LATIN CAPITAL LETTER O WITH ACUTE)','&Ocirc;(LATIN CAPITAL LETTER O WITH CIRCUMFLEX)','&Otilde;(LATIN CAPITAL LETTER O WITH TILDE)','&Ouml;(LATIN CAPITAL LETTER O WITH DIAERESIS)',\r
+                               '&times;(MULTIPLICATION SIGN)','&Oslash;(LATIN CAPITAL LETTER O WITH STROKE)','&Ugrave;(LATIN CAPITAL LETTER U WITH GRAVE)','&Uacute;(LATIN CAPITAL LETTER U WITH ACUTE)','&Ucirc;(LATIN CAPITAL LETTER U WITH CIRCUMFLEX)','&Uuml;(LATIN CAPITAL LETTER U WITH DIAERESIS)',\r
+                               '&Yacute;(LATIN CAPITAL LETTER Y WITH ACUTE)','&THORN;(LATIN CAPITAL LETTER THORN)','&szlig;(LATIN SMALL LETTER SHARP S)','&agrave;(LATIN SMALL LETTER A WITH GRAVE)','&aacute;(LATIN SMALL LETTER A WITH ACUTE)','&acirc;(LATIN SMALL LETTER A WITH CIRCUMFLEX)',\r
+                               '&atilde;(LATIN SMALL LETTER A WITH TILDE)','&auml;(LATIN SMALL LETTER A WITH DIAERESIS)','&aring;(LATIN SMALL LETTER A WITH RING ABOVE)','&aelig;(LATIN SMALL LETTER AE)','&ccedil;(LATIN SMALL LETTER C WITH CEDILLA)','&egrave;(LATIN SMALL LETTER E WITH GRAVE)',\r
+                               '&eacute;(LATIN SMALL LETTER E WITH ACUTE)','&ecirc;(LATIN SMALL LETTER E WITH CIRCUMFLEX)','&euml;(LATIN SMALL LETTER E WITH DIAERESIS)','&igrave;(LATIN SMALL LETTER I WITH GRAVE)','&iacute;(LATIN SMALL LETTER I WITH ACUTE)','&icirc;(LATIN SMALL LETTER I WITH CIRCUMFLEX)',\r
+                               '&iuml;(LATIN SMALL LETTER I WITH DIAERESIS)','&eth;(LATIN SMALL LETTER ETH)','&ntilde;(LATIN SMALL LETTER N WITH TILDE)','&ograve;(LATIN SMALL LETTER O WITH GRAVE)','&oacute;(LATIN SMALL LETTER O WITH ACUTE)','&ocirc;(LATIN SMALL LETTER O WITH CIRCUMFLEX)',\r
+                               '&otilde;(LATIN SMALL LETTER O WITH TILDE)','&ouml;(LATIN SMALL LETTER O WITH DIAERESIS)',\r
+                               '&divide;(DIVISION SIGN)','&oslash;(LATIN SMALL LETTER O WITH STROKE)',\r
+                               '&ugrave;(LATIN SMALL LETTER U WITH GRAVE)','&uacute;(LATIN SMALL LETTER U WITH ACUTE)',\r
+                               '&ucirc;(LATIN SMALL LETTER U WITH CIRCUMFLEX)','&uuml;(LATIN SMALL LETTER U WITH DIAERESIS)',\r
+                               '&uuml;(LATIN SMALL LETTER U WITH DIAERESIS)','&yacute;(LATIN SMALL LETTER Y WITH ACUTE)','&thorn;(LATIN SMALL LETTER THORN)','&yuml;(LATIN SMALL LETTER Y WITH DIAERESIS)',\r
+                               '&OElig;(LATIN CAPITAL LIGATURE OE)',\r
+                               '&oelig;(LATIN SMALL LIGATURE OE)','&#372;(LATIN CAPITAL LETTER W WITH CIRCUMFLEX)',\r
+                               '&#374(LATIN CAPITAL LETTER Y WITH CIRCUMFLEX)','&#373(LATIN SMALL LETTER W WITH CIRCUMFLEX)',\r
+                               '&#375;(LATIN SMALL LETTER Y WITH CIRCUMFLEX)','&sbquo;(SINGLE LOW-9 QUOTATION MARK)',\r
+                               '&#8219;(SINGLE HIGH-REVERSED-9 QUOTATION MARK)','&bdquo;(DOUBLE LOW-9 QUOTATION MARK)','&hellip;(HORIZONTAL ELLIPSIS)',\r
+                               '&trade;(TRADE MARK SIGN)','&#9658;(BLACK RIGHT-POINTING POINTER)','&bull;(BULLET)',\r
+                               '&rarr;(RIGHTWARDS ARROW)','&rArr;(RIGHTWARDS DOUBLE ARROW)','&hArr;(LEFT RIGHT DOUBLE ARROW)','&diams;(BLACK DIAMOND SUIT)','&asymp;(ALMOST EQUAL TO)'\r
                        ],\r
                onLoad :  function()\r
                {\r
                        var columns = this.definition.charColumns,\r
                                chars = this.definition.chars;\r
 \r
-                       var html = [ '<table style="width: 320px; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ];\r
+                       var charsTableLabel =  'specialchar_table_label' + CKEDITOR.tools.getNextNumber();\r
+                       var html = [ '<table role="listbox" aria-labelledby="' + charsTableLabel + '"' +\r
+                                                                       ' style="width: 320px; height: 100%; border-collapse: separate;"' +\r
+                                                                       ' align="center" cellspacing="2" cellpadding="2" border="0">' ];\r
+\r
+                       var i = 0,\r
+                               size = chars.length,\r
+                               character,\r
+                               charDesc;\r
 \r
-                       var i = 0 ;\r
-                       while ( i < chars.length )\r
+                       while ( i < size )\r
                        {\r
                                html.push( '<tr>' ) ;\r
 \r
-                               for( var j = 0 ; j < columns ; j++, i++ )\r
+                               for ( var j = 0 ; j < columns ; j++, i++ )\r
                                {\r
-                                       if ( chars[ i ] )\r
+                                       if ( ( character = chars[ i ] ) )\r
                                        {\r
+                                               charDesc = '';\r
+                                               character = character.replace( /\((.*?)\)/, function( match, desc )\r
+                                                       {\r
+                                                               charDesc = desc;\r
+                                                               return '';\r
+                                                       } );\r
+\r
+                                               // Use character in case description unavailable.\r
+                                               charDesc = charDesc || character;\r
+\r
+                                               var charLabelId =  'cke_specialchar_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
+\r
                                                html.push(\r
-                                                       '<td class="cke_dark_background" style="cursor: default">' +\r
-                                                       '<a href="javascript: void(0);" style="cursor: inherit; display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', chars[i].replace( /&/g, '&amp;' ), '"' +\r
+                                                       '<td class="cke_dark_background" style="cursor: default" role="presentation">' +\r
+                                                       '<a href="javascript: void(0);" role="option"' +\r
+                                                       ' aria-posinset="' + ( i +1 ) + '"',\r
+                                                       ' aria-setsize="' + size + '"',\r
+                                                       ' aria-labelledby="' + charLabelId + '"',\r
+                                                       ' style="cursor: inherit; display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', CKEDITOR.tools.htmlEncode( charDesc ), '"' +\r
                                                        ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' +\r
                                                        ' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' +\r
                                                        ' tabindex="-1">' +\r
                                                        '<span style="margin: 0 auto;cursor: inherit">' +\r
-                                                       chars[i] +\r
+                                                       character +\r
+                                                       '</span>' +\r
+                                                       '<span class="cke_voice_label" id="' + charLabelId + '">' +\r
+                                                       charDesc +\r
                                                        '</span></a>');\r
                                        }\r
                                        else\r
@@ -274,7 +317,7 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                html.push( '</tr>' );\r
                        }\r
 \r
-                       html.push( '</tbody></table>' );\r
+                       html.push( '</tbody></table>', '<span id="' + charsTableLabel + '" class="cke_voice_label">' + lang.options +'</span>' );\r
 \r
                        this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );\r
                },\r
@@ -300,22 +343,21 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                                                onMouseout : onBlur,\r
                                                                focus : function()\r
                                                                {\r
-                                                                       var firstChar = this.getElement().getChild( [0, 0, 0, 0, 0] );\r
+                                                                       var firstChar = this.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
                                                                        setTimeout(function()\r
                                                                        {\r
                                                                                firstChar.focus();\r
                                                                                onFocus( null, firstChar );\r
                                                                        });\r
                                                                },\r
-                                                               // Needed only for webkit.\r
                                                                onShow : function()\r
                                                                {\r
-                                                                       var firstChar = this.getElement().getChild( [0, 0, 0, 0, 0] );\r
-                                                                       setTimeout(function()\r
-                                                                       {\r
-                                                                               firstChar.focus();\r
-                                                                               onFocus( null, firstChar );\r
-                                                                       });\r
+                                                                       var firstChar = this.getElement().getChild( [ 0, 0, 0, 0, 0 ] );\r
+                                                                       setTimeout( function()\r
+                                                                               {\r
+                                                                                       firstChar.focus();\r
+                                                                                       onFocus( null, firstChar );\r
+                                                                               });\r
                                                                },\r
                                                                onLoad : function( event )\r
                                                                {\r
@@ -340,13 +382,15 @@ CKEDITOR.dialog.add( 'specialchar', function( editor )
                                                                                        {\r
                                                                                                type : 'html',\r
                                                                                                id : 'charPreview',\r
-                                                                                               style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
+                                                                                               className : 'cke_dark_background',\r
+                                                                                               style : 'border:1px solid #eeeeee;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
                                                                                                html : '<div>&nbsp;</div>'\r
                                                                                        },\r
                                                                                        {\r
                                                                                                type : 'html',\r
                                                                                                id : 'htmlPreview',\r
-                                                                                               style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
+                                                                                               className : 'cke_dark_background',\r
+                                                                                               style : 'border:1px solid #eeeeee;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
                                                                                                html : '<div>&nbsp;</div>'\r
                                                                                        }\r
                                                                                ]\r