[perso/Immae/Projets/packagist/connexionswing-ckeditor-component.git] / release / samples / toolbarconfigurator / index.html

<!DOCTYPE html>\r
<!--\r
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.md or http://ckeditor.com/license\r
-->\r
<!--[if IE 8]><html class="ie8"><![endif]-->\r
<!--[if gt IE 8]><html><![endif]-->\r
<!--[if !IE]><!--><html><!--<![endif]-->\r
<head>\r
	<meta charset="utf-8">\r
	<title>Toolbar Configurator</title>\r
	<script src="../../ckeditor.js"></script>\r
	<script>\r
		if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )\r
			CKEDITOR.tools.enableHtml5Elements( document );\r
	</script>\r
	<link rel="stylesheet" href="lib/codemirror/codemirror.css">\r
	<link rel="stylesheet" href="lib/codemirror/show-hint.css">\r
	<link rel="stylesheet" href="lib/codemirror/neo.css">\r
	<link rel="stylesheet" href="css/fontello.css">\r
	<link rel="stylesheet" href="../css/samples.css">\r
</head>\r
<body id="toolbar">\r
\r
<nav class="navigation-a">\r
	<div class="grid-container">\r
		<ul class="navigation-a-left grid-width-70">\r
			<li><a href="http://ckeditor.com">Project Homepage</a></li>\r
			<li><a href="http://dev.ckeditor.com/">I found a bug</a></li>\r
			<li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>\r
		</ul>\r
		<ul class="navigation-a-right grid-width-30">\r
			<li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li>\r
		</ul>\r
	</div>\r
</nav>\r
\r
<header class="header-a">\r
	<div class="grid-container">\r
		<h1 class="header-a-logo grid-width-30">\r
			<a href="../index.html"><img src="../img/logo.png" alt="CKEditor Logo"></a>\r
		</h1>\r
		<nav class="navigation-b grid-width-70">\r
			<ul>\r
				<li><a href="../index.html"  class="button-a">Start</a></li>\r
				<li><a href="index.html"  class="button-a button-a-background">Toolbar configurator</a></li>\r
			</ul>\r
		</nav>\r
	</div>\r
</header>\r
\r
<main>\r
	<div class="adjoined-top">\r
		<div class="grid-container">\r
			<div class="content grid-width-100">\r
				<div class="grid-container-nested">\r
					<h1 class="grid-width-60">\r
						Toolbar Configurator\r
						<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
					</h1>\r
\r
					<div class="grid-width-40 grid-switch-magic">\r
						<div class="switch">\r
							<span class="balloon-a balloon-a-se">Select configurator type</span>\r
							<input type="radio" name="radio" data-num="1" id="radio-basic" />\r
							<input type="radio" name="radio" data-num="2" id="radio-advanced" />\r
							<label data-for="1" for="radio-basic">Basic</label>\r
							<span class="switch-inner">\r
								<span class="handler"></span>\r
							</span>\r
							<label data-for="2" for="radio-advanced">Advanced</label>\r
						</div>\r
					</div>\r
				</div>\r
			</div>\r
		</div>\r
	</div>\r
	<div class="adjoined-bottom">\r
		<div class="grid-container">\r
			<div class="grid-width-100">\r
				<div class="editors-container">\r
					<div id="editor-basic"></div>\r
					<div id="editor-advanced"></div>\r
				</div>\r
			</div>\r
		</div>\r
	</div>\r
\r
	<div class="grid-container configurator">\r
		<div class="content grid-width-100">\r
			<div class="configurator">\r
				<div>\r
					<div id="toolbarModifierWrapper"></div>\r
				</div>\r
			</div>\r
		</div>\r
	</div>\r
\r
	<div id="help-content">\r
		<div class="grid-container">\r
			<div class="grid-width-100">\r
				<h2>What Am I Doing Here?</h2>\r
\r
				<div class="grid-container grid-container-nested">\r
					<div class="basic">\r
						<div class="grid-width-50">\r
							<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
							<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
						</div>\r
						<div class="grid-width-50">\r
							<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
							<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
						</div>\r
					</div>\r
					<div class="advanced" style="display: none;">\r
						<div class="grid-width-50">\r
							<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
							<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
						</div>\r
						<div class="grid-width-50">\r
							<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
						</div>\r
					</div>\r
				</div>\r
