@zipify/wysiwyg 1.0.0-dev.1

package/example/presets.js

@@ -0,0 +1,245 @@
+export const PRESETS = [
+    {
+        'id': 'h1',
+        'name': 'H1',
+        'node': {
+            'type': 'heading',
+            'level': 1
+        },
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '40px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '40px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '28px'
+        }
+    },
+    {
+        'id': 'h2',
+        'name': 'H2',
+        'node': {
+            'type': 'heading',
+            'level': 2
+        },
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '32px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '32px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '24px'
+        }
+    },
+    {
+        'id': 'h3',
+        'name': 'H3',
+        'node': {
+            'type': 'heading',
+            'level': 3
+        },
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '28px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '28px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '20px'
+        }
+    },
+    {
+        'id': 'h4',
+        'name': 'H4',
+        'node': {
+            'type': 'heading',
+            'level': 4
+        },
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '24px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '700',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '24px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.2',
+            'font_size': '18px'
+        }
+    },
+    {
+        'id': 'link',
+        'name': 'Link',
+        'hidden': true,
+        'desktop': {
+            'alignment': 'left',
+            'line_height': 'inherit',
+            'font_size': 'inherit'
+        },
+        'common': {
+            'font_family': 'inherit',
+            'font_weight': 'inherit',
+            'color': '',
+            'font_style': 'normal',
+            'text_decoration': 'underline'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': 'inherit',
+            'font_size': 'inherit'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': 'inherit',
+            'font_size': 'inherit'
+        }
+    },
+    {
+        'id': 'regular-1',
+        'name': 'Regular',
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '18px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '18px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '18px'
+        }
+    },
+    {
+        'id': 'regular-2',
+        'name': 'Regular 2',
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '16px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '16px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '16px'
+        }
+    },
+    {
+        'id': 'regular-3',
+        'name': 'Regular 3',
+        'desktop': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '12px'
+        },
+        'common': {
+            'font_family': 'Lato',
+            'font_weight': '400',
+            'color': '#262626',
+            'font_style': 'normal',
+            'text_decoration': 'none'
+        },
+        'tablet': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '12px'
+        },
+        'mobile': {
+            'alignment': 'left',
+            'line_height': '1.43',
+            'font_size': '12px'
+        }
+    }
+];
+
+export function renderPresetVariable({ device, preset, property }) {
+    const formattedProperty = property.replace(/_/i, '-');
+
+    return `--${device}-${preset.id}-${formattedProperty}`;
+}
+
+export function renderPresets() {
+    for (const preset of PRESETS) {
+        for (const device of ['common', 'mobile', 'tablet', 'desktop']) {
+            for (const [property, value] of Object.entries(preset[device])) {
+                const variable = renderPresetVariable({ device, preset, property });
+
+                document.body.style.setProperty(variable, value);
+            }
+        }
+    }
+}

package/example/tooltip/Tooltip.js

