Merge pull request #1360 from ckeditor/t/1348

Docs: The `config.toolbar.viewportTopOffset` should have the right value in all snippets when using the mobile layout. Closes #1348. Created a snippet helper file containing the `getViewportTopOffsetConfig()` function. Loaded the helper in all snippets.
ckeditor · Nov 20, 2018 · 0afa7d6 · 0afa7d6
2 parents 72a3652 + a345012
commit 0afa7d6
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 10 deletions.
diff --git a/docs/_snippets/builds/saving-data/autosave.js b/docs/_snippets/builds/saving-data/autosave.js
@@ -17,7 +17,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-autosave' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		autosave: {
 			save( editor ) {

diff --git a/docs/_snippets/builds/saving-data/manualsave.js b/docs/_snippets/builds/saving-data/manualsave.js
@@ -18,7 +18,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-manualsave' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/classic-editor-short.js b/docs/_snippets/examples/classic-editor-short.js
@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor-short' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/classic-editor.js b/docs/_snippets/examples/classic-editor.js
@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/examples/custom-build.js b/docs/_snippets/examples/custom-build.js
@@ -33,7 +33,7 @@ ClassicEditor
 		],
 		toolbar: {
 			items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', '|', 'highlight', '|', 'undo', 'redo' ],
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		cloudServices: CS_CONFIG
 	} )

diff --git a/docs/_snippets/examples/inline-editor.js b/docs/_snippets/examples/inline-editor.js
@@ -17,7 +17,7 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
 			styles: [ 'full', 'alignLeft', 'alignRight' ]
 		},
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		cloudServices: CS_CONFIG
 	};

diff --git a/docs/_snippets/features/image-upload.js b/docs/_snippets/features/image-upload.js
@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-image-upload' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/read-only.js b/docs/_snippets/features/read-only.js
@@ -11,7 +11,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-read-only' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/_snippets/features/ui-language.js b/docs/_snippets/features/ui-language.js
@@ -15,7 +15,7 @@ ClassicEditor
 	.create( document.querySelector( '#snippet-ui-language' ), {
 		cloudServices: CS_CONFIG,
 		toolbar: {
-			viewportTopOffset: 100
+			viewportTopOffset: window.getViewportTopOffsetConfig()
 		}
 	} )
 	.then( editor => {

diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css
@@ -2,6 +2,20 @@
  * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  */
 
+:root {
+	/* This custom property is read by the JS and passed to editor configurations
+	as config.toolbar.viewportTopOffset. */
+	--ck-snippet-viewport-top-offset: 100
+}
+
+@media (max-width: 960px) {
+	:root {
+		/* The mobile layout of Umberto is different and the toolbar offset must be
+		smaller (https://github.com/ckeditor/ckeditor5/issues/1348). */
+		--ck-snippet-viewport-top-offset: 55;
+	}
+}
+
 .ck.ck-editor {
 	margin: 1.5em 0;
 }

diff --git a/docs/assets/snippet.js b/docs/assets/snippet.js
@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window, document */
+
+/**
+ * Returns the `config.toolbar.viewportTopOffset` config value for editors using floating toolbars that
+ * stick to the top of the viewport to remain visible to the user.
+ *
+ * The value is determined in styles by the `--ck-snippet-viewport-top-offset` custom property
+ * and may differ e.g. according to the used media queries.
+ *
+ * @returns {Number} The value of the offset.
+ */
+window.getViewportTopOffsetConfig = function() {
+	const documentElement = document.documentElement;
+
+	return parseInt( window.getComputedStyle( documentElement ).getPropertyValue( '--ck-snippet-viewport-top-offset' ) );
+};
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "raw-loader": "^0.5.1",
     "style-loader": "^0.23.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
-    "umberto": "^0.11.0",
+    "umberto": "^0.12.0",
     "webpack": "^4.15.0"
   },
   "engines": {

diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js
@@ -69,6 +69,10 @@ module.exports = function snippetAdapter( data ) {
 				html: fs.readFileSync( data.snippetSource.html ),
 				assets: {
 					js: [
+						// Load snippet helpers first.
+						path.join( data.basePath, 'assets', 'snippet.js' ),
+
+						// Then load the actual snippet code.
 						path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
 					],
 					css: cssFiles