\r
				<p class="grid-container grid-container-nested">\r
					<button type="button" class="help-content-close grid-width-100 button-a button-a-background">Got it. Let's play!</button>\r
				</p>\r
			</div>\r
		</div>\r
	</div>\r
</main>\r
\r
<footer class="footer-a grid-container">\r
	<p class="grid-width-100">\r
		CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
	</p>\r
	<p class="grid-width-100" id="copy">\r
		Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.\r
	</p>\r
</footer>\r
\r
<script src="lib/codemirror/codemirror.js"></script>\r
<script src="lib/codemirror/javascript.js"></script>\r
<script src="lib/codemirror/show-hint.js"></script>\r
\r
<script src="js/fulltoolbareditor.js"></script>\r
<script src="js/abstracttoolbarmodifier.js"></script>\r
<script src="js/toolbarmodifier.js"></script>\r
<script src="js/toolbartextmodifier.js"></script>\r
<script src="../js/sf.js"></script>\r
\r
<script>\r
	( function() {\r
		'use strict';\r
\r
		var mode = ( window.location.hash.substr( 1 ) === 'advanced' ) ? 'advanced' : 'basic',\r
			configuratorSection = CKEDITOR.document.findOne( 'main > .grid-container.configurator' ),\r
			basicInstruction = CKEDITOR.document.findOne( '#help-content .basic' ),\r
			advancedInstruction = CKEDITOR.document.findOne( '#help-content .advanced' ),\r
\r
			// Configurator mode switcher.\r
			modeSwitchBasic = CKEDITOR.document.getById( 'radio-basic' ),\r
			modeSwitchAdvanced = CKEDITOR.document.getById( 'radio-advanced' );\r
\r
		// Initial setup\r
		function updateSwitcher() {\r
			if ( mode === 'advanced' ) {\r
				modeSwitchAdvanced.$.checked = true;\r
			} else {\r
				modeSwitchBasic.$.checked = true;\r
			}\r
		}\r
\r
		updateSwitcher();\r
\r
		CKEDITOR.document.getWindow().on( 'hashchange', function( e ) {\r
			var hash = window.location.hash.substr( 1 );\r
			if ( !( hash === 'advanced' || hash === 'basic' ) ) {\r
				return;\r
			}\r
			mode = hash;\r
			onToolbarsDone( mode );\r
		} );\r
\r
		CKEDITOR.document.getWindow().on( 'resize', function() {\r
			updateToolbar( ( mode === 'basic' ? toolbarModifier : toolbarTextModifier )[ 'editorInstance' ] );\r
		} );\r
\r
		function onRefresh( modifier ) {\r
			modifier = modifier || this;\r
\r
			if ( mode === 'basic' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {\r
				return;\r
			}\r
\r
			// CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems.\r
			if ( mode === 'advanced' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) {\r
				modifier.codeContainer.refresh();\r
			}\r
\r
			updateToolbar( modifier.editorInstance );\r
		}\r
\r
		function updateToolbar( editor ) {\r
			var editorContainer = editor.container;\r
\r
			// Not always editor is loaded.\r
			if ( !editorContainer ) {\r
				return;\r
			}\r
\r
			var displayStyle = editorContainer.getStyle( 'display' );\r
\r
			editorContainer.setStyle( 'display', 'block' );\r
\r
			var newHeight = editorContainer.getSize( 'height' );\r
\r
			var newMarginTop = parseInt( editorContainer.getComputedStyle( 'margin-top' ), 10 );\r
			newMarginTop = ( isNaN( newMarginTop ) ? 0 : Number( newMarginTop ) );\r
\r
			var newMarginBottom = parseInt( editorContainer.getComputedStyle( 'margin-bottom' ), 10 );\r
			newMarginBottom = ( isNaN( newMarginBottom ) ? 0 : Number( newMarginBottom ) );\r
\r
			var result = newHeight + newMarginTop + newMarginBottom;\r
\r
			editorContainer.setStyle( 'display', displayStyle );\r
\r
			editor.container.getAscendant( 'div' ).setStyle( 'height', result + 'px' );\r
		}\r
\r
		var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' );\r
\r
		var done = 0;\r
		toolbarModifier.init( onToolbarInit );\r
		toolbarModifier.onRefresh = onRefresh;\r
\r
		CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer );\r
\r
		var toolbarTextModifier = new ToolbarConfigurator.ToolbarTextModifier( 'editor-advanced' );\r
		toolbarTextModifier.init( onToolbarInit );\r
		toolbarTextModifier.onRefresh = onRefresh;\r
\r
		function onToolbarInit() {\r
			if ( ++done === 2 ) {\r
				onToolbarsDone();\r
\r
				positionSticky.watch( CKEDITOR.document.findOne( '.toolbar' ), function() {\r
					return mode === 'advanced';\r
				} );\r
			}\r
		}\r
\r
		function onToolbarsDone() {\r
			if ( mode === 'basic' ) {\r
				toggleModeBasic( false );\r
			} else {\r
				toggleModeAdvanced( false );\r
			}\r
\r
			updateSwitcher();\r
\r
			setTimeout( function() {\r
				CKEDITOR.document.findOne( '.editors-container' ).addClass( 'active' );\r
				CKEDITOR.document.findOne( '#toolbarModifierWrapper' ).addClass( 'active' );\r
			}, 200 );\r
		}\r
\r
		CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarTextModifier.mainContainer );\r
\r
		function toogleModeSwitch( onElement, offElement, onModifier, offModifier ) {\r
			onElement.addClass( 'fancy-button-active' );\r
			offElement.removeClass( 'fancy-button-active' );\r
\r
			onModifier.showUI();\r
			offModifier.hideUI();\r
		}\r
\r
		function toggleModeBasic( callOnRefresh ) {\r
			callOnRefresh = ( callOnRefresh !== false );\r
			mode = 'basic';\r
			window.location.hash = '#basic';\r
			toogleModeSwitch( modeSwitchBasic, modeSwitchAdvanced, toolbarModifier, toolbarTextModifier );\r
\r
			configuratorSection.removeClass( 'freed-width' );\r
			basicInstruction.show();\r
			advancedInstruction.hide();\r
\r
			callOnRefresh && onRefresh( toolbarModifier );\r
		}\r
\r
		function toggleModeAdvanced( callOnRefresh ) {\r
			callOnRefresh = ( callOnRefresh !== false );\r
			mode = 'advanced';\r
			window.location.hash = '#advanced';\r
			toogleModeSwitch( modeSwitchAdvanced, modeSwitchBasic, toolbarTextModifier, toolbarModifier );\r
\r
			configuratorSection.addClass( 'freed-width' );\r
			advancedInstruction.show();\r
			basicInstruction.hide();\r
\r
			callOnRefresh && onRefresh( toolbarTextModifier );\r
		}\r
\r
		modeSwitchBasic.on( 'click', toggleModeBasic );\r
		modeSwitchAdvanced.on( 'click', toggleModeAdvanced );\r
\r
		//\r
		// Position:sticky for the toolbar.\r
		//\r
\r
		// Will make elements behave like they were styled with position:sticky.\r
		var positionSticky = {\r
			// Store object: {\r
			// 		element: CKEDITOR.dom.element, // Element which will float.\r
			// 		placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce.\r
			// 		isFixed: boolean // Whether element float now.\r
			// }\r
			watched: [],\r
\r
			active: [],\r
\r
			staticContainer: null,\r
\r
			init: function() {\r
				var element = CKEDITOR.dom.element.createFromHtml(\r
					'<div class="staticContainer">' +\r
						'<div class="grid-container" >' +\r
							'<div class="grid-width-100">' +\r
								'<div class="inner"></div>' +\r
							'</div>' +\r
						'</div>' +\r
					'</div>' );\r
\r
				this.staticContainer = element.findOne( '.inner' );\r
\r
				CKEDITOR.document.getBody().append( element );\r
			},\r
\r
			watch: function( element, preventFunc ) {\r
				this.watched.push( {\r
					element: element,\r
					placeholder: new CKEDITOR.dom.element( 'div' ),\r
					isFixed: false,\r
					preventFunc: preventFunc\r
				} );\r
			},\r
\r
			checkAll: function() {\r
				for ( var i = 0; i < this.watched.length; i++ ) {\r
					this.check( this.watched[ i ] );\r
				}\r
			},\r
\r
			check: function( element ) {\r
				var isFixed = element.isFixed;\r
				var shouldBeFixed = this.shouldBeFixed( element );\r
\r
				// Nothing to be done.\r
				if ( isFixed === shouldBeFixed ) {\r
					return;\r
				}\r
\r
				var placeholder = element.placeholder;\r
\r
				if ( isFixed ) {\r
					// Unfixing.\r
\r
					element.element.insertBefore( placeholder );\r
					placeholder.remove();\r
\r
					element.element.removeStyle( 'margin' );\r
\r
					this.active.splice( CKEDITOR.tools.indexOf( this.active, element ), 1 );\r
\r
				} else {\r
					// Fixing.\r
					placeholder.setStyle( 'width', element.element.getSize( 'width' ) + 'px' );\r
					placeholder.setStyle( 'height', element.element.getSize( 'height' ) + 'px' );\r
					placeholder.setStyle( 'margin-bottom', element.element.getComputedStyle( 'margin-bottom' ) );\r
					placeholder.setStyle( 'display', element.element.getComputedStyle( 'display' ) );\r
					placeholder.insertAfter( element.element );\r
\r
					this.staticContainer.append( element.element );\r
\r
					this.active.push( element );\r
				}\r
\r
				element.isFixed = !element.isFixed;\r
			},\r
\r
			shouldBeFixed: function( element ) {\r
				if ( element.preventFunc && element.preventFunc() ) {\r
					return false;\r
				}\r
\r
				// If element is already fixed we are checking it's placeholder.\r
				var related = ( element.isFixed ? element.placeholder : element.element ),\r
					clientRect = related.$.getBoundingClientRect(),\r
					staticHeight = this.staticContainer.getSize('height' ),\r
					elemHeight = element.element.getSize( 'height' );\r
\r
				if ( element.isFixed ) {\r
					return ( clientRect.top + elemHeight < staticHeight );\r
				} else {\r
					return ( clientRect.top < staticHeight );\r
				}\r
			}\r
		};\r
\r
		positionSticky.init();\r
\r
		CKEDITOR.document.getWindow().on( 'scroll',\r
			new CKEDITOR.tools.eventsBuffer( 100, positionSticky.checkAll, positionSticky ).input\r
		);\r
\r
		// Make the toolbar sticky.\r
		positionSticky.watch( CKEDITOR.document.findOne( '.editors-container' ) );\r
\r
		// Help button and help-content.\r
		( function() {\r
			var helpButton = CKEDITOR.document.getById( 'help' ),\r
				helpContent = CKEDITOR.document.getById( 'help-content' );\r
\r
			// Don't show help button on IE8 because it's unsupported by Pico Modal.\r
			if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {\r
				helpButton.hide();\r
			} else {\r
				// Display help modal when the button is clicked.\r
				helpButton.on( 'click', function( evt ) {\r
					SF.modal( {\r
						// Clone modal content from DOM.\r
						content: helpContent.getHtml(),\r
\r
						afterCreate: function( modal ) {\r
							// Enable modal content button to close the modal.\r
							new CKEDITOR.dom.element( modal.modalElem() ).findOne( '.help-content-close' ).once( 'click', modal.close );\r
						}\r
					} ).show();\r
				} );\r
			}\r
		} )();\r
	} )();\r
</script>\r
</body>\r
</html>\r
Commit	Line	Data
7adcb81e IB	1	<!DOCTYPE html>\r
7adcb81e IB	2	<!--\r
3b35bd27	3	Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
7adcb81e 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
	29	<li><a href="http://dev.ckeditor.com/">I found a bug</a></li>\r
	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
3b35bd27	139	Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.\r
7adcb81e 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