tfp
Version:
A Web UI framework for TaskBuilder
173 lines (163 loc) • 6.99 kB
JavaScript
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];
let 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\">";
let 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++) {
let option = list.options[j];
if(typeof(option)=="string") {
option = {
value: option,
text: option
};
}
if(option.value==list.value) valOptionIndex = j;
let 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++) {
let 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>");
}
let that = this;
let 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++) {
let 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;
let that = this;
let 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];
let endPos = {
x: touch.pageX - this.touchStartInfo.x,
y: touch.pageY - this.touchStartInfo.y
};
let 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) {
let touchDiv = $(".tfp-popuplist-touch").get(0);
touchDiv.removeEventListener('touchmove', this.onTouchMove);
touchDiv.removeEventListener('touchend', this.onTouchEnd);
let contentDiv = this.touchStartInfo.contentDiv;
let interval = 40 - contentDiv.scrollTop % 40;
if(interval<=20) {
contentDiv.scrollTop = contentDiv.scrollTop + interval;
} else {
contentDiv.scrollTop = contentDiv.scrollTop - contentDiv.scrollTop % 40;
}
let list = this.lists[this.touchStartInfo.columnIndex];
if(list.onChange) list.onChange();
}
this.getColumnVal = function(colIndex) {
let column = $(".tfp-popuplist-content-column").get(colIndex);
let centerMaskDivOffset = $($(".tfp-popuplist-mask").get(3)).offset();
let itemIndex = column.scrollTop/40+3;
let items = $(column).find(".tfp-popuplist-content-item");
let curItemCenterY = $(items.get(itemIndex)).offset().top+20;
let upperItemCenterY = curItemCenterY-40;
let belowItemCenterY = curItemCenterY+40;
let 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) {
let values = [];
let columns = $(".tfp-popuplist-content-column");
let 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();