|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. |
|
4 For licensing, see LICENSE.md or http://ckeditor.com/license |
|
5 --> |
|
6 <!--[if IE 8]><html class="ie8"><![endif]--> |
|
7 <!--[if gt IE 8]><html><![endif]--> |
|
8 <!--[if !IE]><!--><html><!--<![endif]--> |
|
9 <head> |
|
10 <meta charset="utf-8"> |
|
11 <title>Toolbar Configurator</title> |
|
12 <script src="../../ckeditor.js"></script> |
|
13 <script> |
|
14 if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) |
|
15 CKEDITOR.tools.enableHtml5Elements( document ); |
|
16 </script> |
|
17 <link rel="stylesheet" href="lib/codemirror/codemirror.css"> |
|
18 <link rel="stylesheet" href="lib/codemirror/show-hint.css"> |
|
19 <link rel="stylesheet" href="lib/codemirror/neo.css"> |
|
20 <link rel="stylesheet" href="css/fontello.css"> |
|
21 <link rel="stylesheet" href="../css/samples.css"> |
|
22 </head> |
|
23 <body id="toolbar"> |
|
24 |
|
25 <nav class="navigation-a"> |
|
26 <div class="grid-container"> |
|
27 <ul class="navigation-a-left grid-width-70"> |
|
28 <li><a href="http://ckeditor.com">Project Homepage</a></li> |
|
29 <li><a href="http://dev.ckeditor.com/">I found a bug</a></li> |
|
30 <li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li> |
|
31 </ul> |
|
32 <ul class="navigation-a-right grid-width-30"> |
|
33 <li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li> |
|
34 </ul> |
|
35 </div> |
|
36 </nav> |
|
37 |
|
38 <header class="header-a"> |
|
39 <div class="grid-container"> |
|
40 <h1 class="header-a-logo grid-width-30"> |
|
41 <a href="../index.html"><img src="../img/logo.png" alt="CKEditor Logo"></a> |
|
42 </h1> |
|
43 <nav class="navigation-b grid-width-70"> |
|
44 <ul> |
|
45 <li><a href="../index.html" class="button-a">Start</a></li> |
|
46 <li><a href="index.html" class="button-a button-a-background">Toolbar configurator</a></li> |
|
47 </ul> |
|
48 </nav> |
|
49 </div> |
|
50 </header> |
|
51 |
|
52 <main> |
|
53 <div class="adjoined-top"> |
|
54 <div class="grid-container"> |
|
55 <div class="content grid-width-100"> |
|
56 <div class="grid-container-nested"> |
|
57 <h1 class="grid-width-60"> |
|
58 Toolbar Configurator |
|
59 <a href="#help-content" type="button" title="Configurator help" id="help" class="button-a button-a-background button-a-no-text icon-pos-left icon-question-mark">Help</a> |
|
60 </h1> |
|
61 |
|
62 <div class="grid-width-40 grid-switch-magic"> |
|
63 <div class="switch"> |
|
64 <span class="balloon-a balloon-a-se">Select configurator type</span> |
|
65 <input type="radio" name="radio" data-num="1" id="radio-basic" /> |
|
66 <input type="radio" name="radio" data-num="2" id="radio-advanced" /> |
|
67 <label data-for="1" for="radio-basic">Basic</label> |
|
68 <span class="switch-inner"> |
|
69 <span class="handler"></span> |
|
70 </span> |
|
71 <label data-for="2" for="radio-advanced">Advanced</label> |
|
72 </div> |
|
73 </div> |
|
74 </div> |
|
75 </div> |
|
76 </div> |
|
77 </div> |
|
78 <div class="adjoined-bottom"> |
|
79 <div class="grid-container"> |
|
80 <div class="grid-width-100"> |
|
81 <div class="editors-container"> |
|
82 <div id="editor-basic"></div> |
|
83 <div id="editor-advanced"></div> |
|
84 </div> |
|
85 </div> |
|
86 </div> |
|
87 </div> |
|
88 |
|
89 <div class="grid-container configurator"> |
|
90 <div class="content grid-width-100"> |
|
91 <div class="configurator"> |
|
92 <div> |
|
93 <div id="toolbarModifierWrapper"></div> |
|
94 </div> |
|
95 </div> |
|
96 </div> |
|
97 </div> |
|
98 |
|
99 <div id="help-content"> |
|
100 <div class="grid-container"> |
|
101 <div class="grid-width-100"> |
|
102 <h2>What Am I Doing Here?</h2> |
|
103 |
|
104 <div class="grid-container grid-container-nested"> |
|
105 <div class="basic"> |
|
106 <div class="grid-width-50"> |
|
107 <p>Arrange <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">toolbar groups</a>, toggle <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-removeButtons">button visibility</a> according to your needs and get your toolbar configuration.</p> |
|
108 <p>You can replace the content of the <a href="../../config.js"><code>config.js</code></a> file with the generated configuration. If you already set some configuration options you will need to merge both configurations.</p> |
|
109 </div> |
|
110 <div class="grid-width-50"> |
|
111 <p>Read more about different ways of <a href="http://docs.ckeditor.com/#!/guide/dev_configuration">setting configuration</a> and do not forget about <strong>clearing browser cache</strong>.</p> |
|
112 <p>Arranging toolbar groups is the recommended way of configuring the toolbar, but if you need more freedom you can use the <a href="#advanced">advanced configurator</a>.</p> |
|
113 </div> |
|
114 </div> |
|
115 <div class="advanced" style="display: none;"> |
|
116 <div class="grid-width-50"> |
|
117 <p>With this code editor you can edit your <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">toolbar configuration</a> live.</p> |
|
118 <p>You can replace the content of the <a href="../../config.js"><code>config.js</code></a> file with the generated configuration. If you already set some configuration options you will need to merge both configurations.</p> |
|
119 </div> |
|
120 <div class="grid-width-50"> |
|
121 <p>Read more about different ways of <a href="http://docs.ckeditor.com/#!/guide/dev_configuration">setting configuration</a> and do not forget about <strong>clearing browser cache</strong>.</p> |
|
122 </div> |
|
123 </div> |
|
124 </div> |
|
125 |
|
126 <p class="grid-container grid-container-nested"> |
|
127 <button type="button" class="help-content-close grid-width-100 button-a button-a-background">Got it. Let's play!</button> |
|
128 </p> |
|
129 </div> |
|
130 </div> |
|
131 </div> |
|
132 </main> |
|
133 |
|
134 <footer class="footer-a grid-container"> |
|
135 <p class="grid-width-100"> |
|
136 CKEditor – The text editor for the Internet – <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|
137 </p> |
|
138 <p class="grid-width-100" id="copy"> |
|
139 Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved. |
|
140 </p> |
|
141 </footer> |
|
142 |
|
143 <script src="lib/codemirror/codemirror.js"></script> |
|
144 <script src="lib/codemirror/javascript.js"></script> |
|
145 <script src="lib/codemirror/show-hint.js"></script> |
|
146 |
|
147 <script src="js/fulltoolbareditor.js"></script> |
|
148 <script src="js/abstracttoolbarmodifier.js"></script> |
|
149 <script src="js/toolbarmodifier.js"></script> |
|
150 <script src="js/toolbartextmodifier.js"></script> |
|
151 <script src="../js/sf.js"></script> |
|
152 |
|
153 <script> |
|
154 ( function() { |
|
155 'use strict'; |
|
156 |
|
157 var mode = ( window.location.hash.substr( 1 ) === 'advanced' ) ? 'advanced' : 'basic', |
|
158 configuratorSection = CKEDITOR.document.findOne( 'main > .grid-container.configurator' ), |
|
159 basicInstruction = CKEDITOR.document.findOne( '#help-content .basic' ), |
|
160 advancedInstruction = CKEDITOR.document.findOne( '#help-content .advanced' ), |
|
161 |
|
162 // Configurator mode switcher. |
|
163 modeSwitchBasic = CKEDITOR.document.getById( 'radio-basic' ), |
|
164 modeSwitchAdvanced = CKEDITOR.document.getById( 'radio-advanced' ); |
|
165 |
|
166 // Initial setup |
|
167 function updateSwitcher() { |
|
168 if ( mode === 'advanced' ) { |
|
169 modeSwitchAdvanced.$.checked = true; |
|
170 } else { |
|
171 modeSwitchBasic.$.checked = true; |
|
172 } |
|
173 } |
|
174 |
|
175 updateSwitcher(); |
|
176 |
|
177 CKEDITOR.document.getWindow().on( 'hashchange', function( e ) { |
|
178 var hash = window.location.hash.substr( 1 ); |
|
179 if ( !( hash === 'advanced' || hash === 'basic' ) ) { |
|
180 return; |
|
181 } |
|
182 mode = hash; |
|
183 onToolbarsDone( mode ); |
|
184 } ); |
|
185 |
|
186 CKEDITOR.document.getWindow().on( 'resize', function() { |
|
187 updateToolbar( ( mode === 'basic' ? toolbarModifier : toolbarTextModifier )[ 'editorInstance' ] ); |
|
188 } ); |
|
189 |
|
190 function onRefresh( modifier ) { |
|
191 modifier = modifier || this; |
|
192 |
|
193 if ( mode === 'basic' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) { |
|
194 return; |
|
195 } |
|
196 |
|
197 // CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems. |
|
198 if ( mode === 'advanced' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) { |
|
199 modifier.codeContainer.refresh(); |
|
200 } |
|
201 |
|
202 updateToolbar( modifier.editorInstance ); |
|
203 } |
|
204 |
|
205 function updateToolbar( editor ) { |
|
206 var editorContainer = editor.container; |
|
207 |
|
208 // Not always editor is loaded. |
|
209 if ( !editorContainer ) { |
|
210 return; |
|
211 } |
|
212 |
|
213 var displayStyle = editorContainer.getStyle( 'display' ); |
|
214 |
|
215 editorContainer.setStyle( 'display', 'block' ); |
|
216 |
|
217 var newHeight = editorContainer.getSize( 'height' ); |
|
218 |
|
219 var newMarginTop = parseInt( editorContainer.getComputedStyle( 'margin-top' ), 10 ); |
|
220 newMarginTop = ( isNaN( newMarginTop ) ? 0 : Number( newMarginTop ) ); |
|
221 |
|
222 var newMarginBottom = parseInt( editorContainer.getComputedStyle( 'margin-bottom' ), 10 ); |
|
223 newMarginBottom = ( isNaN( newMarginBottom ) ? 0 : Number( newMarginBottom ) ); |
|
224 |
|
225 var result = newHeight + newMarginTop + newMarginBottom; |
|
226 |
|
227 editorContainer.setStyle( 'display', displayStyle ); |
|
228 |
|
229 editor.container.getAscendant( 'div' ).setStyle( 'height', result + 'px' ); |
|
230 } |
|
231 |
|
232 var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' ); |
|
233 |
|
234 var done = 0; |
|
235 toolbarModifier.init( onToolbarInit ); |
|
236 toolbarModifier.onRefresh = onRefresh; |
|
237 |
|
238 CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer ); |
|
239 |
|
240 var toolbarTextModifier = new ToolbarConfigurator.ToolbarTextModifier( 'editor-advanced' ); |
|
241 toolbarTextModifier.init( onToolbarInit ); |
|
242 toolbarTextModifier.onRefresh = onRefresh; |
|
243 |
|
244 function onToolbarInit() { |
|
245 if ( ++done === 2 ) { |
|
246 onToolbarsDone(); |
|
247 |
|
248 positionSticky.watch( CKEDITOR.document.findOne( '.toolbar' ), function() { |
|
249 return mode === 'advanced'; |
|
250 } ); |
|
251 } |
|
252 } |
|
253 |
|
254 function onToolbarsDone() { |
|
255 if ( mode === 'basic' ) { |
|
256 toggleModeBasic( false ); |
|
257 } else { |
|
258 toggleModeAdvanced( false ); |
|
259 } |
|
260 |
|
261 updateSwitcher(); |
|
262 |
|
263 setTimeout( function() { |
|
264 CKEDITOR.document.findOne( '.editors-container' ).addClass( 'active' ); |
|
265 CKEDITOR.document.findOne( '#toolbarModifierWrapper' ).addClass( 'active' ); |
|
266 }, 200 ); |
|
267 } |
|
268 |
|
269 CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarTextModifier.mainContainer ); |
|
270 |
|
271 function toogleModeSwitch( onElement, offElement, onModifier, offModifier ) { |
|
272 onElement.addClass( 'fancy-button-active' ); |
|
273 offElement.removeClass( 'fancy-button-active' ); |
|
274 |
|
275 onModifier.showUI(); |
|
276 offModifier.hideUI(); |
|
277 } |
|
278 |
|
279 function toggleModeBasic( callOnRefresh ) { |
|
280 callOnRefresh = ( callOnRefresh !== false ); |
|
281 mode = 'basic'; |
|
282 window.location.hash = '#basic'; |
|
283 toogleModeSwitch( modeSwitchBasic, modeSwitchAdvanced, toolbarModifier, toolbarTextModifier ); |
|
284 |
|
285 configuratorSection.removeClass( 'freed-width' ); |
|
286 basicInstruction.show(); |
|
287 advancedInstruction.hide(); |
|
288 |
|
289 callOnRefresh && onRefresh( toolbarModifier ); |
|
290 } |
|
291 |
|
292 function toggleModeAdvanced( callOnRefresh ) { |
|
293 callOnRefresh = ( callOnRefresh !== false ); |
|
294 mode = 'advanced'; |
|
295 window.location.hash = '#advanced'; |
|
296 toogleModeSwitch( modeSwitchAdvanced, modeSwitchBasic, toolbarTextModifier, toolbarModifier ); |
|
297 |
|
298 configuratorSection.addClass( 'freed-width' ); |
|
299 advancedInstruction.show(); |
|
300 basicInstruction.hide(); |
|
301 |
|
302 callOnRefresh && onRefresh( toolbarTextModifier ); |
|
303 } |
|
304 |
|
305 modeSwitchBasic.on( 'click', toggleModeBasic ); |
|
306 modeSwitchAdvanced.on( 'click', toggleModeAdvanced ); |
|
307 |
|
308 // |
|
309 // Position:sticky for the toolbar. |
|
310 // |
|
311 |
|
312 // Will make elements behave like they were styled with position:sticky. |
|
313 var positionSticky = { |
|
314 // Store object: { |
|
315 // element: CKEDITOR.dom.element, // Element which will float. |
|
316 // placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce. |
|
317 // isFixed: boolean // Whether element float now. |
|
318 // } |
|
319 watched: [], |
|
320 |
|
321 active: [], |
|
322 |
|
323 staticContainer: null, |
|
324 |
|
325 init: function() { |
|
326 var element = CKEDITOR.dom.element.createFromHtml( |
|
327 '<div class="staticContainer">' + |
|
328 '<div class="grid-container" >' + |
|
329 '<div class="grid-width-100">' + |
|
330 '<div class="inner"></div>' + |
|
331 '</div>' + |
|
332 '</div>' + |
|
333 '</div>' ); |
|
334 |
|
335 this.staticContainer = element.findOne( '.inner' ); |
|
336 |
|
337 CKEDITOR.document.getBody().append( element ); |
|
338 }, |
|
339 |
|
340 watch: function( element, preventFunc ) { |
|
341 this.watched.push( { |
|
342 element: element, |
|
343 placeholder: new CKEDITOR.dom.element( 'div' ), |
|
344 isFixed: false, |
|
345 preventFunc: preventFunc |
|
346 } ); |
|
347 }, |
|
348 |
|
349 checkAll: function() { |
|
350 for ( var i = 0; i < this.watched.length; i++ ) { |
|
351 this.check( this.watched[ i ] ); |
|
352 } |
|
353 }, |
|
354 |
|
355 check: function( element ) { |
|
356 var isFixed = element.isFixed; |
|
357 var shouldBeFixed = this.shouldBeFixed( element ); |
|
358 |
|
359 // Nothing to be done. |
|
360 if ( isFixed === shouldBeFixed ) { |
|
361 return; |
|
362 } |
|
363 |
|
364 var placeholder = element.placeholder; |
|
365 |
|
366 if ( isFixed ) { |
|
367 // Unfixing. |
|
368 |
|
369 element.element.insertBefore( placeholder ); |
|
370 placeholder.remove(); |
|
371 |
|
372 element.element.removeStyle( 'margin' ); |
|
373 |
|
374 this.active.splice( CKEDITOR.tools.indexOf( this.active, element ), 1 ); |
|
375 |
|
376 } else { |
|
377 // Fixing. |
|
378 placeholder.setStyle( 'width', element.element.getSize( 'width' ) + 'px' ); |
|
379 placeholder.setStyle( 'height', element.element.getSize( 'height' ) + 'px' ); |
|
380 placeholder.setStyle( 'margin-bottom', element.element.getComputedStyle( 'margin-bottom' ) ); |
|
381 placeholder.setStyle( 'display', element.element.getComputedStyle( 'display' ) ); |
|
382 placeholder.insertAfter( element.element ); |
|
383 |
|
384 this.staticContainer.append( element.element ); |
|
385 |
|
386 this.active.push( element ); |
|
387 } |
|
388 |
|
389 element.isFixed = !element.isFixed; |
|
390 }, |
|
391 |
|
392 shouldBeFixed: function( element ) { |
|
393 if ( element.preventFunc && element.preventFunc() ) { |
|
394 return false; |
|
395 } |
|
396 |
|
397 // If element is already fixed we are checking it's placeholder. |
|
398 var related = ( element.isFixed ? element.placeholder : element.element ), |
|
399 clientRect = related.$.getBoundingClientRect(), |
|
400 staticHeight = this.staticContainer.getSize('height' ), |
|
401 elemHeight = element.element.getSize( 'height' ); |
|
402 |
|
403 if ( element.isFixed ) { |
|
404 return ( clientRect.top + elemHeight < staticHeight ); |
|
405 } else { |
|
406 return ( clientRect.top < staticHeight ); |
|
407 } |
|
408 } |
|
409 }; |
|
410 |
|
411 positionSticky.init(); |
|
412 |
|
413 CKEDITOR.document.getWindow().on( 'scroll', |
|
414 new CKEDITOR.tools.eventsBuffer( 100, positionSticky.checkAll, positionSticky ).input |
|
415 ); |
|
416 |
|
417 // Make the toolbar sticky. |
|
418 positionSticky.watch( CKEDITOR.document.findOne( '.editors-container' ) ); |
|
419 |
|
420 // Help button and help-content. |
|
421 ( function() { |
|
422 var helpButton = CKEDITOR.document.getById( 'help' ), |
|
423 helpContent = CKEDITOR.document.getById( 'help-content' ); |
|
424 |
|
425 // Don't show help button on IE8 because it's unsupported by Pico Modal. |
|
426 if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) { |
|
427 helpButton.hide(); |
|
428 } else { |
|
429 // Display help modal when the button is clicked. |
|
430 helpButton.on( 'click', function( evt ) { |
|
431 SF.modal( { |
|
432 // Clone modal content from DOM. |
|
433 content: helpContent.getHtml(), |
|
434 |
|
435 afterCreate: function( modal ) { |
|
436 // Enable modal content button to close the modal. |
|
437 new CKEDITOR.dom.element( modal.modalElem() ).findOne( '.help-content-close' ).once( 'click', modal.close ); |
|
438 } |
|
439 } ).show(); |
|
440 } ); |
|
441 } |
|
442 } )(); |
|
443 } )(); |
|
444 </script> |
|
445 </body> |
|
446 </html> |