uiik 1.1.0 → 1.3.0-alpha

package/splittable.js

@@ -1,340 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
-/* eslint-disable max-len */
-/**
- * splitter
- * @author holyhigh
- */
-import { isArray, isEmpty } from 'myfx/is';
-import { each, includes, map, reject } from 'myfx/collection';
-import { assign } from 'myfx/object';
-import { Uii } from './types';
-import { lockPage, restoreCursor, saveCursor, setCursor, unlockPage } from './utils';
-const THRESHOLD = 1;
-const CLASS_SPLITTABLE = "uii-splittable";
-const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
-const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
-const CLASS_SPLITTABLE_HANDLE_ACTIVE = "uii-splittable-handle-active";
-const CLASS_SPLITTABLE_V = "uii-splittable-v";
-const CLASS_SPLITTABLE_H = "uii-splittable-h";
-function getRootEl(el, root) {
-    let rs = el.parentNode;
-    while (rs && rs.parentNode !== root) {
-        rs = rs.parentNode;
-    }
-    return rs;
-}
-/**
- * 用于表示一个或多个分割器的定义
- * > 可用CSS接口
- * - .uii-splittable
- * - .uii-splittable-handle
- * - .uii-splittable-handle-ghost
- * - .uii-splittable-handle-active
- * - .uii-splittable-v
- * - .uii-splittable-h
- * @public
- */
-export class Splittable extends Uii {
-    constructor(container, opts) {
-        super(container, assign({
-            handleSize: 10,
-            minSize: 0,
-            sticky: false,
-            inside: false,
-            ghost: false
-        }, opts));
-        _Splittable_instances.add(this);
-        each(this.ele, con => {
-            //detect container position
-            const pos = window.getComputedStyle(con).position;
-            if (pos === "static") {
-                con.style.position = "relative";
-            }
-            con.classList.toggle(CLASS_SPLITTABLE, true);
-            const handleDoms = con.querySelectorAll(this.opts.handle);
-            const children = reject(con.children, c => {
-                if (includes(handleDoms, c))
-                    return true;
-                return false;
-            });
-            const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
-            con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
-            const minSizeAry = map(children, (c, i) => {
-                if (isArray(this.opts.minSize)) {
-                    return this.opts.minSize[i] || 0;
-                }
-                else {
-                    return this.opts.minSize;
-                }
-            });
-            const stickyAry = map(children, (c, i) => {
-                if (isArray(this.opts.sticky)) {
-                    return this.opts.sticky[i] || false;
-                }
-                else {
-                    return this.opts.sticky;
-                }
-            });
-            if (isEmpty(handleDoms)) {
-                const len = children.length - 1;
-                for (let i = 0; i < len; i++) {
-                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
-                }
-            }
-            else {
-                each(handleDoms, (h, i) => {
-                    const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
-                    let dom1, dom2;
-                    if (isRoot) {
-                        dom1 = h.previousElementSibling;
-                        dom2 = h.nextElementSibling;
-                    }
-                    else {
-                        dom2 = getRootEl(h, con);
-                        dom1 = dom2.previousElementSibling;
-                    }
-                    __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
-                });
-            }
-        });
-    }
-}
-_Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
-    let dir = 'h';
-    const child = container.children[0];
-    let lastY = child.offsetTop;
-    each(container.children, c => {
-        if (c.offsetTop != lastY) {
-            dir = 'v';
-            return false;
-        }
-    });
-    return dir;
-}, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
-    var _a;
-    const handleSize = opts.handleSize;
-    if (!handle) {
-        handle = document.createElement('div');
-        let initPos = 0;
-        if (!opts.inside) {
-            initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
-        }
-        const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
-        const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
-        handle.style.cssText =
-            'position: absolute;' + (dir === 'v' ? sensorVCss : sensorHCss);
-        if (opts.inside) {
-            dom2.appendChild(handle);
-        }
-        (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
-    }
-    handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
-    handle.dataset.cursor = handle.style.cursor;
-    handle.classList.add(CLASS_SPLITTABLE_HANDLE);
-    const minSize1 = minSizeAry[0];
-    const minSize2 = minSizeAry[1];
-    let sticky1 = stickyAry[0];
-    let sticky2 = stickyAry[1];
-    const onStart = opts.onStart;
-    const onSplit = opts.onSplit;
-    const onEnd = opts.onEnd;
-    const onSticky = opts.onSticky;
-    const onClone = opts.onClone;
-    const oneSideMode = opts.oneSideMode;
-    const updateStart = !oneSideMode || oneSideMode === 'start';
-    const updateEnd = !oneSideMode || oneSideMode === 'end';
-    handle.onmousedown = function (e) {
-        // 1. 获取原始高度/宽度;设置宽度/高度
-        let originSize = 0;
-        let originSize1 = 0;
-        const originPosX = e.clientX;
-        const originPosY = e.clientY;
-        let splitterSize = 1;
-        let blockSize = 0; // 分割区size
-        switch (dir) {
-            case 'v':
-                originSize = dom1.offsetHeight;
-                originSize1 = dom2.offsetHeight;
-                splitterSize = handle.offsetHeight;
-                break;
-            case 'h':
-                originSize = dom1.offsetWidth;
-                originSize1 = dom2.offsetWidth;
-                splitterSize = handle.offsetWidth;
-                break;
-        }
-        blockSize = splitterSize + originSize + originSize1;
-        const dom1Style = dom1.style;
-        const dom2Style = dom2.style;
-        //ghost
-        const ghost = opts.ghost;
-        const ghostClass = opts.ghostClass;
-        let ghostNode = null;
-        // 初始化sticked位置
-        let sticked = 'none';
-        if (originSize < minSize1 / 2) {
-            sticked = 'start';
-        }
-        else if (blockSize - originSize - splitterSize < minSize2 / 2) {
-            sticked = 'end';
-        }
-        let dragging = false;
-        saveCursor();
-        let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
-        let ds1, anotherSize;
-        const dragListener = (ev) => {
-            var _a;
-            const offsetx = ev.clientX - originPosX;
-            const offsety = ev.clientY - originPosY;
-            if (!dragging) {
-                if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
-                    dragging = true;
-                    handle === null || handle === void 0 ? void 0 : handle.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
-                    if (ghost) {
-                        ghostNode = handle.cloneNode(true);
-                        ghostNode.style.opacity = '0.3';
-                        ghostNode.style.pointerEvents = 'none';
-                        ghostNode.classList.add(CLASS_SPLITTABLE_HANDLE_GHOST);
-                        if (ghostNode) {
-                            if (ghostClass) {
-                                ghostNode.className =
-                                    ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
-                            }
-                            (_a = handle === null || handle === void 0 ? void 0 : handle.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
-                            onClone && onClone({ clone: ghostNode }, e);
-                        }
-                    }
-                    lockPage();
-                    setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
-                    onStart && onStart({ size1: originSize, size2: originSize1 }, ev);
-                }
-                else {
-                    ev.preventDefault();
-                    return false;
-                }
-            }
-            let doSticky = false;
-            ds1 = dir === 'v' ? originSize + offsety : originSize + offsetx;
-            if (ds1 < minSize1 / 2 && sticky1 && minSize1 > 0) {
-                if (sticked == 'none') {
-                    doSticky = true;
-                    sticked = 'start';
-                }
-                ds1 = 0;
-            }
-            else if (ds1 < minSize1) {
-                ds1 = minSize1;
-                if (sticked == 'start' && sticky1) {
-                    // 重置状态
-                    doSticky = true;
-                    sticked = 'none';
-                }
-            }
-            else if (blockSize - ds1 - splitterSize < minSize2 / 2 &&
-                sticky2) {
-                if (sticked == 'none') {
-                    doSticky = true;
-                    sticked = 'end';
-                }
-                ds1 = blockSize - splitterSize;
-            }
-            else if (blockSize - ds1 - splitterSize < minSize2) {
-                ds1 = blockSize - minSize2 - splitterSize;
-                if (sticked == 'end' && sticky2) {
-                    // 重置状态
-                    doSticky = true;
-                    sticked = 'none';
-                }
-            }
-            anotherSize = blockSize - ds1 - splitterSize;
-            if (ghostNode) {
-                if (dir === 'v') {
-                    ghostNode.style.top = startPos + ds1 - handleSize / 2 + 'px';
-                }
-                else {
-                    ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
-                }
-            }
-            else {
-                const updateProp = dir === 'v' ? 'height' : 'width';
-                if (updateStart) {
-                    dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
-                }
-                if (updateEnd) {
-                    dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
-                }
-                if (doSticky) {
-                    onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
-                }
-                //update handle
-                if (dir === 'v') {
-                    handle.style.top = dom2.offsetTop - handleSize / 2 + 'px';
-                }
-                else {
-                    handle.style.left = dom2.offsetLeft - handleSize / 2 + 'px';
-                }
-            }
-            onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
-            ev.preventDefault();
-            return false;
-        };
-        const dragEndListener = (ev) => {
-            var _a, _b;
-            document.removeEventListener('mousemove', dragListener, false);
-            document.removeEventListener('mouseup', dragEndListener, false);
-            window.removeEventListener('blur', dragEndListener, false);
-            if (dragging) {
-                switch (dir) {
-                    case 'v':
-                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetHeight) || -1;
-                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetHeight) || -1;
-                        break;
-                    case 'h':
-                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetWidth) || -1;
-                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetWidth) || -1;
-                        break;
-                }
-                handle === null || handle === void 0 ? void 0 : handle.classList.remove(CLASS_SPLITTABLE_HANDLE_ACTIVE);
-                if (ghostNode) {
-                    const updateProp = dir === 'v' ? 'height' : 'width';
-                    if (updateStart) {
-                        dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
-                    }
-                    if (updateEnd) {
-                        dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
-                    }
-                    //update handle
-                    if (dir === 'v') {
-                        handle.style.top = startPos + ds1 - handleSize / 2 + 'px';
-                    }
-                    else {
-                        handle.style.left = startPos + ds1 - handleSize / 2 + 'px';
-                    }
-                    ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
-                }
-                unlockPage();
-                restoreCursor();
-                onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
-            }
-        };
-        document.addEventListener('mousemove', dragListener, false);
-        document.addEventListener('mouseup', dragEndListener, false);
-        window.addEventListener('blur', dragEndListener, false);
-        e.preventDefault();
-        return false;
-    };
-};
-/**
- * Add one or more splittors into the container
- * @param container css selector or html element
- * @param opts SplittableOptions
- * @returns
- */
-export function newSplittable(container, opts) {
-    return new Splittable(container, opts);
-}

