1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ckeditor/samples/toolbarconfigurator/index.html Thu Dec 15 18:10:20 2016 +0300
1.3 @@ -0,0 +1,446 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 +Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
1.7 +For licensing, see LICENSE.md or http://ckeditor.com/license
1.8 +-->
1.9 +<!--[if IE 8]><html class="ie8"><![endif]-->
1.10 +<!--[if gt IE 8]><html><![endif]-->
1.11 +<!--[if !IE]><!--><html><!--<![endif]-->
1.12 +<head>
1.13 + <meta charset="utf-8">
1.14 + <title>Toolbar Configurator</title>
1.15 + <script src="../../ckeditor.js"></script>
1.16 + <script>
1.17 + if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
1.18 + CKEDITOR.tools.enableHtml5Elements( document );
1.19 + </script>
1.20 + <link rel="stylesheet" href="lib/codemirror/codemirror.css">
1.21 + <link rel="stylesheet" href="lib/codemirror/show-hint.css">
1.22 + <link rel="stylesheet" href="lib/codemirror/neo.css">
1.23 + <link rel="stylesheet" href="css/fontello.css">
1.24 + <link rel="stylesheet" href="../css/samples.css">
1.25 +</head>
1.26 +<body id="toolbar">
1.27 +
1.28 +<nav class="navigation-a">
1.29 + <div class="grid-container">
1.30 + <ul class="navigation-a-left grid-width-70">
1.31 + <li><a href="http://ckeditor.com">Project Homepage</a></li>
1.32 + <li><a href="http://dev.ckeditor.com/">I found a bug</a></li>
1.33 + <li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
1.34 + </ul>
1.35 + <ul class="navigation-a-right grid-width-30">
1.36 + <li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li>
1.37 + </ul>
1.38 + </div>
1.39 +</nav>
1.40 +
1.41 +<header class="header-a">
1.42 + <div class="grid-container">
1.43 + <h1 class="header-a-logo grid-width-30">
1.44 + <a href="../index.html"><img src="../img/logo.png" alt="CKEditor Logo"></a>
1.45 + </h1>
1.46 + <nav class="navigation-b grid-width-70">
1.47 + <ul>
1.48 + <li><a href="../index.html" class="button-a">Start</a></li>
1.49 + <li><a href="index.html" class="button-a button-a-background">Toolbar configurator</a></li>
1.50 + </ul>
1.51 + </nav>
1.52 + </div>
1.53 +</header>
1.54 +
1.55 +<main>
1.56 + <div class="adjoined-top">
1.57 + <div class="grid-container">
1.58 + <div class="content grid-width-100">
1.59 + <div class="grid-container-nested">
1.60 + <h1 class="grid-width-60">
1.61 + Toolbar Configurator
1.62 + <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>
1.63 + </h1>
1.64 +
1.65 + <div class="grid-width-40 grid-switch-magic">
1.66 + <div class="switch">
1.67 + <span class="balloon-a balloon-a-se">Select configurator type</span>
1.68 + <input type="radio" name="radio" data-num="1" id="radio-basic" />
1.69 + <input type="radio" name="radio" data-num="2" id="radio-advanced" />
1.70 + <label data-for="1" for="radio-basic">Basic</label>
1.71 + <span class="switch-inner">
1.72 + <span class="handler"></span>
1.73 + </span>
1.74 + <label data-for="2" for="radio-advanced">Advanced</label>
1.75 + </div>
1.76 + </div>
1.77 + </div>
1.78 + </div>
1.79 + </div>
1.80 + </div>
1.81 + <div class="adjoined-bottom">
1.82 + <div class="grid-container">
1.83 + <div class="grid-width-100">
1.84 + <div class="editors-container">
1.85 + <div id="editor-basic"></div>
1.86 + <div id="editor-advanced"></div>
1.87 + </div>
1.88 + </div>
1.89 + </div>
1.90 + </div>
1.91 +
1.92 + <div class="grid-container configurator">
1.93 + <div class="content grid-width-100">
1.94 + <div class="configurator">
1.95 + <div>
1.96 + <div id="toolbarModifierWrapper"></div>
1.97 + </div>
1.98 + </div>
1.99 + </div>
1.100 + </div>
1.101 +
1.102 + <div id="help-content">
1.103 + <div class="grid-container">
1.104 + <div class="grid-width-100">
1.105 + <h2>What Am I Doing Here?</h2>
1.106 +
1.107 + <div class="grid-container grid-container-nested">
1.108 + <div class="basic">
1.109 + <div class="grid-width-50">
1.110 + <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>
1.111 + <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>
1.112 + </div>
1.113 + <div class="grid-width-50">
1.114 + <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>
1.115 + <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>
1.116 + </div>
1.117 + </div>
1.118 + <div class="advanced" style="display: none;">
1.119 + <div class="grid-width-50">
1.120 + <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>
1.121 + <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>
1.122 + </div>
1.123 + <div class="grid-width-50">
1.124 + <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>
1.125 + </div>
1.126 + </div>
1.127 + </div>
1.128 +
1.129 + <p class="grid-container grid-container-nested">
1.130 + <button type="button" class="help-content-close grid-width-100 button-a button-a-background">Got it. Let's play!</button>
1.131 + </p>
1.132 + </div>
1.133 + </div>
1.134 + </div>
1.135 +</main>
1.136 +
1.137 +<footer class="footer-a grid-container">
1.138 + <p class="grid-width-100">
1.139 + CKEditor – The text editor for the Internet – <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
1.140 + </p>
1.141 + <p class="grid-width-100" id="copy">
1.142 + Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.
1.143 + </p>
1.144 +</footer>
1.145 +
1.146 +<script src="lib/codemirror/codemirror.js"></script>
1.147 +<script src="lib/codemirror/javascript.js"></script>
1.148 +<script src="lib/codemirror/show-hint.js"></script>
1.149 +
1.150 +<script src="js/fulltoolbareditor.js"></script>
1.151 +<script src="js/abstracttoolbarmodifier.js"></script>
1.152 +<script src="js/toolbarmodifier.js"></script>
1.153 +<script src="js/toolbartextmodifier.js"></script>
1.154 +<script src="../js/sf.js"></script>
1.155 +
1.156 +<script>
1.157 + ( function() {
1.158 + 'use strict';
1.159 +
1.160 + var mode = ( window.location.hash.substr( 1 ) === 'advanced' ) ? 'advanced' : 'basic',
1.161 + configuratorSection = CKEDITOR.document.findOne( 'main > .grid-container.configurator' ),
1.162 + basicInstruction = CKEDITOR.document.findOne( '#help-content .basic' ),
1.163 + advancedInstruction = CKEDITOR.document.findOne( '#help-content .advanced' ),
1.164 +
1.165 + // Configurator mode switcher.
1.166 + modeSwitchBasic = CKEDITOR.document.getById( 'radio-basic' ),
1.167 + modeSwitchAdvanced = CKEDITOR.document.getById( 'radio-advanced' );
1.168 +
1.169 + // Initial setup
1.170 + function updateSwitcher() {
1.171 + if ( mode === 'advanced' ) {
1.172 + modeSwitchAdvanced.$.checked = true;
1.173 + } else {
1.174 + modeSwitchBasic.$.checked = true;
1.175 + }
1.176 + }
1.177 +
1.178 + updateSwitcher();
1.179 +
1.180 + CKEDITOR.document.getWindow().on( 'hashchange', function( e ) {
1.181 + var hash = window.location.hash.substr( 1 );
1.182 + if ( !( hash === 'advanced' || hash === 'basic' ) ) {
1.183 + return;
1.184 + }
1.185 + mode = hash;
1.186 + onToolbarsDone( mode );
1.187 + } );
1.188 +
1.189 + CKEDITOR.document.getWindow().on( 'resize', function() {
1.190 + updateToolbar( ( mode === 'basic' ? toolbarModifier : toolbarTextModifier )[ 'editorInstance' ] );
1.191 + } );
1.192 +
1.193 + function onRefresh( modifier ) {
1.194 + modifier = modifier || this;
1.195 +
1.196 + if ( mode === 'basic' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {
1.197 + return;
1.198 + }
1.199 +
1.200 + // CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems.
1.201 + if ( mode === 'advanced' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {
1.202 + modifier.codeContainer.refresh();
1.203 + }
1.204 +
1.205 + updateToolbar( modifier.editorInstance );
1.206 + }
1.207 +
1.208 + function updateToolbar( editor ) {
1.209 + var editorContainer = editor.container;
1.210 +
1.211 + // Not always editor is loaded.
1.212 + if ( !editorContainer ) {
1.213 + return;
1.214 + }
1.215 +
1.216 + var displayStyle = editorContainer.getStyle( 'display' );
1.217 +
1.218 + editorContainer.setStyle( 'display', 'block' );
1.219 +
1.220 + var newHeight = editorContainer.getSize( 'height' );
1.221 +
1.222 + var newMarginTop = parseInt( editorContainer.getComputedStyle( 'margin-top' ), 10 );
1.223 + newMarginTop = ( isNaN( newMarginTop ) ? 0 : Number( newMarginTop ) );
1.224 +
1.225 + var newMarginBottom = parseInt( editorContainer.getComputedStyle( 'margin-bottom' ), 10 );
1.226 + newMarginBottom = ( isNaN( newMarginBottom ) ? 0 : Number( newMarginBottom ) );
1.227 +
1.228 + var result = newHeight + newMarginTop + newMarginBottom;
1.229 +
1.230 + editorContainer.setStyle( 'display', displayStyle );
1.231 +
1.232 + editor.container.getAscendant( 'div' ).setStyle( 'height', result + 'px' );
1.233 + }
1.234 +
1.235 + var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' );
1.236 +
1.237 + var done = 0;
1.238 + toolbarModifier.init( onToolbarInit );
1.239 + toolbarModifier.onRefresh = onRefresh;
1.240 +
1.241 + CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer );
1.242 +
1.243 + var toolbarTextModifier = new ToolbarConfigurator.ToolbarTextModifier( 'editor-advanced' );
1.244 + toolbarTextModifier.init( onToolbarInit );
1.245 + toolbarTextModifier.onRefresh = onRefresh;
1.246 +
1.247 + function onToolbarInit() {
1.248 + if ( ++done === 2 ) {
1.249 + onToolbarsDone();
1.250 +
1.251 + positionSticky.watch( CKEDITOR.document.findOne( '.toolbar' ), function() {
1.252 + return mode === 'advanced';
1.253 + } );
1.254 + }
1.255 + }
1.256 +
1.257 + function onToolbarsDone() {
1.258 + if ( mode === 'basic' ) {
1.259 + toggleModeBasic( false );
1.260 + } else {
1.261 + toggleModeAdvanced( false );
1.262 + }
1.263 +
1.264 + updateSwitcher();
1.265 +
1.266 + setTimeout( function() {
1.267 + CKEDITOR.document.findOne( '.editors-container' ).addClass( 'active' );
1.268 + CKEDITOR.document.findOne( '#toolbarModifierWrapper' ).addClass( 'active' );
1.269 + }, 200 );
1.270 + }
1.271 +
1.272 + CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarTextModifier.mainContainer );
1.273 +
1.274 + function toogleModeSwitch( onElement, offElement, onModifier, offModifier ) {
1.275 + onElement.addClass( 'fancy-button-active' );
1.276 + offElement.removeClass( 'fancy-button-active' );
1.277 +
1.278 + onModifier.showUI();
1.279 + offModifier.hideUI();
1.280 + }
1.281 +
1.282 + function toggleModeBasic( callOnRefresh ) {
1.283 + callOnRefresh = ( callOnRefresh !== false );
1.284 + mode = 'basic';
1.285 + window.location.hash = '#basic';
1.286 + toogleModeSwitch( modeSwitchBasic, modeSwitchAdvanced, toolbarModifier, toolbarTextModifier );
1.287 +
1.288 + configuratorSection.removeClass( 'freed-width' );
1.289 + basicInstruction.show();
1.290 + advancedInstruction.hide();
1.291 +
1.292 + callOnRefresh && onRefresh( toolbarModifier );
1.293 + }
1.294 +
1.295 + function toggleModeAdvanced( callOnRefresh ) {
1.296 + callOnRefresh = ( callOnRefresh !== false );
1.297 + mode = 'advanced';
1.298 + window.location.hash = '#advanced';
1.299 + toogleModeSwitch( modeSwitchAdvanced, modeSwitchBasic, toolbarTextModifier, toolbarModifier );
1.300 +
1.301 + configuratorSection.addClass( 'freed-width' );
1.302 + advancedInstruction.show();
1.303 + basicInstruction.hide();
1.304 +
1.305 + callOnRefresh && onRefresh( toolbarTextModifier );
1.306 + }
1.307 +
1.308 + modeSwitchBasic.on( 'click', toggleModeBasic );
1.309 + modeSwitchAdvanced.on( 'click', toggleModeAdvanced );
1.310 +
1.311 + //
1.312 + // Position:sticky for the toolbar.
1.313 + //
1.314 +
1.315 + // Will make elements behave like they were styled with position:sticky.
1.316 + var positionSticky = {
1.317 + // Store object: {
1.318 + // element: CKEDITOR.dom.element, // Element which will float.
1.319 + // placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce.
1.320 + // isFixed: boolean // Whether element float now.
1.321 + // }
1.322 + watched: [],
1.323 +
1.324 + active: [],
1.325 +
1.326 + staticContainer: null,
1.327 +
1.328 + init: function() {
1.329 + var element = CKEDITOR.dom.element.createFromHtml(
1.330 + '<div class="staticContainer">' +
1.331 + '<div class="grid-container" >' +
1.332 + '<div class="grid-width-100">' +
1.333 + '<div class="inner"></div>' +
1.334 + '</div>' +
1.335 + '</div>' +
1.336 + '</div>' );
1.337 +
1.338 + this.staticContainer = element.findOne( '.inner' );
1.339 +
1.340 + CKEDITOR.document.getBody().append( element );
1.341 + },
1.342 +
1.343 + watch: function( element, preventFunc ) {
1.344 + this.watched.push( {
1.345 + element: element,
1.346 + placeholder: new CKEDITOR.dom.element( 'div' ),
1.347 + isFixed: false,
1.348 + preventFunc: preventFunc
1.349 + } );
1.350 + },
1.351 +
1.352 + checkAll: function() {
1.353 + for ( var i = 0; i < this.watched.length; i++ ) {
1.354 + this.check( this.watched[ i ] );
1.355 + }
1.356 + },
1.357 +
1.358 + check: function( element ) {
1.359 + var isFixed = element.isFixed;
1.360 + var shouldBeFixed = this.shouldBeFixed( element );
1.361 +
1.362 + // Nothing to be done.
1.363 + if ( isFixed === shouldBeFixed ) {
1.364 + return;
1.365 + }
1.366 +
1.367 + var placeholder = element.placeholder;
1.368 +
1.369 + if ( isFixed ) {
1.370 + // Unfixing.
1.371 +
1.372 + element.element.insertBefore( placeholder );
1.373 + placeholder.remove();
1.374 +
1.375 + element.element.removeStyle( 'margin' );
1.376 +
1.377 + this.active.splice( CKEDITOR.tools.indexOf( this.active, element ), 1 );
1.378 +
1.379 + } else {
1.380 + // Fixing.
1.381 + placeholder.setStyle( 'width', element.element.getSize( 'width' ) + 'px' );
1.382 + placeholder.setStyle( 'height', element.element.getSize( 'height' ) + 'px' );
1.383 + placeholder.setStyle( 'margin-bottom', element.element.getComputedStyle( 'margin-bottom' ) );
1.384 + placeholder.setStyle( 'display', element.element.getComputedStyle( 'display' ) );
1.385 + placeholder.insertAfter( element.element );
1.386 +
1.387 + this.staticContainer.append( element.element );
1.388 +
1.389 + this.active.push( element );
1.390 + }
1.391 +
1.392 + element.isFixed = !element.isFixed;
1.393 + },
1.394 +
1.395 + shouldBeFixed: function( element ) {
1.396 + if ( element.preventFunc && element.preventFunc() ) {
1.397 + return false;
1.398 + }
1.399 +
1.400 + // If element is already fixed we are checking it's placeholder.
1.401 + var related = ( element.isFixed ? element.placeholder : element.element ),
1.402 + clientRect = related.$.getBoundingClientRect(),
1.403 + staticHeight = this.staticContainer.getSize('height' ),
1.404 + elemHeight = element.element.getSize( 'height' );
1.405 +
1.406 + if ( element.isFixed ) {
1.407 + return ( clientRect.top + elemHeight < staticHeight );
1.408 + } else {
1.409 + return ( clientRect.top < staticHeight );
1.410 + }
1.411 + }
1.412 + };
1.413 +
1.414 + positionSticky.init();
1.415 +
1.416 + CKEDITOR.document.getWindow().on( 'scroll',
1.417 + new CKEDITOR.tools.eventsBuffer( 100, positionSticky.checkAll, positionSticky ).input
1.418 + );
1.419 +
1.420 + // Make the toolbar sticky.
1.421 + positionSticky.watch( CKEDITOR.document.findOne( '.editors-container' ) );
1.422 +
1.423 + // Help button and help-content.
1.424 + ( function() {
1.425 + var helpButton = CKEDITOR.document.getById( 'help' ),
1.426 + helpContent = CKEDITOR.document.getById( 'help-content' );
1.427 +
1.428 + // Don't show help button on IE8 because it's unsupported by Pico Modal.
1.429 + if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
1.430 + helpButton.hide();
1.431 + } else {
1.432 + // Display help modal when the button is clicked.
1.433 + helpButton.on( 'click', function( evt ) {
1.434 + SF.modal( {
1.435 + // Clone modal content from DOM.
1.436 + content: helpContent.getHtml(),
1.437 +
1.438 + afterCreate: function( modal ) {
1.439 + // Enable modal content button to close the modal.
1.440 + new CKEDITOR.dom.element( modal.modalElem() ).findOne( '.help-content-close' ).once( 'click', modal.close );
1.441 + }
1.442 + } ).show();
1.443 + } );
1.444 + }
1.445 + } )();
1.446 + } )();
1.447 +</script>
1.448 +</body>
1.449 +</html>