ConstructionOperation/web/common/js/slideResize.js

'use strict';

/**
 *
 *
 * @author Zhong
 * @date 2018/10/22
 * @version
 */

let mouseMoveCount = 0;

/**
 * 拖动更改div大小
 *
 * @param {Object} eles - id:存储本地的标记 resize:拖动条 nearElement:左上外层div nearSpread:左上spread farElement:右下外层div evFixedSize:造价书左右拖动用
 * @param {Object} limit - min/max
 * @param {String} type - height/width
 * @param {function} callback - 成功后执行
 * @return {void}
 */
function slideResize(eles, limit, type, callback) {
    if(type !== 'height' && type !== 'width'){
        return;
    }
    //nearElement:左上， farElement:右下
    let startP = 0;
    let drag = false;
    const resizeElement = eles.resize;
    const nElement = eles.nearElement;
    const fElement = eles.farElement;
    const navContentEle = eles.nav ? eles.nav : null;
    let nEleSize = 0;
    let fEleSize = 0;
    let navSize = 0;
    let nEleChangeSize = 0;
    let fEleChangeSize = 0;
    let limitMax = 0;

    // 鼠标点下时
    resizeElement.mousedown(function(e) {
        limitMax = eval(limit.max);
        mouseMoveCount = 0;
        drag = true;
        startP = type === 'height' ? e.clientY : e.clientX;
        // 获取左(上)部分的宽度(高度)
        nEleSize = nElement[type]();
        // 获取右(下)部分的宽度(高度)
        fEleSize = fElement[type]();
        // nav宽(高度)部分
        if(navContentEle){
            navSize = navContentEle[type]() + 4;
        }
        resizeElement.tooltip('hide');
    });

    // 鼠标移动
    $("body").mousemove(function(e) {
        if (drag) {
            let moveSize = type === 'height' ? e.clientY - startP : e.clientX - startP;
            // 判断拖动范围不能超出
            nEleChangeSize = nEleSize + moveSize;
            nEleChangeSize = nEleChangeSize < limit.min ? limit.min : nEleChangeSize;
            nEleChangeSize = nEleChangeSize > limitMax ? limitMax + 9 : nEleChangeSize;

            fEleChangeSize = fEleSize - moveSize;
            fEleChangeSize = fEleChangeSize < limit.min ? limit.min : fEleChangeSize;
            fEleChangeSize = fEleChangeSize > limitMax ? limitMax + 9 : fEleChangeSize;

            if(type === 'width'){
                if(eles.totalWidth) {
                    nEleChangeSize = nEleChangeSize * eles.totalWidth;
                    fEleChangeSize = fEleChangeSize * eles.totalWidth;
                }
                let rePercent = getResizeWidthPercent(nEleChangeSize, fEleChangeSize, eles.totalWidth);
                eles.nearElement.css(type, rePercent.nearPercent);
                eles.farElement.css(type, rePercent.farPercent);
            }
            else{
                eles.nearSpread[type](nEleChangeSize);
                eles.farSpread[type](fEleChangeSize - navSize);
                eles.farElement[type](fEleChangeSize);
            }
            //实时刷新页面
            mouseMoveCount+=Math.abs(moveSize);//取移动的决对值
            if(mouseMoveCount >=5){//当累计移动超过5个像素时，才刷新，减少刷新次数
                if(callback) callback();
                mouseMoveCount = 0;
            }
        }
    });

    // 鼠标弹起
    $("body").mouseup(function(e) {
        if (drag) {
            callback();
            drag = false;
            // 存入本地缓存
            const id = eles.id;
            nEleChangeSize = nEleChangeSize >= limit.max ? limit.max + 9  : nEleChangeSize;
            fEleChangeSize = fEleChangeSize >= limit.max ? limit.max + 9  : fEleChangeSize;
            setLocalCache(`near${type}:${id}`, nEleChangeSize);
            setLocalCache(`far${type}:${id}`, fEleChangeSize);
        }
    });
}

