tfp
Version:
A Web UI framework for TaskBuilder
186 lines (152 loc) • 6.92 kB
JavaScript
"use strict";
function PopupList() {
this.lists = null;
this.cb = null;
this.touchStartInfo = null;
this.show = function (lists, cb) {
this.lists = lists;
if (cb) this.cb = cb;
$("body").append("<div class=\"tfp-mask-div\"></div>");
$("body").append("<div class=\"tfp-popuplist\">" + "<div class=\"tfp-popuplist-content\"></div>" + "<div class=\"tfp-popuplist-touch\"></div>" + "<div class=\"tfp-popuplist-bottom\">" + " <div onclick=\"window.popupList.onOk()\">确定</div>" + " <div onclick=\"window.popupList.close()\">取消</div>" + "</div>" + "</div>");
for (var i = 0; i < lists.length; i++) {
var list = lists[i];
var width = "100%";
if (list.width) width = list.width;
var listHtml = "<div class=\"tfp-popuplist-content-column\" " + "style=\"width:" + width + "; background-color: " + list.bgColor + ";\">" + "<div class=\"tfp-popuplist-content-items\">";
var valOptionIndex = 0;
if (list.options) {
//上面加三个空白的选项，以便可以滚动显示第一条记录
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
for (var j = 0; j < list.options.length; j++) {
var option = list.options[j];
if (typeof option == "string") {
option = {
value: option,
text: option
};
}
if (option.value == list.value) valOptionIndex = j;
var text = option.value;
if (option.text) text = option.text;
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"" + option.value + "\">" + text + "</div>";
} //下面加三个空白的选项，以便可以滚动显示最后一条记录
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
listHtml += "<div class=\"tfp-popuplist-content-item\" data-value=\"\"></div>";
}
listHtml += "</div></div>";
$(".tfp-popuplist-content").append(listHtml);
if (valOptionIndex > 0) $(".tfp-popuplist-content-column").get(i).scrollTop = valOptionIndex * 40;
}
for (var i = 0; i < 7; i++) {
var style = "";
if (i == 3) {
style = "background:transparent;border-top: 1px solid #eeeeee;" + "border-bottom: 1px solid #eeeeee;";
} else {
style = "background-color: #FFFFFF; opacity:";
if (i == 0 || i == 6) style += "0.9";
if (i == 1 || i == 5) style += "0.6";
if (i == 2 || i == 4) style += "0.3";
style += ";";
}
style += "top:" + (i * 40 + 10) + "px;";
$(".tfp-popuplist").append("<div class=\"tfp-popuplist-mask\" style=\"" + style + "\"></div>");
}
var that = this;
var touchDiv = $(".tfp-popuplist-touch").get(0);
touchDiv.addEventListener("touchstart", function (event) {
that.onTouchStart(event);
});
};
this.onTouchStart = function (event) {
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
this.touchStartInfo = {
x: touch.pageX,
y: touch.pageY
}; //取第一个touch的坐标值
for (var i = 0; i < $(".tfp-popuplist-content-column").length; i++) {
var divTmp = $($(".tfp-popuplist-content-column").get(i));
if (touch.pageX > divTmp.offset().left && touch.pageX < divTmp.offset().left + divTmp.width()) {
this.touchStartInfo.columnIndex = i;
this.touchStartInfo.contentDiv = divTmp.get(0);
this.touchStartInfo.scrollTop = divTmp.get(0).scrollTop;
break;
}
}
if (!this.touchStartInfo.contentDiv) return;
var that = this;
var touchDiv = $(".tfp-popuplist-touch").get(0);
touchDiv.addEventListener("touchmove", function (event) {
that.onTouchMove(event);
});
touchDiv.addEventListener("touchend", function (event) {
that.onTouchEnd(event);
});
};
this.onTouchMove = function (event) {
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
var endPos = {
x: touch.pageX - this.touchStartInfo.x,
y: touch.pageY - this.touchStartInfo.y
};
var touchType = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //touchType为1时，表示纵向滑动，0为横向滑动
if (touchType === 1) {
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.touchStartInfo.contentDiv.scrollTop = this.touchStartInfo.scrollTop - endPos.y;
}
};
this.onTouchEnd = function (event) {
var touchDiv = $(".tfp-popuplist-touch").get(0);
touchDiv.removeEventListener('touchmove', this.onTouchMove);
touchDiv.removeEventListener('touchend', this.onTouchEnd);
var contentDiv = this.touchStartInfo.contentDiv;
var interval = 40 - contentDiv.scrollTop % 40;
if (interval <= 20) {
contentDiv.scrollTop = contentDiv.scrollTop + interval;
} else {
contentDiv.scrollTop = contentDiv.scrollTop - contentDiv.scrollTop % 40;
}
var list = this.lists[this.touchStartInfo.columnIndex];
if (list.onChange) list.onChange();
};
this.getColumnVal = function (colIndex) {
var column = $(".tfp-popuplist-content-column").get(colIndex);
var centerMaskDivOffset = $($(".tfp-popuplist-mask").get(3)).offset();
var itemIndex = column.scrollTop / 40 + 3;
var items = $(column).find(".tfp-popuplist-content-item");
var curItemCenterY = $(items.get(itemIndex)).offset().top + 20;
var upperItemCenterY = curItemCenterY - 40;
var belowItemCenterY = curItemCenterY + 40;
var item = items.get(itemIndex);
if (upperItemCenterY > centerMaskDivOffset.top && upperItemCenterY < centerMaskDivOffset.top + 40) {
items.get(itemIndex - 1);
} else if (belowItemCenterY > centerMaskDivOffset.top && belowItemCenterY < centerMaskDivOffset.top + 40) {
items.get(itemIndex + 1);
}
return $(item).attr("data-value");
};
this.onOk = function () {
if (this.cb) {
var values = [];
var columns = $(".tfp-popuplist-content-column");
var centerMaskDivOffset = $($(".tfp-popuplist-mask").get(3)).offset();
for (var i = 0; i < columns.length; i++) {
values.push(this.getColumnVal(i));
}
this.cb(values);
}
this.close();
};
this.close = function () {
$(".tfp-mask-div").remove();
$(".tfp-popuplist").remove();
this.lists = null;
this.cb = null;
this.touchStartInfo = null;
};
}
window.popupList = new PopupList();