DateSelector.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
  1. /**
  2. * Created by appian on 16/8/5.
  3. */
  4. (function (wid, dcm) {
  5. var win = wid;
  6. var doc = dcm;
  7. function $id(id) {
  8. return doc.getElementById(id);
  9. }
  10. function $class(name) {
  11. return doc.getElementsByClassName(name);
  12. }
  13. function loop(begin, length, fuc) {
  14. for ( var i = begin; i < length; i++ ) {
  15. if (fuc(i)) break;
  16. }
  17. }
  18. function on(action, selector, callback) {
  19. doc.addEventListener(action, function (e) {
  20. if (selector == e.target.tagName.toLowerCase() || selector == e.target.className || selector == e.target.id) {
  21. callback(e);
  22. }
  23. })
  24. }
  25. function DateSelector(config) {
  26. this.input = config.input;
  27. this.container = config.container;
  28. this.type = config.type;
  29. this.param = (config.type == 1) ? [1, 1, 1, 1, 1] : config.param;
  30. this.beginTime = config.beginTime.map(function(t) {return Number(t)});
  31. this.endTime = config.endTime.map(function(t) {return Number(t)});
  32. this.recentTime = config.recentTime.map(function(t) {return Number(t)});
  33. this.success = config.success;
  34. this.ulCount = 0;
  35. this.ulDomArr = [];
  36. this.idxArr = [];
  37. this.liHeight = wid.lib ? Number(doc.getElementsByTagName('HTML')[0].style.fontSize.replace('px', '')) * 1 : 40;
  38. this.maxHeight = [];
  39. this.distance = [];
  40. this.start = {
  41. Y: 0,
  42. time: ''
  43. };
  44. this.move = {
  45. Y: 0,
  46. speed: []
  47. };
  48. this.end = {
  49. Y: 0,
  50. index: 0
  51. };
  52. this.resultArr = [];
  53. this.begin_time = [1970, 1, 1, 0, 0];
  54. this.end_time = [new Date().getFullYear() + 1, 12, 31, 23, 59];
  55. this.recent_time = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), new Date().getHours(), new Date().getMinutes()];
  56. this.initDomFuc();
  57. this.initReady();
  58. this.initBinding();
  59. }
  60. DateSelector.prototype = {
  61. constructor: DateSelector,
  62. checkParam: function () {
  63. var idxArr = [];
  64. var _this = this;
  65. loop(0, _this.param.length, function (i) {
  66. if (_this.param[i] > 0) {
  67. idxArr.push(i);
  68. }
  69. });
  70. this.ulCount = idxArr[idxArr.length - 1] - idxArr[0] + 1;
  71. loop(idxArr[0], idxArr[idxArr.length - 1] + 1, function (i) {
  72. _this.param[i] = 1;
  73. _this.idxArr.push(i);
  74. });
  75. },
  76. checkTime: function () {
  77. var _this = this;
  78. var begin_time = this.begin_time;
  79. var end_time = this.end_time;
  80. var recent_time = this.recent_time;
  81. if (_this.beginTime.length == 0) {
  82. loop(0, _this.idxArr.length, function (i) {
  83. _this.beginTime.push(begin_time[_this.idxArr[i]]);
  84. });
  85. }
  86. if (_this.endTime.length == 0) {
  87. loop(0, _this.idxArr.length, function (i) {
  88. _this.endTime.push(end_time[_this.idxArr[i]]);
  89. });
  90. }
  91. if (_this.recentTime.length == 0) {
  92. loop(0, _this.idxArr.length, function (i) {
  93. _this.recentTime.push(recent_time[_this.idxArr[i]]);
  94. });
  95. }
  96. if (_this.idxArr.length == _this.beginTime.length && _this.beginTime.length == _this.endTime.length && _this.endTime.length == _this.recentTime.length) {
  97. var _idxArrIndex = 0;
  98. loop(0, _this.param.length, function (i) {
  99. if (_this.param[i] == 0) {
  100. switch (i) {
  101. case 0:
  102. begin_time[i] = new Date().getFullYear();
  103. end_time[i] = new Date().getFullYear();
  104. break;
  105. case 1:
  106. begin_time[i] = new Date().getMonth() + 1;
  107. end_time[i] = new Date().getMonth() + 1;
  108. break;
  109. case 2:
  110. begin_time[i] = new Date().getDate();
  111. end_time[i] = new Date().getDate();
  112. break;
  113. case 3:
  114. begin_time[i] = new Date().getHours();
  115. end_time[i] = new Date().getHours();
  116. break;
  117. case 4:
  118. begin_time[i] = new Date().getMinutes();
  119. end_time[i] = new Date().getMinutes();
  120. break;
  121. }
  122. } else {
  123. switch (i) {
  124. case 0:
  125. _this.beginTime[_idxArrIndex] = begin_time[i] = _this.beginTime[_idxArrIndex] >= 1900 ? _this.beginTime[_idxArrIndex] : new Date().getFullYear();
  126. _this.endTime[_idxArrIndex] = end_time[i] = _this.endTime[_idxArrIndex] >= 1900 ? _this.endTime[_idxArrIndex] : new Date().getFullYear() + 1;
  127. recent_time[i] = _this.recentTime[_idxArrIndex];
  128. break;
  129. case 1:
  130. _this.beginTime[_idxArrIndex] = begin_time[i] = (_this.beginTime[_idxArrIndex] > 0 && _this.beginTime[_idxArrIndex] <= 12) ? _this.beginTime[_idxArrIndex] : 1;
  131. _this.endTime[_idxArrIndex] = end_time[i] = (_this.endTime[_idxArrIndex] > 0 && _this.endTime[_idxArrIndex] <= 12) ? _this.endTime[_idxArrIndex] : 12;
  132. recent_time[i] = _this.recentTime[_idxArrIndex];
  133. break;
  134. case 2:
  135. _this.beginTime[_idxArrIndex] = begin_time[i] = (_this.beginTime[_idxArrIndex] > 0 && _this.beginTime[_idxArrIndex] <= new Date(begin_time[0], begin_time[1], 0).getDate()) ? _this.beginTime[_idxArrIndex] : 1;
  136. _this.endTime[_idxArrIndex] = end_time[i] = (_this.endTime[_idxArrIndex] > 0 && _this.endTime[_idxArrIndex] <= new Date(end_time[0], end_time[1], 0).getDate()) ? _this.endTime[_idxArrIndex] : new Date(end_time[0], end_time[1], 0).getDate();
  137. recent_time[i] = _this.recentTime[_idxArrIndex];
  138. break;
  139. case 3:
  140. _this.beginTime[_idxArrIndex] = begin_time[i] = (_this.beginTime[_idxArrIndex] >= 0 && _this.beginTime[_idxArrIndex] <= 23) ? _this.beginTime[_idxArrIndex] : 0;
  141. _this.endTime[_idxArrIndex] = end_time[i] = (_this.endTime[_idxArrIndex] >= 0 && _this.endTime[_idxArrIndex] <= 23) ? _this.endTime[_idxArrIndex] : 23;
  142. recent_time[i] = _this.recentTime[_idxArrIndex];
  143. break;
  144. case 4 :
  145. _this.beginTime[_idxArrIndex] = begin_time[i] = (_this.beginTime[_idxArrIndex] >= 0 && _this.beginTime[_idxArrIndex] <= 59) ? _this.beginTime[_idxArrIndex] : 0;
  146. _this.endTime[_idxArrIndex] = end_time[i] = (_this.endTime[_idxArrIndex] >= 0 && _this.endTime[_idxArrIndex] <= 59) ? _this.endTime[_idxArrIndex] : 59;
  147. recent_time[i] = _this.recentTime[_idxArrIndex];
  148. break;
  149. }
  150. _idxArrIndex++;
  151. }
  152. });
  153. var bt = new Date(begin_time[0], begin_time[1], begin_time[2], begin_time[3], begin_time[4]).getTime();
  154. var et = new Date(end_time[0], end_time[1], end_time[2], end_time[3], end_time[4]).getTime();
  155. var rt = new Date(recent_time[0], recent_time[1], recent_time[2], recent_time[3], recent_time[4]).getTime();
  156. rt < bt ? alert('当前时间小于开始时间') : "";
  157. rt > et ? alert('当前时间超过结束时间') : "";
  158. return (bt <= rt && rt <= et);
  159. } else {
  160. alert('error,please open the console to see the errmsg');
  161. console.warn('type为1时,时间数组长度为0或5');
  162. console.warn('构造函数的参数param或recentTime设置有误');
  163. console.warn('param必须是连续的1,recentTime的值必须与param中的值对应');
  164. console.warn('构造函数调用失败,请重新设置参数');
  165. return false;
  166. }
  167. },
  168. checkTimeArr: function (arr1, arr2, length) {
  169. var checkStatus = true;
  170. loop(0, length, function (i) {
  171. if (arr1[i] != arr2[i]) checkStatus = false;
  172. });
  173. return checkStatus;
  174. },
  175. initDomFuc: function () {
  176. var _this = this;
  177. this.checkParam();
  178. if (!this.checkTime())return;
  179. var html = '';
  180. html += '<div class="date-selector-bg" id="date-selector-bg-' + _this.container + '">' +
  181. '<div class="date-selector-container" id="date-selector-container-' + _this.container + '">' +
  182. '<div class="date-selector-btn-box">' +
  183. '<div class="date-selector-btn" id="date-selector-btn-cancel">返回</div>';
  184. if (this.type == 1) {
  185. html += '<div class="date-selector-tab-box">' +
  186. '<div class="date-selector-tab date-selector-' + _this.container + '-tab date-selector-tab-active">年月日</div>' +
  187. '<div class="date-selector-tab date-selector-' + _this.container + '-tab">时分</div>' +
  188. '</div>';
  189. }
  190. html += '<div class="date-selector-btn" id="date-selector-btn-save-' + _this.container + '">确定</div>' +
  191. '</div>' +
  192. '<div class="date-selector-content">';
  193. if (_this.type == 0) {
  194. loop(0, _this.idxArr.length, function (i) {
  195. html += '<div class="date-selector date-selector-left">' +
  196. '<ul id="date-selector-' + _this.container + '-' + _this.idxArr[i] + '"></ul>' +
  197. '</div>';
  198. });
  199. html += '<div class="date-selector-up-shadow"></div>' +
  200. '<div class="date-selector-down-shadow"></div>' +
  201. '<div class="date-selector-line"></div>' +
  202. '</div>';
  203. html += '</div></div>';
  204. $id(_this.container).innerHTML = html;
  205. loop(0, _this.ulCount, function (i) {
  206. $id('date-selector-container-' + _this.container).querySelectorAll(".date-selector")[i].style.width = (100 / _this.ulCount).toFixed(2) + '%';
  207. });
  208. } else if (_this.type == 1) {
  209. html += '<div class="date-selector date-selector-left">' +
  210. '<ul id="date-selector-' + _this.container + '-0"></ul>' +
  211. '</div>' +
  212. '<div class="date-selector date-selector-left">' +
  213. '<ul id="date-selector-' + _this.container + '-1"></ul>' +
  214. '</div>' +
  215. '<div class="date-selector date-selector-left">' +
  216. '<ul id="date-selector-' + _this.container + '-2"></ul>' +
  217. '</div>' +
  218. '<div class="date-selector-up-shadow"></div>' +
  219. '<div class="date-selector-down-shadow"></div>' +
  220. '<div class="date-selector-line"></div>' +
  221. '</div>' +
  222. '<div class="date-selector-content date-selector-content-right">' +
  223. '<div class="date-selector date-selector-right">' +
  224. '<ul id="date-selector-' + _this.container + '-3"></ul>' +
  225. '</div>' +
  226. '<div class="date-selector date-selector-right">' +
  227. '<ul id="date-selector-' + _this.container + '-4"></ul>' +
  228. '</div>' +
  229. '<div class="date-selector-up-shadow"></div>' +
  230. '<div class="date-selector-down-shadow"></div>' +
  231. '<div class="date-selector-line"></div>' +
  232. '</div>';
  233. html += '</div></div>';
  234. $id(_this.container).innerHTML = html;
  235. }
  236. },
  237. initReady: function () {
  238. var _this = this;
  239. var realIdx = 0;
  240. loop(0, _this.ulCount, function (i) {
  241. realIdx = _this.idxArr[i];
  242. var min = 0;
  243. var max = 0;
  244. var tempDomUl = $id('date-selector-' + _this.container + '-' + _this.idxArr[i]);
  245. var tempArray = _this['array' + _this.idxArr[i]] = [];
  246. switch (realIdx) {
  247. case 0:
  248. _this.initCommonArr(tempDomUl, tempArray, _this.beginTime[i], _this.endTime[i], '年', i);
  249. break;
  250. case 1:
  251. min = (_this.checkTimeArr(_this.begin_time, _this.recent_time, 1)) ? _this.beginTime[i] : 1;
  252. max = (_this.checkTimeArr(_this.end_time, _this.recent_time, 1)) ? _this.endTime[i] : 12;
  253. _this.initCommonArr(tempDomUl, tempArray, min, max, '月', i);
  254. break;
  255. case 2:
  256. min = (_this.checkTimeArr(_this.begin_time, _this.recent_time, 2)) ? _this.beginTime[i] : 1;
  257. max = (_this.checkTimeArr(_this.end_time, _this.recent_time, 2)) ? _this.endTime[i] : new Date(_this.recent_time[0], _this.recent_time[1], 0).getDate();
  258. _this.initCommonArr(tempDomUl, tempArray, min, max, '日', i);
  259. break;
  260. case 3:
  261. min = (_this.checkTimeArr(_this.begin_time, _this.recent_time, 3)) ? _this.beginTime[i] : 0;
  262. max = (_this.checkTimeArr(_this.end_time, _this.recent_time, 3)) ? _this.endTime[i] : 23;
  263. _this.initCommonArr(tempDomUl, tempArray, min, max, '时', i);
  264. break;
  265. case 4 :
  266. min = (_this.checkTimeArr(_this.begin_time, _this.recent_time, 4)) ? _this.beginTime[i] : 0;
  267. max = (_this.checkTimeArr(_this.end_time, _this.recent_time, 4)) ? _this.endTime[i] : 59;
  268. _this.initCommonArr(tempDomUl, tempArray, min, max, '分', i);
  269. break;
  270. }
  271. tempDomUl.addEventListener('touchstart', function () {
  272. _this.touch(event, _this, tempDomUl, _this['array' + _this.idxArr[i]], i);
  273. }, false);
  274. tempDomUl.addEventListener('touchmove', function () {
  275. _this.touch(event, _this, tempDomUl, _this['array' + _this.idxArr[i]], i);
  276. }, false);
  277. tempDomUl.addEventListener('touchend', function () {
  278. _this.touch(event, _this, tempDomUl, _this['array' + _this.idxArr[i]], i);
  279. }, true);
  280. });
  281. },
  282. initBinding: function () {
  283. var _this = this;
  284. var bg = $id('date-selector-bg-' + _this.container);
  285. var container = $id('date-selector-container-' + _this.container);
  286. var body = doc.body;
  287. on('touchstart', _this.input, function () {
  288. bg.classList.add('date-selector-bg-up', 'date-selector-bg-delay');
  289. container.classList.add('date-selector-container-up');
  290. body.classList.add('date-selector-locked');
  291. }, false);
  292. on('touchstart', 'date-selector-btn-save-' + _this.container, function () {
  293. var temp = _this.resultArr.map(function (it) {
  294. if (it < 10) it = ('0' + it);
  295. return it + '';
  296. });
  297. _this.success(_this.resultArr, temp);
  298. bg.classList.remove('date-selector-bg-up');
  299. container.classList.remove('date-selector-container-up');
  300. setTimeout(function () {
  301. bg.classList.remove('date-selector-bg-delay');
  302. }, 350);
  303. body.classList.remove('date-selector-locked');
  304. }, false);
  305. on('touchstart', 'date-selector-bg-' + _this.container, function () {
  306. bg.classList.remove('date-selector-bg-up');
  307. container.classList.remove('date-selector-container-up');
  308. setTimeout(function () {
  309. bg.classList.remove('date-selector-bg-delay');
  310. }, 350);
  311. body.classList.remove('date-selector-locked');
  312. }, false);
  313. on('touchstart', 'date-selector-btn-cancel', function () {
  314. bg.classList.remove('date-selector-bg-up');
  315. container.classList.remove('date-selector-container-up');
  316. setTimeout(function () {
  317. bg.classList.remove('date-selector-bg-delay');
  318. }, 350);
  319. body.classList.remove('date-selector-locked');
  320. }, false);
  321. on('touchstart', 'date-selector-tab date-selector-' + _this.container + '-tab', function (event) {
  322. var tab = container.getElementsByClassName('date-selector-tab');
  323. var content = container.getElementsByClassName('date-selector-content');
  324. loop(0, tab.length, function (i) {
  325. tab[i].classList.remove('date-selector-tab-active');
  326. });
  327. event.target.classList.add('date-selector-tab-active');
  328. if (event.target.innerHTML == '年月日') {
  329. content[0].classList.remove('date-selector-content-left');
  330. content[1].classList.add('date-selector-content-right');
  331. } else {
  332. content[0].classList.add('date-selector-content-left');
  333. content[1].classList.remove('date-selector-content-right');
  334. }
  335. }, false);
  336. },
  337. initCommonArr: function (tempDomUl, tempArr, min, max, str, idx) {
  338. var _this = this;
  339. var Html = '';
  340. loop(min, max + 1, function (i) {
  341. tempArr.push(i);
  342. });
  343. _this.maxHeight.push(_this.liHeight * (max - min));
  344. var res = _this.recentTime[idx];
  345. _this.resultArr.push(res);
  346. tempArr.unshift('', '');
  347. tempArr.push('', '');
  348. tempDomUl.style.transform = 'translate3d(0,-' + this.liHeight * (tempArr.indexOf(res) - 2) + 'px, 0)';
  349. tempDomUl.style.webkitTransform = 'translate3d(0,-' + this.liHeight * (tempArr.indexOf(res) - 2) + 'px, 0)';
  350. _this.distance.push(this.liHeight * (tempArr.indexOf(res) - 2));
  351. loop(0, tempArr.length, function (j) {
  352. Html += '<li>' + tempArr[j] + (tempArr[j] === '' ? '' : str) + '</li>';
  353. });
  354. tempDomUl.innerHTML = Html;
  355. },
  356. initRangeArr: function (min, max, str, checkIdx, dir) {
  357. var _this = this;
  358. var realIdx = _this.idxArr[checkIdx];
  359. var arr = [];
  360. var $selector = $id('date-selector-' + _this.container + '-' + realIdx);
  361. var targetLong = 0;
  362. loop(min, max + 1, function (k) {
  363. arr.push(k);
  364. });
  365. var Html = '';
  366. arr.unshift('', '');
  367. arr.push('', '');
  368. for ( var i = 0; i < arr.length; i++ ) {
  369. Html += '<li>' + arr[i] + (arr[i] === '' ? '' : str) + '</li>';
  370. }
  371. _this['array' + realIdx] = [];
  372. _this['array' + realIdx] = arr;
  373. $selector.innerHTML = Html;
  374. if (dir == 0) {
  375. targetLong = min > this.resultArr[checkIdx] ? 0 : -arr.indexOf(this.resultArr[checkIdx]) * this.liHeight + this.liHeight * 2;
  376. this.resultArr[checkIdx] = this.resultArr[checkIdx] < min ? min : this.resultArr[checkIdx];
  377. this.recent_time[_this.idxArr[checkIdx]] = _this.resultArr[checkIdx];
  378. } else if (dir == 1) {
  379. targetLong = max > this.resultArr[checkIdx] ?
  380. -arr.indexOf(this.resultArr[checkIdx]) * this.liHeight + this.liHeight * 2 :
  381. -arr.indexOf(max) * this.liHeight + this.liHeight * 2;
  382. this.resultArr[checkIdx] = this.resultArr[checkIdx] > max ? max : this.resultArr[checkIdx];
  383. this.recent_time[_this.idxArr[checkIdx]] = _this.resultArr[checkIdx];
  384. } else {
  385. if (arr.indexOf(this.resultArr[checkIdx]) == -1) {
  386. targetLong = (this.maxHeight[checkIdx] > this.liHeight * (max - min)) ? -this.liHeight * (max - min) : -this.distance[checkIdx];
  387. } else {
  388. targetLong = -arr.indexOf(this.resultArr[checkIdx]) * this.liHeight + 2 * this.liHeight;
  389. }
  390. this.recent_time[realIdx] = -targetLong / this.liHeight + 1;
  391. this.resultArr[checkIdx] = arr[-targetLong / this.liHeight + 2];
  392. }
  393. $selector.style.transform = 'translate3d(0,' + targetLong + 'px, 0)';
  394. $selector.style.webkitTransform = 'translate3d(0,' + targetLong + 'px, 0)';
  395. $selector.style.transition = 'transform 0.15s ease-out';
  396. $selector.style.webkitTransition = '-webkit-transform 0.15s ease-out';
  397. this.maxHeight[checkIdx] = this.liHeight * (max - min);
  398. this.distance[checkIdx] = Math.abs(targetLong);
  399. },
  400. checkRange: function (checkIdx, sta) {
  401. var _this = this;
  402. if (checkIdx >= _this.ulCount - 1) return;
  403. var status = null;
  404. if (sta) status = _this.checkTimeArr(_this.begin_time, _this.resultArr, checkIdx + 1);
  405. else status = _this.checkTimeArr(_this.end_time, _this.resultArr, checkIdx + 1);
  406. if (!status) {
  407. var min = 0;
  408. var max = 0;
  409. var str = '';
  410. var dir = 0; //0在顶部,1在底部,-1在中间
  411. var realIdx = _this.idxArr[checkIdx];
  412. switch (realIdx) {
  413. case 0:
  414. min = 1;
  415. max = 12;
  416. str = '月';
  417. break;
  418. case 1:
  419. min = 1;
  420. max = new Date(_this.recent_time[0], _this.recent_time[1], 0).getDate();
  421. str = '日';
  422. break;
  423. case 2:
  424. min = 0;
  425. max = 23;
  426. str = '时';
  427. break;
  428. case 3:
  429. min = 0;
  430. max = 59;
  431. str = '分';
  432. break;
  433. }
  434. loop(0, checkIdx + 1, function (p) {
  435. if (_this.beginTime[p] != _this.resultArr[p]) {
  436. dir = 1;
  437. loop(0, checkIdx + 1, function (q) {
  438. if (_this.endTime[q] != _this.resultArr[q]) dir = -1;
  439. });
  440. }
  441. });
  442. if (dir == 0) {
  443. min = _this.beginTime[checkIdx + 1] >= min ? _this.beginTime[checkIdx + 1] : 0;
  444. } else if (dir == 1) {
  445. max = _this.endTime[checkIdx + 1] <= max ? _this.endTime[checkIdx + 1] : 0;
  446. }
  447. _this.initRangeArr(min, max, str, checkIdx + 1, dir);
  448. }
  449. _this.checkRange(checkIdx + 1, sta);
  450. },
  451. initPosition: function (dis, max, idx) {
  452. dis = dis < 0 ? 0 : dis;
  453. dis = dis > max ? max : dis;
  454. var sub = dis % this.liHeight;
  455. if (sub < this.liHeight / 2) {
  456. this.distance[idx] = dis - sub;
  457. } else {
  458. this.distance[idx] = dis + (this.liHeight - sub);
  459. }
  460. return this;
  461. },
  462. initSpeed: function (arr, dir, max, idx) {
  463. var variance = 0;
  464. var sum = 0;
  465. for ( var i in arr ) {
  466. sum += arr[i] - 0;
  467. }
  468. for ( var j in arr ) {
  469. variance += (arr[j] - (sum / arr.length)) * (arr[j] - (sum / arr.length));
  470. }
  471. var rate = 0;
  472. if ((variance / arr.length).toFixed(2) > .1) {
  473. rate = max > this.liHeight * 15 ? dir * 2 : 0;
  474. this.initPosition(this.distance[idx] + rate, max, idx);
  475. this.move.speed[0] = .2;
  476. } else {
  477. this.initPosition(this.distance[idx], max, idx);
  478. this.move.speed[0] = this.move.speed[0] > 0.2 ? .2 : this.move.speed[0];
  479. }
  480. return this;
  481. },
  482. touch: function (event, that, $selector, array, idx) {
  483. event = event || window.event;
  484. event.preventDefault();
  485. switch (event.type) {
  486. case "touchstart":
  487. that.move.speed = [];
  488. that.start.Y = event.touches[0].clientY;
  489. that.start.time = Date.now();
  490. break;
  491. case "touchend":
  492. that.end.Y = event.changedTouches[0].clientY;
  493. var tempDis = that.distance[idx] + (that.start.Y - that.end.Y);
  494. that.distance[idx] = tempDis < 0 ? 0 : (tempDis < that.maxHeight[idx] ? tempDis : that.maxHeight[idx]);
  495. that.initSpeed(that.move.speed, that.start.Y - that.end.Y, that.maxHeight[idx], idx);
  496. var tempRes = that.end.index = that.distance[idx] / that.liHeight + 2;
  497. $selector.style.transform = 'translate3d(0,-' + that.distance[idx] + 'px, 0)';
  498. $selector.style.webkitTransform = 'translate3d(0,-' + that.distance[idx] + 'px, 0)';
  499. $selector.style.transition = 'transform ' + that.move.speed[0] + 's ease-out';
  500. $selector.style.webkitTransition = '-webkit-transform ' + that.move.speed[0] + 's ease-out';
  501. that.recent_time[that.idxArr[idx]] = that.resultArr[idx] = that['array' + that.idxArr[idx]][tempRes];
  502. that.checkRange(0, (that.start.Y - that.end.Y) > 0);
  503. break;
  504. case "touchmove":
  505. event.preventDefault();
  506. that.move.Y = event.touches[0].clientY;
  507. var offset = that.start.Y - that.move.Y;
  508. if (that.distance[idx] == 0 && offset < 0) {
  509. $selector.style.transform = 'translate3d(0,' + 1.5 * that.liHeight + 'px, 0)';
  510. $selector.style.webkitTransform = 'translate3d(0,' + 1.5 * that.liHeight + 'px, 0)';
  511. $selector.style.transition = 'transform 0.3s ease-out';
  512. $selector.style.webkitTransition = '-webkit-transform 0.3s ease-out';
  513. } else {
  514. $selector.style.transform = 'translate3d(0,-' + (offset + that.distance[idx]) + 'px, 0)';
  515. $selector.style.webkitTransform = 'translate3d(0,-' + (offset + that.distance[idx]) + 'px, 0)';
  516. }
  517. if (this.distance[idx] <= -that.maxHeight[idx]) {
  518. $selector.style.transform = 'translate3d(0, -' + that.liHeight + 'px, 0)';
  519. $selector.style.webkitTransform = 'translate3d(0, -' + that.liHeight + 'px, 0)';
  520. $selector.style.transition = 'transform 0.3s ease-out';
  521. $selector.style.webkitTransition = '-webkit-transform 0.3s ease-out';
  522. }
  523. if (Math.abs(offset).toFixed(0) % 5 === 0) {
  524. var time = Date.now();
  525. that.move.speed.push((Math.abs(offset) / (time - that.start.time)).toFixed(2));
  526. }
  527. break;
  528. }
  529. }
  530. };
  531. if (typeof exports == "object") {
  532. module.exports = DateSelector;
  533. } else if (typeof define == "function" && define.amd) {
  534. define([], function () {
  535. return DateSelector;
  536. })
  537. } else {
  538. win.DateSelector = DateSelector;
  539. }
  540. })(window, document);