Index: /CKEditor/branches/features/aria/_source/lang/en.js
===================================================================
--- /CKEditor/branches/features/aria/_source/lang/en.js (revision 4962)
+++ /CKEditor/branches/features/aria/_source/lang/en.js (revision 4963)
@@ -530,4 +530,5 @@
insertOption: 'Replace actual contents',
selectPromptMsg: 'Please select the template to open in the editor',
+ optionsArea : 'Templates Options',
emptyListMsg : '(No templates defined)'
},
Index: /CKEditor/branches/features/aria/_source/plugins/templates/dialogs/templates.js
===================================================================
--- /CKEditor/branches/features/aria/_source/plugins/templates/dialogs/templates.js (revision 4962)
+++ /CKEditor/branches/features/aria/_source/plugins/templates/dialogs/templates.js (revision 4963)
@@ -8,107 +8,132 @@
var doc = CKEDITOR.document;
- var listId = 'cke' + CKEDITOR.tools.getNextNumber();
-
- // Constructs the HTML view of the specified templates data.
- function renderTemplatesList( editor, templatesDefinitions )
- {
- var listDiv = doc.getById( listId );
-
- // clear loading wait text.
- listDiv.setHtml( '' );
-
- for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
- {
- var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
- imagesPath = definition.imagesPath,
- templates = definition.templates;
-
- for ( var j = 0 ; j < templates.length ; j++ )
- {
- var template = templates[ j ];
- listDiv.append( createTemplateItem( editor, template, imagesPath ) );
- }
- }
- }
-
- function createTemplateItem( editor, template, imagesPath )
- {
- var div = doc.createElement( 'div' );
- div.setAttribute( 'class', 'cke_tpl_item' );
-
- // Build the inner HTML of our new item DIV.
- var html = '
';
-
- if( template.image && imagesPath )
- html += ' | ';
-
- html += '' + template.title + ' ';
-
- if( template.description )
- html += '' + template.description + '';
-
- html += ' |
';
-
- div.setHtml( html );
-
- div.on( 'mouseover', function()
- {
- div.addClass( 'cke_tpl_hover' );
- });
-
- div.on( 'mouseout', function()
- {
- div.removeClass( 'cke_tpl_hover' );
- });
-
- div.on( 'click', function()
- {
- insertTemplate( editor, template.html );
- });
-
- return div;
- }
-
- /**
- * Insert the specified template content
- * to document.
- * @param {Number} index
- */
- function insertTemplate( editor, html )
- {
- var dialog = CKEDITOR.dialog.getCurrent(),
- isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
-
- if( isInsert )
- {
- // Everything should happen after the document is loaded (#4073).
- editor.on( 'contentDom', function( evt )
- {
- evt.removeListener();
- dialog.hide();
-
- // Place the cursor at the first editable place.
- var range = new CKEDITOR.dom.range( editor.document );
- range.moveToElementEditStart( editor.document.getBody() );
- range.select( true );
- } );
- editor.setData( html );
- }
- else
- {
- editor.insertHtml( html );
- dialog.hide();
- }
- }
-
CKEDITOR.dialog.add( 'templates', function( editor )
{
+ // Constructs the HTML view of the specified templates data.
+ function renderTemplatesList( container, templatesDefinitions )
+ {
+ // clear loading wait text.
+ container.setHtml( '' );
+
+ for ( var i = 0 ; i < templatesDefinitions.length ; i++ )
+ {
+ var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
+ imagesPath = definition.imagesPath,
+ templates = definition.templates,
+ count = templates.length;
+
+ for ( var j = 0 ; j < count ; j++ )
+ {
+ var template = templates[ j ],
+ item = createTemplateItem( template, imagesPath );
+ item.setAttribute( 'aria-posinset', j + 1 );
+ item.setAttribute( 'aria-setsize', count );
+ container.append( item );
+ }
+ }
+ }
+
+ function createTemplateItem( template, imagesPath )
+ {
+ var item = CKEDITOR.dom.element.createFromHtml(
+ '' +
+ '' +
+ '' );
+
+ // Build the inner HTML of our new item DIV.
+ var html = '';
+
+ if( template.image && imagesPath )
+ html += ' | ';
+
+ html += '' + template.title + ' ';
+
+ if( template.description )
+ html += '' + template.description + '';
+
+ html += ' |
';
+
+ item.getFirst().setHtml( html );
+
+ item.on( 'click', function() { insertTemplate( template.html ); } );
+
+ return item;
+ }
+
+ /**
+ * Insert the specified template content into editor.
+ * @param {Number} index
+ */
+ function insertTemplate( html )
+ {
+ var dialog = CKEDITOR.dialog.getCurrent(),
+ isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
+
+ if( isInsert )
+ {
+ // Everything should happen after the document is loaded (#4073).
+ editor.on( 'contentDom', function( evt )
+ {
+ evt.removeListener();
+ dialog.hide();
+
+ // Place the cursor at the first editable place.
+ var range = new CKEDITOR.dom.range( editor.document );
+ range.moveToElementEditStart( editor.document.getBody() );
+ range.select( true );
+ } );
+ editor.setData( html );
+ }
+ else
+ {
+ editor.insertHtml( html );
+ dialog.hide();
+ }
+ }
+
+ function keyNavigation( evt )
+ {
+ var target = evt.data.getTarget(),
+ position = listContainer.getPosition( target );
+
+ // Keyboard navigation for template list.
+ if( position > CKEDITOR.POSITION_CONTAINS )
+ {
+ var keystroke = evt.data.getKeystroke(),
+ items = listContainer.getElementsByTag( 'a' ),
+ focusItem;
+
+ if( items )
+ {
+ switch ( keystroke )
+ {
+ case 40 : // ARROW-DOWN
+ focusItem = target.getNext()
+ || items.getItem( 0 );
+ break;
+
+ case 38 : // ARROW-UP
+ focusItem = target.getPrevious()
+ || items.getItem( items.count() - 1 );
+ break;
+
+ case 13 : // ENTER
+ case 32 : // SPACE
+ target.fire( 'click' );
+ }
+
+ if( focusItem )
+ {
+ focusItem.focus();
+ evt.data.preventDefault();
+ }
+ }
+ }
+ };
+
// Load skin at first.
CKEDITOR.skins.load( editor, 'templates' );
- /**
- * Load templates once.
- */
- var isLoaded = false;
+ var listContainer;
return {
@@ -138,7 +163,14 @@
},
{
+ id : "templatesList",
type : 'html',
+ focus: function()
+ {
+ // Move focus to the first list item if available.
+ try { this.getElement().getElementsByTag( 'a' ).getItem( 0 ).focus(); }
+ catch( er ){}
+ },
html :
- '' +
+ '
'
@@ -160,4 +192,7 @@
onShow : function()
{
+ var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
+ listContainer = templatesListField.getElement();
+
CKEDITOR.loadTemplates( editor.config.templates_files, function()
{
@@ -165,14 +200,23 @@
if ( templates.length )
- renderTemplatesList( editor, templates );
+ {
+ renderTemplatesList( listContainer, templates );
+ templatesListField.focus();
+ }
else
{
- var listCtEl = doc.getById( listId );
- listCtEl.setHtml(
- '
' +
+ listContainer.setHtml(
+ '
' +
'' + editor.lang.templates.emptyListMsg + '' +
- '
' );
+ '
' );
}
});
+
+ this._.element.on( 'keydown', keyNavigation );
+ },
+
+ onHide : function ()
+ {
+ this._.element.removeListener( 'keydown', keyNavigation );
}
};
Index: /CKEditor/branches/features/aria/_source/skins/kama/templates.css
===================================================================
--- /CKEditor/branches/features/aria/_source/skins/kama/templates.css (revision 4962)
+++ /CKEditor/branches/features/aria/_source/skins/kama/templates.css (revision 4963)
@@ -12,5 +12,6 @@
border: #dcdcdc 2px solid;
background-color: #ffffff;
- overflow: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
width: 100%;
height: 220px;
@@ -50,5 +51,7 @@
}
-.cke_skin_kama .cke_tpl_hover
+.cke_skin_kama .cke_tpl_list a:active .cke_tpl_item,
+.cke_skin_kama .cke_tpl_list a:hover .cke_tpl_item,
+.cke_skin_kama .cke_tpl_list a:focus .cke_tpl_item
{
border: #ff9933 1px solid !important;
@@ -60,5 +63,7 @@
* Fix property 'cursor' doesn't inherit on table
*/
-.cke_skin_kama .cke_tpl_hover *
+.cke_skin_kama .cke_tpl_list a:active *,
+.cke_skin_kama .cke_tpl_list a:hover *,
+.cke_skin_kama .cke_tpl_list a:focus *
{
cursor: inherit;