Browse Source

Docs: Created a snippet helper file containing the getViewportTopOffsetConfig function. Loaded the helper in all snippets.

Aleksander Nowodzinski 7 years ago
parent
commit
a0fb5d8299
3 changed files with 39 additions and 0 deletions
  1. 14 0
      docs/assets/snippet-styles.css
  2. 21 0
      docs/assets/snippet.js
  3. 4 0
      scripts/docs/snippetadapter.js

+ 14 - 0
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;
 }

+ 21 - 0
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' ) );
+};

+ 4 - 0
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