]>
Commit | Line | Data |
---|---|---|
1 | <!DOCTYPE html> | |
2 | <!-- | |
3 | Copyright (c) 2003-2017, 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-2017, <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> |