ConstructionOperation/web/common/js/slideResize.js

'use strict';

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

/*
 * div之间的水平拖动，适应各种情况
 * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
 * eleObj: resize, parent, left, right
 * limit: min, max
 * */

const SlideResize = (function() {
    //设置水平拖动条的宽度
    //@param {Object dom}resize滚动条
    function setResizeWidth (resize) {
        const fixedWidth = 10;
        //跟滚动条同层的其他节点
        let bros = resize.parent().children();
        //滚动条节点 及 同层非滚动条节点的索引
        let index = bros.index(resize),
            otherIndex = index ? 0 : 1;
        const other = resize.parent().children(`:eq(${otherIndex})`);
        let resizeParentWidth = resize.parent().width();
        let resizeDecimalWidth = fixedWidth / resizeParentWidth,
            otherDecimalWidth = 1 - resizeDecimalWidth;
        let resizePercentWidth = resizeDecimalWidth * 100 + '%',
            otherPercentWidth = otherDecimalWidth * 100 + '%';
        resize.css('width', resizePercentWidth);
        other.css('width', otherPercentWidth);
    }

    let mouseMoveCount = 0;
    function horizontalSlide(module, 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) {
                let moveSize = e.clientX - startPoint;
                leftChange = leftWidth + moveSize;
                leftChange = leftChange < limit.min ? limit.min : leftChange;
                leftChange = leftChange > limitMax ? limitMax - 3 : leftChange;
                rightChange = rightWidth - moveSize;
                rightChange = rightChange < limit.min ? limit.min : rightChange;
                rightChange = rightChange > limitMax ? limitMax - 3 : 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);
                mouseMoveCount += Math.abs(moveSize);
                if (mouseMoveCount > triggerCBSize && callback) {
                    callback();
                    mouseMoveCount = 0;
                }
            }
        });
        $('body').mouseup(function (e) {
            if (drag) {
                drag = false;
                mouseMoveCount = 0;
                //将宽度信息存储到localstorage
                let leftWidthInfo = eleObj.left[0].style.width;
                setLocalCache(`${module}${eleObj.left.attr('id')}Width`, leftWidthInfo);
                let rightWidthInfo = eleObj.right[0].style.width;
                setLocalCache(`${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上下拖动
     * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
     * eleObj: resize, top, topSpread, bottom, bottomSpread
     * limit: min, max, notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
     * */
    function verticalSlide(module, 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);
                if (mouseMoveCount > triggerCBSize && callback) {
                    callback();
                    mouseMoveCount = 0;
                }
            }
        });
        $('body').mouseup(function (e) {
            if (drag) {
                drag = false;
                mouseMoveCount = 0;
                //将高度信息存储到localstorage
                let topHeightInfo = eleObj.top.height();
                setLocalCache(`${module}${eleObj.top.attr('id')}Height`, topHeightInfo);
                let bottomHeightInfo = eleObj.bottom.height();
                setLocalCache(`${module}${eleObj.bottom.attr('id')}Height`, bottomHeightInfo);
            }
        });
    }

    /*
     * 加载上下高度
     * module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
     * eleObj: top, topSpread, bottom, bottomSpread
     * limit: totalHeight(实时的上下部分总高度) notTopSpread(上部分非spread部分的高度) notBottomSpread(下部分非spread部分的高度)
     * */

    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();
        }
    }

    return {horizontalSlide, loadHorizonWidth, verticalSlide, loadVerticalHeight}
})();