1 /* 2 Copyright (c) 2003-2012, 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 })(); 235