X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=_source%2Fplugins%2Ftemplates%2Fdialogs%2Ftemplates.js;h=d0bd148eaba984418c77a6faa17eac8959cc7179;hb=48b1db88210b4160dce439c6e3e32e14af8c106b;hp=770eeefb0471420a5d9fa382e025bd703fbe382b;hpb=c6e377a02b54abc07129d72b632763c727476a15;p=ckeditor.git
diff --git a/_source/plugins/templates/dialogs/templates.js b/_source/plugins/templates/dialogs/templates.js
index 770eeef..d0bd148 100644
--- a/_source/plugins/templates/dialogs/templates.js
+++ b/_source/plugins/templates/dialogs/templates.js
@@ -1,5 +1,5 @@
/*
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
@@ -7,116 +7,148 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
{
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 );
+ 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( '' );
- // clear loading wait text.
- listDiv.setHtml( '' );
+ for ( var i = 0, totalDefs = templatesDefinitions.length ; i < totalDefs ; i++ )
+ {
+ var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
+ imagesPath = definition.imagesPath,
+ templates = definition.templates,
+ count = templates.length;
- 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 < count ; j++ )
+ {
+ var template = templates[ j ],
+ item = createTemplateItem( template, imagesPath );
+ item.setAttribute( 'aria-posinset', j + 1 );
+ item.setAttribute( 'aria-setsize', count );
+ container.append( item );
+ }
+ }
+ }
- for ( var j = 0 ; j < templates.length ; j++ )
+ function createTemplateItem( template, imagesPath )
{
- var template = templates[ j ];
- listDiv.append( createTemplateItem( editor, template, imagesPath ) );
- }
- }
- }
+ var item = CKEDITOR.dom.element.createFromHtml(
+ '' +
+ '' +
+ '' );
- 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 = '
';
- // Build the inner HTML of our new item DIV.
- var html = '';
+ if ( template.image && imagesPath )
+ html += ' | ';
- if ( template.image && imagesPath )
- html += ' | ';
+ html += '' + template.title + ' ';
- html += ' | ' + template.title + ' ';
+ if ( template.description )
+ html += '' + template.description + '';
- if ( template.description )
- html += '' + template.description + '';
+ html += ' |
';
- html += '
';
+ item.getFirst().setHtml( html );
- div.setHtml( html );
+ item.on( 'click', function() { insertTemplate( template.html ); } );
- div.on( 'mouseover', function()
- {
- div.addClass( 'cke_tpl_hover' );
- });
+ return item;
+ }
- div.on( 'mouseout', function()
+ /**
+ * Insert the specified template content into editor.
+ * @param {Number} index
+ */
+ function insertTemplate( html )
{
- div.removeClass( 'cke_tpl_hover' );
- });
+ var dialog = CKEDITOR.dialog.getCurrent(),
+ isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
- 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 );
- setTimeout( function ()
+ 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( 1 );
+ setTimeout( function()
+ {
+ editor.fire( 'saveSnapshot' );
+ }, 0 );
+ });
+
editor.fire( 'saveSnapshot' );
- }, 0 );
- } );
+ editor.setData( html );
+ }
+ else
+ {
+ editor.insertHtml( html );
+ dialog.hide();
+ }
+ }
- editor.fire( 'saveSnapshot' );
- editor.setData( html );
- }
- else
- {
- editor.insertHtml( html );
- dialog.hide();
- }
- }
+ function keyNavigation( evt )
+ {
+ var target = evt.data.getTarget(),
+ onList = listContainer.equals( target );
+
+ // Keyboard navigation for template list.
+ if ( onList || listContainer.contains( target ) )
+ {
+ var keystroke = evt.data.getKeystroke(),
+ items = listContainer.getElementsByTag( 'a' ),
+ focusItem;
+
+ if ( items )
+ {
+ // Focus not yet onto list items?
+ if ( onList )
+ focusItem = items.getItem( 0 );
+ else
+ {
+ switch ( keystroke )
+ {
+ case 40 : // ARROW-DOWN
+ focusItem = target.getNext();
+ break;
+
+ case 38 : // ARROW-UP
+ focusItem = target.getPrevious();
+ break;
+
+ case 13 : // ENTER
+ case 32 : // SPACE
+ target.fire( 'click' );
+ }
+ }
+
+ if ( focusItem )
+ {
+ focusItem.focus();
+ evt.data.preventDefault();
+ }
+ }
+ }
+ }
- CKEDITOR.dialog.add( 'templates', function( editor )
- {
// Load skin at first.
CKEDITOR.skins.load( editor, 'templates' );
- /**
- * Load templates once.
- */
- var isLoaded = false;
+ var listContainer;
+ var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
+ lang = editor.lang.templates,
+ config = editor.config;
return {
title :editor.lang.templates.title,
@@ -127,7 +159,7 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
[
{
id :'selectTpl',
- label : editor.lang.templates.title,
+ label : lang.title,
elements :
[
{
@@ -139,21 +171,24 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
type : 'html',
html :
'' +
- editor.lang.templates.selectPromptMsg +
+ lang.selectPromptMsg +
''
},
{
+ id : 'templatesList',
type : 'html',
+ focus: true,
html :
- '' +
+ '' + lang.options+ ''
},
{
id : 'chkInsertOpt',
type : 'checkbox',
- label : editor.lang.templates.insertOption,
- 'default' : editor.config.templates_replaceContent
+ label : lang.insertOption,
+ 'default' : config.templates_replaceContent
}
]
}
@@ -165,21 +200,33 @@ For licensing, see LICENSE.html or http://ckeditor.com/license
onShow : function()
{
- CKEDITOR.loadTemplates( editor.config.templates_files, function()
+ var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
+ listContainer = templatesListField.getElement();
+
+ CKEDITOR.loadTemplates( config.templates_files, function()
{
- var templates = editor.config.templates.split( ',' );
+ var templates = ( config.templates || 'default' ).split( ',' );
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 + '' +
+ '' + lang.emptyListMsg + '' +
'
' );
}
});
+
+ this._.element.on( 'keydown', keyNavigation );
+ },
+
+ onHide : function()
+ {
+ this._.element.removeListener( 'keydown', keyNavigation );
}
};
});