@@ -0,0 +1,241 @@
+import './tooltip.css';
+
+import { popperGenerator, defaultModifiers } from '@popperjs/core/lib/popper-lite';
+import arrow from '@popperjs/core/lib/modifiers/arrow';
+import flip from '@popperjs/core/lib/modifiers/flip';
+import offset from '@popperjs/core/lib/modifiers/offset';
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
+import { TooltipCloseOnScrollModifier } from './modifiers';
+
+export class Tooltip {
+    static get defaultOptions() {
+        return {
+            placement: 'top',
+            size: 'md'
+        };
+    }
+
+    static get animationOptions() {
+        return {
+            enterDuration: 150,
+            leaveDuration: 200
+        };
+    }
+
+    static get popperStyles() {
+        return {
+            willChange: 'transform',
+            zIndex: 10001
+        };
+    }
+
+    /** @type {HTMLElement} tooltip's target element */
+    triggerEl = null;
+
+    /** @type {string} tooltip's content */
+    message = '';
+
+    /** @type {object} options for Popper.js instance */
+    popperOptions = {};
+
+    /** @type {object} styles for tooltip's wrapper element */
+    popperStyles = {};
+
+    /** @type {{ enterDuration: number, leaveDuration: number }} tooltip's fade in / fade out durations */
+    animationOptions = {};
+
+    /** @type {object | null} created Popper.js instance */
+    popperInstance = null;
+
+    /** @type {{ tooltip: HTMLElement, container: HTMLElement, contentEl: HTMLElement, arrow: HTMLElement }} elements of tooltip */
+    elements = {};
+
+    /**
+     * Create custom tooltip for given element with given content and options
+     * @param params {object}
+     * @param params.triggerEl {HTMLElement}
+     * @param params.message {string}
+     * @param [params.popperOptions] {{ placement: string, size: string }}
+     * @param [params.popperStyles] {object}
+     * @param [params.animationOptions] {{ enterDuration: number, leaveDuration: number }}
+     */
+    constructor({ triggerEl, message, popperOptions, popperStyles, animationOptions }) {
+        this.triggerEl = triggerEl;
+        this.message = message;
+
+        this.popperOptions = Object.assign({}, Tooltip.defaultOptions, popperOptions);
+        this.popperStyles = Object.assign({}, Tooltip.popperStyles, popperStyles);
+        this.animationOptions = Object.assign({}, Tooltip.animationOptions, animationOptions);
+
+        this._isMacOS = window.navigator.userAgent.toLowerCase().includes('mac os');
+
+        this._initialize();
+    }
+
+    _initialize() {
+        let tooltip = this._createTooltip();
+
+        this.elements = {
+            tooltip,
+            container: tooltip.querySelector('[data-container]'),
+            contentEl: tooltip.querySelector('[data-content]'),
+            arrow: tooltip.querySelector('[data-arrow]')
+        };
+    }
+
+    _createTooltip() {
+        let element = document.createElement('div');
+
+        Object.keys(this.popperStyles).forEach((style) => (element.style[style] = this.popperStyles[style]));
+
+        element.innerHTML = `
+            <div class="zpa-tooltip zpa-tooltip--${this.popperOptions.size}" data-container>
+                <div class="zpa-tooltip__content" data-content></div>
+                <div class="zpa-tooltip__arrow" data-arrow></div>
+            </div>`;
+
+        return element;
+    }
+
+    _renderContent(message) {
+        // Do not use .innerHTML, it will break tooltips in Scripts section!
+        this.elements.contentEl.textContent = message;
+
+        this.elements.hotkey?.remove();
+        this._renderHotkeyTip();
+    }
+
+    _renderHotkeyTip() {
+        const raw = this.triggerEl.dataset.tooltipHotkey;
+
+        if (!raw) return;
+
+        const parts = raw.split(' ').map(this._formatHotkeyPart.bind(this));
+        const tipEl = document.createElement('span');
+
+        tipEl.classList.add('zpa-tooltip__hotkey');
+        tipEl.innerText = this._isMacOS ? parts.join('') : parts.join(' ');
+
+        this.elements.contentEl.append(tipEl);
+    }
+
+    _formatHotkeyPart(part) {
+        switch (part.toLowerCase()) {
+            case 'mod':
+                return this._isMacOS ? '⌘' : 'Ctrl';
+
+            case 'shift':
+                return this._isMacOS ? '⇧' : 'Shift';
+
+            default: return part;
+        }
+    }
+
+    _getModifiers() {
+        return [
+            {
+                name: 'arrow',
+                options: {
+                    element: '[data-arrow]'
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 8]
+                }
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 4,
+                        bottom: 4,
+                        left: 8,
+                        right: 8
+                    }
+                }
+            },
+            {
+                name: 'customAttributes',
+                enabled: true,
+                phase: 'beforeWrite',
+                requires: ['computeStyles'],
+                fn: ({ state }) => {
+                    this.elements.arrow.classList.add(`zpa-tooltip__arrow--${state.placement}`);
+                    state.attributes.popper = {};
+                }
+            },
+            TooltipCloseOnScrollModifier.init({ tooltip: this })
+        ];
+    }
+
+    _setTooltipDuration(duration = 0) {
+        this.elements.container.style.transitionDuration = `${duration}ms`;
+    }
+
+    _renderPopper() {
+        const modifiers = this._getModifiers();
+
+        const createPopper = popperGenerator({
+            defaultModifiers: [...defaultModifiers, arrow, flip, offset, preventOverflow]
+        });
+
+        this.popperInstance = createPopper(this.triggerEl, this.elements.tooltip, {
+            placement: this.popperOptions.placement,
+            modifiers
+        });
+
+        return this.popperInstance;
+    }
+
+    _toggle(makeVisible) {
+        const { enterDuration, leaveDuration } = this.animationOptions;
+
+        this._setTooltipDuration(makeVisible ? enterDuration : leaveDuration);
+        this.elements.container.classList.toggle('zpa-tooltip--open', makeVisible);
+    }
+
+    open() {
+        if (this.popperInstance) {
+            return;
+        }
+
+        document.body.appendChild(this.elements.tooltip);
+        this.popperInstance = this._renderPopper();
+
+        this._renderContent(this.message);
+        this._toggle(true);
+    }
+
+    close() {
+        if (!this.popperInstance) {
+            return;
+        }
+
+        this._toggle(false);
+
+        return setTimeout(() => {
+            this.destroy();
+        }, this.animationOptions.leaveDuration);
+    }
+
+    update() {
+        this.popperInstance?.update();
+    }
+
+    updateContent(content) {
+        this.message = content;
+        this._renderContent(this.message);
+        this.update();
+    }
+
+    destroy() {
+        this.elements.tooltip.remove();
+
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+}