package/types.js

@@ -1,116 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _Uii_listeners;
-import { isElement, isString, isArrayLike } from 'myfx/is';
-import { each, map, toArray } from 'myfx/collection';
-import { assign } from 'myfx/object';
-/**
- * A Base class for all Uii classes
- */
-export class Uii {
-    constructor(ele, opts) {
-        this.enabled = true;
-        _Uii_listeners.set(this, []);
-        this.opts = opts || {};
-        if (isArrayLike(ele) && !isString(ele)) {
-            this.ele = map(ele, (el) => {
-                let e = isString(el) ? document.querySelector(el) : el;
-                if (!isElement(e)) {
-                    console.error('Invalid element "' + el + '"');
-                    return false;
-                }
-                return e;
-            });
-        }
-        else {
-            const el = isString(ele) ? document.querySelectorAll(ele) : ele;
-            if (!isElement(el) && !isArrayLike(el)) {
-                console.error('Invalid element "' + ele + '"');
-                return;
-            }
-            this.ele = isArrayLike(el) ? toArray(el) : [el];
-        }
-    }
-    /**
-     * 销毁uii对象，包括卸载事件、清空元素等
-     */
-    destroy() {
-        each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
-            ev[0].removeEventListener(ev[1], ev[2], ev[3]);
-        });
-        __classPrivateFieldSet(this, _Uii_listeners, [], "f");
-    }
-    /**
-     * 注册事件，以便在{@link destroy}方法中卸载
-     * @param el dom元素
-     * @param event 事件名
-     * @param hook 回调函数
-     * @param useCapture 默认false
-     */
-    registerEvent(el, event, hook, useCapture = false) {
-        const wrapper = ((ev) => {
-            if (!this.enabled)
-                return;
-            hook(ev);
-        }).bind(this);
-        el.addEventListener(event, wrapper, useCapture);
-        __classPrivateFieldGet(this, _Uii_listeners, "f").push([el, event, wrapper, useCapture]);
-    }
-    /**
-     * 禁用uii实例，禁用后的dom不会响应事件
-     */
-    disable() {
-        this.enabled = false;
-    }
-    /**
-     * 启用uii实例
-     */
-    enable() {
-        this.enabled = true;
-    }
-    /**
-     * 获取uii实例选项对象
-     */
-    getOptions() {
-        return this.opts;
-    }
-    /**
-     * 获取指定名称的选项值
-     * @param name
-     * @returns
-     */
-    getOption(name) {
-        return this.opts[name];
-    }
-    /**
-     * 设置多个选项值。触发`onOptionChanged`
-     * @param options
-     */
-    setOptions(options) {
-        assign(this.opts, options);
-        this.onOptionChanged(this.opts);
-    }
-    /**
-     * 设置指定name的选项值。触发`onOptionChanged`
-     * @param name
-     * @param value
-     */
-    setOption(name, value) {
-        this.opts[name] = value;
-        this.onOptionChanged(this.opts);
-    }
-    /**
-     * @internal
-     */
-    onOptionChanged(opts) { }
-}
-_Uii_listeners = new WeakMap();

