YangHuOperation/web/common/js/slideResize.js

'use strict';

/**
 *
 *
 * @author Zhong
 * @date 2018/11/7
 * @version
 */

/*
 * 拖动相关公共接口
 * 前台使用此接口时，注意在恢复系统默认设置时，
 * 清除相关缓存数据: project_view.js--->$('#property_default').click(callback)
 * */

const SlideResize = (function () {
    // 水平拖动条的宽度
    const resizeWidth = 10;
    //函数防抖
    let timer = null;
    function deBounce(fn, wait) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
    //设置水平拖动条的宽度
    //@param {Object dom}resize滚动条
    function setResizeWidth(resize, getOtherFunc) {
        //滚动条节点 及 同层非滚动条节点的索引
        let bros = resize.parent().children();
        let index = bros.index(resize);
        let otherIndex = index ? 0 : 1;
        if (getOtherFunc) {
            otherIndex = getOtherFunc(index);
        }
        const other = resize.parent().children(`:eq(${otherIndex})`);
        let resizeParentWidth = resize.parent().width();
        let resizeDecimalWidth = resizeWidth / resizeParentWidth,
            otherDecimalWidth = 1 - resizeDecimalWidth;
        let resizePercentWidth = resizeDecimalWidth * 100 + '%',
            otherPercentWidth = otherDecimalWidth * 100 + '%';
        resize.css('width', resizePercentWidth);
        other.css('width', otherPercentWidth);
    }

    let mouseMoveCount = 0;
    /*
     * div之间的水平拖动，适应各种情况
     * @param {Object}eleObj: module所属模块，防止不同页面相同id导致localstorage数据被覆盖(放在对象里，因为可能有的地方要实时改这个module)
     *         resize, parent, left, right
     * @param {Object}limit: min, max
     * @param {Function}callback 回调
     * */
    function horizontalSlide(eleObj, limit, callback) {
        const triggerCBSize = 5;
        let drag = false,
            startPoint = 0,
            leftWidth = 0,
            rightWidth = 0,
            leftChange = 0,
            rightChange = 0,
            limitMax = 0;

        eleObj.resize.mousedown(function (e) {
            drag = true;
            startPoint = e.clientX;
            leftWidth = eleObj.left.width();
            rightWidth = eleObj.right.width();
            limitMax = eval(limit.max);
        });
        $('body').mousemove(function (e) {
            if (drag) {
                console.log('drag');
                let moveSize = e.clientX - startPoint;
                leftChange = leftWidth + moveSize;
                leftChange = leftChange < limit.min ? limit.min : leftChange;
                leftChange = leftChange > limitMax ? limitMax - 5 : leftChange;
                rightChange = rightWidth - moveSize;
                rightChange = rightChange < limit.min ? limit.min : rightChange;
                rightChange = rightChange > limitMax ? limitMax - 5 : rightChange;
                let leftPercentWidth = leftChange / eleObj.parent.width() * 100 + '%',
                    rightPercentWidth = rightChange / eleObj.parent.width() * 100 + '%';
                eleObj.left.css('width', leftPercentWidth);
                eleObj.right.css('width', rightPercentWidth);
                setResizeWidth(eleObj.resize, eleObj.getOtherFunc);
                mouseMoveCount += Math.abs(moveSize);
                deBounce(function () {
                    if (callback) {
                        callback();
                        mouseMoveCount = 0;
                    }
                }, 20);
            }
        });
        $('body').mouseup(function (e) {
            if (drag) {
                drag = false;
                mouseMoveCount = 0;
                //将宽度信息存储到localstorage
                let leftWidthInfo = eleObj.left[0].style.width;
                setLocalCache(`${eleObj.module}${eleObj.left.attr('id')}Width`, leftWidthInfo);
                let rightWidthInfo = eleObj.right[0].style.width;
                setLocalCache(`${eleObj.module}${eleObj.right.attr('id')}Width`, rightWidthInfo);
            }
        });
    }

    function loadHorizonWidth(module, resizes, eles, callback) {
        for (let ele of eles) {
            let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
            if (cache) {
                ele.css('width', cache);
            }
        }
        for (let resize of resizes) {
            setResizeWidth(resize);
        }
        if (callback) {
            callback();
        }
    }


    /*
     * div上下拖动
     * @param {Object} eleObj: module所属模块，防止不同页面相同id导致localstorage数据被覆盖(放在对象里，因为可能有的地方要实时改这个module)
     *        resize, top, topSpread, bottom, bottomSpread
     * @param {Object}limit: min, max, notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
     * @param {Function}callback 回调
     * */
    function verticalSlide(eleObj, limit, callback) {
        const triggerCBSize = 5;
        let drag = false,
            startPoint = 0,
            topHeight = 0,
            bottomHeight = 0,
            topChange = 0,
            bottomChange = 0,
            limitMax = 0;

        eleObj.resize.mousedown(function (e) {
            drag = true;
            startPoint = e.clientY;
            topHeight = eleObj.top.height();
            bottomHeight = eleObj.bottom.height();
            limitMax = eval(limit.max);
        });
        $('body').mousemove(function (e) {
            if (drag) {
                let moveSize = e.clientY - startPoint;
                topChange = topHeight + moveSize;
                topChange = topChange < limit.min ? limit.min : topChange;
                topChange = topChange > limitMax ? limitMax : topChange;
                bottomChange = bottomHeight - moveSize;
                bottomChange = bottomChange < limit.min ? limit.min : bottomChange;
                bottomChange = bottomChange > limitMax ? limitMax : bottomChange;

                //设置上部分div高度
                eleObj.top.height(topChange);
                //设置上部分div内spread高度
                eleObj.topSpread.height(topChange - limit.notTopSpread);
                //设置下部分div高度
                eleObj.bottom.height(bottomChange);
                //设置下部分div内spread高度
                eleObj.bottomSpread.height(bottomChange - limit.notBottomSpread);
                mouseMoveCount += Math.abs(moveSize);
                deBounce(function () {
                    if (callback) {
                        callback();
                        mouseMoveCount = 0;
                    }
                }, 20);
            }
        });
        $('body').mouseup(function (e) {
            if (drag) {
                drag = false;
                mouseMoveCount = 0;
                //将高度信息存储到localstorage
                let topHeightInfo = eleObj.top.height();
                setLocalCache(`${eleObj.module}${eleObj.top.attr('id')}Height`, topHeightInfo);
                let bottomHeightInfo = eleObj.bottom.height();
                setLocalCache(`${eleObj.module}${eleObj.bottom.attr('id')}Height`, bottomHeightInfo);
            }
        });
    }

    /*
     * 加载上下高度
     * @param {String}module 所属模块，防止不同页面相同id导致localstorage数据被覆盖
     * @param {Object}eleObj: module所属模块，防止不同页面相同id导致localstorage数据被覆盖(放在对象里，因为可能有的地方要实时改这个module) top, topSpread, bottom, bottomSpread
     * @param {Object}limit: totalHeight(实时的上下部分总高度) notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
     * @param {Function}callback 回调
     * */

    function loadVerticalHeight(module, eleObj, limit, callback) {
        let topHeight = getLocalCache(`${module}${eleObj.top.attr('id')}Height`),
            bottomHeight = getLocalCache(`${module}${eleObj.bottom.attr('id')}Height`);
        //默认上下比例
        const topProp = 5;
        const bottomProp = 2;
        let topProportion = topProp / (topProp + bottomProp);
        if (topHeight !== null && bottomHeight !== null) {
            topHeight = parseFloat(topHeight);
            bottomHeight = parseFloat(bottomHeight);
            topProportion = topHeight / (topHeight + bottomHeight);
        }
        //设置当前窗口下的的上下部分高度
        let totalHeight = eval(limit.totalHeight);
        let curTopHeight = totalHeight * topProportion,
            curBottomHeight = totalHeight - curTopHeight;
        eleObj.top.height(curTopHeight);
        eleObj.topSpread.height(curTopHeight - limit.notTopSpread);
        eleObj.bottom.height(curBottomHeight);
        eleObj.bottomSpread.height(curBottomHeight - limit.notBottomSpread);
        if (callback) {
            callback();
        }
    }

    /*
     * 包含多个上下结构的拖动（n>= 2，只包含上下结构的地方可以用loadVerticalHeight）
     * 加载多个结构高度
     * @param {String}module所属模块，防止不同页面相同id导致localstorage数据被覆盖
     * @param {Array}eles 元素为结构对象 内部: {container: 外部div, spread: 该div的Spread, notSpread: 该div不含Spread的高度, defaultProportion: 默认高度比例0.6}
     * @param {String}totalHeight 各个结构div总高度-可编译字符串
     * @param {Function}callback 回调
     * */
    function loadMultiVerticalHeight(module, eles, totalHeight, callback) {
        //当前窗口拖动区域总高度
        totalHeight = eval(totalHeight);
        let cacheHeight = 0,//缓存中设置了高度的div总高度
            notCacheProportion = 0;//缓存中没设置高度的div占用的总高度比例(每个div都有默认的高度比例) (有了缓存高度的div就是被拖动过的，被拖动过的div,其默认高度比例就没用了)
        //获取缓存的总高度、未被拖动过的所有div的默认比例之和notCacheProportion (1-notCacheProportion)就是缓存高度的占总的比例
        for (let ele of eles) {
            let eleHeight = getLocalCache(`${module}${ele.container.attr('id')}Height`);
            if (eleHeight !== null) {
                eleHeight = parseFloat(eleHeight);
                cacheHeight += eleHeight;
            } else {
                notCacheProportion += ele.defaultProportion;
            }
        }
        //缓存高度占总的比例
        let cacheProportion = 1 - notCacheProportion;
        for (let ele of eles) {
            let eleHeight = getLocalCache(`${module}${ele.container.attr('id')}Height`),
                curHeight = 0;
            if (eleHeight !== null) {
                eleHeight = parseFloat(eleHeight);
                //ele在当前窗口大小中的高度
                curHeight = eleHeight / cacheHeight * cacheProportion * totalHeight;
            } else {
                curHeight = ele.defaultProportion * totalHeight;
            }
            ele.container.height(curHeight);
            ele.spread.height(curHeight - ele.notSpread);
        }
        if (callback) {
            callback();
        }
    }

    return {
        resizeWidth,
        setResizeWidth,
        horizontalSlide,
        loadHorizonWidth,
        verticalSlide,
        loadVerticalHeight,
        loadMultiVerticalHeight
    }
})();