first commit
This commit is contained in:
@@ -0,0 +1,389 @@
|
||||
/**
|
||||
* 选择列表插件
|
||||
* 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
|
||||
Reference in New Issue
Block a user