@ckeditor/ckeditor5-minimap 39.0.2 → 40.0.0

package/src/minimapview.js

@@ -1,137 +1,137 @@
-/**
- * @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).
- *
- * @internal
- */
-export default class MinimapView extends View {
-    /**
-     * 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);
-    }
-}
+/**
+ * @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).
+ *
+ * @internal
+ */
+export default class MinimapView extends View {
+    /**
+     * 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.d.ts

@@ -1,61 +1,61 @@
-/**
- * @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/utils
- */
-import { Rect } from 'ckeditor5/src/utils';
-import type { Editor } from 'ckeditor5/src/core';
-/**
- * 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.
- *
- * @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 declare function cloneEditingViewDomRoot(editor: Editor, rootName?: string): HTMLElement;
-/**
- * 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:
- *
- * ```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).
- *
- * @internal
- */
-export declare function getPageStyles(): Array<string | {
-    href: string;
-}>;
-/**
- * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
- *
- * @internal
- */
-export declare function getDomElementRect(domElement: HTMLElement): Rect;
-/**
- * Gets client height according to passed DOM element. Returns window's height for `body` element.
- *
- * @internal
- */
-export declare function getClientHeight(domElement: HTMLElement): number;
-/**
- * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
- *
- * @internal
- */
-export declare function getScrollable(domElement: HTMLElement): Window | HTMLElement;
+/**
+ * @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/utils
+ */
+import { Rect } from 'ckeditor5/src/utils';
+import type { Editor } from 'ckeditor5/src/core';
+/**
+ * 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.
+ *
+ * @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 declare function cloneEditingViewDomRoot(editor: Editor, rootName?: string): HTMLElement;
+/**
+ * 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:
+ *
+ * ```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).
+ *
+ * @internal
+ */
+export declare function getPageStyles(): Array<string | {
+    href: string;
+}>;
+/**
+ * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
+ *
+ * @internal
+ */
+export declare function getDomElementRect(domElement: HTMLElement): Rect;
+/**
+ * Gets client height according to passed DOM element. Returns window's height for `body` element.
+ *
+ * @internal
+ */
+export declare function getClientHeight(domElement: HTMLElement): number;
+/**
+ * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
+ *
+ * @internal
+ */
+export declare function getScrollable(domElement: HTMLElement): Window | HTMLElement;

package/src/utils.js

@@ -1,97 +1,97 @@
-/**
- * @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.
- *
- * @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;
-}
-/**
- * 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:
- *
- * ```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).
- *
- * @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');
-    });
-}
-/**
- * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
- *
- * @internal
- */
-export function getDomElementRect(domElement) {
-    return new Rect(domElement === global.document.body ? global.window : domElement);
-}
-/**
- * Gets client height according to passed DOM element. Returns window's height for `body` element.
- *
- * @internal
- */
-export function getClientHeight(domElement) {
-    return domElement === global.document.body ? global.window.innerHeight : domElement.clientHeight;
-}
-/**
- * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
- *
- * @internal
- */
-export function getScrollable(domElement) {
-    return domElement === global.document.body ? global.window : domElement;
-}
+/**
+ * @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.
+ *
+ * @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;
+}
+/**
+ * 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:
+ *
+ * ```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).
+ *
+ * @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');
+    });
+}
+/**
+ * Gets dimensions rectangle according to passed DOM element. Returns whole window's size for `body` element.
+ *
+ * @internal
+ */
+export function getDomElementRect(domElement) {
+    return new Rect(domElement === global.document.body ? global.window : domElement);
+}
+/**
+ * Gets client height according to passed DOM element. Returns window's height for `body` element.
+ *
+ * @internal
+ */
+export function getClientHeight(domElement) {
+    return domElement === global.document.body ? global.window.innerHeight : domElement.clientHeight;
+}
+/**
+ * Returns the DOM element itself if it's not a `body` element, whole window otherwise.
+ *
+ * @internal
+ */
+export function getScrollable(domElement) {
+    return domElement === global.document.body ? global.window : domElement;
+}