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