| 1 | /*
|
|---|
| 2 | Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
|
|---|
| 3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
|---|
| 4 | */
|
|---|
| 5 |
|
|---|
| 6 | (function()
|
|---|
| 7 | {
|
|---|
| 8 | var doc = CKEDITOR.document;
|
|---|
| 9 |
|
|---|
| 10 | CKEDITOR.dialog.add( 'templates', function( editor )
|
|---|
| 11 | {
|
|---|
| 12 | // Constructs the HTML view of the specified templates data.
|
|---|
| 13 | function renderTemplatesList( container, templatesDefinitions )
|
|---|
| 14 | {
|
|---|
| 15 | // clear loading wait text.
|
|---|
| 16 | container.setHtml( '' );
|
|---|
| 17 |
|
|---|
| 18 | for ( var i = 0, totalDefs = templatesDefinitions.length ; i < totalDefs ; i++ )
|
|---|
| 19 | {
|
|---|
| 20 | var definition = CKEDITOR.getTemplates( templatesDefinitions[ i ] ),
|
|---|
| 21 | imagesPath = definition.imagesPath,
|
|---|
| 22 | templates = definition.templates,
|
|---|
| 23 | count = templates.length;
|
|---|
| 24 |
|
|---|
| 25 | for ( var j = 0 ; j < count ; j++ )
|
|---|
| 26 | {
|
|---|
| 27 | var template = templates[ j ],
|
|---|
| 28 | item = createTemplateItem( template, imagesPath );
|
|---|
| 29 | item.setAttribute( 'aria-posinset', j + 1 );
|
|---|
| 30 | item.setAttribute( 'aria-setsize', count );
|
|---|
| 31 | container.append( item );
|
|---|
| 32 | }
|
|---|
| 33 | }
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | function createTemplateItem( template, imagesPath )
|
|---|
| 37 | {
|
|---|
| 38 | var item = CKEDITOR.dom.element.createFromHtml(
|
|---|
| 39 | '<a href="javascript:void(0)" tabIndex="-1" role="option" >' +
|
|---|
| 40 | '<div class="cke_tpl_item"></div>' +
|
|---|
| 41 | '</a>' );
|
|---|
| 42 |
|
|---|
| 43 | // Build the inner HTML of our new item DIV.
|
|---|
| 44 | var html = '<table style="width:350px;" class="cke_tpl_preview" role="presentation"><tr>';
|
|---|
| 45 |
|
|---|
| 46 | if ( template.image && imagesPath )
|
|---|
| 47 | html += '<td class="cke_tpl_preview_img"><img src="' + CKEDITOR.getUrl( imagesPath + template.image ) + '"' + ( CKEDITOR.env.ie6Compat ? ' onload="this.width=this.width"' : '' ) + ' alt="" title=""></td>';
|
|---|
| 48 |
|
|---|
| 49 | html += '<td style="white-space:normal;"><span class="cke_tpl_title">' + template.title + '</span><br/>';
|
|---|
| 50 |
|
|---|
| 51 | if ( template.description )
|
|---|
| 52 | html += '<span>' + template.description + '</span>';
|
|---|
| 53 |
|
|---|
| 54 | html += '</td></tr></table>';
|
|---|
| 55 |
|
|---|
| 56 | item.getFirst().setHtml( html );
|
|---|
| 57 |
|
|---|
| 58 | item.on( 'click', function() { insertTemplate( template.html ); } );
|
|---|
| 59 |
|
|---|
| 60 | return item;
|
|---|
| 61 | }
|
|---|
| 62 |
|
|---|
| 63 | /**
|
|---|
| 64 | * Insert the specified template content into editor.
|
|---|
| 65 | * @param {Number} index
|
|---|
| 66 | */
|
|---|
| 67 | function insertTemplate( html )
|
|---|
| 68 | {
|
|---|
| 69 | var dialog = CKEDITOR.dialog.getCurrent(),
|
|---|
| 70 | isInsert = dialog.getValueOf( 'selectTpl', 'chkInsertOpt' );
|
|---|
| 71 |
|
|---|
| 72 | if ( isInsert )
|
|---|
| 73 | {
|
|---|
| 74 | // Everything should happen after the document is loaded (#4073).
|
|---|
| 75 | editor.on( 'contentDom', function( evt )
|
|---|
| 76 | {
|
|---|
| 77 | evt.removeListener();
|
|---|
| 78 | dialog.hide();
|
|---|
| 79 |
|
|---|
| 80 | // Place the cursor at the first editable place.
|
|---|
| 81 | var range = new CKEDITOR.dom.range( editor.document );
|
|---|
| 82 | range.moveToElementEditStart( editor.document.getBody() );
|
|---|
| 83 | range.select( 1 );
|
|---|
| 84 | setTimeout( function()
|
|---|
| 85 | {
|
|---|
| 86 | editor.fire( 'saveSnapshot' );
|
|---|
| 87 | }, 0 );
|
|---|
| 88 | });
|
|---|
| 89 |
|
|---|
| 90 | editor.fire( 'saveSnapshot' );
|
|---|
| 91 | editor.setData( html );
|
|---|
| 92 | }
|
|---|
| 93 | else
|
|---|
| 94 | {
|
|---|
| 95 | editor.insertHtml( html );
|
|---|
| 96 | dialog.hide();
|
|---|
| 97 | }
|
|---|
| 98 | }
|
|---|
| 99 |
|
|---|
| 100 | function keyNavigation( evt )
|
|---|
| 101 | {
|
|---|
| 102 | var target = evt.data.getTarget(),
|
|---|
| 103 | onList = listContainer.equals( target );
|
|---|
| 104 |
|
|---|
| 105 | // Keyboard navigation for template list.
|
|---|
| 106 | if ( onList || listContainer.contains( target ) )
|
|---|
| 107 | {
|
|---|
| 108 | var keystroke = evt.data.getKeystroke(),
|
|---|
| 109 | items = listContainer.getElementsByTag( 'a' ),
|
|---|
| 110 | focusItem;
|
|---|
| 111 |
|
|---|
| 112 | if ( items )
|
|---|
| 113 | {
|
|---|
| 114 | // Focus not yet onto list items?
|
|---|
| 115 | if ( onList )
|
|---|
| 116 | focusItem = items.getItem( 0 );
|
|---|
| 117 | else
|
|---|
| 118 | {
|
|---|
| 119 | switch ( keystroke )
|
|---|
| 120 | {
|
|---|
| 121 | case 40 : // ARROW-DOWN
|
|---|
| 122 | focusItem = target.getNext();
|
|---|
| 123 | break;
|
|---|
| 124 |
|
|---|
| 125 | case 38 : // ARROW-UP
|
|---|
| 126 | focusItem = target.getPrevious();
|
|---|
| 127 | break;
|
|---|
| 128 |
|
|---|
| 129 | case 13 : // ENTER
|
|---|
| 130 | case 32 : // SPACE
|
|---|
| 131 | target.fire( 'click' );
|
|---|
| 132 | }
|
|---|
| 133 | }
|
|---|
| 134 |
|
|---|
| 135 | if ( focusItem )
|
|---|
| 136 | {
|
|---|
| 137 | focusItem.focus();
|
|---|
| 138 | evt.data.preventDefault();
|
|---|
| 139 | }
|
|---|
| 140 | }
|
|---|
| 141 | }
|
|---|
| 142 | }
|
|---|
| 143 |
|
|---|
| 144 | // Load skin at first.
|
|---|
| 145 | CKEDITOR.skins.load( editor, 'templates' );
|
|---|
| 146 |
|
|---|
| 147 | var listContainer;
|
|---|
| 148 |
|
|---|
| 149 | var templateListLabelId = 'cke_tpl_list_label_' + CKEDITOR.tools.getNextNumber(),
|
|---|
| 150 | lang = editor.lang.templates,
|
|---|
| 151 | config = editor.config;
|
|---|
| 152 | return {
|
|---|
| 153 | title :editor.lang.templates.title,
|
|---|
| 154 |
|
|---|
| 155 | minWidth : CKEDITOR.env.ie ? 440 : 400,
|
|---|
| 156 | minHeight : 340,
|
|---|
| 157 |
|
|---|
| 158 | contents :
|
|---|
| 159 | [
|
|---|
| 160 | {
|
|---|
| 161 | id :'selectTpl',
|
|---|
| 162 | label : lang.title,
|
|---|
| 163 | elements :
|
|---|
| 164 | [
|
|---|
| 165 | {
|
|---|
| 166 | type : 'vbox',
|
|---|
| 167 | padding : 5,
|
|---|
| 168 | children :
|
|---|
| 169 | [
|
|---|
| 170 | {
|
|---|
| 171 | id : 'selectTplText',
|
|---|
| 172 | type : 'html',
|
|---|
| 173 | html :
|
|---|
| 174 | '<span>' +
|
|---|
| 175 | lang.selectPromptMsg +
|
|---|
| 176 | '</span>'
|
|---|
| 177 | },
|
|---|
| 178 | {
|
|---|
| 179 | id : 'templatesList',
|
|---|
| 180 | type : 'html',
|
|---|
| 181 | focus: true,
|
|---|
| 182 | html :
|
|---|
| 183 | '<div class="cke_tpl_list" tabIndex="-1" role="listbox" aria-labelledby="' + templateListLabelId+ '">' +
|
|---|
| 184 | '<div class="cke_tpl_loading"><span></span></div>' +
|
|---|
| 185 | '</div>' +
|
|---|
| 186 | '<span class="cke_voice_label" id="' + templateListLabelId + '">' + lang.options+ '</span>'
|
|---|
| 187 | },
|
|---|
| 188 | {
|
|---|
| 189 | id : 'chkInsertOpt',
|
|---|
| 190 | type : 'checkbox',
|
|---|
| 191 | label : lang.insertOption,
|
|---|
| 192 | 'default' : config.templates_replaceContent
|
|---|
| 193 | }
|
|---|
| 194 | ]
|
|---|
| 195 | }
|
|---|
| 196 | ]
|
|---|
| 197 | }
|
|---|
| 198 | ],
|
|---|
| 199 |
|
|---|
| 200 | buttons : [ CKEDITOR.dialog.cancelButton ],
|
|---|
| 201 |
|
|---|
| 202 | onShow : function()
|
|---|
| 203 | {
|
|---|
| 204 | var templatesListField = this.getContentElement( 'selectTpl' , 'templatesList' );
|
|---|
| 205 | listContainer = templatesListField.getElement();
|
|---|
| 206 |
|
|---|
| 207 | CKEDITOR.loadTemplates( config.templates_files, function()
|
|---|
| 208 | {
|
|---|
| 209 | var templates = ( config.templates || 'default' ).split( ',' );
|
|---|
| 210 |
|
|---|
| 211 | if ( templates.length )
|
|---|
| 212 | {
|
|---|
| 213 | renderTemplatesList( listContainer, templates );
|
|---|
| 214 | templatesListField.focus();
|
|---|
| 215 | }
|
|---|
| 216 | else
|
|---|
| 217 | {
|
|---|
| 218 | listContainer.setHtml(
|
|---|
| 219 | '<div class="cke_tpl_empty">' +
|
|---|
| 220 | '<span>' + lang.emptyListMsg + '</span>' +
|
|---|
| 221 | '</div>' );
|
|---|
| 222 | }
|
|---|
| 223 | });
|
|---|
| 224 |
|
|---|
| 225 | this._.element.on( 'keydown', keyNavigation );
|
|---|
| 226 | },
|
|---|
| 227 |
|
|---|
| 228 | onHide : function()
|
|---|
| 229 | {
|
|---|
| 230 | this._.element.removeListener( 'keydown', keyNavigation );
|
|---|
| 231 | }
|
|---|
| 232 | };
|
|---|
| 233 | });
|
|---|
| 234 | })();
|
|---|
