YangHuCost/public/web/slideResize.js

'use strict';

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

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

const SlideResize = (function() {
    //函数防抖
    let timer = null;
    function deBounce(fn, wait) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
    //设置水平拖动条的宽度
    //@param {Object dom}resize滚动条
    function setResizeWidth (resize,otherIndex) {
        const fixedWidth = 5;
        //滚动条节点 及 同层非滚动条节点的索引
        let bros = resize.parent().children();
       // let index = bros.index(resize),
            otherIndex = otherIndex ? otherIndex : 1;
        const other = resize.parent().children(`:eq(${otherIndex})`);
        let resizeParentWidth = resize.parent().width();
        let resizeDecimalWidth = fixedWidth / resizeParentWidth,
            otherDecimalWidth = 1 - resizeDecimalWidth;
        if(bros.length > 2){ //当同层有多个子元素时，other 的宽度要排除其余的宽度
            for(let i = 1; i< bros.length;i++){
                if(i == otherIndex) continue;
                otherDecimalWidth = otherDecimalWidth - $(bros[i]).width()/resizeParentWidth
            }
        }

        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,otherIndex) {//otherIndex 材料计算，spread表格在最右加，要用这个来识别
        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  : leftChange; //2019-04-15  原先是 limitMax - 5，造成有部分空白
                rightChange = rightWidth - moveSize;
                rightChange = rightChange < limit.min ? limit.min : rightChange;
                rightChange = rightChange > limitMax ? limitMax  : rightChange;//2019-04-15  原先是 limitMax - 5，造成有部分空白
                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,otherIndex);
                deBounce(function () {
                    if (callback) {
                        callback();
                        mouseMoveCount = 0;
                    }
                }, 20);
               /* 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(`${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,otherIndex) {
        for (let ele of eles) {
            let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
            if (cache) {
                ele.css('width', cache);
                console.log(ele)
            }
        }
        for (let resize of resizes) {
            setResizeWidth(resize,otherIndex);
        }
        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高度
                let notBottomHeight = limit.bottomNav?eval(limit.bottomNav):limit.notBottomSpread;
                if(Array.isArray(eleObj.bottomSpread)){
                    for(let b of eleObj.bottomSpread){
                        b.height(bottomChange - notBottomHeight);
                    }
                }else {
                    eleObj.bottomSpread.height(bottomChange - notBottomHeight);
                }
                mouseMoveCount += Math.abs(moveSize);
                deBounce(function () {
                    if (callback) {
                        callback();
                        mouseMoveCount = 0;
                    }
                }, 20);
                /*if (mouseMoveCount > triggerCBSize && callback) {
                    callback();
                    mouseMoveCount = 0;
                }*/
            }
        });
        $('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);
        let notBottomHeight = limit.bottomNav?eval(limit.bottomNav):limit.notBottomSpread;
        if(Array.isArray(eleObj.bottomSpread)){
            for(let b of eleObj.bottomSpread){
                b.height(curBottomHeight - notBottomHeight);
            }
        }else {
            eleObj.bottomSpread.height(curBottomHeight - notBottomHeight);
        }
        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 {setResizeWidth, horizontalSlide, loadHorizonWidth, verticalSlide, loadVerticalHeight, loadMultiVerticalHeight}
})();