/**
* by SPACE ^_^
* 2019年5月8日
*/
var dragHeight = {};
var lastRecord = {};
// 设定监听回调函数
var observer = new MutationObserver(function(mutations) {
if (mutations.length > 1) {
return;
}
initDragHeight();
var div = $(mutations[0].target);
var divAll = $(div).nextAll("div.scrollbar");
var childerAry = $(div).children("div");
var childerAryLength = $(childerAry).length;
// 自己是最后一个
var isBottomFlag = false; // 当前元素如果是最后一个,为真,否则为假
var ulHeight = getUlTop(); //UL容器高度
if (divAll.length == 0) {
isBottomFlag = true;
}
// 没到底,自己自增高度
if (dragHeight.maxHeight > ulHeight) {
// 新增节点
if (mutations[0].addedNodes.length > mutations[0].removedNodes.length) {
var countHeight = childerAryLength * $(childerAry[0]).height();
// 出现滚动条,就增加高度,否则不增加高度,由样式控制
var h = $(div).height();
if (countHeight >= h) {
} else {
$(div).height(($(div).height() + lastRecord.height) + "px");
}
}
// 删除节点
else {
// 自己设置了高度,就判断子元素总高度是否大于当前高度
if (style.indexOf("height") != -1) {
var countHeight = childerAryLength * lastRecord.height;
// 总高度大于当前元素高度,不做处理
if (countHeight > $(div).height()) {}
// 总高度小于当前元素高度,删除掉高度样式
else {
$(div).css({
height: ""
});
}
}
}
}
// 到底了,缩小上面的同辈元素
else {
var allBt = false; // 是否全部元素已经缩到最小,全部缩小为真,否则为假
var comp = function(divAll, allBt) {
for (var i = 0; i < divAll.length; i++) {
var height = $(divAll[i]).height();
// 当前元素不能被缩放
if ((height <= lastRecord.height) || ((height - lastRecord.height) < lastRecord.height)) {
// 没有到底,且所有元素都已经缩到最小,就只放大自己
var ulHeight2 = getUlTop(); //UL容器高度
if (dragHeight.maxHeight > ulHeight2 && i == divAll.length - 1) {}
// 到底,啥都不做
else {
continue;
}
} else {
allBt = true;
$(divAll[i]).height((height - lastRecord.height) + "px");
break;
}
}
}
// 自己是最后一个
if (isBottomFlag) {
divAll = $(div).prevAll("div.scrollbar");
comp(divAll, allBt);
}
// 不是最后一个
else {
divAll = $(div).nextAll("div.scrollbar");
comp(divAll, allBt);
// 下面的都不能缩小了,就缩小上面的
if (!allBt) {
divAll = $(div).prevAll("div.scrollbar");
// 上面没有元素了
if (divAll.length == 0) {
allBt = true;
} else {
comp(divAll, allBt);
}
}
}
// 全部都不能再缩小了,就给自己添加一个高度
if (allBt) {
$(div).height($(div).height() + "px");
}
}
$(div).next("div.plugin-dragHeight").remove();
if (isBottomFlag || childerAryLength == 0 || childerAryLength == 1) {
$(div).after('
');
} else {
$(div).after('
');
}
initAllEvent();
});
$(document).ready(function() {
$("div.iconList-div").on('click', function() {
console.log("div.iconList-div ——————>")
setTimeout(function() {
initDragHeight();
}, 100);
})
$("div.cardList-div").on('click', function() {
console.log("div.cardList-div ——————>")
setTimeout(function() {
initDragHeight();
}, 100);
})
$("body").on('click', "div.td_div", function() {
console.log("div.td_div-div ——————>")
setTimeout(function() {
initDragHeight();
}, 100);
})
var target = $("[ssRbar] div.scrollbar"); // ("[wdRightBar]。Lin
for (var i = 0; i < target.length; i++) {
observer.observe($(target[i])[0], {
childList: true,
})
}
initMaxMinTitle();
})
function initDragHeight() {
var dragHeightAry = $("[ssRbar]"); // ("[wdRightBar]")。Lin
if (dragHeightAry.length == 0) {
console.log("未发现 ssRbar 标记");
return false;
}
dragHeight.contentDom = $(dragHeightAry[0]);
dragHeight.ulDom = $(dragHeight.contentDom).children("ul")[0];
dragHeight.initDragResult = function() {
$(dragHeight.ulDom).find("div.plugin-dragHeight").remove();
var cDivAry = $(dragHeight.ulDom).children("div.scrollbar");
for (var i = 0; i < cDivAry.length; i++) {
var childerAry = $(cDivAry[i]).children("div.sideList");
var childerAryLength = $(childerAry).length;
if (childerAryLength == 0) {
childerAry = $(cDivAry[i]).children("span.sideList");
childerAryLength = $(childerAry).length;
}
if (childerAryLength == 0) {
$(cDivAry[i]).height("0px");
$(cDivAry[i]).css({
height: ""
});
} else {
lastRecord.height = $(childerAry[0]).height();
if (childerAryLength < 3) {
$(cDivAry[i]).height(($(childerAry[0]).height() * childerAryLength) + "px");
} else {
$(cDivAry[i]).height(($(childerAry[0]).height() * 3) + "px");
}
}
if (i == (cDivAry.length - 1) || childerAryLength == 0 || childerAryLength == 1) {
$(cDivAry[i]).after('
');
continue;
}
$(cDivAry[i]).after('
');
}
return true;
};
dragHeight.initDragResult();
dragHeight.maxHeight = $(dragHeight.contentDom).height();
dragHeight.dragAry = $(dragHeight.ulDom).children("div.plugin-dragHeight");
for (var i = 0; i < dragHeight.dragAry.length; i++) {
initEvent(dragHeight.dragAry[i], i);
}
// 高度自适应调整
initAutoHeight();
}
function initAutoHeight() {
dragHeight.ulDom = $(dragHeight.contentDom).children("ul")[0];
var cDivAry = $(dragHeight.ulDom).children("div.scrollbar");
console.log("dragHeight.maxHeight=" + dragHeight.maxHeight);
var ulHeight = getUlTop(); //UL容器高度
for (var i = 0; i < cDivAry.length; i++) {
var _height = $(cDivAry[i]).height();
var _childerAry = $(cDivAry[i]).children("div.sideList");
if (_height == 0 || _childerAry.length == 0) {
continue;
}
var _childrenAryLength = $(_childerAry).length;
var _childrenHeight = $(_childerAry[0]).height();
var _countHeight = _childrenAryLength * _childrenHeight; // 理论总高度
var autoFlag = false; // 处理完成为真,否则为假
// 出现滚动条
if (_countHeight > _height) {
if (autoFlag) {
continue;
}
// 误差高度
var wc = _countHeight - _height;
// 获取误差高度加上之后的总高度
var _totalHeight = ulHeight + wc;
if (_totalHeight > dragHeight.maxHeight) { // 大于最大高度,裁剪部分高度
autoFlag = true;
var h = $(cDivAry[i]).height() + (dragHeight.maxHeight - ulHeight);
if (h < _childrenHeight) {
h = _childrenHeight;
}
$(cDivAry[i]).height(h + "px");
// break;
}
// 小于最大高度,全部展开
else {
$(cDivAry[i]).height(_countHeight + "px");
ulHeight = getUlTop();
}
} else {
$(cDivAry[i]).css({
height: ""
});
}
}
}
function initAllEvent() {
dragHeight.dragAry = $(dragHeight.ulDom).children("div.plugin-dragHeight");
for (var i = 0; i < dragHeight.dragAry.length; i++) {
initEvent(dragHeight.dragAry[i], i);
}
}
function initEvent(obj, index) {
obj.onmousedown = function(ev) {
var ev = ev || window.event;
var locaY = ev.clientY; // Y轴坐标
var divObj = $(obj).prev("div.scrollbar"); // 内容容器
var objHeight = $(divObj).height(); // 当前所属容器的高度
var objSize = getMaxMinHeight(divObj); // 当前所属容器的最大高度和最小高度
var nextDom = getNextDivObj(index); // 当前元素的下一个有内容的元素
document.onmousemove = function(ev) {
dragHeight.ulHeight = getUlTop(); // 获取外层容器高度
var ev = ev || window.event;
var curHeight = ev.clientY - locaY + objHeight;
var isMinHeight = false; // 如果最小高度,为真,否则为假
if (curHeight < objSize.min) {
curHeight = objSize.min;
isMinHeight = true;
}
if (curHeight > objSize.max) {
curHeight = objSize.max;
}
if (curHeight < objHeight) {
for (var i = index; i < dragHeight.dragAry.length; i++) {
// 当前元素的下一个有内容的元素
var _nextDom = getNextAutoDivObj(i);
if (_nextDom == undefined) { // 元素为空
// 自己还可以缩小
if (!isMinHeight) {
$(divObj).height(curHeight + 'px');
}
continue;
}
// 最后一个且最大高度
if (_nextDom.index == dragHeight.dragAry.length - 1 && _nextDom.height >= _nextDom.max) {
$(divObj).height(curHeight + 'px');
continue;
}
if (_nextDom.height >= _nextDom.max) {
continue;
}
var _h = 0;
_h = _nextDom.height + ($(divObj).height() - curHeight);
if (_h <= _nextDom.min) {
_h = _nextDom.min;
} else if (_h >= _nextDom.max) {
_h = _nextDom.max;
}
$(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_h + "px");
$(divObj).height(curHeight + 'px');
}
return false;
}
var nextDomHeight = 0;
if (nextDom != undefined) {
nextDomHeight = nextDom.height + (objHeight - curHeight);
if (nextDomHeight < nextDom.min) {
nextDomHeight = nextDom.min;
}
if (nextDomHeight > nextDom.max) {
nextDomHeight = nextDom.max;
}
}
// 碰到底部啦
if ((dragHeight.ulHeight > dragHeight.maxHeight && nextDom == undefined && curHeight >= $(divObj).height()) ||
(dragHeight.ulHeight > dragHeight.maxHeight && nextDom != undefined && nextDomHeight <= nextDom.min)) {
console.log("bottom");
for (var i = index + 1; i < dragHeight.dragAry.length; i++) {
// 当前元素的下一个有内容的元素
var _nextDom = getNextAutoDivObj(i);
if (_nextDom == undefined) { // 元素为空
continue;
}
if (_nextDom.height <= _nextDom.min) {
continue;
}
var _h = 0;
_h = _nextDom.height + ($(divObj).height() - curHeight);
if (_h <= _nextDom.min) {
_h = _nextDom.min;
} else if (_h >= _nextDom.max) {
_h = _nextDom.max;
}
$(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_h + "px");
$(divObj).height(curHeight + 'px');
}
return false;
}
if (nextDom != undefined) {
$(dragHeight.dragAry[nextDom.index]).prev("div.scrollbar").height(nextDomHeight + "px");
}
$(divObj).height(curHeight + 'px');
}
document.onmouseup = function() {
var _t = getUlTop();
if (_t > dragHeight.maxHeight) {
var _h = $(divObj).height();
_h = _h - (_t - dragHeight.maxHeight);
var size = getMaxMinHeight(divObj);
// 不能再减了!
if (_h <= size.min) {
for (var i = index + 1; i < dragHeight.dragAry.length; i++) {
var _nextDom = getNextAutoDivObj(i);
var _oS = (_t - dragHeight.maxHeight);
if ((_nextDom.height - _oS) < _nextDom.min) {
continue;
} else {
$(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_nextDom.height - _oS + "px");
break;
}
}
} else {
$(divObj).height(_h + "px");
}
}
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
/**
* 获取一个容器的最大宽度和最小宽度
* @param {Object} obj
*/
function getMaxMinHeight(obj) {
var cAry = $(obj).children("div");
if (cAry.length == 0) {
return {
max: 0,
min: 0
}
}
return {
max: ($(cAry[0]).height()) * cAry.length,
min: $(cAry[0]).height()
}
}
/**
* 获取当前元素的下一个有内容的Div对象
* @param {Object} obj
* @param {Object} index
*/
function getNextDivObj(index) {
var dom;
index += 1;
for (var i = index; i < dragHeight.dragAry.length; i++) {
// DIV内容 容器
var nextDivObjDom = $(dragHeight.dragAry[i]).prev("div.scrollbar");
// 容器元素数组
var cAry = $(nextDivObjDom).children("div");
if (cAry.length == 0) {
index = i;
continue;
} else {
dom = getMaxMinHeight(nextDivObjDom);
dom.index = i;
dom.height = $(nextDivObjDom).height();
return dom;
}
}
return undefined;
}
/**
* 获取当前元素的下一个有内容的Div对象,且高度未达到最小高度
* @param {Object} obj
* @param {Object} index
*/
function getNextAutoDivObj(index) {
var dom;
index += 1;
for (var i = index; i < dragHeight.dragAry.length; i++) {
// DIV内容 容器
var nextDivObjDom = $(dragHeight.dragAry[i]).prev("div.scrollbar");
// 容器元素数组
var cAry = $(nextDivObjDom).children("div");
if (cAry.length == 0) {
index = i;
continue;
}
dom = getMaxMinHeight(nextDivObjDom);
if (dom.height <= dom.min) {
dom = undefined;
continue;
}
dom.index = i;
dom.height = $(nextDivObjDom).height();
return dom;
}
return undefined;
}
/**
* 获取当前父容器的高度
*/
function getUlTop() {
return $(dragHeight.ulDom).height();
}
function initMaxMinTitle() {
$("li.hLine").on("dblclick", function() {
var status = $(this).attr("winStatus");
if (!status) {
status = "min";
}
if (status == "min") {
var ulHeight = getUlTop(); //UL容器高度
$(dragHeight.ulDom).find("li.hLine").hide();
$(dragHeight.ulDom).find("div.scrollbar").hide();
var dragDiv = $(dragHeight.ulDom).find("div.plugin-dragHeight");
for (var i = 0; i < dragDiv.length; i++) {
if(!$(dragDiv[i]).is(":hidden")) {
$(dragDiv[i]).attr("status", "show");
}
}
$(dragHeight.ulDom).find("div.plugin-dragHeight").hide();
var cont_div = $(this).next("div.scrollbar");
$(this).show();
$(cont_div).show();
$(this).attr("oldHeight", $(cont_div).height()); // 原高度
$(this).attr("winStatus", "max"); // 代表已经最大了
var thisHeight = $(this).height(); // 当前标题的高度
var contDivHeight = ulHeight - thisHeight;
if($(cont_div).attr("wdDragSmallMaxHeight")){
//放大后的高度
contDivHeight=$(cont_div).attr("wdDragSmallMaxHeight");
$(cont_div).css({"max-height":contDivHeight+"px"});
}
$(cont_div).height(contDivHeight + "px");
} else {
var oldHeight = $(this).attr("oldHeight"); // 原高度
$(this).attr("winStatus", "min"); // 代表是正常状态
var cont_div = $(this).next("div.scrollbar");
$(cont_div).height(oldHeight + "px");
$(cont_div).css({"max-height":null});
$(dragHeight.ulDom).find("li.hLine").show();
$(dragHeight.ulDom).find("div.scrollbar").show();
$(dragHeight.ulDom).find("div.plugin-dragHeight[status='show']").show();
}
});
};