You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1018 lines
30 KiB
1018 lines
30 KiB
/** |
|
* 选择列表插件 |
|
* varstion 2.0.0 |
|
* by Houfeng |
|
* Houfeng@DCloud.io |
|
*/ |
|
|
|
(function($, window, document, undefined) { |
|
|
|
var MAX_EXCEED = 30; |
|
var VISIBLE_RANGE = 90; |
|
var DEFAULT_ITEM_HEIGHT = 40; |
|
var BLUR_WIDTH = 10; |
|
|
|
var rad2deg = $.rad2deg = function(rad) { |
|
return rad / (Math.PI / 180); |
|
}; |
|
|
|
var deg2rad = $.deg2rad = function(deg) { |
|
return deg * (Math.PI / 180); |
|
}; |
|
|
|
var platform = navigator.platform.toLowerCase(); |
|
var userAgent = navigator.userAgent.toLowerCase(); |
|
var isIos = (userAgent.indexOf('iphone') > -1 || |
|
userAgent.indexOf('ipad') > -1 || |
|
userAgent.indexOf('ipod') > -1) && |
|
(platform.indexOf('iphone') > -1 || |
|
platform.indexOf('ipad') > -1 || |
|
platform.indexOf('ipod') > -1); |
|
//alert(isIos); |
|
|
|
var Picker = $.Picker = function(holder, options) { |
|
var self = this; |
|
self.holder = holder; |
|
self.options = options || {}; |
|
self.init(); |
|
self.initInertiaParams(); |
|
self.calcElementItemPostion(true); |
|
self.bindEvent(); |
|
}; |
|
|
|
Picker.prototype.findElementItems = function() { |
|
var self = this; |
|
self.elementItems = [].slice.call(self.holder.querySelectorAll('li')); |
|
return self.elementItems; |
|
}; |
|
|
|
Picker.prototype.init = function() { |
|
var self = this; |
|
self.list = self.holder.querySelector('ul'); |
|
self.findElementItems(); |
|
self.height = self.holder.offsetHeight; |
|
self.r = self.height / 2 - BLUR_WIDTH; |
|
self.d = self.r * 2; |
|
self.itemHeight = self.elementItems.length > 0 ? self.elementItems[0].offsetHeight : DEFAULT_ITEM_HEIGHT; |
|
self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 0.8)); |
|
self.hightlightRange = self.itemAngle / 2; |
|
self.visibleRange = VISIBLE_RANGE; |
|
self.beginAngle = 0; |
|
self.beginExceed = self.beginAngle - MAX_EXCEED; |
|
self.list.angle = self.beginAngle; |
|
if (isIos) { |
|
self.list.style.webkitTransformOrigin = "center center " + self.r + "px"; |
|
} |
|
}; |
|
|
|
Picker.prototype.calcElementItemPostion = function(andGenerateItms) { |
|
var self = this; |
|
if (andGenerateItms) { |
|
self.items = []; |
|
} |
|
self.elementItems.forEach(function(item) { |
|
var index = self.elementItems.indexOf(item); |
|
self.endAngle = self.itemAngle * index; |
|
item.angle = self.endAngle; |
|
item.style.webkitTransformOrigin = "center center -" + self.r + "px"; |
|
item.style.webkitTransform = "translateZ(" + self.r + "px) rotateX(" + (-self.endAngle) + "deg)"; |
|
if (andGenerateItms) { |
|
var dataItem = {}; |
|
dataItem.text = item.innerHTML || ''; |
|
dataItem.value = item.getAttribute('data-value') || dataItem.text; |
|
self.items.push(dataItem); |
|
} |
|
}); |
|
self.endExceed = self.endAngle + MAX_EXCEED; |
|
self.calcElementItemVisibility(self.beginAngle); |
|
}; |
|
|
|
Picker.prototype.calcAngle = function(c) { |
|
var self = this; |
|
var a = b = parseFloat(self.r); |
|
//直径的整倍数部分直接乘以 180 |
|
c = Math.abs(c); //只算角度不关心正否值 |
|
var intDeg = parseInt(c / self.d) * 180; |
|
c = c % self.d; |
|
//余弦 |
|
var cosC = (a * a + b * b - c * c) / (2 * a * b); |
|
var angleC = intDeg + rad2deg(Math.acos(cosC)); |
|
return angleC; |
|
}; |
|
|
|
Picker.prototype.calcElementItemVisibility = function(angle) { |
|
var self = this; |
|
self.elementItems.forEach(function(item) { |
|
var difference = Math.abs(item.angle - angle); |
|
if (difference < self.hightlightRange) { |
|
item.classList.add('highlight'); |
|
} else if (difference < self.visibleRange) { |
|
item.classList.add('visible'); |
|
item.classList.remove('highlight'); |
|
} else { |
|
item.classList.remove('highlight'); |
|
item.classList.remove('visible'); |
|
} |
|
}); |
|
}; |
|
|
|
Picker.prototype.setAngle = function(angle) { |
|
var self = this; |
|
self.list.angle = angle; |
|
self.list.style.webkitTransform = "perspective(1000px) rotateY(0deg) rotateX(" + angle + "deg)"; |
|
self.calcElementItemVisibility(angle); |
|
}; |
|
|
|
Picker.prototype.bindEvent = function() { |
|
var self = this; |
|
var lastAngle = 0; |
|
var startY = null; |
|
var isPicking = false; |
|
self.holder.addEventListener($.EVENT_START, function(event) { |
|
isPicking = true; |
|
event.preventDefault(); |
|
self.list.style.webkitTransition = ''; |
|
startY = (event.changedTouches ? event.changedTouches[0] : event).pageY; |
|
lastAngle = self.list.angle; |
|
self.updateInertiaParams(event, true); |
|
}, false); |
|
self.holder.addEventListener($.EVENT_END, function(event) { |
|
isPicking = false; |
|
event.preventDefault(); |
|
self.startInertiaScroll(event); |
|
}, false); |
|
self.holder.addEventListener($.EVENT_CANCEL, function(event) { |
|
isPicking = false; |
|
event.preventDefault(); |
|
self.startInertiaScroll(event); |
|
}, false); |
|
self.holder.addEventListener($.EVENT_MOVE, function(event) { |
|
if (!isPicking) { |
|
return; |
|
} |
|
event.preventDefault(); |
|
var endY = (event.changedTouches ? event.changedTouches[0] : event).pageY; |
|
var dragRange = endY - startY; |
|
var dragAngle = self.calcAngle(dragRange); |
|
var newAngle = dragRange > 0 ? lastAngle - dragAngle : lastAngle + dragAngle; |
|
if (newAngle > self.endExceed) { |
|
newAngle = self.endExceed |
|
} |
|
if (newAngle < self.beginExceed) { |
|
newAngle = self.beginExceed |
|
} |
|
self.setAngle(newAngle); |
|
self.updateInertiaParams(event); |
|
}, false); |
|
//-- |
|
self.list.addEventListener('tap', function(event) { |
|
elementItem = event.target; |
|
if (elementItem.tagName == 'LI') { |
|
self.setSelectedIndex(self.elementItems.indexOf(elementItem), 200); |
|
} |
|
}, false); |
|
}; |
|
|
|
Picker.prototype.initInertiaParams = function() { |
|
var self = this; |
|
self.lastMoveTime = 0; |
|
self.lastMoveStart = 0; |
|
self.stopInertiaMove = false; |
|
}; |
|
|
|
Picker.prototype.updateInertiaParams = function(event, isStart) { |
|
var self = this; |
|
var point = event.changedTouches ? event.changedTouches[0] : event; |
|
if (isStart) { |
|
self.lastMoveStart = point.pageY; |
|
self.lastMoveTime = event.timeStamp || Date.now(); |
|
self.startAngle = self.list.angle; |
|
} else { |
|
var nowTime = event.timeStamp || Date.now(); |
|
if (nowTime - self.lastMoveTime > 300) { |
|
self.lastMoveTime = nowTime; |
|
self.lastMoveStart = point.pageY; |
|
} |
|
} |
|
self.stopInertiaMove = true; |
|
}; |
|
|
|
Picker.prototype.startInertiaScroll = function(event) { |
|
var self = this; |
|
var point = event.changedTouches ? event.changedTouches[0] : event; |
|
/** |
|
* 缓动代码 |
|
*/ |
|
var nowTime = event.timeStamp || Date.now(); |
|
var v = (point.pageY - self.lastMoveStart) / (nowTime - self.lastMoveTime); //最后一段时间手指划动速度 |
|
var dir = v > 0 ? -1 : 1; //加速度方向 |
|
var deceleration = dir * 0.0006 * -1; |
|
var duration = Math.abs(v / deceleration); // 速度消减至0所需时间 |
|
var dist = v * duration / 2; //最终移动多少 |
|
var startAngle = self.list.angle; |
|
var distAngle = self.calcAngle(dist) * dir; |
|
//---- |
|
var srcDistAngle = distAngle; |
|
if (startAngle + distAngle < self.beginExceed) { |
|
distAngle = self.beginExceed - startAngle; |
|
duration = duration * (distAngle / srcDistAngle) * 0.6; |
|
} |
|
if (startAngle + distAngle > self.endExceed) { |
|
distAngle = self.endExceed - startAngle; |
|
duration = duration * (distAngle / srcDistAngle) * 0.6; |
|
} |
|
//---- |
|
if (distAngle == 0) { |
|
self.endScroll(); |
|
return; |
|
} |
|
self.scrollDistAngle(nowTime, startAngle, distAngle, duration); |
|
}; |
|
|
|
Picker.prototype.scrollDistAngle = function(nowTime, startAngle, distAngle, duration) { |
|
var self = this; |
|
self.stopInertiaMove = false; |
|
(function(nowTime, startAngle, distAngle, duration) { |
|
var frameInterval = 13; |
|
var stepCount = duration / frameInterval; |
|
var stepIndex = 0; |
|
(function inertiaMove() { |
|
if (self.stopInertiaMove) return; |
|
var newAngle = self.quartEaseOut(stepIndex, startAngle, distAngle, stepCount); |
|
self.setAngle(newAngle); |
|
stepIndex++; |
|
if (stepIndex > stepCount - 1 || newAngle < self.beginExceed || newAngle > self.endExceed) { |
|
self.endScroll(); |
|
return; |
|
} |
|
setTimeout(inertiaMove, frameInterval); |
|
})(); |
|
})(nowTime, startAngle, distAngle, duration); |
|
}; |
|
|
|
Picker.prototype.quartEaseOut = function(t, b, c, d) { |
|
return -c * ((t = t / d - 1) * t * t * t - 1) + b; |
|
}; |
|
|
|
Picker.prototype.endScroll = function() { |
|
var self = this; |
|
if (self.list.angle < self.beginAngle) { |
|
self.list.style.webkitTransition = "150ms ease-out"; |
|
self.setAngle(self.beginAngle); |
|
} else if (self.list.angle > self.endAngle) { |
|
self.list.style.webkitTransition = "150ms ease-out"; |
|
self.setAngle(self.endAngle); |
|
} else { |
|
var index = parseInt((self.list.angle / self.itemAngle).toFixed(0)); |
|
self.list.style.webkitTransition = "100ms ease-out"; |
|
self.setAngle(self.itemAngle * index); |
|
} |
|
self.triggerChange(); |
|
}; |
|
|
|
Picker.prototype.triggerChange = function(force) { |
|
var self = this; |
|
setTimeout(function() { |
|
var index = self.getSelectedIndex(); |
|
var item = self.items[index]; |
|
if ($.trigger && (index != self.lastIndex || force === true)) { |
|
$.trigger(self.holder, 'change', { |
|
"index": index, |
|
"item": item |
|
}); |
|
//console.log('change:' + index); |
|
} |
|
self.lastIndex = index; |
|
typeof force === 'function' && force(); |
|
}, 0); |
|
}; |
|
|
|
Picker.prototype.correctAngle = function(angle) { |
|
var self = this; |
|
if (angle < self.beginAngle) { |
|
return self.beginAngle; |
|
} else if (angle > self.endAngle) { |
|
return self.endAngle; |
|
} else { |
|
return angle; |
|
} |
|
}; |
|
|
|
Picker.prototype.setItems = function(items) { |
|
var self = this; |
|
self.items = items || []; |
|
var buffer = []; |
|
self.items.forEach(function(item) { |
|
if (item !== null && item !== undefined) { |
|
buffer.push('<li>' + (item.text || item) + '</li>'); |
|
} |
|
}); |
|
self.list.innerHTML = buffer.join(''); |
|
self.findElementItems(); |
|
self.calcElementItemPostion(); |
|
self.setAngle(self.correctAngle(self.list.angle)); |
|
self.triggerChange(true); |
|
}; |
|
|
|
Picker.prototype.getItems = function() { |
|
var self = this; |
|
return self.items; |
|
}; |
|
|
|
Picker.prototype.getSelectedIndex = function() { |
|
var self = this; |
|
return parseInt((self.list.angle / self.itemAngle).toFixed(0)); |
|
}; |
|
|
|
Picker.prototype.setSelectedIndex = function(index, duration, callback) { |
|
var self = this; |
|
self.list.style.webkitTransition = ''; |
|
var angle = self.correctAngle(self.itemAngle * index); |
|
if (duration && duration > 0) { |
|
var distAngle = angle - self.list.angle; |
|
self.scrollDistAngle(Date.now(), self.list.angle, distAngle, duration); |
|
} else { |
|
self.setAngle(angle); |
|
} |
|
self.triggerChange(callback); |
|
}; |
|
|
|
Picker.prototype.getSelectedItem = function() { |
|
var self = this; |
|
return self.items[self.getSelectedIndex()]; |
|
}; |
|
|
|
Picker.prototype.getSelectedValue = function() { |
|
var self = this; |
|
return (self.items[self.getSelectedIndex()] || {}).value; |
|
}; |
|
|
|
Picker.prototype.getSelectedText = function() { |
|
var self = this; |
|
return (self.items[self.getSelectedIndex()] || {}).text; |
|
}; |
|
|
|
Picker.prototype.setSelectedValue = function(value, duration, callback) { |
|
var self = this; |
|
for (var index in self.items) { |
|
var item = self.items[index]; |
|
if (item.value == value) { |
|
self.setSelectedIndex(index, duration, callback); |
|
return; |
|
} |
|
} |
|
}; |
|
|
|
if ($.fn) { |
|
$.fn.picker = function(options) { |
|
//遍历选择的元素 |
|
this.each(function(i, element) { |
|
if (element.picker) return; |
|
if (options) { |
|
element.picker = new Picker(element, options); |
|
} else { |
|
var optionsText = element.getAttribute('data-picker-options'); |
|
var _options = optionsText ? JSON.parse(optionsText) : {}; |
|
element.picker = new Picker(element, _options); |
|
} |
|
}); |
|
return this[0] ? this[0].picker : null; |
|
}; |
|
|
|
//自动初始化 |
|
$.ready(function() { |
|
$('.mui-picker').picker(); |
|
}); |
|
} |
|
|
|
})(window.mui || window, window, document, undefined); |
|
//end |
|
/** |
|
* 弹出选择列表插件 |
|
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js |
|
* varstion 1.0.1 |
|
* by Houfeng |
|
* Houfeng@DCloud.io |
|
*/ |
|
|
|
(function($, document) { |
|
|
|
//创建 DOM |
|
$.dom = function(str) { |
|
if (typeof(str) !== 'string') { |
|
if ((str instanceof Array) || (str[0] && str.length)) { |
|
return [].slice.call(str); |
|
} else { |
|
return [str]; |
|
} |
|
} |
|
if (!$.__create_dom_div__) { |
|
$.__create_dom_div__ = document.createElement('div'); |
|
} |
|
$.__create_dom_div__.innerHTML = str; |
|
return [].slice.call($.__create_dom_div__.childNodes); |
|
}; |
|
|
|
var panelBuffer = '<div class="mui-poppicker">\ |
|
<div class="mui-poppicker-header">\ |
|
<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\ |
|
<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\ |
|
<div class="mui-poppicker-clear"></div>\ |
|
</div>\ |
|
<div class="mui-poppicker-body">\ |
|
</div>\ |
|
</div>'; |
|
|
|
var pickerBuffer = '<div class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>'; |
|
|
|
//定义弹出选择器类 |
|
var PopPicker = $.PopPicker = $.Class.extend({ |
|
//构造函数 |
|
init: function(options) { |
|
var self = this; |
|
self.options = options || {}; |
|
self.options.buttons = self.options.buttons || ['取消', '确定']; |
|
self.panel = $.dom(panelBuffer)[0]; |
|
document.body.appendChild(self.panel); |
|
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok'); |
|
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel'); |
|
self.body = self.panel.querySelector('.mui-poppicker-body'); |
|
self.mask = $.createMask(); |
|
self.cancel.innerText = self.options.buttons[0]; |
|
self.ok.innerText = self.options.buttons[1]; |
|
self.cancel.addEventListener('tap', function(event) { |
|
self.hide(); |
|
}, false); |
|
self.ok.addEventListener('tap', function(event) { |
|
if (self.callback) { |
|
var rs = self.callback(self.getSelectedItems()); |
|
if (rs !== false) { |
|
self.hide(); |
|
} |
|
} |
|
}, false); |
|
self.mask[0].addEventListener('tap', function() { |
|
self.hide(); |
|
}, false); |
|
self._createPicker(); |
|
//防止滚动穿透 |
|
self.panel.addEventListener($.EVENT_START, function(event) { |
|
event.preventDefault(); |
|
}, false); |
|
self.panel.addEventListener($.EVENT_MOVE, function(event) { |
|
event.preventDefault(); |
|
}, false); |
|
}, |
|
_createPicker: function() { |
|
var self = this; |
|
var layer = self.options.layer || 1; |
|
var width = (100 / layer) + '%'; |
|
self.pickers = []; |
|
for (var i = 1; i <= layer; i++) { |
|
var pickerElement = $.dom(pickerBuffer)[0]; |
|
pickerElement.style.width = width; |
|
self.body.appendChild(pickerElement); |
|
var picker = $(pickerElement).picker(); |
|
self.pickers.push(picker); |
|
pickerElement.addEventListener('change', function(event) { |
|
var nextPickerElement = this.nextSibling; |
|
if (nextPickerElement && nextPickerElement.picker) { |
|
var eventData = event.detail || {}; |
|
var preItem = eventData.item || {}; |
|
nextPickerElement.picker.setItems(preItem.children); |
|
} |
|
}, false); |
|
} |
|
}, |
|
//填充数据 |
|
setData: function(data) { |
|
var self = this; |
|
data = data || []; |
|
self.pickers[0].setItems(data); |
|
}, |
|
//获取选中的项（数组） |
|
getSelectedItems: function() { |
|
var self = this; |
|
var items = []; |
|
for (var i in self.pickers) { |
|
var picker = self.pickers[i]; |
|
items.push(picker.getSelectedItem() || {}); |
|
} |
|
return items; |
|
}, |
|
//显示 |
|
show: function(callback) { |
|
var self = this; |
|
self.callback = callback; |
|
self.mask.show(); |
|
document.body.classList.add($.className('poppicker-active-for-page')); |
|
self.panel.classList.add($.className('active')); |
|
//处理物理返回键 |
|
self.__back = $.back; |
|
$.back = function() { |
|
self.hide(); |
|
}; |
|
}, |
|
//隐藏 |
|
hide: function() { |
|
var self = this; |
|
if (self.disposed) return; |
|
self.panel.classList.remove($.className('active')); |
|
self.mask.close(); |
|
document.body.classList.remove($.className('poppicker-active-for-page')); |
|
//处理物理返回键 |
|
$.back=self.__back; |
|
}, |
|
dispose: function() { |
|
var self = this; |
|
self.hide(); |
|
setTimeout(function() { |
|
self.panel.parentNode.removeChild(self.panel); |
|
for (var name in self) { |
|
self[name] = null; |
|
delete self[name]; |
|
}; |
|
self.disposed = true; |
|
}, 300); |
|
} |
|
}); |
|
|
|
})(mui, document); |
|
/** |
|
* 日期时间插件 |
|
* varstion 1.0.5 |
|
* by Houfeng |
|
* Houfeng@DCloud.io |
|
*/ |
|
|
|
(function($, document) { |
|
|
|
//创建 DOM |
|
$.dom = function(str) { |
|
if (typeof(str) !== 'string') { |
|
if ((str instanceof Array) || (str[0] && str.length)) { |
|
return [].slice.call(str); |
|
} else { |
|
return [str]; |
|
} |
|
} |
|
if (!$.__create_dom_div__) { |
|
$.__create_dom_div__ = document.createElement('div'); |
|
} |
|
$.__create_dom_div__.innerHTML = str; |
|
return [].slice.call($.__create_dom_div__.childNodes); |
|
}; |
|
|
|
var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\ |
|
<div class="mui-dtpicker-header">\ |
|
<button data-id="btn-cancel" class="mui-btn">取消</button>\ |
|
<button data-id="btn-ok" class="mui-btn mui-btn-blue">确定</button>\ |
|
</div>\ |
|
<div class="mui-dtpicker-title"><h5 data-id="title-y">年</h5><h5 data-id="title-m">月</h5><h5 data-id="title-d">日</h5><h5 data-id="title-h">时</h5><h5 data-id="title-i">分</h5></div>\ |
|
<div class="mui-dtpicker-body">\ |
|
<div data-id="picker-y" class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>\ |
|
<div data-id="picker-m" class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>\ |
|
<div data-id="picker-d" class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>\ |
|
<div data-id="picker-h" class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>\ |
|
<div data-id="picker-i" class="mui-picker">\ |
|
<div class="mui-picker-inner">\ |
|
<div class="mui-pciker-rule mui-pciker-rule-ft"></div>\ |
|
<ul class="mui-pciker-list">\ |
|
</ul>\ |
|
<div class="mui-pciker-rule mui-pciker-rule-bg"></div>\ |
|
</div>\ |
|
</div>\ |
|
</div>\ |
|
</div>'; |
|
|
|
//plugin |
|
var DtPicker = $.DtPicker = $.Class.extend({ |
|
init: function(options) { |
|
var self = this; |
|
var _picker = $.dom(domBuffer)[0]; |
|
document.body.appendChild(_picker); |
|
$('[data-id*="picker"]', _picker).picker(); |
|
var ui = self.ui = { |
|
picker: _picker, |
|
mask: $.createMask(), |
|
ok: $('[data-id="btn-ok"]', _picker)[0], |
|
cancel: $('[data-id="btn-cancel"]', _picker)[0], |
|
y: $('[data-id="picker-y"]', _picker)[0], |
|
m: $('[data-id="picker-m"]', _picker)[0], |
|
d: $('[data-id="picker-d"]', _picker)[0], |
|
h: $('[data-id="picker-h"]', _picker)[0], |
|
i: $('[data-id="picker-i"]', _picker)[0], |
|
labels: $('[data-id*="title-"]', _picker), |
|
}; |
|
ui.cancel.addEventListener('tap', function() { |
|
self.hide(); |
|
}, false); |
|
ui.ok.addEventListener('tap', function() { |
|
var rs = self.callback(self.getSelected()); |
|
if (rs !== false) { |
|
self.hide(); |
|
} |
|
}, false); |
|
ui.y.addEventListener('change', function(e) { //目前的change事件容易导致级联触发 |
|
if (self.options.beginMonth || self.options.endMonth) { |
|
self._createMonth(); |
|
} else { |
|
self._createDay(); |
|
} |
|
}, false); |
|
ui.m.addEventListener('change', function(e) { |
|
self._createDay(); |
|
}, false); |
|
ui.d.addEventListener('change', function(e) { |
|
if (self.options.beginMonth || self.options.endMonth) { //仅提供了beginDate时，触发day,hours,minutes的change |
|
self._createHours(); |
|
} |
|
}, false); |
|
ui.h.addEventListener('change', function(e) { |
|
if (self.options.beginMonth || self.options.endMonth) { |
|
self._createMinutes(); |
|
} |
|
}, false); |
|
ui.mask[0].addEventListener('tap', function() { |
|
self.hide(); |
|
}, false); |
|
self._create(options); |
|
//防止滚动穿透 |
|
self.ui.picker.addEventListener($.EVENT_START, function(event) { |
|
event.preventDefault(); |
|
}, false); |
|
self.ui.picker.addEventListener($.EVENT_MOVE, function(event) { |
|
event.preventDefault(); |
|
}, false); |
|
}, |
|
getSelected: function() { |
|
var self = this; |
|
var ui = self.ui; |
|
var type = self.options.type; |
|
var selected = { |
|
type: type, |
|
y: ui.y.picker.getSelectedItem(), |
|
m: ui.m.picker.getSelectedItem(), |
|
d: ui.d.picker.getSelectedItem(), |
|
h: ui.h.picker.getSelectedItem(), |
|
i: ui.i.picker.getSelectedItem(), |
|
toString: function() { |
|
return this.value; |
|
} |
|
}; |
|
switch (type) { |
|
case 'datetime': |
|
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value + ':' + selected.i.value; |
|
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text + ':' + selected.i.text; |
|
break; |
|
case 'date': |
|
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value; |
|
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text; |
|
break; |
|
case 'time': |
|
selected.value = selected.h.value + ':' + selected.i.value; |
|
selected.text = selected.h.text + ':' + selected.i.text; |
|
break; |
|
case 'month': |
|
selected.value = selected.y.value + '-' + selected.m.value; |
|
selected.text = selected.y.text + '-' + selected.m.text; |
|
break; |
|
case 'hour': |
|
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value; |
|
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text; |
|
break; |
|
} |
|
return selected; |
|
}, |
|
setSelectedValue: function(value) { |
|
var self = this; |
|
var ui = self.ui; |
|
var parsedValue = self._parseValue(value); |
|
//TODO 嵌套过多，因为picker的change时间是异步(考虑到性能)的，所以为了保证change之后再setSelected，目前使用回调处理 |
|
ui.y.picker.setSelectedValue(parsedValue.y, 0, function() { |
|
ui.m.picker.setSelectedValue(parsedValue.m, 0, function() { |
|
ui.d.picker.setSelectedValue(parsedValue.d, 0, function() { |
|
ui.h.picker.setSelectedValue(parsedValue.h, 0, function() { |
|
ui.i.picker.setSelectedValue(parsedValue.i, 0); |
|
}); |
|
}); |
|
}); |
|
}); |
|
}, |
|
isLeapYear: function(year) { |
|
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0); |
|
}, |
|
_inArray: function(array, item) { |
|
for (var index in array) { |
|
var _item = array[index]; |
|
if (_item === item) return true; |
|
} |
|
return false; |
|
}, |
|
getDayNum: function(year, month) { |
|
var self = this; |
|
if (self._inArray([1, 3, 5, 7, 8, 10, 12], month)) { |
|
return 31; |
|
} else if (self._inArray([4, 6, 9, 11], month)) { |
|
return 30; |
|
} else if (self.isLeapYear(year)) { |
|
return 29; |
|
} else { |
|
return 28; |
|
} |
|
}, |
|
_fill: function(num) { |
|
num = num.toString(); |
|
if (num.length < 2) { |
|
num = 0 + num; |
|
} |
|
return num; |
|
}, |
|
_isBeginYear: function() { |
|
return this.options.beginYear === parseInt(this.ui.y.picker.getSelectedValue()); |
|
}, |
|
_isBeginMonth: function() { |
|
return this.options.beginMonth && this._isBeginYear() && this.options.beginMonth === parseInt(this.ui.m.picker.getSelectedValue()); |
|
}, |
|
_isBeginDay: function() { |
|
return this._isBeginMonth() && this.options.beginDay === parseInt(this.ui.d.picker.getSelectedValue()); |
|
}, |
|
_isBeginHours: function() { |
|
return this._isBeginDay() && this.options.beginHours === parseInt(this.ui.h.picker.getSelectedValue()); |
|
}, |
|
_isEndYear: function() { |
|
return this.options.endYear === parseInt(this.ui.y.picker.getSelectedValue()); |
|
}, |
|
_isEndMonth: function() { |
|
return this.options.endMonth && this._isEndYear() && this.options.endMonth === parseInt(this.ui.m.picker.getSelectedValue()); |
|
}, |
|
_isEndDay: function() { |
|
return this._isEndMonth() && this.options.endDay === parseInt(this.ui.d.picker.getSelectedValue()); |
|
}, |
|
_isEndHours: function() { |
|
return this._isEndDay() && this.options.endHours === parseInt(this.ui.h.picker.getSelectedValue()); |
|
}, |
|
_createYear: function(current) { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
//生成年列表 |
|
var yArray = []; |
|
if (options.customData.y) { |
|
yArray = options.customData.y; |
|
} else { |
|
var yBegin = options.beginYear; |
|
var yEnd = options.endYear; |
|
for (var y = yBegin; y <= yEnd; y++) { |
|
yArray.push({ |
|
text: y + '', |
|
value: y |
|
}); |
|
} |
|
} |
|
ui.y.picker.setItems(yArray); |
|
//ui.y.picker.setSelectedValue(current); |
|
}, |
|
_createMonth: function(current) { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
|
|
//生成月列表 |
|
var mArray = []; |
|
if (options.customData.m) { |
|
mArray = options.customData.m; |
|
} else { |
|
var m = options.beginMonth && self._isBeginYear() ? options.beginMonth : 1; |
|
var maxMonth = options.endMonth && self._isEndYear() ? options.endMonth : 12; |
|
for (; m <= maxMonth; m++) { |
|
var val = self._fill(m); |
|
mArray.push({ |
|
text: val, |
|
value: val |
|
}); |
|
} |
|
} |
|
ui.m.picker.setItems(mArray); |
|
//ui.m.picker.setSelectedValue(current); |
|
}, |
|
_createDay: function(current) { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
|
|
//生成日列表 |
|
var dArray = []; |
|
if (options.customData.d) { |
|
dArray = options.customData.d; |
|
} else { |
|
var d = self._isBeginMonth() ? options.beginDay : 1; |
|
var maxDay = self._isEndMonth() ? options.endDay : self.getDayNum(parseInt(this.ui.y.picker.getSelectedValue()), parseInt(this.ui.m.picker.getSelectedValue())); |
|
for (; d <= maxDay; d++) { |
|
var val = self._fill(d); |
|
dArray.push({ |
|
text: val, |
|
value: val |
|
}); |
|
} |
|
} |
|
ui.d.picker.setItems(dArray); |
|
current = current || ui.d.picker.getSelectedValue(); |
|
//ui.d.picker.setSelectedValue(current); |
|
}, |
|
_createHours: function(current) { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
//生成时列表 |
|
var hArray = []; |
|
if (options.customData.h) { |
|
hArray = options.customData.h; |
|
} else { |
|
var h = self._isBeginDay() ? options.beginHours : 0; |
|
var maxHours = self._isEndDay() ? options.endHours : 23; |
|
for (; h <= maxHours; h++) { |
|
var val = self._fill(h); |
|
hArray.push({ |
|
text: val, |
|
value: val |
|
}); |
|
} |
|
} |
|
ui.h.picker.setItems(hArray); |
|
//ui.h.picker.setSelectedValue(current); |
|
}, |
|
_createMinutes: function(current) { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
|
|
//生成分列表 |
|
var iArray = []; |
|
if (options.customData.i) { |
|
iArray = options.customData.i; |
|
} else { |
|
var i = self._isBeginHours() ? options.beginMinutes : 0; |
|
var maxMinutes = self._isEndHours() ? options.endMinutes : 59; |
|
for (; i <= maxMinutes; i++) { |
|
var val = self._fill(i); |
|
iArray.push({ |
|
text: val, |
|
value: val |
|
}); |
|
} |
|
} |
|
ui.i.picker.setItems(iArray); |
|
//ui.i.picker.setSelectedValue(current); |
|
}, |
|
_setLabels: function() { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
ui.labels.each(function(i, label) { |
|
label.innerText = options.labels[i]; |
|
}); |
|
}, |
|
_setButtons: function() { |
|
var self = this; |
|
var options = self.options; |
|
var ui = self.ui; |
|
ui.cancel.innerText = options.buttons[0]; |
|
ui.ok.innerText = options.buttons[1]; |
|
}, |
|
_parseValue: function(value) { |
|
var self = this; |
|
var rs = {}; |
|
if (value) { |
|
var parts = value.replace(":", "-").replace(" ", "-").split("-"); |
|
rs.y = parts[0]; |
|
rs.m = parts[1]; |
|
rs.d = parts[2]; |
|
rs.h = parts[3]; |
|
rs.i = parts[4]; |
|
} else { |
|
var now = new Date(); |
|
rs.y = now.getFullYear(); |
|
rs.m = now.getMonth() + 1; |
|
rs.d = now.getDate(); |
|
rs.h = now.getHours(); |
|
rs.i = now.getMinutes(); |
|
} |
|
return rs; |
|
}, |
|
_create: function(options) { |
|
var self = this; |
|
options = options || {}; |
|
options.labels = options.labels || ['年', '月', '日', '时', '分']; |
|
options.buttons = options.buttons || ['取消', '确定']; |
|
options.type = options.type || 'datetime'; |
|
options.customData = options.customData || {}; |
|
self.options = options; |
|
var now = new Date(); |
|
var beginDate = options.beginDate; |
|
if (beginDate instanceof Date && !isNaN(beginDate.valueOf())) { //设定了开始日期 |
|
options.beginYear = beginDate.getFullYear(); |
|
options.beginMonth = beginDate.getMonth() + 1; |
|
options.beginDay = beginDate.getDate(); |
|
options.beginHours = beginDate.getHours(); |
|
options.beginMinutes = beginDate.getMinutes(); |
|
} |
|
var endDate = options.endDate; |
|
if (endDate instanceof Date && !isNaN(endDate.valueOf())) { //设定了结束日期 |
|
options.endYear = endDate.getFullYear(); |
|
options.endMonth = endDate.getMonth() + 1; |
|
options.endDay = endDate.getDate(); |
|
options.endHours = endDate.getHours(); |
|
options.endMinutes = endDate.getMinutes(); |
|
} |
|
options.beginYear = options.beginYear || (now.getFullYear() - 5); |
|
options.endYear = options.endYear || (now.getFullYear() + 5); |
|
var ui = self.ui; |
|
//设定label |
|
self._setLabels(); |
|
self._setButtons(); |
|
//设定类型 |
|
ui.picker.setAttribute('data-type', options.type); |
|
//生成 |
|
self._createYear(); |
|
self._createMonth(); |
|
self._createDay(); |
|
self._createHours(); |
|
self._createMinutes(); |
|
//设定默认值 |
|
self.setSelectedValue(options.value); |
|
}, |
|
//显示 |
|
show: function(callback) { |
|
var self = this; |
|
var ui = self.ui; |
|
self.callback = callback || $.noop; |
|
ui.mask.show(); |
|
document.body.classList.add($.className('dtpicker-active-for-page')); |
|
ui.picker.classList.add($.className('active')); |
|
//处理物理返回键 |
|
self.__back = $.back; |
|
$.back = function() { |
|
self.hide(); |
|
}; |
|
}, |
|
hide: function() { |
|
var self = this; |
|
if (self.disposed) return; |
|
var ui = self.ui; |
|
ui.picker.classList.remove($.className('active')); |
|
ui.mask.close(); |
|
document.body.classList.remove($.className('dtpicker-active-for-page')); |
|
//处理物理返回键 |
|
$.back = self.__back; |
|
}, |
|
dispose: function() { |
|
var self = this; |
|
self.hide(); |
|
setTimeout(function() { |
|
self.ui.picker.parentNode.removeChild(self.ui.picker); |
|
for (var name in self) { |
|
self[name] = null; |
|
delete self[name]; |
|
}; |
|
self.disposed = true; |
|
}, 300); |
|
} |
|
}); |
|
|
|
})(mui, document); |