@ckeditor/ckeditor5-minimap 35.4.0 → 36.0.0

package/src/minimapview.js

@@ -1,221 +1,137 @@
 /**
- * @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/minimapview
  */
-
 import { View } from 'ckeditor5/src/ui';
 import { Rect } from 'ckeditor5/src/utils';
-
 import MinimapIframeView from './minimapiframeview';
 import MinimapPositionTrackerView from './minimappositiontrackerview';
-
 /**
  * The main view of the minimap. It renders the original content but scaled down with a tracker element
  * visualizing the subset of the content visible to the user and allowing interactions (scrolling, dragging).
  *
- * @private
- * @extends module:ui/view~View
+ * @internal
  */
 export default class MinimapView extends View {
-	/**
-	 * Creates an instance of the minimap view.
-	 *
-	 * @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, scaleRatio, pageStyles, extraClasses, useSimplePreview, domRootClone } ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * An instance of the tracker view displayed over the minimap.
-		 *
-		 * @protected
-		 * @readonly
-		 * @member {module:minimap/minimappositiontrackerview~MinimapPositionTrackerView}
-		 */
-		this._positionTrackerView = new MinimapPositionTrackerView( locale );
-		this._positionTrackerView.delegate( 'drag' ).to( this );
-
-		/**
-		 * The scale ratio of the minimap relative to the original editing DOM root with the content.
-		 *
-		 * @protected
-		 * @readonly
-		 * @member {Number}
-		 */
-		this._scaleRatio = scaleRatio;
-
-		/**
-		 * An instance of the iframe view that hosts the minimap.
-		 *
-		 * @protected
-		 * @readonly
-		 * @member {module:minimap/minimapiframeview~MinimapIframeView}
-		 */
-		this._minimapIframeView = new MinimapIframeView( locale, {
-			useSimplePreview,
-			pageStyles,
-			extraClasses,
-			scaleRatio,
-			domRootClone
-		} );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-minimap'
-				]
-			},
-			children: [
-				this._positionTrackerView
-			],
-			on: {
-				click: bind.to( this._handleMinimapClick.bind( this ) ),
-				wheel: bind.to( this._handleMinimapMouseWheel.bind( this ) )
-			}
-		} );
-
-		/**
-		 * Fired when the minimap view is clicked.
-		 *
-		 * @event click
-		 * @param {Number} progress The number between 0 and 1 representing a place in the minimap (its height) that was clicked.
-		 */
-
-		/**
-		 * Fired when the position tracker is dragged or the minimap is scrolled via mouse wheel.
-		 *
-		 * @event drag
-		 * @param {Number} movementY The vertical movement of the minimap as a result of dragging or scrolling.
-		 */
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	destroy() {
-		this._minimapIframeView.destroy();
-
-		super.destroy();
-	}
-
-	/**
-	 * Returns the DOM {@link module:utils/dom/rect~Rect} height of the minimap.
-	 *
-	 * @readonly
-	 * @member {Number}
-	 */
-	get height() {
-		return new Rect( this.element ).height;
-	}
-
-	/**
-	 * Returns the number of available space (pixels) the position tracker (visible subset of the content) can use to scroll vertically.
-	 *
-	 * @readonly
-	 * @member {Number}
-	 */
-	get scrollHeight() {
-		return Math.max( 0, Math.min( this.height, this._minimapIframeView.height ) - this._positionTrackerView.height );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		this._minimapIframeView.render();
-
-		this.element.appendChild( this._minimapIframeView.element );
-	}
-
-	/**
-	 * Sets the new height of the minimap (in px) to respond to the changes in the original editing DOM root.
-	 *
-	 * **Note**:The provided value should be the `offsetHeight` of the original editing DOM root.
-	 *
-	 * @param {Number} newHeight
-	 */
-	setContentHeight( newHeight ) {
-		this._minimapIframeView.setHeight( newHeight * this._scaleRatio );
-	}
-
-	/**
-	 * Sets the minimap scroll progress.
-	 *
-	 * The minimap scroll progress is linked to the original editing DOM root and its scrollable container (ancestor).
-	 * Changing the progress will alter the vertical position of the minimap (and its position tracker) and give the user an accurate
-	 * overview of the visible document.
-	 *
-	 * **Note**: The value should be between 0 and 1. 0 when the DOM root has not been scrolled, 1 when the
-	 * scrolling has reached the end.
-	 *
-	 * @param {Number} newScrollProgress
-	 */
-	setScrollProgress( newScrollProgress ) {
-		const iframeView = this._minimapIframeView;
-		const positionTrackerView = this._positionTrackerView;
-
-		// The scrolling should end when the bottom edge of the iframe touches the bottom edge of the minimap.
-		if ( iframeView.height < this.height ) {
-			iframeView.setTopOffset( 0 );
-			positionTrackerView.setTopOffset( ( iframeView.height - positionTrackerView.height ) * newScrollProgress );
-		} else {
-			const totalOffset = iframeView.height - this.height;
-
-			iframeView.setTopOffset( -totalOffset * newScrollProgress );
-			positionTrackerView.setTopOffset( ( this.height - positionTrackerView.height ) * newScrollProgress );
-		}
-
-		positionTrackerView.setScrollProgress( Math.round( newScrollProgress * 100 ) );
-	}
-
-	/**
-	 * Sets the new height of the tracker (in px) to visualize the subset of the content visible to the user.
-	 *
-	 * @param {Number} trackerHeight
-	 */
-	setPositionTrackerHeight( trackerHeight ) {
-		this._positionTrackerView.setHeight( trackerHeight * this._scaleRatio );
-	}
-
-	/**
-	 * @private
-	 * @param {Event} data DOM event data
-	 */
-	_handleMinimapClick( data ) {
-		const positionTrackerView = this._positionTrackerView;
-
-		if ( data.target === positionTrackerView.element ) {
-			return;
-		}
-
-		const trackerViewRect = new Rect( positionTrackerView.element );
-		const diff = data.clientY - trackerViewRect.top - trackerViewRect.height / 2;
-		const percentage = diff / this._minimapIframeView.height;
-
-		this.fire( 'click', percentage );
-	}
-
-	/**
-	 * @private
-	 * @param {Event} data DOM event data
-	 */
-	_handleMinimapMouseWheel( data ) {
-		this.fire( 'drag', data.deltaY * this._scaleRatio );
-	}
+    /**
+     * Creates an instance of the minimap view.
+     */
+    constructor({ locale, scaleRatio, pageStyles, extraClasses, useSimplePreview, domRootClone }) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this._positionTrackerView = new MinimapPositionTrackerView(locale);
+        this._positionTrackerView.delegate('drag').to(this);
+        this._scaleRatio = scaleRatio;
+        this._minimapIframeView = new MinimapIframeView(locale, {
+            useSimplePreview,
+            pageStyles,
+            extraClasses,
+            scaleRatio,
+            domRootClone
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-minimap'
+                ]
+            },
+            children: [
+                this._positionTrackerView
+            ],
+            on: {
+                click: bind.to(this._handleMinimapClick.bind(this)),
+                wheel: bind.to(this._handleMinimapMouseWheel.bind(this))
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        this._minimapIframeView.destroy();
+        super.destroy();
+    }
+    /**
+     * Returns the DOM {@link module:utils/dom/rect~Rect} height of the minimap.
+     */
+    get height() {
+        return new Rect(this.element).height;
+    }
+    /**
+     * Returns the number of available space (pixels) the position tracker (visible subset of the content) can use to scroll vertically.
+     */
+    get scrollHeight() {
+        return Math.max(0, Math.min(this.height, this._minimapIframeView.height) - this._positionTrackerView.height);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._minimapIframeView.render();
+        this.element.appendChild(this._minimapIframeView.element);
+    }
+    /**
+     * Sets the new height of the minimap (in px) to respond to the changes in the original editing DOM root.
+     *
+     * **Note**:The provided value should be the `offsetHeight` of the original editing DOM root.
+     */
+    setContentHeight(newHeight) {
+        this._minimapIframeView.setHeight(newHeight * this._scaleRatio);
+    }
+    /**
+     * Sets the minimap scroll progress.
+     *
+     * The minimap scroll progress is linked to the original editing DOM root and its scrollable container (ancestor).
+     * Changing the progress will alter the vertical position of the minimap (and its position tracker) and give the user an accurate
+     * overview of the visible document.
+     *
+     * **Note**: The value should be between 0 and 1. 0 when the DOM root has not been scrolled, 1 when the
+     * scrolling has reached the end.
+     */
+    setScrollProgress(newScrollProgress) {
+        const iframeView = this._minimapIframeView;
+        const positionTrackerView = this._positionTrackerView;
+        // The scrolling should end when the bottom edge of the iframe touches the bottom edge of the minimap.
+        if (iframeView.height < this.height) {
+            iframeView.setTopOffset(0);
+            positionTrackerView.setTopOffset((iframeView.height - positionTrackerView.height) * newScrollProgress);
+        }
+        else {
+            const totalOffset = iframeView.height - this.height;
+            iframeView.setTopOffset(-totalOffset * newScrollProgress);
+            positionTrackerView.setTopOffset((this.height - positionTrackerView.height) * newScrollProgress);
+        }
+        positionTrackerView.setScrollProgress(Math.round(newScrollProgress * 100));
+    }
+    /**
+     * Sets the new height of the tracker (in px) to visualize the subset of the content visible to the user.
+     */
+    setPositionTrackerHeight(trackerHeight) {
+        this._positionTrackerView.setHeight(trackerHeight * this._scaleRatio);
+    }
+    /**
+     * @param data DOM event data
+     */
+    _handleMinimapClick(data) {
+        const positionTrackerView = this._positionTrackerView;
+        if (data.target === positionTrackerView.element) {
+            return;
+        }
+        const trackerViewRect = new Rect(positionTrackerView.element);
+        const diff = data.clientY - trackerViewRect.top - trackerViewRect.height / 2;
+        const percentage = diff / this._minimapIframeView.height;
+        this.fire('click', percentage);
+    }
+    /**
+     * @param data DOM event data
+     */
+    _handleMinimapMouseWheel(data) {
+        this.fire('drag', data.deltaY * this._scaleRatio);
+    }
 }