package/example/tooltip/TooltipManager.js

@@ -0,0 +1,132 @@
+import { Tooltip } from './Tooltip';
+
+const DEBOUNCE_TIMEOUT = 150;
+const OPEN_TOOLTIP_DELAY = 450;
+
+export class TooltipManager {
+    /** @type {Tooltip} active tooltip instance */
+    activeTooltip = null;
+
+    /** @type {HTMLElement} target element of active tooltip instance */
+    activeTooltipTargetEl = null;
+
+    /** @type {number} tooltip opening timeout id */
+    timeoutId = 0;
+
+    /** @type {MutationObserver} */
+    tooltipContentObserver = null;
+
+    constructor() {
+        this._onDebouncedMouseOver = window._.debounce(this._onMouseOver.bind(this), DEBOUNCE_TIMEOUT);
+        this.tooltipContentObserver = new MutationObserver(this._updateActiveTooltipContent.bind(this));
+        this.closeActiveTooltip = this.closeActiveTooltip.bind(this);
+    }
+
+    init() {
+        this.listenEvents();
+    }
+
+    listenEvents() {
+        /**
+         * Capture option have to be true for correct work tooltips of static elements
+         * because _triggerHover method of ElementSelectionManager.js has stopPropagation.
+         */
+        document.addEventListener('mouseover', this._onDebouncedMouseOver, { capture: true });
+    }
+
+    _onMouseOver({ target }) {
+        const tooltipTargetEl = target.closest('[data-tooltip]');
+
+        target.addEventListener('click', this.closeActiveTooltip);
+
+        if (this.activeTooltipTargetEl && tooltipTargetEl === this.activeTooltipTargetEl) {
+            return;
+        }
+
+        this.closeActiveTooltip();
+
+        if (!tooltipTargetEl) {
+            return;
+        }
+
+        const tooltipContent = this._getTooltipContent(tooltipTargetEl);
+
+        if (!tooltipContent) {
+            return;
+        }
+
+        this.timeoutId = setTimeout(() => {
+            if (!document.body.contains(tooltipTargetEl)) {
+                return;
+            }
+
+            this.activeTooltip = new Tooltip({
+                message: tooltipContent,
+                triggerEl: tooltipTargetEl,
+                popperOptions: this._getTooltipOptions(tooltipTargetEl)
+            });
+
+            this.activeTooltip.open();
+            this.activeTooltipTargetEl = tooltipTargetEl;
+
+            this._listenTooltipChanges();
+        }, OPEN_TOOLTIP_DELAY);
+    }
+
+    _getTooltipContent(tooltipTargetEl) {
+        const tooltipContent = tooltipTargetEl.dataset.tooltip || '';
+
+        return tooltipContent.trim();
+    }
+
+    _getTooltipOptions(tooltipTargetEl) {
+        const tooltipOptions = {};
+        const { tooltipPosition, tooltipSize } = tooltipTargetEl.dataset;
+
+        if (tooltipPosition) {
+            tooltipOptions.placement = tooltipPosition;
+        }
+
+        if (tooltipSize) {
+            tooltipOptions.size = tooltipSize;
+        }
+
+        return tooltipOptions;
+    }
+
+    _listenTooltipChanges() {
+        this.tooltipContentObserver.observe(this.activeTooltipTargetEl, {
+            attributes: true,
+            attributeFilter: ['data-tooltip']
+        });
+    }
+
+    _updateActiveTooltipContent() {
+        this.activeTooltip?.updateContent(this._getTooltipContent(this.activeTooltipTargetEl));
+    }
+
+    /**
+     * Update position of active tooltip. It сan be useful when dragging or dynamically resizing a target element
+     */
+    updateActiveTooltip() {
+        this.activeTooltip?.update();
+    }
+
+    /**
+     * Destroy active tooltip after hiding animation is complete
+     */
+    closeActiveTooltip() {
+        clearTimeout(this.timeoutId);
+
+        if (!this.activeTooltip) {
+            return;
+        }
+
+        this.tooltipContentObserver.disconnect();
+        this.activeTooltip.close();
+        this.activeTooltipTargetEl.removeEventListener('click', this.closeActiveTooltip);
+
+        this.activeTooltip = null;
+        this.activeTooltipTargetEl = null;
+    }
+}