package/utils.js

@@ -1,58 +0,0 @@
-/* eslint-disable max-len */
-/**
- * 工具包
- * @author holyhigh2
- */
-import { find } from "myfx/collection";
-/**
- * 获取child相对于parent的offset信息。含border宽度
- * @returns
- */
-export function getOffset(child, parent) {
-    const rs = { x: 0, y: 0 };
-    let op = child.offsetParent;
-    while (op && parent && op !== parent) {
-        const style = window.getComputedStyle(op);
-        rs.x += op.offsetLeft + parseFloat(style.borderLeftWidth);
-        rs.y += op.offsetTop + parseFloat(style.borderTopWidth);
-        op = op.offsetParent;
-    }
-    rs.x += child.offsetLeft;
-    rs.y += child.offsetTop;
-    return rs;
-}
-/**
- * 边缘检测最小内部边距
- */
-export const EDGE_THRESHOLD = 5;
-export const DRAGGING_RULE = "body * { pointer-events: none; }";
-let lockSheet;
-export function lockPage() {
-    lockSheet = getFirstSS();
-    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
-}
-export function unlockPage() {
-    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
-}
-function getFirstSS() {
-    if (document.styleSheets.length < 1) {
-        document.head.appendChild(document.createElement('style'));
-    }
-    const sheet = find(document.styleSheets, ss => !ss.href);
-    if (!sheet) {
-        document.head.appendChild(document.createElement('style'));
-    }
-    return sheet || find(document.styleSheets, ss => !ss.href);
-}
-let cursor = { html: '', body: '' };
-export function saveCursor() {
-    cursor.body = document.body.style.cursor;
-    cursor.html = document.documentElement.style.cursor;
-}
-export function setCursor(cursor) {
-    document.body.style.cursor = document.documentElement.style.cursor = cursor;
-}
-export function restoreCursor() {
-    document.body.style.cursor = cursor.body;
-    document.documentElement.style.cursor = cursor.html;
-}