@ckeditor/ckeditor5-minimap 41.3.1 → 41.4.0

package/dist/types/minimapview.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
+export type MinimapViewOptions = {
+    domRootClone: HTMLElement;
+    pageStyles: Array<string | {
+        href: string;
+    }>;
+    scaleRatio: number;
+    useSimplePreview?: boolean;
+    extraClasses?: string;
+};
+/**
+ * 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 {
+    /**
+     * An instance of the tracker view displayed over the minimap.
+     */
+    private readonly _positionTrackerView;
+    /**
+     * The scale ratio of the minimap relative to the original editing DOM root with the content.
+     */
+    private readonly _scaleRatio;
+    /**
+     * An instance of the iframe view that hosts the minimap.
+     */
+    private readonly _minimapIframeView;
+    /**
+     * Creates an instance of the minimap view.
+     */
+    constructor({ locale, scaleRatio, pageStyles, extraClasses, useSimplePreview, domRootClone }: {
+        locale: Locale;
+    } & MinimapViewOptions);
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Returns the DOM {@link module:utils/dom/rect~Rect} height of the minimap.
+     */
+    get height(): number;
+    /**
+     * Returns the number of available space (pixels) the position tracker (visible subset of the content) can use to scroll vertically.
+     */
+    get scrollHeight(): number;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * 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: number): void;
+    /**
+     * 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: number): void;
+    /**
+     * Sets the new height of the tracker (in px) to visualize the subset of the content visible to the user.
+     */
+    setPositionTrackerHeight(trackerHeight: number): void;
+    /**
+     * @param data DOM event data
+     */
+    private _handleMinimapClick;
+    /**
+     * @param data DOM event data
+     */
+    private _handleMinimapMouseWheel;
+}
+/**
+ * Fired when the minimap view is clicked.
+ *
+ * @eventName ~MinimapView#click
+ * @param percentage The number between 0 and 1 representing a place in the minimap (its height) that was clicked.
+ */
+export type MinimapClickEvent = {
+    name: 'click';
+    args: [percentage: number];
+};
+/**
+ * Fired when the position tracker is dragged or the minimap is scrolled via mouse wheel.
+ *
+ * @eventName ~MinimapView#drag
+ * @param movementY The vertical movement of the minimap as a result of dragging or scrolling.
+ */
+export type MinimapDragEvent = {
+    name: 'drag';
+    args: [movementY: number];
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, 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.js';
+import type { Editor } from 'ckeditor5/src/core.js';
+/**
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-minimap",
-  "version": "41.3.1",
+  "version": "41.4.0",
   "description": "Content minimap feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "41.3.1"
+    "ckeditor5": "41.4.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
     "directory": "packages/ckeditor5-minimap"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/minimapiframeview.js

@@ -26,6 +26,7 @@ export default class MinimapIframeView extends IframeView {
         this.extendTemplate({
             attributes: {
                 tabindex: -1,
+                'aria-hidden': 'true',
                 class: [
                     'ck-minimap__iframe'
                 ],

package/theme/minimap.css

@@ -38,6 +38,11 @@
 		z-index: 1;
 		transition: background 100ms ease-in-out;
 
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+
 		&:hover {
 			background:hsla( var(--ck-color-minimap-tracker-background), .3 );
 		}
@@ -64,6 +69,11 @@
 			border-radius: 3px;
 			opacity: 0;
 			transition: opacity 100ms ease-in-out;
+
+
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
 		}
 	}
 }