@ckeditor/ckeditor5-minimap 35.3.2 → 36.0.0

package/src/minimapiframeview.js

@@ -1,115 +1,68 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module minimap/minimapiframeview
  */
-
 import { IframeView } from 'ckeditor5/src/ui';
 import { toUnit } from 'ckeditor5/src/utils';
-
-const toPx = toUnit( 'px' );
-
+const toPx = toUnit('px');
 /**
  * The internal `<iframe>` view that hosts the minimap content.
  *
- * @private
- * @extends module:ui/iframe/iframeview~IframeView
+ * @internal
  */
 export default class MinimapIframeView extends IframeView {
-	/**
-	 * Creates an instance of the internal minimap iframe.
-	 *
-	 * @param {module:utils/locale~Locale} locale
-	 * @param {Object} options
-	 * @param {HTMLElement} options.domRootClone
-	 * @param {Array} options.pageStyles
-	 * @param {Number} options.scaleRatio
-	 * @param {Boolean} [options.useSimplePreview]
-	 * @param {String} [options.extraClasses]
-	 */
-	constructor( locale, options ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * The CSS `top` used to scroll the minimap.
-		 *
-		 * @readonly
-		 * @member {Number} #top
-		 */
-		this.set( 'top', 0 );
-
-		/**
-		 * The CSS `height` of the iframe.
-		 *
-		 * @readonly
-		 * @member {Number} #height
-		 */
-		this.set( 'height', 0 );
-
-		/**
-		 * Cached view constructor options for re-use in other methods.
-		 *
-		 * @readonly
-		 * @member {Object} #options
-		 */
-		this._options = options;
-
-		this.extendTemplate( {
-			attributes: {
-				class: [
-					'ck-minimap__iframe'
-				],
-				style: {
-					top: bind.to( 'top', top => toPx( top ) ),
-					height: bind.to( 'height', height => toPx( height ) )
-				}
-			}
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		return super.render().then( () => {
-			this._prepareDocument();
-		} );
-	}
-
-	/**
-	 * Sets the new height of the iframe.
-	 *
-	 * @param {Number} newHeight
-	 */
-	setHeight( newHeight ) {
-		this.height = newHeight;
-	}
-
-	/**
-	 * Sets the top offset of the iframe to move it around vertically.
-	 *
-	 * @param {Number} newOffset
-	 */
-	setTopOffset( newOffset ) {
-		this.top = newOffset;
-	}
-
-	/**
-	 * Sets the internal structure of the `<iframe>` readying it to display the
-	 * minimap element.
-	 *
-	 * @private
-	 */
-	_prepareDocument() {
-		const iframeDocument = this.element.contentWindow.document;
-		const domRootClone = iframeDocument.adoptNode( this._options.domRootClone );
-
-		const boxStyles = this._options.useSimplePreview ? `
+    /**
+     * Creates an instance of the internal minimap iframe.
+     */
+    constructor(locale, options) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('top', 0);
+        this.set('height', 0);
+        this._options = options;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-minimap__iframe'
+                ],
+                style: {
+                    top: bind.to('top', top => toPx(top)),
+                    height: bind.to('height', height => toPx(height))
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        return super.render().then(() => {
+            this._prepareDocument();
+        });
+    }
+    /**
+     * Sets the new height of the iframe.
+     */
+    setHeight(newHeight) {
+        this.height = newHeight;
+    }
+    /**
+     * Sets the top offset of the iframe to move it around vertically.
+     */
+    setTopOffset(newOffset) {
+        this.top = newOffset;
+    }
+    /**
+     * Sets the internal structure of the `<iframe>` readying it to display the
+     * minimap element.
+     */
+    _prepareDocument() {
+        const iframeDocument = this.element.contentWindow.document;
+        const domRootClone = iframeDocument.adoptNode(this._options.domRootClone);
+        const boxStyles = this._options.useSimplePreview ? `
 			.ck.ck-editor__editable_inline img {
 				filter: contrast( 0 );
 			}
@@ -124,20 +77,19 @@ export default class MinimapIframeView extends IframeView {
 				color: hsl(0, 0%, 60%) !important;
 			}
 		` : '';
-
-		const pageStyles = this._options.pageStyles.map( definition => {
-			if ( typeof definition === 'string' ) {
-				return `<style>${ definition }</style>`;
-			} else {
-				return `<link rel="stylesheet" type="text/css" href="${ definition.href }">`;
-			}
-		} ).join( '\n' );
-
-		const html = `<!DOCTYPE html><html lang="en">
+        const pageStyles = this._options.pageStyles.map(definition => {
+            if (typeof definition === 'string') {
+                return `<style>${definition}</style>`;
+            }
+            else {
+                return `<link rel="stylesheet" type="text/css" href="${definition.href}">`;
+            }
+        }).join('\n');
+        const html = `<!DOCTYPE html><html lang="en">
 			<head>
 				<meta charset="utf-8">
 				<meta name="viewport" content="width=device-width, initial-scale=1">
-				${ pageStyles }
+				${pageStyles}
 				<style>
 					html, body {
 						margin: 0 !important;
@@ -149,7 +101,7 @@ export default class MinimapIframeView extends IframeView {
 					}
 
 					body {
-						transform: scale( ${ this._options.scaleRatio } );
+						transform: scale( ${this._options.scaleRatio} );
 						transform-origin: 0 0;
 						overflow: visible;
 					}
@@ -165,15 +117,14 @@ export default class MinimapIframeView extends IframeView {
 						background: white;
 					}
 
-					${ boxStyles }
+					${boxStyles}
 				</style>
 			</head>
-			<body class="${ this._options.extraClasses || '' }"></body>
+			<body class="${this._options.extraClasses || ''}"></body>
 		</html>`;
-
-		iframeDocument.open();
-		iframeDocument.write( html );
-		iframeDocument.close();
-		iframeDocument.body.appendChild( domRootClone );
-	}
+        iframeDocument.open();
+        iframeDocument.write(html);
+        iframeDocument.close();
+        iframeDocument.body.appendChild(domRootClone);
+    }
 }

package/src/minimappositiontrackerview.js

@@ -1,134 +1,78 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module minimap/minimappositiontrackerview
  */
-
 import { View } from 'ckeditor5/src/ui';
 import { toUnit, global } from 'ckeditor5/src/utils';
-
-const toPx = toUnit( 'px' );
-
+const toPx = toUnit('px');
 /**
  * The position tracker visualizing the visible subset of the content. Displayed over the minimap.
  *
- * @private
- * @extends module:ui/view~View
+ * @internal
  */
 export default class MinimapPositionTrackerView extends View {
-	constructor( locale ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * The CSS `height` of the tracker visualizing the subset of the content visible to the user.
-		 *
-		 * @readonly
-		 * @member {Number} #height
-		 */
-		this.set( 'height', 0 );
-
-		/**
-		 * The CSS `top` of the tracker, used to move it vertically over the minimap.
-		 *
-		 * @readonly
-		 * @member {Number} #top
-		 */
-		this.set( 'top', 0 );
-
-		/**
-		 * The scroll progress (in %) displayed over the tracker when being dragged by the user.
-		 *
-		 * @readonly
-		 * @member {Number} #scrollProgress
-		 */
-		this.set( 'scrollProgress', 0 );
-
-		/**
-		 * Indicates whether the tracker is being dragged by the user (e.g. using the mouse).
-		 *
-		 * @private
-		 * @readonly
-		 * @member {Boolean} #_isDragging
-		 */
-		this.set( '_isDragging', false );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-minimap__position-tracker',
-					bind.if( '_isDragging', 'ck-minimap__position-tracker_dragging' )
-				],
-				style: {
-					top: bind.to( 'top', top => toPx( top ) ),
-					height: bind.to( 'height', height => toPx( height ) )
-				},
-				'data-progress': bind.to( 'scrollProgress' )
-			},
-			on: {
-				mousedown: bind.to( () => {
-					this._isDragging = true;
-				} )
-			}
-		} );
-
-		/**
-		 * Fired when the position tracker is dragged.
-		 *
-		 * @event drag
-		 * @param {Number} movementY The vertical movement of the tracker as a result of dragging.
-		 */
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this.listenTo( global.document, 'mousemove', ( evt, data ) => {
-			if ( !this._isDragging ) {
-				return;
-			}
-
-			this.fire( 'drag', data.movementY );
-		}, { useCapture: true } );
-
-		this.listenTo( global.document, 'mouseup', () => {
-			this._isDragging = false;
-		}, { useCapture: true } );
-	}
-
-	/**
-	 * Sets the new height of the tracker to visualize the subset of the content visible to the user.
-	 *
-	 * @param {Number} newHeight
-	 */
-	setHeight( newHeight ) {
-		this.height = newHeight;
-	}
-
-	/**
-	 * Sets the top offset of the tracker to move it around vertically.
-	 *
-	 * @param {Number} newOffset
-	 */
-	setTopOffset( newOffset ) {
-		this.top = newOffset;
-	}
-
-	/**
-	 * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
-	 *
-	 * @param {Number} newProgress
-	 */
-	setScrollProgress( newProgress ) {
-		this.scrollProgress = newProgress;
-	}
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('height', 0);
+        this.set('top', 0);
+        this.set('scrollProgress', 0);
+        this.set('_isDragging', false);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-minimap__position-tracker',
+                    bind.if('_isDragging', 'ck-minimap__position-tracker_dragging')
+                ],
+                style: {
+                    top: bind.to('top', top => toPx(top)),
+                    height: bind.to('height', height => toPx(height))
+                },
+                'data-progress': bind.to('scrollProgress')
+            },
+            on: {
+                mousedown: bind.to(() => {
+                    this._isDragging = true;
+                })
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.listenTo(global.document, 'mousemove', (evt, data) => {
+            if (!this._isDragging) {
+                return;
+            }
+            this.fire('drag', data.movementY);
+        }, { useCapture: true });
+        this.listenTo(global.document, 'mouseup', () => {
+            this._isDragging = false;
+        }, { useCapture: true });
+    }
+    /**
+     * Sets the new height of the tracker to visualize the subset of the content visible to the user.
+     */
+    setHeight(newHeight) {
+        this.height = newHeight;
+    }
+    /**
+     * Sets the top offset of the tracker to move it around vertically.
+     */
+    setTopOffset(newOffset) {
+        this.top = newOffset;
+    }
+    /**
+     * Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
+     */
+    setScrollProgress(newProgress) {
+        this.scrollProgress = newProgress;
+    }
 }