package/src/utils.js

@@ -1,142 +1,97 @@
 /**
- * @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
  */
-
 /* global CSSMediaRule */
-
 /**
  * @module minimap/utils
  */
-
 import { Rect, global } from 'ckeditor5/src/utils';
 import { DomConverter, Renderer } from 'ckeditor5/src/engine';
-
 /**
  * Clones the editing view DOM root by using a dedicated pair of {@link module:engine/view/renderer~Renderer} and
  * {@link module:engine/view/domconverter~DomConverter}. The DOM root clone updates incrementally to stay in sync with the
  * source root.
  *
- * @protected
- * @param {module:core/editor/editor~Editor} editor The editor instance the original editing root belongs to.
- * @param {String} rootName The name of the root to clone.
- * @returns {HTMLElement} The editing root DOM clone element.
+ * @internal
+ * @param editor The editor instance the original editing root belongs to.
+ * @param rootName The name of the root to clone.
+ * @returns The editing root DOM clone element.
  */
-export function cloneEditingViewDomRoot( editor, rootName ) {
-	const viewDocument = editor.editing.view.document;
-	const viewRoot = viewDocument.getRoot( rootName );
-	const domConverter = new DomConverter( viewDocument );
-	const renderer = new Renderer( domConverter, viewDocument.selection );
-	const domRootClone = editor.editing.view.getDomRoot().cloneNode();
-
-	domConverter.bindElements( domRootClone, viewRoot );
-
-	renderer.markToSync( 'children', viewRoot );
-	renderer.markToSync( 'attributes', viewRoot );
-
-	viewRoot.on( 'change:children', ( evt, node ) => renderer.markToSync( 'children', node ) );
-	viewRoot.on( 'change:attributes', ( evt, node ) => renderer.markToSync( 'attributes', node ) );
-	viewRoot.on( 'change:text', ( evt, node ) => renderer.markToSync( 'text', node ) );
-
-	renderer.render();
-
-	editor.editing.view.on( 'render', () => renderer.render() );
-
-	// TODO: Cleanup after destruction.
-	editor.on( 'destroy', () => {
-		domConverter.unbindDomElement( domRootClone );
-	} );
-
-	return domRootClone;
+export function cloneEditingViewDomRoot(editor, rootName) {
+    const viewDocument = editor.editing.view.document;
+    const viewRoot = viewDocument.getRoot(rootName);
+    const domConverter = new DomConverter(viewDocument);
+    const renderer = new Renderer(domConverter, viewDocument.selection);
+    const domRootClone = editor.editing.view.getDomRoot().cloneNode();
+    domConverter.bindElements(domRootClone, viewRoot);
+    renderer.markToSync('children', viewRoot);
+    renderer.markToSync('attributes', viewRoot);
+    viewRoot.on('change:children', (evt, node) => renderer.markToSync('children', node));
+    viewRoot.on('change:attributes', (evt, node) => renderer.markToSync('attributes', node));
+    viewRoot.on('change:text', (evt, node) => renderer.markToSync('text', node));
+    renderer.render();
+    editor.editing.view.on('render', () => renderer.render());
+    // TODO: Cleanup after destruction.
+    editor.on('destroy', () => {
+        domConverter.unbindDomElement(domRootClone);
+    });
+    return domRootClone;
 }
-
 /**
  * Harvests all web page styles, for instance, to allow re-using them in an `<iframe>` preserving the look of the content.
  *
  * The returned data format is as follows:
  *
- *		[
- *			'p { color: red; ... } h2 { font-size: 2em; ... } ...',
- *			'.spacing { padding: 1em; ... }; ...',
- *			'...',
- *			{ href: 'http://link.to.external.stylesheet' },
- *			{ href: '...' }
- *		]
+ * ```ts
+ * [
+ * 	'p { color: red; ... } h2 { font-size: 2em; ... } ...',
+ * 	'.spacing { padding: 1em; ... }; ...',
+ * 	'...',
+ * 	{ href: 'http://link.to.external.stylesheet' },
+ * 	{ href: '...' }
+ * ]
+ * ```
  *
  * **Note**: For stylesheets with `href` different than window origin, an object is returned because
  * accessing rules of these styles may cause CORS errors (depending on the configuration of the web page).
  *
- * @protected
- * @returns {Array.<String|Object>}
+ * @internal
  */
 export function getPageStyles() {
-	return Array.from( global.document.styleSheets )
-		.map( styleSheet => {
-			// CORS
-			if ( styleSheet.href && !styleSheet.href.startsWith( global.window.location.origin ) ) {
-				return { href: styleSheet.href };
-			}
-
-			return Array.from( styleSheet.cssRules )
-				.filter( rule => !( rule instanceof CSSMediaRule ) )
-				.map( rule => rule.cssText )
-				.join( ' \n' );
-		} );
+    return Array.from(global.document.styleSheets)
+        .map(styleSheet => {
+        // CORS
+        if (styleSheet.href && !styleSheet.href.startsWith(global.window.location.origin)) {
+            return { href: styleSheet.href };
+        }
+        return Array.from(styleSheet.cssRules)
+            .filter(rule => !(rule instanceof CSSMediaRule))
+            .map(rule => rule.cssText)
+            .join(' \n');
+    });
 }
-
 /**
- * TODO
+ * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
  *
- * @protected
- * @returns {module:utils/dom/rect~Rect}
+ * @internal
  */
-export function getDomElementRect( domElement ) {
-	return new Rect( domElement === global.document.body ? global.window : domElement );
+export function getDomElementRect(domElement) {
+    return new Rect(domElement === global.document.body ? global.window : domElement);
 }
-
 /**
- * TODO
+ * Gets client height according to passed DOM element. Returns window's height for `body` element.
  *
- * @protected
- * @returns {Number}
+ * @internal
  */
-export function getClientHeight( domElement ) {
-	return domElement === global.document.body ? global.window.innerHeight : domElement.clientHeight;
+export function getClientHeight(domElement) {
+    return domElement === global.document.body ? global.window.innerHeight : domElement.clientHeight;
 }
-
 /**
- * TODO
+ * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
  *
- * @protected
- * @returns {HTMLElement}
+ * @internal
  */
-export function getScrollable( domElement ) {
-	return domElement === global.document.body ? global.window : domElement;
-}
-
-/**
- * Returns the closest scrollable ancestor of a DOM element.
- *
- * TODO: Move to shared utils.
- *
- * @protected
- * @param {HTMLElement} domElement
- * @returns {HTMLElement|null}
- */
-export function findClosestScrollableAncestor( domElement ) {
-	do {
-		domElement = domElement.parentElement;
-
-		if ( !domElement ) {
-			return null;
-		}
-
-		const overflow = global.window.getComputedStyle( domElement ).overflowY;
-
-		if ( overflow === 'auto' || overflow === 'scroll' ) {
-			break;
-		}
-	} while ( domElement.tagName != 'BODY' );
-
-	return domElement;
+export function getScrollable(domElement) {
+    return domElement === global.document.body ? global.window : domElement;
 }

package/theme/minimap.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * 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
  */