/**
* IosSelect
* @param {number} level 选择的层级 1 2 3 4 5 最多支持5层
* @param {...Array} data [oneLevelArray[, twoLevelArray[, threeLevelArray]]]
* @param {Object} options
* @param {string=} options.container 组件插入到该元素下 可选
* @param {Function} options.callback 选择完毕后的回调函数
* @param {string=} options.title 选择框title
* @param {number=} options.itemHeight 每一项的高度，默认 35
* @param {number=} options.itemShowCount 组件展示的项数，默认 7，可选3,5,7,9，不过不是3,5,7,9则展示7项
* @param {number=} options.headerHeight 组件标题栏高度 默认 44
* @param {css=} options.cssUnit px或者rem 默认是px
* @param {string=} options.addClassName 组件额外类名 用于自定义样式
* @param {...Array=} options.relation 数组 [oneTwoRelation, twoThreeRelation, threeFourRelation, fourFiveRelation] 默认值：[0, 0, 0, 0]
* @param {number=} options.relation.oneTwoRelation 第一列和第二列是否通过parentId关联
* @param {number=} options.relation.twoThreeRelation 第二列和第三列是否通过parentId关联
* @param {number=} options.relation.threeFourRelation 第三列和第四列是否通过parentId关联
* @param {number=} options.relation.fourFiveRelation 第四列和第五列是否通过parentId关联
* @param {string=} options.oneLevelId 第一级选中id
* @param {string=} options.twoLevelId 第二级选中id
* @param {string=} options.threeLevelId 第三级选中id
* @param {string=} options.fourLevelId 第四级选中id
* @param {string=} options.fiveLevelId 第五级选中id
* @param {boolean=} options.showLoading 如果你的数据是异步加载的，可以使用该参数设置为true，下拉菜单会有加载中的效果
*/
(function() {
iosSelectUtil = {
isArray: function(arg1) {
return Object.prototype.toString.call(arg1) === '[object Array]';
},
isFunction: function(arg1) {
return typeof arg1 === 'function';
},
attrToData: function(dom, index) {
var obj = {};
for (var p in dom.dataset) {
obj[p] = dom.dataset[p];
}
obj['dom'] = dom;
obj['atindex'] = index;
return obj;
},
attrToHtml: function(obj) {
var html = '';
for (var p in obj) {
html += 'data-' + p + '="' + obj[p] + '"';
}
return html;
}
};
// Layer
function Layer(html, opts) {
if (!(this instanceof Layer)) {
return new Layer(html, opts);
}
this.html = html;
this.opts = opts;
var el = document.createElement('div');
el.className = 'olay';
// var layer_el = $('');
var layer_el = document.createElement('div');
layer_el.className = 'layer';
this.el = el;
this.layer_el = layer_el;
this.init();
}
Layer.prototype = {
init: function() {
this.layer_el.innerHTML = this.html;
if (this.opts.container && document.querySelector(this.opts.container)) {
document.querySelector(this.opts.container).appendChild(this.el);
}
else {
document.body.appendChild(this.el);
}
this.el.appendChild(this.layer_el);
this.el.style.height = Math.max(document.documentElement.getBoundingClientRect().height, window.innerHeight);
if (this.opts.className) {
this.el.className += ' ' + this.opts.className;
}
this.bindEvent();
},
bindEvent: function() {
var sureDom = this.el.querySelectorAll('.sure');
var closeDom = this.el.querySelectorAll('.close');
var self = this;
for (var i = 0, len = sureDom.length; i < len; i++) {
sureDom[i].addEventListener('click', function(e) {
self.close();
});
}
for (var i = 0, len = closeDom.length; i < len; i++) {
closeDom[i].addEventListener('click', function(e) {
self.close();
});
}
},
close: function() {
if (this.el) {
this.el.parentNode.removeChild(this.el);
this.el = null;
}
}
}
function IosSelect(level, data, options) {
if (!iosSelectUtil.isArray(data) || data.length === 0) {
return;
}
this.data = data;
this.level = level || 1;
this.options = options;
this.typeBox = 'one-level-box';
if (this.level === 1) {
this.typeBox = 'one-level-box';
}
else if (this.level === 2) {
this.typeBox = 'two-level-box';
}
else if (this.level === 3) {
this.typeBox = 'three-level-box';
}
else if (this.level === 4) {
this.typeBox = 'four-level-box';
}
else if (this.level === 5) {
this.typeBox = 'five-level-box';
}
this.callback = options.callback;
this.title = options.title || '';
this.options.itemHeight = options.itemHeight || 35;
this.options.itemShowCount = [3, 5, 7, 9].indexOf(options.itemShowCount) !== -1? options.itemShowCount: 7;
this.options.coverArea1Top = Math.floor(this.options.itemShowCount / 2);
this.options.coverArea2Top = Math.ceil(this.options.itemShowCount / 2);
this.options.headerHeight = options.headerHeight || 44;
this.options.relation = iosSelectUtil.isArray(this.options.relation)? this.options.relation: [];
this.options.oneTwoRelation = this.options.relation[0];
this.options.twoThreeRelation = this.options.relation[1];
this.options.threeFourRelation = this.options.relation[2];
this.options.fourFiveRelation = this.options.relation[3];
if (this.options.cssUnit !== 'px' && this.options.cssUnit !== 'rem') {
this.options.cssUnit = 'px';
}
this.setBase();
this.init();
};
IosSelect.prototype = {
init: function() {
this.initLayer();
// 选中元素的信息
this.selectOneObj = {};
this.selectTwoObj = {};
this.selectThreeObj = {};
this.selectFourObj = {};
this.selectFiveObj = {};
this.setOneLevel(this.options.oneLevelId, this.options.twoLevelId, this.options.threeLevelId, this.options.fourLevelId, this.options.fiveLevelId);
},
initLayer: function() {
var self = this;
var all_html = [
'',
'',
'
',
'
',
// '-
',
''
].join('\r\n');
this.iosSelectLayer = new Layer(all_html, {
className: 'ios-select-widget-box ' + this.typeBox + (this.options.addClassName? ' ' + this.options.addClassName: ''),
container: this.options.container || ''
});
this.iosSelectTitleDom = this.iosSelectLayer.el.querySelector('#iosSelectTitle');
this.iosSelectLoadingBoxDom = this.iosSelectLayer.el.querySelector('#iosSelectLoadingBox');
if (this.options.title) {
this.iosSelectTitleDom.innerHTML = this.options.title;
}
if (this.options.headerHeight && this.options.itemHeight) {
this.coverArea1Dom = this.iosSelectLayer.el.querySelector('.cover-area1');
this.coverArea1Dom.style.top = this.options.headerHeight + this.options.itemHeight * this.options.coverArea1Top + this.options.cssUnit;
this.coverArea2Dom = this.iosSelectLayer.el.querySelector('.cover-area2');
this.coverArea2Dom.style.top = this.options.headerHeight + this.options.itemHeight * this.options.coverArea2Top + this.options.cssUnit;
}
this.oneLevelContainDom = this.iosSelectLayer.el.querySelector('#oneLevelContain');
this.twoLevelContainDom = this.iosSelectLayer.el.querySelector('#twoLevelContain');
this.threeLevelContainDom = this.iosSelectLayer.el.querySelector('#threeLevelContain');
this.fourLevelContainDom = this.iosSelectLayer.el.querySelector('#fourLevelContain');
this.fiveLevelContainDom = this.iosSelectLayer.el.querySelector('#fiveLevelContain');
this.oneLevelUlContainDom = this.iosSelectLayer.el.querySelector('.select-one-level');
this.twoLevelUlContainDom = this.iosSelectLayer.el.querySelector('.select-two-level');
this.threeLevelUlContainDom = this.iosSelectLayer.el.querySelector('.select-three-level');
this.fourLevelUlContainDom = this.iosSelectLayer.el.querySelector('.select-four-level');
this.fiveLevelUlContainDom = this.iosSelectLayer.el.querySelector('.select-five-level');
this.iosSelectLayer.el.querySelector('.layer').style.height = this.options.itemHeight * this.options.itemShowCount + this.options.headerHeight + this.options.cssUnit;
this.oneLevelContainDom.style.height = this.options.itemHeight * this.options.itemShowCount + this.options.cssUnit;
this.offsetTop = document.body.scrollTop;
document.body.classList.add('ios-select-body-class');
window.scrollTo(0, 0);
this.scrollOne = new IScroll('#oneLevelContain', {
probeType: 3,
bounce: false
});
this.scrollOne.on('scrollStart', function() {
Array.prototype.slice.call(self.oneLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
});
this.scrollOne.on('scroll', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
plast = Math.round(pa) + 1;
Array.prototype.slice.call(self.oneLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
self.changeClassName(self.oneLevelContainDom, plast);
});
this.scrollOne.on('scrollEnd', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollOne.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.oneLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.oneLevelContainDom, plast);
self.selectOneObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level > 1 && self.options.oneTwoRelation === 1) {
self.setTwoLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
this.scrollOne.on('scrollCancel', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollOne.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.oneLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.oneLevelContainDom, plast);
self.selectOneObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level > 1 && self.options.oneTwoRelation === 1) {
self.setTwoLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
if (this.level >= 2) {
this.twoLevelContainDom.style.height = this.options.itemHeight * this.options.itemShowCount + this.options.cssUnit;
this.scrollTwo = new IScroll('#twoLevelContain', {
probeType: 3,
bounce: false
});
this.scrollTwo.on('scrollStart', function() {
Array.prototype.slice.call(self.twoLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
});
this.scrollTwo.on('scroll', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 0;
plast = Math.round(pa) + 1;
Array.prototype.slice.call(self.twoLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
self.changeClassName(self.twoLevelContainDom, plast);
});
this.scrollTwo.on('scrollEnd', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollTwo.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.twoLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.twoLevelContainDom, plast);
self.selectTwoObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level > 2 && self.options.twoThreeRelation === 1) {
self.setThreeLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
this.scrollTwo.on('scrollCancel', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollTwo.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.twoLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.twoLevelContainDom, plast);
self.selectTwoObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level > 2 && self.options.twoThreeRelation === 1) {
self.setThreeLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
}
if (this.level >= 3) {
this.threeLevelContainDom.style.height = this.options.itemHeight * this.options.itemShowCount + this.options.cssUnit;
this.scrollThree = new IScroll('#threeLevelContain', {
probeType: 3,
bounce: false
});
this.scrollThree.on('scrollStart', function() {
Array.prototype.slice.call(self.threeLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
});
this.scrollThree.on('scroll', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 0;
plast = Math.round(pa) + 1;
Array.prototype.slice.call(self.threeLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
self.changeClassName(self.threeLevelContainDom, plast);
});
this.scrollThree.on('scrollEnd', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollThree.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.threeLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.threeLevelContainDom, plast);
self.selectThreeObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level >= 4 && self.options.threeFourRelation === 1) {
self.setFourLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
this.scrollThree.on('scrollCancel', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollThree.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.threeLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.threeLevelContainDom, plast);
self.selectThreeObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level >= 4 && self.options.threeFourRelation === 1) {
self.setFourLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
}
if (this.level >= 4) {
this.fourLevelContainDom.style.height = this.options.itemHeight * this.options.itemShowCount + this.options.cssUnit;
this.scrollFour = new IScroll('#fourLevelContain', {
probeType: 3,
bounce: false
});
this.scrollFour.on('scrollStart', function() {
Array.prototype.slice.call(self.fourLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
});
this.scrollFour.on('scroll', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 0;
plast = Math.round(pa) + 1;
Array.prototype.slice.call(self.fourLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
self.changeClassName(self.fourLevelContainDom, plast);
});
this.scrollFour.on('scrollEnd', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollFour.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.fourLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.fourLevelContainDom, plast);
self.selectFourObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level >= 5 && self.options.fourFiveRelation === 1) {
self.setFiveLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
this.scrollFour.on('scrollCancel', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollFour.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.fourLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.fourLevelContainDom, plast);
self.selectFourObj = iosSelectUtil.attrToData(pdom, plast);
if (self.level >= 5 && self.options.fourFiveRelation === 1) {
self.setFiveLevel(self.selectOneObj.id, self.selectTwoObj.id, self.selectThreeObj.id, self.selectFourObj.id, self.selectFiveObj.id);
}
});
}
if (this.level >= 5) {
this.fiveLevelContainDom.style.height = this.options.itemHeight * this.options.itemShowCount + this.options.cssUnit;
this.scrollFive = new IScroll('#fiveLevelContain', {
probeType: 3,
bounce: false
});
this.scrollFive.on('scrollStart', function() {
Array.prototype.slice.call(self.fiveLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
});
this.scrollFive.on('scroll', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 0;
plast = Math.round(pa) + 1;
Array.prototype.slice.call(self.fiveLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
self.changeClassName(self.fiveLevelContainDom, plast);
});
this.scrollFive.on('scrollEnd', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollFive.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.fiveLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.fiveLevelContainDom, plast);
self.selectFiveObj = iosSelectUtil.attrToData(pdom, plast);
});
this.scrollFive.on('scrollCancel', function() {
var pa = Math.abs(this.y / self.baseSize) / self.options.itemHeight;
var plast = 1;
var to = 0;
if (Math.ceil(pa) === Math.round(pa)) {
to = Math.ceil(pa) * self.options.itemHeight * self.baseSize;
plast = Math.ceil(pa) + 1;
} else {
to = Math.floor(pa) * self.options.itemHeight * self.baseSize;
plast = Math.floor(pa) + 1;
}
self.scrollFive.scrollTo(0, -to, 0);
Array.prototype.slice.call(self.fiveLevelContainDom.querySelectorAll('li')).forEach(function(v, i, o) {
if (v.classList.contains('at')) {
v.classList.remove('at');
} else if (v.classList.contains('side1')) {
v.classList.remove('side1');
} else if (v.classList.contains('side2')) {
v.classList.remove('side2');
}
});
var pdom = self.changeClassName(self.fiveLevelContainDom, plast);
self.selectFiveObj = iosSelectUtil.attrToData(pdom, plast);
});
}
// 取消 确认 事件
this.closeBtnDom = this.iosSelectLayer.el.querySelector('.close');
this.closeBtnDom.addEventListener('click', function(e) {
if (document.body.classList.contains('ios-select-body-class')) {
document.body.classList.remove('ios-select-body-class');
}
window.scrollTo(0, self.offsetTop);
});
this.selectBtnDom = this.iosSelectLayer.el.querySelector('.sure');
this.selectBtnDom.addEventListener('click', function(e) {
if (document.body.classList.contains('ios-select-body-class')) {
document.body.classList.remove('ios-select-body-class');
}
window.scrollTo(0, self.offsetTop);
self.callback && self.callback(self.selectOneObj, self.selectTwoObj, self.selectThreeObj, self.selectFourObj, self.selectFiveObj);
});
},
loadingShow: function() {
this.options.showLoading && (this.iosSelectLoadingBoxDom.style.display = 'block');
},
loadingHide: function() {
this.iosSelectLoadingBoxDom.style.display = 'none';
},
getOneLevel: function() {
return this.data[0];
},
setOneLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
if (iosSelectUtil.isArray(this.data[0])){
var oneLevelData = this.getOneLevel();
this.renderOneLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, oneLevelData);
}
else if (iosSelectUtil.isFunction(this.data[0])) {
this.loadingShow();
this.data[0](function(oneLevelData) {
this.loadingHide();
this.renderOneLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, oneLevelData);
}.bind(this));
}
else {
throw new Error('data format error');
}
},
renderOneLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, oneLevelData) {
var hasAtId = oneLevelData.some(function(v, i, o) {
return v.id == oneLevelId;
});
if (!hasAtId) {
oneLevelId = oneLevelData[0]['id'];
}
var oneHtml = '';
var self = this;
var plast = 0;
oneHtml += this.getWhiteItem();
oneLevelData.forEach(function(v, i, o) {
if (v.id == oneLevelId) {
oneHtml += '' + v.value + '';
plast = i + 1;
} else {
oneHtml += '' + v.value + '';
}
}.bind(this));
oneHtml += this.getWhiteItem();
this.oneLevelUlContainDom.innerHTML = oneHtml;
this.scrollOne.refresh();
this.scrollOne.scrollToElement('li:nth-child(' + plast + ')', 0);
if (this.level >= 2) {
this.setTwoLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
}
var pdom = this.changeClassName(this.oneLevelContainDom, plast);
this.selectOneObj = iosSelectUtil.attrToData(pdom, this.getAtIndexByPlast(plast));
},
getTwoLevel: function(oneLevelId) {
var twoLevelData = [];
if (this.options.oneTwoRelation === 1) {
this.data[1].forEach(function(v, i, o) {
if (v['parentId'] === oneLevelId) {
twoLevelData.push(v);
}
});
} else {
twoLevelData = this.data[1];
}
return twoLevelData;
},
setTwoLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
if (iosSelectUtil.isArray(this.data[1])) {
var twoLevelData = this.getTwoLevel(oneLevelId);
this.renderTwoLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, twoLevelData);
}
else if (iosSelectUtil.isFunction(this.data[1])) {
this.loadingShow();
this.data[1](oneLevelId, function(twoLevelData) {
this.loadingHide();
this.renderTwoLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, twoLevelData);
}.bind(this));
}
else {
throw new Error('data format error');
}
},
renderTwoLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, twoLevelData) {
var plast = 0;
var hasAtId = twoLevelData.some(function(v, i, o) {
return v.id == twoLevelId;
});
if (!hasAtId) {
twoLevelId = twoLevelData[0]['id'];
}
var twoHtml = '';
var self = this;
twoHtml += this.getWhiteItem();
twoLevelData.forEach(function(v, i, o) {
if (v.id == twoLevelId) {
twoHtml += '' + v.value + '';
plast = i + 1;
} else {
twoHtml += '' + v.value + '';
}
}.bind(this));
twoHtml += this.getWhiteItem();
this.twoLevelUlContainDom.innerHTML = twoHtml;
this.scrollTwo.refresh();
this.scrollTwo.scrollToElement(':nth-child(' + plast + ')', 0);
if (this.level >= 3) {
this.setThreeLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
}
var pdom = this.changeClassName(this.twoLevelContainDom, plast);
this.selectTwoObj = iosSelectUtil.attrToData(pdom, this.getAtIndexByPlast(plast));
},
getThreeLevel: function(oneLevelId, twoLevelId) {
var threeLevelData = [];
if (this.options.twoThreeRelation === 1) {
this.data[2].forEach(function(v, i, o) {
if (v['parentId'] === twoLevelId) {
threeLevelData.push(v);
}
});
} else {
threeLevelData = this.data[2];
}
return threeLevelData;
},
setThreeLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
if (iosSelectUtil.isArray(this.data[2])) {
var threeLevelData = this.getThreeLevel(oneLevelId, twoLevelId);
this.renderThreeLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, threeLevelData);
}
else if (iosSelectUtil.isFunction(this.data[2])) {
this.loadingShow();
this.data[2](oneLevelId, twoLevelId, function(threeLevelData) {
this.loadingHide();
this.renderThreeLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, threeLevelData);
}.bind(this));
}
else {
throw new Error('data format error');
}
},
renderThreeLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, threeLevelData) {
var plast = 0;
var hasAtId = threeLevelData.some(function(v, i, o) {
return v.id == threeLevelId;
});
if (!hasAtId) {
threeLevelId = threeLevelData[0]['id'];
}
var threeHtml = '';
var self = this;
threeHtml += this.getWhiteItem();
threeLevelData.forEach(function(v, i, o) {
if (v.id == threeLevelId) {
threeHtml += '' + v.value + '';
plast = i + 1;
} else {
threeHtml += '' + v.value + '';
}
}.bind(this));
threeHtml += this.getWhiteItem();
this.threeLevelUlContainDom.innerHTML = threeHtml;
this.scrollThree.refresh();
this.scrollThree.scrollToElement(':nth-child(' + plast + ')', 0);
if (this.level >= 4) {
this.setFourLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
}
var pdom = this.changeClassName(this.threeLevelContainDom, plast);
this.selectThreeObj = iosSelectUtil.attrToData(pdom, this.getAtIndexByPlast(plast));
},
getFourLevel: function(oneLevelId, twoLevelId, threeLevelId) {
var fourLevelData = [];
if (this.options.threeFourRelation === 1) {
this.data[3].forEach(function(v, i, o) {
if (v['parentId'] === threeLevelId) {
fourLevelData.push(v);
}
});
} else {
fourLevelData = this.data[3];
}
return fourLevelData;
},
setFourLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
if (iosSelectUtil.isArray(this.data[3])) {
var fourLevelData = this.getFourLevel(oneLevelId, twoLevelId, threeLevelId);
this.renderFourLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fourLevelData);
}
else if (iosSelectUtil.isFunction(this.data[3])) {
this.loadingShow();
this.data[3](oneLevelId, twoLevelId, threeLevelId, function(fourLevelData) {
this.loadingHide();
this.renderFourLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fourLevelData);
}.bind(this));
}
else {
throw new Error('data format error');
}
},
renderFourLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fourLevelData) {
var plast = 0;
var hasAtId = fourLevelData.some(function(v, i, o) {
return v.id == fourLevelId;
});
if (!hasAtId) {
fourLevelId = fourLevelData[0]['id'];
}
var fourHtml = '';
var self = this;
fourHtml += this.getWhiteItem();
fourLevelData.forEach(function(v, i, o) {
if (v.id == fourLevelId) {
fourHtml += '' + v.value + '';
plast = i + 1;
} else {
fourHtml += '' + v.value + '';
}
}.bind(this));
fourHtml += this.getWhiteItem();
this.fourLevelUlContainDom.innerHTML = fourHtml;
this.scrollFour.refresh();
this.scrollFour.scrollToElement(':nth-child(' + plast + ')', 0);
if (this.level >= 5) {
this.setFiveLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId);
}
var pdom = this.changeClassName(this.fourLevelContainDom, plast);
this.selectFourObj = iosSelectUtil.attrToData(pdom, this.getAtIndexByPlast(plast));
},
getFiveLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId) {
var fiveLevelData = [];
if (this.options.fourFiveRelation === 1) {
this.data[4].forEach(function(v, i, o) {
if (v['parentId'] === fourLevelId) {
fiveLevelData.push(v);
}
});
} else {
fiveLevelData = this.data[4];
}
return fiveLevelData;
},
setFiveLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId) {
if (iosSelectUtil.isArray(this.data[4])) {
var fiveLevelData = this.getFiveLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId);
this.renderFiveLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fiveLevelData);
}
else if (iosSelectUtil.isFunction(this.data[4])) {
this.loadingShow();
this.data[4](oneLevelId, twoLevelId, threeLevelId, fourLevelId, function(fiveLevelData) {
this.loadingHide();
this.renderFiveLevel(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fiveLevelData);
}.bind(this));
}
else {
throw new Error('data format error');
}
},
renderFiveLevel: function(oneLevelId, twoLevelId, threeLevelId, fourLevelId, fiveLevelId, fiveLevelData) {
var plast = 0;
var hasAtId = fiveLevelData.some(function(v, i, o) {
return v.id == fiveLevelId;
});
if (!hasAtId) {
fiveLevelId = fiveLevelData[0]['id'];
}
var fiveHtml = '';
var self = this;
fiveHtml += this.getWhiteItem();
fiveLevelData.forEach(function(v, i, o) {
if (v.id == fiveLevelId) {
fiveHtml += '' + v.value + '';
plast = i + 1;
} else {
fiveHtml += '' + v.value + '';
}
}.bind(this));
fiveHtml += this.getWhiteItem();
this.fiveLevelUlContainDom.innerHTML = fiveHtml;
this.scrollFive.refresh();
this.scrollFive.scrollToElement(':nth-child(' + plast + ')', 0);
var pdom = this.changeClassName(this.fiveLevelContainDom, plast);
this.selectFiveObj = iosSelectUtil.attrToData(pdom, this.getAtIndexByPlast(plast));
},
getWhiteItem: function() {
var whiteItemHtml = '';
whiteItemHtml += '';
if (this.options.itemShowCount > 3) {
whiteItemHtml += '';
}
if (this.options.itemShowCount > 5) {
whiteItemHtml += '';
}
if (this.options.itemShowCount > 7) {
whiteItemHtml += '';
}
return whiteItemHtml;
},
changeClassName: function(levelContainDom, plast) {
var pdom;
if (this.options.itemShowCount === 3) {
pdom = levelContainDom.querySelector('li:nth-child(' + (plast + 1) + ')');
pdom.classList.add('at');
}
else if (this.options.itemShowCount === 5) {
pdom = levelContainDom.querySelector('li:nth-child(' + (plast + 2) + ')');
pdom.classList.add('at');
levelContainDom.querySelector('li:nth-child(' + (plast + 1) + ')').classList.add('side1');
levelContainDom.querySelector('li:nth-child(' + (plast + 3) + ')').classList.add('side1');
}
else if (this.options.itemShowCount === 7) {
pdom = levelContainDom.querySelector('li:nth-child(' + (plast + 3) + ')');
pdom.classList.add('at');
levelContainDom.querySelector('li:nth-child(' + (plast + 2) + ')').classList.add('side1');
levelContainDom.querySelector('li:nth-child(' + (plast + 1) + ')').classList.add('side2');
levelContainDom.querySelector('li:nth-child(' + (plast + 4) + ')').classList.add('side1');
levelContainDom.querySelector('li:nth-child(' + (plast + 5) + ')').classList.add('side2');
}
else if (this.options.itemShowCount === 9) {
pdom = levelContainDom.querySelector('li:nth-child(' + (plast + 4) + ')');
pdom.classList.add('at');
levelContainDom.querySelector('li:nth-child(' + (plast + 3) + ')').classList.add('side1');
levelContainDom.querySelector('li:nth-child(' + (plast + 2) + ')').classList.add('side2');
levelContainDom.querySelector('li:nth-child(' + (plast + 5) + ')').classList.add('side1');
levelContainDom.querySelector('li:nth-child(' + (plast + 6) + ')').classList.add('side2');
}
return pdom;
},
getAtIndexByPlast: function(plast) {
return plast + Math.ceil(this.options.itemShowCount / 2);
},
setBase: function() {
if (this.options.cssUnit === 'rem') {
var dltDom = document.documentElement;
var dltStyle = window.getComputedStyle(dltDom, null);
var dltFontSize = dltStyle.fontSize;
try {
this.baseSize = /\d+(?:\.\d+)?/.exec(dltFontSize)[0];
}
catch(e) {
this.baseSize = 1;
}
}
else {
this.baseSize = 1;
}
}
}
if (typeof module != 'undefined' && module.exports) {
module.exports = IosSelect;
} else if (typeof define == 'function' && define.amd) {
define(function() {
return IosSelect;
});
} else {
window.IosSelect = IosSelect;
}
})();