diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-20 00:55:51 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-01-20 00:55:51 +0100 |
commit | c63493c899de714b05b0521bb38aab60d19030ef (patch) | |
tree | fcb2b261afa0f3c2bd6b48929b64724c71192bae /release/samples/toolbarconfigurator/index.html | |
download | ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.gz ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.zst ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.zip |
Validation initiale4.6.2.1
Diffstat (limited to 'release/samples/toolbarconfigurator/index.html')
-rw-r--r-- | release/samples/toolbarconfigurator/index.html | 446 |
1 files changed, 446 insertions, 0 deletions
diff --git a/release/samples/toolbarconfigurator/index.html b/release/samples/toolbarconfigurator/index.html new file mode 100644 index 0000000..1dac0b4 --- /dev/null +++ b/release/samples/toolbarconfigurator/index.html | |||
@@ -0,0 +1,446 @@ | |||
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> | ||