ss_new_ui_skin_and_page/ss/js/wdDragSmallHeight.js

/**
 * 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('<div class="plugin-dragHeight" style="display:none;"><span></span></div>');
	} else {
		$(div).after('<div class="plugin-dragHeight"><span></span></div>');
	}

	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('<div class="plugin-dragHeight" style="display:none;"><span class="handlebtn"></span></div>');
				continue;
			}

			$(cDivAry[i]).after('<div class="plugin-dragHeight"><span class="handlebtn"></span></div>');
		}
		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();
		}

	});
};