/**
 * 读取设置的高度
 *
 * @param {String} tag - 顶层div的id
 * @param {function} callback - 回调函数
 * @return {void}
 */

function loadSize(eles, type, callback) {
    let tag = eles.id;
    if (tag === '') {
        return;
    }
    if(type !== 'height' && type !== 'width'){
        return;
    }
    let o_nearSize = eles.nearSpread[type]();
    let o_farSize = eles.farSpread[type]();
    let nearSize = getLocalCache(`near${type}:${tag}`);
    let farSize = getLocalCache(`far${type}:${tag}`);
    if (nearSize === null || farSize === null) {
        setDefaultSize(tag,eles,type);//zhang 2018-05-21
        /* eles.nearSpread[type](o_nearSize);
         eles.farSpread[type](o_farSize);*/
    }else {
        setSizeWithPercent(tag,eles,nearSize,farSize,type)//zhang 2018-06-04 改成按百分比设置
    }
    if(type === 'width'){//使用百分比
        if (eles.totalWidth) {
            o_nearSize = o_nearSize * eles.totalWidth;
            o_farSize = o_farSize * eles.totalWidth;
        }
        let rePercent = getResizeWidthPercent(nearSize ? nearSize : o_nearSize, farSize ? farSize : o_farSize, eles.totalWidth);
        eles.nearElement.css(type, rePercent.nearPercent);
        eles.farElement.css(type, rePercent.farPercent);
    }
    callback();
}

function getResizeWidthPercent(nearSize, farSize, totalWidth = 1){
    const resizeWidth = 6;
    nearSize = parseFloat(nearSize);
    farSize = parseFloat(farSize);
    let nearPercent = (nearSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%';
    let farPercent = (farSize / (resizeWidth + nearSize + farSize) * totalWidth * 100) + '%';
    return {nearPercent, farPercent};
}


function setSizeWithPercent(tag,eles,nearSize,farSize,type) {
    nearSize = parseFloat(nearSize);
    farSize = parseFloat(farSize);
    if(type !== 'width') {
        let headerHeight = $(".header").height();
        let toolsbarHeight = $(".toolsbar").height() ? $(".toolsbar").height() : 0;
        let resizeHeight = 12;
        let exand = tag == "#main" ? 1:50;
        if (tag === '#stdRationSub') {
            exand = 35;
        } else if (tag === '#stdZmhsAdj'){
            exand = 0;
        }
        let totalHeight = $(window).height() - headerHeight - toolsbarHeight - exand - resizeHeight;
        const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
        totalHeight = totalHeight - navSize;
        nearSize = (nearSize/(nearSize + farSize))* totalHeight;
        eles.nearSpread[type](nearSize);
        eles.farSpread[type](totalHeight - nearSize);
        eles.farElement[type](totalHeight - nearSize + navSize);
    }
}

function setDefaultSize(tag,eles,type) {
    let o_nearSize = 5;
    let o_farSize = 2;
    if(type == 'height'){
        let headerHeight = $(".header").height();
        let toolsbarHeight = $(".toolsbar").height();
        let exand = tag == "#main" ? 1:50;
        let resizeHeight = 12;
        let totalHeight = $(window).height() - headerHeight - toolsbarHeight-exand - resizeHeight;
        const navSize = eles.nav ? eles.nav[type]() + 4 : 0;
        totalHeight = totalHeight - navSize;
        let nearSize = (o_nearSize/(o_nearSize + o_farSize))* totalHeight;
        eles.nearSpread[type](nearSize);
        eles.farSpread[type](totalHeight - nearSize);
        eles.farElement[type](totalHeight - nearSize + navSize);
    }
}

/*
* div之间的水平拖动，适应各种情况
* module: 所属模块，防止不同页面相同id导致localstorage数据被覆盖
* eleObj: resize, parent, left, right
* limit: min, max
* */
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);
            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, eles, callback) {
    for (let ele of eles) {
        let cache = getLocalCache(`${module}${ele.attr('id')}Width`);
        if (cache) {
            ele.css('width', cache);
        }
    }
    if (callback) {
        callback();
    }
}