From a0fb5d8299c776a5d615ea534a3e0a22321c9966 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 20 Nov 2018 11:31:57 +0100 Subject: [PATCH 1/6] Docs: Created a snippet helper file containing the getViewportTopOffsetConfig function. Loaded the helper in all snippets. --- docs/assets/snippet-styles.css | 14 ++++++++++++++ docs/assets/snippet.js | 21 +++++++++++++++++++++ scripts/docs/snippetadapter.js | 4 ++++ 3 files changed, 39 insertions(+) create mode 100644 docs/assets/snippet.js diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css index 4558be88ff1..472246f2ca0 100644 --- 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: 60; + } +} + .ck.ck-editor { margin: 1.5em 0; } diff --git a/docs/assets/snippet.js b/docs/assets/snippet.js new file mode 100644 index 00000000000..ecede429310 --- /dev/null +++ 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/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index 1b3a4987ba0..d3405faf1c9 100644 --- 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 From 5876f6593aeb8890a45abe86974112f76afd1b0c Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 20 Nov 2018 11:32:52 +0100 Subject: [PATCH 2/6] Docs: Used the getViewportTopOffsetConfig helper in the code snippets. --- docs/_snippets/builds/saving-data/autosave.js | 2 +- docs/_snippets/builds/saving-data/manualsave.js | 2 +- docs/_snippets/examples/classic-editor-short.js | 2 +- docs/_snippets/examples/classic-editor.js | 2 +- docs/_snippets/examples/custom-build.js | 2 +- docs/_snippets/examples/inline-editor.js | 2 +- docs/_snippets/features/image-upload.js | 2 +- docs/_snippets/features/read-only.js | 2 +- docs/_snippets/features/ui-language.js | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/_snippets/builds/saving-data/autosave.js b/docs/_snippets/builds/saving-data/autosave.js index 7f869fdd600..0709fb4aaa5 100644 --- 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 index 7125a564c69..e1ef70bff32 100644 --- 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 index 55bb727eb80..653dba60c4f 100644 --- 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 index 133fbc51799..8546b561950 100644 --- 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 index 4420d6cb804..740b5b27f8f 100644 --- 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 index e2cb8673f96..58b8f083d32 100644 --- 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 index 3f9c8ababcd..6c9c0642242 100644 --- 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 index 2c96d67bf40..74913ff4ff5 100644 --- 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 index aa523176569..e24033cabe9 100644 --- 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 => { From 8394f532c5eb9ec69643628fd53ffc8a0a255879 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 20 Nov 2018 11:41:06 +0100 Subject: [PATCH 3/6] Configured branches in mgit.json. --- mgit.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/mgit.json b/mgit.json index fde1888dba0..9b090ea6e23 100644 --- a/mgit.json +++ b/mgit.json @@ -3,10 +3,10 @@ "packagesPrefix": "@ckeditor/ckeditor5-", "dependencies": { "@ckeditor/ckeditor5-adapter-ckfinder": "ckeditor/ckeditor5-adapter-ckfinder", - "@ckeditor/ckeditor5-alignment": "ckeditor/ckeditor5-alignment", - "@ckeditor/ckeditor5-autoformat": "ckeditor/ckeditor5-autoformat", + "@ckeditor/ckeditor5-alignment": "ckeditor/ckeditor5-alignment#t/ckeditor5/1348", + "@ckeditor/ckeditor5-autoformat": "ckeditor/ckeditor5-autoformat#t/ckeditor5/1348", "@ckeditor/ckeditor5-autosave": "ckeditor/ckeditor5-autosave", - "@ckeditor/ckeditor5-basic-styles": "ckeditor/ckeditor5-basic-styles", + "@ckeditor/ckeditor5-basic-styles": "ckeditor/ckeditor5-basic-styles#t/ckeditor5/1348", "@ckeditor/ckeditor5-block-quote": "ckeditor/ckeditor5-block-quote", "@ckeditor/ckeditor5-build-balloon": "ckeditor/ckeditor5-build-balloon", "@ckeditor/ckeditor5-build-classic": "ckeditor/ckeditor5-build-classic", @@ -23,20 +23,20 @@ "@ckeditor/ckeditor5-engine": "ckeditor/ckeditor5-engine", "@ckeditor/ckeditor5-enter": "ckeditor/ckeditor5-enter", "@ckeditor/ckeditor5-essentials": "ckeditor/ckeditor5-essentials", - "@ckeditor/ckeditor5-font": "ckeditor/ckeditor5-font", - "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading", - "@ckeditor/ckeditor5-highlight": "ckeditor/ckeditor5-highlight", - "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image", - "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link", + "@ckeditor/ckeditor5-font": "ckeditor/ckeditor5-font#t/ckeditor5/1348", + "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading#t/ckeditor5/1348", + "@ckeditor/ckeditor5-highlight": "ckeditor/ckeditor5-highlight#t/ckeditor5/1348", + "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image#t/ckeditor5/1348", + "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link#t/ckeditor5/1348", "@ckeditor/ckeditor5-list": "ckeditor/ckeditor5-list", "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm", - "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed", + "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed#t/ckeditor5/1348", "@ckeditor/ckeditor5-paragraph": "ckeditor/ckeditor5-paragraph", "@ckeditor/ckeditor5-paste-from-office": "ckeditor/ckeditor5-paste-from-office", - "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table", - "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark", + "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table#t/ckeditor5/1348", + "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark#t/ckeditor5/1348", "@ckeditor/ckeditor5-typing": "ckeditor/ckeditor5-typing", - "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui", + "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui#t/ckeditor5/1348", "@ckeditor/ckeditor5-undo": "ckeditor/ckeditor5-undo", "@ckeditor/ckeditor5-upload": "ckeditor/ckeditor5-upload", "@ckeditor/ckeditor5-utils": "ckeditor/ckeditor5-utils", From 53b948fcb94538731678b9fec5006f96861eeb0a Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 20 Nov 2018 13:41:41 +0100 Subject: [PATCH 4/6] Internal: Bumped up the version of Umberto [skip ci]. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 99a506f4973..aac10da0be4 100644 --- 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": { From e3848fbeb57a2a5023164efaac66781e9752ece5 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 20 Nov 2018 13:52:52 +0100 Subject: [PATCH 5/6] Docs: Adjusted the viewportTopOffset value for the new Umberto release. --- docs/assets/snippet-styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css index 472246f2ca0..9b90675c7e2 100644 --- a/docs/assets/snippet-styles.css +++ b/docs/assets/snippet-styles.css @@ -12,7 +12,7 @@ :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: 60; + --ck-snippet-viewport-top-offset: 55; } } From a3450127cf38ed79b4f997ec6a549a97c9b15bec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Tue, 20 Nov 2018 19:23:33 +0100 Subject: [PATCH 6/6] Back to master. --- mgit.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/mgit.json b/mgit.json index 9b090ea6e23..fde1888dba0 100644 --- a/mgit.json +++ b/mgit.json @@ -3,10 +3,10 @@ "packagesPrefix": "@ckeditor/ckeditor5-", "dependencies": { "@ckeditor/ckeditor5-adapter-ckfinder": "ckeditor/ckeditor5-adapter-ckfinder", - "@ckeditor/ckeditor5-alignment": "ckeditor/ckeditor5-alignment#t/ckeditor5/1348", - "@ckeditor/ckeditor5-autoformat": "ckeditor/ckeditor5-autoformat#t/ckeditor5/1348", + "@ckeditor/ckeditor5-alignment": "ckeditor/ckeditor5-alignment", + "@ckeditor/ckeditor5-autoformat": "ckeditor/ckeditor5-autoformat", "@ckeditor/ckeditor5-autosave": "ckeditor/ckeditor5-autosave", - "@ckeditor/ckeditor5-basic-styles": "ckeditor/ckeditor5-basic-styles#t/ckeditor5/1348", + "@ckeditor/ckeditor5-basic-styles": "ckeditor/ckeditor5-basic-styles", "@ckeditor/ckeditor5-block-quote": "ckeditor/ckeditor5-block-quote", "@ckeditor/ckeditor5-build-balloon": "ckeditor/ckeditor5-build-balloon", "@ckeditor/ckeditor5-build-classic": "ckeditor/ckeditor5-build-classic", @@ -23,20 +23,20 @@ "@ckeditor/ckeditor5-engine": "ckeditor/ckeditor5-engine", "@ckeditor/ckeditor5-enter": "ckeditor/ckeditor5-enter", "@ckeditor/ckeditor5-essentials": "ckeditor/ckeditor5-essentials", - "@ckeditor/ckeditor5-font": "ckeditor/ckeditor5-font#t/ckeditor5/1348", - "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading#t/ckeditor5/1348", - "@ckeditor/ckeditor5-highlight": "ckeditor/ckeditor5-highlight#t/ckeditor5/1348", - "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image#t/ckeditor5/1348", - "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link#t/ckeditor5/1348", + "@ckeditor/ckeditor5-font": "ckeditor/ckeditor5-font", + "@ckeditor/ckeditor5-heading": "ckeditor/ckeditor5-heading", + "@ckeditor/ckeditor5-highlight": "ckeditor/ckeditor5-highlight", + "@ckeditor/ckeditor5-image": "ckeditor/ckeditor5-image", + "@ckeditor/ckeditor5-link": "ckeditor/ckeditor5-link", "@ckeditor/ckeditor5-list": "ckeditor/ckeditor5-list", "@ckeditor/ckeditor5-markdown-gfm": "ckeditor/ckeditor5-markdown-gfm", - "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed#t/ckeditor5/1348", + "@ckeditor/ckeditor5-media-embed": "ckeditor/ckeditor5-media-embed", "@ckeditor/ckeditor5-paragraph": "ckeditor/ckeditor5-paragraph", "@ckeditor/ckeditor5-paste-from-office": "ckeditor/ckeditor5-paste-from-office", - "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table#t/ckeditor5/1348", - "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark#t/ckeditor5/1348", + "@ckeditor/ckeditor5-table": "ckeditor/ckeditor5-table", + "@ckeditor/ckeditor5-theme-lark": "ckeditor/ckeditor5-theme-lark", "@ckeditor/ckeditor5-typing": "ckeditor/ckeditor5-typing", - "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui#t/ckeditor5/1348", + "@ckeditor/ckeditor5-ui": "ckeditor/ckeditor5-ui", "@ckeditor/ckeditor5-undo": "ckeditor/ckeditor5-undo", "@ckeditor/ckeditor5-upload": "ckeditor/ckeditor5-upload", "@ckeditor/ckeditor5-utils": "ckeditor/ckeditor5-utils",