package/example/tooltip/index.js

@@ -0,0 +1,3 @@
+import { TooltipManager } from './TooltipManager';
+
+export const tooltipManager = new TooltipManager();

package/example/tooltip/modifiers/TooltipCloseOnScrollModifier.js

@@ -0,0 +1,73 @@
+export class TooltipCloseOnScrollModifier {
+    /**
+     * @type {Tooltip} - tooltip element
+     * */
+    _tooltip = null;
+
+    /**
+     * @description
+     * Tooltip emits an event after it was created
+     * To close it on scroll, we need to compare last and current
+     *
+     * @type {DOMRect | null}
+     * */
+    _elementPreviousPosition = null;
+
+    /**
+     * @type {boolean}
+     * */
+    isClosed = false;
+
+    /**
+     * @param {Tooltip} tooltip - tooltip element
+     *
+     * @return {Partial<Modifier<any, any>>} - Popper modifier
+     * */
+    static init({ tooltip }) {
+        const modifier = new TooltipCloseOnScrollModifier(tooltip);
+
+        return {
+            name: 'closeOnScroll',
+            enabled: true,
+            phase: 'main',
+            fn: () => modifier.closeOnScroll()
+        };
+    }
+
+    /**
+     * @param {Tooltip} tooltip - tooltip element
+     * */
+    constructor(tooltip) {
+        this._tooltip = tooltip;
+    }
+
+    /**
+     * To check is tooltip scrolled, we need to check target element position
+     * */
+    get isScrolled() {
+        if (!this._elementPreviousPosition) {
+            return false;
+        }
+
+        const isScrolledY = this._elementPreviousPosition.y !== this._elementCurrentPosition.y;
+        const isScrolledX = this._elementPreviousPosition.x !== this._elementCurrentPosition.x;
+
+        return isScrolledY || isScrolledX;
+    }
+
+    closeOnScroll() {
+        if (this.isClosed) return;
+
+        this._elementCurrentPosition = this._tooltip.triggerEl.getBoundingClientRect();
+        this.isScrolled ? this._close() : this._storeElementPosition();
+    }
+
+    _close() {
+        this.isClosed = true;
+        this._tooltip.close();
+    }
+
+    _storeElementPosition() {
+        this._elementPreviousPosition = this._elementCurrentPosition;
+    }
+}

package/example/tooltip/modifiers/index.js

@@ -0,0 +1 @@
+export * from './TooltipCloseOnScrollModifier';