Calendar.js 43 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426
  1. o2.widget = o2.widget || {};
  2. o2.widget.Calendar = o2.Calendar = new Class({
  3. Implements: [Options, Events],
  4. Extends: o2.widget.Common,
  5. options: {
  6. "style": "default",
  7. "path": o2.session.path+"/widget/$Calendar/" ,
  8. "defaultView": "day", //day, month, year
  9. "baseDate": new Date(),
  10. "secondEnable" : false,
  11. "isTime": false,
  12. "isMulti": false,
  13. "before": null,
  14. "after": null,
  15. "timeOnly": false,
  16. "defaultDate": new Date(),
  17. "beforeCurrent": true,
  18. "range": false,
  19. "rangeNodes": [],
  20. "rangeRule": "asc", //asc + , des -
  21. "target": null
  22. },
  23. initialize: function(node, options){
  24. Locale.use("zh-CHS");
  25. this.setOptions(options);
  26. this.options.defaultTime = ""+this.options.baseDate.getHours()+":"+this.options.baseDate.getMinutes()+":"+this.options.baseDate.getSeconds();
  27. this.path = o2.session.path+"/widget/$Calendar/";
  28. this.cssPath = o2.session.path+"/widget/$Calendar/"+this.options.style+"/css.wcss";
  29. this._loadCss();
  30. // this.options.containerPath = this.path+this.style+"/container.html";
  31. // this.options.dayPath = this.path+this.style+"/day.html";
  32. // this.options.monthPath = this.path+this.style+"/month.html";
  33. // this.options.yearPath = this.path+this.style+"/year.html";
  34. // this.options.timePath = this.path+this.style+"/time.html";
  35. if (!this.options.format){
  36. if (this.options.isTime){
  37. //this.options.format = Locale.get("Date").shortDate + " " + Locale.get("Date").shortTime;
  38. if(this.options.timeOnly){
  39. this.options.format="%H:%M";
  40. }
  41. else{
  42. this.options.format = Locale.get("Date").shortDate + " " + "%H:%M";
  43. }
  44. }else{
  45. this.options.format = Locale.get("Date").shortDate;
  46. }
  47. }
  48. this.options.containerPath = this.options.path+this.options.style+"/container.html";
  49. this.options.dayPath = this.options.path+this.options.style+"/day.html";
  50. this.options.monthPath = this.options.path+this.options.style+"/month.html";
  51. this.options.yearPath = this.options.path+this.options.style+"/year.html";
  52. this.options.timePath = this.options.path+this.options.style+"/time.html";
  53. this.today = new Date();
  54. this.currentView = this.options.defaultView;
  55. this.node = $(node);
  56. this.visible = false;
  57. this.container = this.createContainer();
  58. this.container.inject((this.options.target) || $(document.body));
  59. this.contentTable = this.createContentTable();
  60. this.contentTable.inject(this.contentDateNode);
  61. this.addEvents();
  62. this.container.set({
  63. styles: {
  64. "display": "none",
  65. "opacity": 1
  66. }
  67. });
  68. this.fireEvent("init");
  69. //this.move = true;
  70. //this.containerDrag = new Drag.Move(this.container);
  71. if( layout.mobile ){
  72. this.maskNode = new Element("div.maskNode",{
  73. styles : {
  74. "width": "100%",
  75. "height": "100%",
  76. "opacity": 0.6,
  77. "position": "absolute",
  78. "background-color": "#CCC",
  79. "top": "0px",
  80. "left": "0px",
  81. "z-index" : 150,
  82. "-webkit-user-select": "none",
  83. "-moz-user-select": "none",
  84. "user-select" : "none"
  85. },
  86. events : {
  87. "touchmove" : function(ev){
  88. ev.stopPropagation();
  89. ev.preventDefault();
  90. }
  91. }
  92. }).inject((this.options.target) || $(document.body));
  93. this.container.addEvents({
  94. "touchmove" : function(ev){
  95. ev.stopPropagation();
  96. ev.preventDefault();
  97. },
  98. "touchend" : function(ev){
  99. ev.stopPropagation();
  100. //ev.preventDefault();
  101. }
  102. })
  103. }
  104. },
  105. addEvents: function(){
  106. this.node.addEvent("focus", function(){
  107. this.show();
  108. }.bind(this));
  109. this.node.addEvent("click", function(){
  110. this.show();
  111. }.bind(this));
  112. this.prevNode.addEvent("click", function(){
  113. this.getPrev();
  114. }.bind(this));
  115. this.nextNode.addEvent("click", function(){
  116. this.getNext();
  117. }.bind(this));
  118. this.currentTextNode.addEvent("click", function(){
  119. this.changeView();
  120. }.bind(this));
  121. if( !layout.mobile ){
  122. this.titleNode.addEvent("mousedown", function(){
  123. this.move();
  124. }.bind(this));
  125. this.titleNode.addEvent("mouseup", function(){
  126. this.unmove();
  127. }.bind(this));
  128. }
  129. document.addEvent('mousedown', this.outsideClick.bind(this));
  130. },
  131. move: function(){
  132. this.containerDrag = new Drag.Move(this.container, {
  133. "onDrag": function(e){
  134. if (this.iframe){
  135. var p = this.container.getPosition();
  136. this.iframe.setStyles({
  137. "top": ""+p.y+"px",
  138. "left": ""+p.x+"px"
  139. });
  140. }
  141. }.bind(this)
  142. });
  143. },
  144. unmove: function(){
  145. this.container.removeEvents("mousedown");
  146. this.titleNode.addEvent("mousedown", function(){
  147. this.move();
  148. }.bind(this));
  149. },
  150. changeView: function(){
  151. var view = "day";
  152. switch (this.currentView) {
  153. case "day" :
  154. this.changeViewToMonth();
  155. break;
  156. case "month" :
  157. this.changeViewToYear();
  158. break;
  159. case "year" :
  160. this.changeViewToDay();
  161. break;
  162. case "time" :
  163. this.changeViewToDay();
  164. //this.changeViewToDay();
  165. break;
  166. default :
  167. //nothing;
  168. }
  169. },
  170. changeViewToMonth: function(year){
  171. this.currentView = "month";
  172. if (!this.contentMonthTable){
  173. this.contentMonthTable = this.createContentTable();
  174. this.contentMonthTable.inject(this.contentDateNode);
  175. }
  176. if (this.contentTable) this.contentTable.setStyle("display", "none");
  177. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  178. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  179. // if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "block");
  180. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "table");
  181. var year = (year!=undefined) ? year : this.currentTextNode.retrieve("year");
  182. var month = this.currentTextNode.retrieve("month");
  183. this.showMonth(year, month);
  184. this.fireEvent("changeViewToMonth");
  185. },
  186. changeViewToYear: function(year){
  187. this.currentView = "year";
  188. if (!this.contentYearTable){
  189. this.contentYearTable = this.createContentTable();
  190. this.contentYearTable.inject(this.contentDateNode);
  191. }
  192. if (this.contentTable) this.contentTable.setStyle("display", "none");
  193. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  194. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  195. // if (this.contentYearTable) this.contentYearTable.setStyle("display", "block");
  196. if (this.contentYearTable) this.contentYearTable.setStyle("display", "table");
  197. this.showYear(year);
  198. this.fireEvent("changeViewToYear");
  199. },
  200. changeViewToDay: function(year, month){
  201. this.currentView = "day";
  202. if (!this.contentTable){
  203. this.contentTable = this.createContentTable();
  204. this.contentTable.inject(this.contentDateNode);
  205. }
  206. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  207. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  208. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "none");
  209. // if (this.contentTable) this.contentTable.setStyle("display", "block");
  210. if (this.contentTable) this.contentTable.setStyle("display", "table");
  211. this.showDay(year, month);
  212. this.fireEvent("changeViewToDay");
  213. },
  214. getNext: function(){
  215. switch (this.currentView) {
  216. case "time" :
  217. this.getNextDate();
  218. break;
  219. case "day" :
  220. this.getNextDay();
  221. break;
  222. case "month" :
  223. this.getNextMonth();
  224. break;
  225. case "year" :
  226. this.getNextYear();
  227. break;
  228. default :
  229. //nothing
  230. }
  231. },
  232. getPrev: function(){
  233. switch (this.currentView) {
  234. case "time" :
  235. this.getPrevDate();
  236. break;
  237. case "day" :
  238. this.getPrevDay();
  239. break;
  240. case "month" :
  241. this.getPrevMonth();
  242. break;
  243. case "year" :
  244. this.getPrevYear();
  245. break;
  246. default :
  247. //nothing
  248. }
  249. },
  250. getNextDate: function(){
  251. var date = this.currentTextNode.retrieve("date");
  252. // var year = this.currentTextNode.retrieve("year");
  253. // var month = this.currentTextNode.retrieve("month");
  254. // month--;
  255. // var day = this.currentTextNode.retrieve("day");
  256. // var date = new Date(year, month, day);
  257. date.increment("day", 1);
  258. this._setTimeTitle(null, date);
  259. },
  260. getPrevDate: function(){
  261. var date = this.currentTextNode.retrieve("date");
  262. date.increment("day", -1);
  263. this._setTimeTitle(null, date);
  264. },
  265. getNextDay: function(){
  266. var year = this.currentTextNode.retrieve("year");
  267. var month = this.currentTextNode.retrieve("month");
  268. month--;
  269. var date = new Date(year, month, 1);
  270. date.increment("month", 1);
  271. var thisYear = date.getFullYear();
  272. var thisMonth = date.getMonth();
  273. this._setDayTitle(null, thisYear, thisMonth);
  274. this._setDayDate(null,thisYear, thisMonth);
  275. this.fireEvent("changeViewToDay");
  276. },
  277. getPrevDay: function(){
  278. var year = this.currentTextNode.retrieve("year");
  279. var month = this.currentTextNode.retrieve("month");
  280. month--;
  281. var date = new Date(year, month, 1);
  282. date.increment("month", -1)
  283. var thisYear = date.getFullYear();
  284. var thisMonth = date.getMonth();
  285. this._setDayTitle(null, thisYear, thisMonth);
  286. this._setDayDate(null,thisYear, thisMonth);
  287. this.fireEvent("changeViewToDay");
  288. },
  289. getNextMonth: function(){
  290. var year = this.currentTextNode.retrieve("year");
  291. var date = new Date(year, 1, 1);
  292. date.increment("year", 1)
  293. var thisYear = date.getFullYear();
  294. this.showMonth(thisYear);
  295. this.fireEvent("changeViewToMonth");
  296. },
  297. getPrevMonth: function(){
  298. var year = this.currentTextNode.retrieve("year");
  299. var date = new Date(year, 1, 1);
  300. date.increment("year", -1)
  301. var thisYear = date.getFullYear();
  302. this.showMonth(thisYear);
  303. this.fireEvent("changeViewToMonth");
  304. },
  305. getNextYear: function(){
  306. var year = this.currentTextNode.retrieve("year");
  307. var date = new Date(year, 1, 1);
  308. date.increment("year", this.yearLength)
  309. var thisYear = date.getFullYear();
  310. this.showYear(thisYear);
  311. this.fireEvent("changeViewToYear");
  312. },
  313. getPrevYear: function(){
  314. var year = this.currentTextNode.retrieve("year");
  315. var date = new Date(year, 1, 1);
  316. date.increment("year", 0-this.yearLength)
  317. var thisYear = date.getFullYear();
  318. this.showYear(thisYear);
  319. this.fireEvent("changeViewToYear");
  320. },
  321. outsideClick: function(e) {
  322. if(this.visible) {
  323. var elementCoords = this.container.getCoordinates();
  324. var targetCoords = this.node.getCoordinates();
  325. if(((e.page.x < elementCoords.left || e.page.x > (elementCoords.left + elementCoords.width)) ||
  326. (e.page.y < elementCoords.top || e.page.y > (elementCoords.top + elementCoords.height))) &&
  327. ((e.page.x < targetCoords.left || e.page.x > (targetCoords.left + targetCoords.width)) ||
  328. (e.page.y < targetCoords.top || e.page.y > (targetCoords.top + targetCoords.height))) ) this.hide();
  329. }
  330. },
  331. hide: function(){
  332. if (this.visible){
  333. // if (!this.morph){
  334. // this.morph = new Fx.Morph(this.container, {"duration": 200});
  335. // }
  336. this.visible = false;
  337. // this.changeViewToDay();
  338. // this.morph.start({"opacity": 0}).chain(function(){
  339. this.container.setStyle("display", "none");
  340. if (this.iframe) this.iframe.destroy();
  341. if (layout.desktop.offices){
  342. Object.each(layout.desktop.offices, function(office){
  343. office.show();
  344. });
  345. }
  346. if( this.maskNode ){
  347. this.maskNode.hide();
  348. }
  349. // }.bind(this));
  350. this.fireEvent("hide");
  351. }
  352. },
  353. show: function(){
  354. debugger;
  355. if (!this.visible){
  356. var dStr = this.node.get("value");
  357. if (dStr && Date.isValid(dStr)){
  358. this.options.baseDate = Date.parse(dStr.substr(0,10));
  359. }
  360. if(this.options.timeOnly){
  361. this.currentView = "time";
  362. }
  363. else{
  364. this.currentView = this.options.defaultView;
  365. }
  366. switch (this.currentView) {
  367. case "day" :
  368. this.changeViewToDay();
  369. break;
  370. case "month" :
  371. this.showMonth();
  372. break;
  373. case "year" :
  374. this.showYear();
  375. break;
  376. case "time" :
  377. //this.showTime(this.options.baseDate);
  378. this.changeViewToTime(this.options.defaultDate);
  379. //this.changeViewToTime(this.options.baseDate);
  380. break;
  381. default :
  382. this.showDay();
  383. }
  384. // if (!this.morph){
  385. // this.morph = new Fx.Morph(this.container, {"duration": 200});
  386. // }
  387. this.container.setStyle("display", "block");
  388. if (this.container.position ){
  389. this.container.position({
  390. relativeTo: this.node,
  391. position: 'bottomLeft',
  392. edge: 'upperLeft'
  393. });
  394. // var offsetPNode = this.node.getOffsetParent();
  395. var cp = this.container.getPosition(this.options.target || null);
  396. var cSize = this.container.getSize();
  397. //var fp = (this.options.target) ? this.options.target.getPosition() : $(document.body).getPosition()
  398. var fsize = (this.options.target) ? this.options.target.getSize() : $(document.body).getSize();
  399. //if (cp.y+cSize.y>fsize.y+fp.y){
  400. if (cp.y+cSize.y>fsize.y){
  401. this.container.position({
  402. relativeTo: this.node,
  403. position: 'upperLeft',
  404. edge: 'bottomLeft'
  405. });
  406. }
  407. }else{
  408. var p = this.node.getPosition(this.options.target || null);
  409. var size = this.node.getSize();
  410. var containerSize = this.container.getSize();
  411. var bodySize = $(document.body).getSize();
  412. var left = p.x;
  413. if ((left + containerSize.x) > bodySize.x){
  414. left = bodySize.x - containerSize.x;
  415. }
  416. this.container.setStyle("top", p.y+size.y+2);
  417. this.container.setStyle("left", left);
  418. }
  419. // var p = this.container.getPosition();
  420. // var s = this.container.getSize();
  421. // var zidx = this.container.getStyle("z-index");
  422. // this.iframe = new Element("iframe", {"styles":{
  423. // "border": "0px",
  424. // "margin": "0px",
  425. // "padding": "0px",
  426. // "opacity": 0,
  427. // "z-index": (zidx) ? zidx-1 : 0,
  428. // "top": ""+p.y+"px",
  429. // "left": ""+p.x+"px",
  430. // "width": ""+s.x+"px",
  431. // "height": ""+s.y+"px",
  432. // "position": "absolute"
  433. // }}).inject(this.container, "before");
  434. if (layout.desktop.offices){
  435. Object.each(layout.desktop.offices, function(office){
  436. if (this.container.isOverlap(office.officeNode)){
  437. office.hide();
  438. }
  439. }.bind(this));
  440. }
  441. if( this.maskNode ){
  442. this.maskNode.show();
  443. }
  444. // this.morph.start({"opacity": 1}).chain(function(){
  445. this.visible = true;
  446. // }.bind(this));
  447. this.fireEvent("show");
  448. }
  449. },
  450. showYear: function(year){
  451. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  452. var date = new Date(thisYear, 1, 1);
  453. date.increment("year", -2);
  454. var beginYear = date.getFullYear();
  455. date.increment("year", this.yearLength-1);
  456. var endYear = date.getFullYear();
  457. this._setYearTitle(null, beginYear, endYear, thisYear);
  458. this._setYearDate(null, beginYear, endYear, thisYear);
  459. // if (!this.move){
  460. // this.move = true;
  461. // this.containerDrag = new Drag.Move(this.container);
  462. // }
  463. },
  464. _setYearTitle:function(node, beginYear, endYear, thisYear){
  465. var thisNode = node || this.currentTextNode;
  466. thisNode.set("text", beginYear+"-"+endYear);
  467. thisNode.store("year", thisYear);
  468. },
  469. _setYearDate: function(table, beginYear, endYear, year){
  470. var yearTable = table || this.contentYearTable;
  471. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  472. var tbody = yearTable.getElement("tbody");
  473. var tds = tbody.getElements("td");
  474. tds.each(function(item, idx){
  475. var y = beginYear+idx;
  476. item.set("text", y);
  477. item.store("year", y);
  478. if (y==this.options.baseDate.getFullYear()){
  479. item.addClass("current_"+this.options.style);
  480. }else{
  481. item.removeClass("current_"+this.options.style);
  482. }
  483. }.bind(this));
  484. },
  485. showMonth: function(year, month){
  486. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  487. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  488. this._setMonthTitle(null, thisYear, thisMonth);
  489. this._setMonthDate(null, thisYear, thisMonth);
  490. // if (!this.move){
  491. // this.move = true;
  492. // this.containerDrag = new Drag.Move(this.container);
  493. // }
  494. },
  495. _setMonthTitle:function(node, year){
  496. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  497. var thisNode = node || this.currentTextNode;
  498. thisNode.set("text", thisYear);
  499. thisNode.store("year", thisYear);
  500. },
  501. _setMonthDate: function(table, year, month){
  502. //var months = Locale.get("Date").months;
  503. var months = o2.LP.widget.months;
  504. var monthTable = table || this.contentMonthTable;
  505. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  506. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  507. var tbody = monthTable.getElement("tbody");
  508. var tds = tbody.getElements("td");
  509. tds.each(function(item, idx){
  510. item.set("text", months[idx].substr(0,2));
  511. item.store("year", thisYear);
  512. item.store("month", idx);
  513. if ((thisYear==this.options.baseDate.getFullYear()) && (idx==this.options.baseDate.getMonth())){
  514. item.addClass("current_"+this.options.style);
  515. }else{
  516. item.removeClass("current_"+this.options.style);
  517. }
  518. }.bind(this));
  519. },
  520. showDay: function(year, month){
  521. this._setDayTitle(null, year, month);
  522. this._setDayWeekTitleTh();
  523. this._setDayDate(null, year, month);
  524. // if (!this.move){
  525. // this.move = true;
  526. // this.containerDrag = new Drag.Move(this.container);
  527. // }
  528. },
  529. _setDayTitle: function(node, year, month){
  530. var thisYear = (year!=undefined) ? year : this.options.baseDate.getFullYear();
  531. var thisMonth = (month!=undefined) ? month : this.options.baseDate.getMonth();
  532. thisMonth++;
  533. var text = thisYear+"年"+thisMonth+"月";
  534. var thisNode = node || this.currentTextNode;
  535. thisNode.set("text", text);
  536. thisNode.store("year", thisYear);
  537. thisNode.store("month", thisMonth);
  538. },
  539. _setDayDate: function(table, year, month){
  540. var dayTable = table || this.contentTable;
  541. var baseDate = this.options.baseDate;
  542. if ((year!=undefined) && (month!=undefined)){
  543. baseDate = new Date();
  544. baseDate.setDate(1);
  545. baseDate.setFullYear(year);
  546. baseDate.setMonth(month);
  547. }
  548. var tbody = dayTable.getElement("tbody");
  549. var tds = tbody.getElements("td");
  550. var firstDate = baseDate.clone();
  551. firstDate.setDate(1);
  552. var day = firstDate.getDay();
  553. var tmpDate = firstDate.clone();
  554. for (var i=day-1; i>=0; i--){
  555. tmpDate.increment("day", -1);
  556. tds[i].set("text", tmpDate.getDate());
  557. tds[i].addClass("gray_"+this.options.style);
  558. tds[i].setStyles(this.css["gray_"+this.options.style]);
  559. tds[i].store("dateValue", tmpDate.toString())
  560. }
  561. for (var i=day; i<tds.length; i++){
  562. tds[i].set("text", firstDate.getDate());
  563. if (firstDate.toString() == this.options.baseDate.toString()){
  564. tds[i].addClass("current_"+this.options.style);
  565. tds[i].setStyles(this.css["current_"+this.options.style]);
  566. tds[i].removeClass("past_"+this.options.style);
  567. tds[i].removeClass("gray_"+this.options.style);
  568. tds[i].setStyle("border", "1px solid #FFF");
  569. }else if (firstDate.getMonth()!=baseDate.getMonth()){
  570. tds[i].addClass("gray_"+this.options.style);
  571. tds[i].setStyles(this.css["gray_"+this.options.style]);
  572. tds[i].removeClass("current_"+this.options.style);
  573. tds[i].removeClass("past_"+this.options.style);
  574. tds[i].setStyle("border", "1px solid #FFF");
  575. }else{
  576. tds[i].setStyles(this.css["normal_"+this.options.style]);
  577. tds[i].removeClass("current_"+this.options.style);
  578. tds[i].removeClass("gray_"+this.options.style);
  579. tds[i].removeClass("past_"+this.options.style);
  580. tds[i].setStyle("border", "1px solid #FFF");
  581. }
  582. var tmp = firstDate.clone();
  583. if (tmp.clearTime().toString() == this.today.clearTime().toString()){
  584. tds[i].addClass("today_"+this.options.style);
  585. tds[i].removeClass("past_"+this.options.style);
  586. tds[i].setStyles(this.css["today_"+this.options.style]);
  587. tds[i].setStyle("border", "0px solid #AAA");
  588. }
  589. if (tmp.diff(this.today)>0){
  590. if (this.css["past_"+this.options.style]) tds[i].setStyles(this.css["past_"+this.options.style]);
  591. tds[i].addClass("past_"+this.options.style);
  592. }
  593. tds[i].store("dateValue", firstDate.toString())
  594. firstDate.increment("day", 1);
  595. }
  596. },
  597. changeViewToTime: function(date){
  598. this.currentView = "time";
  599. if (!this.contentTimeTable){
  600. this.contentTimeTable = this.createContentTable();
  601. this.contentTimeTable.inject(this.contentDateNode);
  602. }
  603. if (this.contentTable) this.contentTable.setStyle("display", "none");
  604. if (this.contentYearTable) this.contentYearTable.setStyle("display", "none");
  605. if (this.contentMonthTable) this.contentMonthTable.setStyle("display", "none");
  606. if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "block");
  607. // if (this.contentTimeTable) this.contentTimeTable.setStyle("display", "table");
  608. var thisDate = date || this.options.baseDate;
  609. this.showTime(thisDate);
  610. },
  611. showTime: function(date){
  612. // var thisHour = this.options.baseDate.getHours();
  613. // var thisMinutes = this.options.baseDate.getMinutes();
  614. // var thisSeconds = this.options.baseDate.getSeconds();
  615. var times = this.options.defaultTime.split(":");
  616. var thisHour = (times[0]) ? times[0] : "0";
  617. var thisMinutes = (times[1]) ? times[1] : "0";
  618. var thisSeconds = (times[2]) ? times[2] : "0";
  619. this._setTimeTitle(null, date);
  620. if( this.options.style.indexOf("mobile") > -1 ){
  621. this._setTimeDate_mobile(null, thisHour, thisMinutes, thisSeconds);
  622. }else{
  623. this._setTimeDate(null, thisHour, thisMinutes, thisSeconds);
  624. }
  625. // if (this.move){
  626. // this.move = false;
  627. // this.container.removeEvents("mousedown");
  628. // }
  629. },
  630. _setTimeTitle: function(node, date){
  631. var thisDate = date || this.options.baseDate;
  632. var thisNode = node || this.currentTextNode;
  633. var y = thisDate.getFullYear();
  634. var m = thisDate.getMonth()+1;
  635. var d = thisDate.getDate();
  636. var text = "" + y + "年" + m + "月" + d + "日";
  637. if (this.options.timeOnly){
  638. thisNode.hide();
  639. if (this.prevNode) this.prevNode.hide();
  640. if (this.nextNode) this.nextNode.hide();
  641. }
  642. thisNode.set("text", text);
  643. thisNode.store("date", date);
  644. },
  645. _setTimeDate_mobile: function(node, h, m, s){
  646. var _self = this;
  647. this.itmeHNode = this.contentTimeTable.getElement(".MWF_calendar_time_h");
  648. this.itmeMNode = this.contentTimeTable.getElement(".MWF_calendar_time_m");
  649. this.itmeSNode = this.contentTimeTable.getElement(".MWF_calendar_time_s");
  650. this.showActionNode = this.contentTimeTable.getElement(".MWF_calendar_action_show");
  651. var calendar = this;
  652. if( !this.hMobileSelect ){
  653. for( var i=0; i<24; i++ ){
  654. new Element("div",{
  655. "text" : this.addZero(i, 2 ),
  656. "styles" : this.css.calendarTimeSelectItem_mobile
  657. }).inject( this.itmeHNode );
  658. }
  659. this.selectedHour = this.addZero(h, 2 );
  660. this.hMobileSelect = new o2.Calendar.MobileSelect( this.itmeHNode.getParent(), {
  661. "lineHeight" : 40,
  662. "itemSize" : 24,
  663. "itemIndex" : parseInt(h),
  664. "onChange": function(value){
  665. this.selectedHour = this.addZero(value, 2 );
  666. //this.showHNode.set("text", this.addZero(i, 2 ));
  667. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  668. }.bind(this)
  669. });
  670. this.hMobileSelect.load();
  671. }
  672. if( !this.mMobileSelect ) {
  673. for (var i = 0; i < 60; i++) {
  674. new Element("div", {
  675. "text": this.addZero(i, 2),
  676. "styles": this.css.calendarTimeSelectItem_mobile
  677. }).inject(this.itmeMNode);
  678. }
  679. this.selectedMinute = this.addZero(m, 2);
  680. this.mMobileSelect = new o2.Calendar.MobileSelect(this.itmeMNode.getParent(), {
  681. "lineHeight": 40,
  682. "itemSize": 60,
  683. "itemIndex": parseInt(m),
  684. "onChange": function (value) {
  685. this.selectedMinute = this.addZero(value, 2);
  686. //this.showHNode.set("text", this.addZero(i, 2 ));
  687. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  688. }.bind(this)
  689. });
  690. this.mMobileSelect.load();
  691. }
  692. if(this.options.secondEnable ){
  693. if(!this.sMobileSelect){
  694. for( var i=0; i<60; i++ ){
  695. new Element("div",{
  696. "text" : this.addZero(i, 2 ),
  697. "styles" : this.css.calendarTimeSelectItem_mobile
  698. }).inject( this.itmeSNode );
  699. }
  700. this.selectedSecond = this.addZero(s, 2 );
  701. this.sMobileSelect = new o2.Calendar.MobileSelect( this.itmeSNode.getParent(), {
  702. "lineHeight" : 40,
  703. "itemSize" : 60,
  704. "itemIndex" : parseInt(s),
  705. "onChange": function(value){
  706. this.selectedSecond = this.addZero(value, 2 );
  707. //this.showHNode.set("text", this.addZero(i, 2 ));
  708. //this.itmeHNode.getFirst().set("text", this.addZero(i, 2 ));
  709. }.bind(this)
  710. });
  711. this.sMobileSelect.load();
  712. }
  713. }else{
  714. this.itmeSNode.hide();
  715. }
  716. if( this.options.secondEnable ){
  717. this.contentTimeTable.getElements(".calendarTimeWheel_mobile").setStyle("width","33.3%");
  718. }else{
  719. this.contentTimeTable.getElements(".calendarTimeWheel_mobile").setStyle("width","50%");
  720. }
  721. if( this.options.secondEnable && this.showSNode ){
  722. this.showSNode.set("text", this.addZero( s.toInt(), 2) );
  723. }
  724. if (!this.okButton){
  725. this.okButton = new Element("button", {"text": "确定"}).inject(this.showActionNode);
  726. this.okButton.addEvent("click", function(){
  727. this._selectTime();
  728. this.hide();
  729. }.bind(this));
  730. this.okButton.setStyles(this.css.calendarActionShowButton_mobile_ok);
  731. }
  732. if (!this.clearButton){
  733. this.clearButton = new Element("button", {"text": "清除"}).inject(this.showActionNode);
  734. this.clearButton.addEvent("click", function(){
  735. this.node.set("value", "");
  736. this.fireEvent("clear");
  737. this.hide();
  738. }.bind(this));
  739. this.clearButton.setStyles(this.css.calendarActionShowButton_mobile_cancel);
  740. }
  741. },
  742. _setTimeDate: function(node, h, m, s){
  743. if( !this.options.secondEnable ){
  744. var div = this.contentTimeTable.getElement(".MWF_calendar_time_s");
  745. if( div )div.hide();
  746. div = this.contentTimeTable.getElement(".MWF_calendar_time_show_s");
  747. if( div )div.hide();
  748. }
  749. this.itmeHNode = this.contentTimeTable.getElement(".MWF_calendar_time_h_slider");
  750. this.itmeMNode = this.contentTimeTable.getElement(".MWF_calendar_time_m_slider");
  751. this.itmeSNode = this.contentTimeTable.getElement(".MWF_calendar_time_s_slider");
  752. this.timeShowNode = this.contentTimeTable.getElement(".MWF_calendar_time_show");
  753. this.timeShowNode.addEvent("click", function(){
  754. this._selectTime();
  755. }.bind(this));
  756. this.showHNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_h");
  757. this.showMNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_m");
  758. this.showSNode = this.contentTimeTable.getElement(".MWF_calendar_time_show_s");
  759. this.showActionNode = this.contentTimeTable.getElement(".MWF_calendar_action_show");
  760. var calendar = this;
  761. if ( COMMON.Browser.Platform.isMobile ){
  762. //this.itmeHNode.empty();
  763. //this.itmeHNode.removeClass("calendarTimeSlider");
  764. //this.itmeHNode.setStyles(this.css.calendarTimeSliderNoStyle);
  765. //var sel = new Element("select").inject(this.itmeHNode);
  766. //for (i=0; i<=23; i++){
  767. // var v = (i<10) ? "0"+i: i;
  768. // var o = new Element("option", {
  769. // "value": v,
  770. // "text": v
  771. // }).inject(sel);
  772. // if (h==i) o.set("selected", true);
  773. //}
  774. //sel.addEvent("change", function(){
  775. // calendar.showHNode.set("text", this.options[this.selectedIndex].get("value"));
  776. //});
  777. //this.showHNode.set("text", sel.options[sel.selectedIndex].get("value"));
  778. //
  779. //this.itmeMNode.empty();
  780. //this.itmeMNode.removeClass("calendarTimeSlider");
  781. //this.itmeMNode.setStyles(this.css.calendarTimeSliderNoStyle);
  782. //sel = new Element("select").inject(this.itmeMNode);
  783. //for (i=0; i<=59; i++){
  784. // var v = (i<10) ? "0"+i: i;
  785. // var o = new Element("option", {
  786. // "value": v,
  787. // "text": v
  788. // }).inject(sel);
  789. // if (m==i) o.set("selected", true);
  790. //}
  791. //sel.addEvent("change", function(){
  792. // calendar.showMNode.set("text", this.options[this.selectedIndex].get("value"));
  793. //});
  794. //this.showMNode.set("text", sel.options[sel.selectedIndex].get("value"));
  795. }else{
  796. var hSlider = new Slider(this.itmeHNode, this.itmeHNode.getFirst(), {
  797. range: [0, 23],
  798. initialStep: h.toInt(),
  799. onChange: function(value){
  800. var tmp = (value.toInt().toString());
  801. if (tmp.length<2){
  802. tmp = "0"+tmp
  803. }
  804. this.showHNode.set("text", tmp);
  805. this.itmeHNode.getFirst().set("text", tmp);
  806. }.bind(this)
  807. });
  808. var mSlider = new Slider(this.itmeMNode, this.itmeMNode.getFirst(), {
  809. range: [0, 59],
  810. initialStep: m.toInt(),
  811. onChange: function(value){
  812. var tmp = (value.toInt().toString());
  813. if (tmp.length<2){
  814. tmp = "0"+tmp
  815. }
  816. this.showMNode.set("text", tmp);
  817. this.itmeMNode.getFirst().set("text", tmp);
  818. }.bind(this)
  819. });
  820. if( this.options.secondEnable && this.itmeSNode ){
  821. var sSlider = new Slider(this.itmeSNode, this.itmeSNode.getFirst(), {
  822. range: [0, 59],
  823. initialStep: parseInt(s),
  824. onChange: function(value){
  825. var tmp = (value.toInt().toString());
  826. if (tmp.length<2){
  827. tmp = "0"+tmp
  828. }
  829. this.showSNode.set("text", tmp);
  830. this.itmeSNode.getFirst().set("text", tmp);
  831. }.bind(this)
  832. });
  833. }
  834. }
  835. this.showHNode.set("text", this.addZero( h.toInt(), 2) );
  836. this.showMNode.set("text", this.addZero( m.toInt(), 2));
  837. if( this.options.secondEnable && this.showSNode ){
  838. this.showSNode.set("text", this.addZero( s.toInt(), 2) );
  839. }
  840. if (!this.okButton){
  841. this.okButton = new Element("button", {"text": "确定"}).inject(this.showActionNode);
  842. this.okButton.addEvent("click", function(){
  843. this._selectTime();
  844. this.hide();
  845. }.bind(this));
  846. this.okButton.setStyles(this.css.calendarActionShowButton);
  847. }
  848. if (!this.clearButton){
  849. this.clearButton = new Element("button", {"text": "清除"}).inject(this.showActionNode);
  850. this.clearButton.addEvent("click", function(){
  851. this.node.set("value", "");
  852. this.fireEvent("clear");
  853. this.hide();
  854. }.bind(this));
  855. this.clearButton.setStyles(this.css.calendarActionShowButton);
  856. }
  857. },
  858. addZero : function( str, length ){
  859. var zero = "";
  860. str = str.toString();
  861. for( var i=0; i<length; i++ ){
  862. zero = zero + "0";
  863. }
  864. var s = zero + str;
  865. return s.substr(s.length - length, length );
  866. },
  867. _selectTime: function(){
  868. var date = this.currentTextNode.retrieve("date");
  869. var h = this.selectedHour || this.showHNode.get("text");
  870. var m = this.selectedMinute || this.showMNode.get("text");
  871. date.setHours(h);
  872. date.setMinutes(m);
  873. if( this.options.secondEnable && ( this.selectedSecond || this.showSNode) ){
  874. var s = this.selectedSecond || this.showSNode.get("text");
  875. date.setSeconds(s);
  876. }
  877. if (!this.options.beforeCurrent){
  878. var now = new Date();
  879. if (date.getTime()-now.getTime()<0){
  880. alert("选择的日期必须大于当前日期!");
  881. this.node.focus();
  882. return false;
  883. }
  884. }
  885. var dv = date.format(this.options.format);
  886. if (this.fireEvent("queryComplate", [dv, date])){
  887. var t = this.node.get("value");
  888. this.options.defaultTime = ""+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
  889. this.node.set("value", dv);
  890. // this.node.focus();
  891. this.hide();
  892. if (t!=dv) this.fireEvent("change", [dv, date, t]);
  893. this.fireEvent("complate", [dv, date]);
  894. }
  895. },
  896. _selectDate: function(dateStr){
  897. var date = new Date(dateStr);
  898. this.options.baseDate = date;
  899. var dv = date.format(this.options.format);
  900. if (this.options.isTime){
  901. this.changeViewToTime(date);
  902. }else{
  903. if (!this.options.beforeCurrent){
  904. var now = new Date();
  905. date.setHours(23,59,59);
  906. if (date.getTime()-now.getTime()<0){
  907. alert("选择的日期必须大于当前日期!");
  908. this.node.focus();
  909. return false;
  910. }
  911. }
  912. if (this.fireEvent("queryComplate", [dv, date])){
  913. var t = this.node.get("value");
  914. this.node.set("value", dv);
  915. this.hide();
  916. if (t!=dv) this.fireEvent("change", [dv, date, t]);
  917. this.fireEvent("complate", [dv, date, t]);
  918. }
  919. }
  920. },
  921. _setDayWeekTitleTh: function(table){
  922. var dayTable = table || this.contentTable;
  923. var thead = dayTable.getElement("thead");
  924. var cells = thead.getElements("th");
  925. if (this.css.calendarDaysContentTh) cells.setStyles(this.css.calendarDaysContentTh);
  926. //var days_abbr = Locale.get("Date").days_abbr;
  927. var days_abbr = o2.LP.widget.days_abbr;
  928. cells.each(function(item, idx){
  929. item.set("text", days_abbr[idx]);
  930. });
  931. return cells;
  932. },
  933. createContainer: function(){
  934. var div = null;
  935. var request = new Request.HTML({
  936. url: this.options.containerPath,
  937. method: "GET",
  938. async: false,
  939. onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
  940. div = responseTree[0];
  941. }
  942. });
  943. request.send();
  944. //this.containerNode = div.getElement(".MWF_calendar_container");
  945. this.titleNode = div.getElement(".MWF_calendar_title");
  946. this.prevNode = div.getElement(".MWF_calendar_prev");
  947. this.currentNode = div.getElement(".MWF_calendar_current");
  948. this.currentTextNode = div.getElement(".MWF_calendar_currentText");
  949. this.nextNode = div.getElement(".MWF_calendar_next");
  950. this.contentNode = div.getElement(".MWF_calendar_content");
  951. this.contentDateNode = div.getElement(".MWF_calendar_content_date");
  952. this.contentTimeNode = div.getElement(".MWF_calendar_content_time");
  953. this.bottomNode = div.getElement(".MWF_calendar_bottom");
  954. div.setStyles(this.css.container);
  955. this.titleNode.setStyles(this.css.dateTitle);
  956. this.prevNode.setStyles(this.css.datePrev);
  957. this.currentNode.setStyles(this.css.dateCurrent);
  958. this.currentTextNode.setStyles(this.css.dateCurrentText);
  959. this.nextNode.setStyles(this.css.dateNext);
  960. this.contentNode.setStyles(this.css.calendarContent);
  961. this.bottomNode.setStyles(this.css.dateBottom);
  962. return div;
  963. },
  964. createContentTable: function(){
  965. var table = null;
  966. var request = new Request.HTML({
  967. url: this.options[this.currentView+"Path"],
  968. method: "GET",
  969. async: false,
  970. onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
  971. table = responseTree[0];
  972. }
  973. });
  974. request.send();
  975. var tbody = table.getElement("tbody");
  976. if (tbody){
  977. var tds = tbody.getElements("td");
  978. var calendar = this;
  979. tds.addEvent("click", function(){
  980. switch (calendar.currentView) {
  981. case "day" :
  982. calendar._selectDate(this.retrieve("dateValue"), this);
  983. break;
  984. case "month" :
  985. calendar.changeViewToDay(this.retrieve("year"), this.retrieve("month"));
  986. break;
  987. case "year" :
  988. calendar.changeViewToMonth(this.retrieve("year"));
  989. break;
  990. case "time" :
  991. //nothing
  992. break;
  993. default :
  994. //nothing;
  995. }
  996. });
  997. switch (this.currentView) {
  998. case "day" :
  999. if (!table.display) table.display="";
  1000. if (!table.style.display) table.style.display="";
  1001. table.setStyles(this.css.calendarDaysContent);
  1002. tds.setStyles(this.css.calendarDaysContentTd);
  1003. break;
  1004. case "month" :
  1005. table.setStyles(this.css.calendarMonthsContent);
  1006. tds.setStyles(this.css.calendarMonthsContentTd);
  1007. break;
  1008. case "year" :
  1009. this.yearLength = tds.length;
  1010. table.setStyles(this.css.calendarYearsContent);
  1011. tds.setStyles(this.css.calendarYearsContentTd);
  1012. break;
  1013. case "time" :
  1014. if( this.options.style.indexOf("mobile") > -1 ){
  1015. var nodes = table.getElements(".calendarTimeContent_mobile");
  1016. if (nodes.length) nodes.setStyles(this.css.calendarTimeContent_mobile);
  1017. nodes = table.getElements(".calendarTimeFixWidthNode_mobile");
  1018. if (nodes.length) nodes.setStyles(this.css.calendarTimeFixWidthNode_mobile);
  1019. nodes = table.getElements(".calendarTimeWheels_mobile");
  1020. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheels_mobile);
  1021. nodes = table.getElements(".calendarTimeWheel_mobile");
  1022. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheel_mobile);
  1023. nodes = table.getElements(".calendarTimeSelectContainer_mobile");
  1024. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectContainer_mobile);
  1025. nodes = table.getElements(".calendarTimeSelectLine_mobile");
  1026. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectLine_mobile);
  1027. nodes = table.getElements(".calendarTimeShadowMask_mobile");
  1028. if (nodes.length) nodes.setStyles(this.css.calendarTimeShadowMask_mobile);
  1029. var node = table.getElement(".MWF_calendar_action_show");
  1030. if (node){
  1031. node.setStyles(this.css.calendarActionShow);
  1032. //var buttons = node.getElements("button");
  1033. //buttons.setStyles(this.css.calendarActionShowButton);
  1034. }
  1035. }else{
  1036. var nodes = table.getElements(".calendarTimeArea");
  1037. if (nodes.length) nodes.setStyles(this.css.calendarTimeArea);
  1038. nodes = table.getElements(".calendarTimeSlider");
  1039. if (nodes.length) nodes.setStyles(this.css.calendarTimeSlider);
  1040. nodes = table.getElements(".calendarTimeSliderKnob");
  1041. if (nodes.length) nodes.setStyles(this.css.calendarTimeSliderKnob);
  1042. nodes = table.getElements(".calendarTimeShow");
  1043. if (nodes.length) nodes.setStyles(this.css.calendarTimeShow);
  1044. nodes = table.getElements(".calendarTimeShowItem");
  1045. if (nodes.length) nodes.setStyles(this.css.calendarTimeShowItem);
  1046. var node = table.getElement(".MWF_calendar_action_show");
  1047. if (node){
  1048. node.setStyles(this.css.calendarActionShow);
  1049. var buttons = node.getElements("button");
  1050. buttons.setStyles(this.css.calendarActionShowButton);
  1051. }
  1052. }
  1053. break;
  1054. default :
  1055. //nothing;
  1056. }
  1057. tds.addEvent("mouseover", function(){
  1058. this.setStyle("border", "1px solid #999999");
  1059. });
  1060. tds.addEvent("mouseout", function(){
  1061. this.setStyle("border", "1px solid #FFF");
  1062. });
  1063. }else{
  1064. switch (this.currentView) {
  1065. case "day" :
  1066. table.setStyles(this.css.calendarDaysContent);
  1067. tds.setStyles(this.css.calendarDaysContentTd);
  1068. break;
  1069. case "month" :
  1070. table.setStyles(this.css.calendarMonthsContent);
  1071. tds.setStyles(this.css.calendarMonthsContentTd);
  1072. break;
  1073. case "year" :
  1074. this.yearLength = tds.length;
  1075. table.setStyles(this.css.calendarYearsContent);
  1076. tds.setStyles(this.css.calendarYearsContentTd);
  1077. break;
  1078. case "time" :
  1079. if( this.options.style.indexOf("mobile") > -1 ){
  1080. var nodes = table.getElements(".calendarTimeContent_mobile");
  1081. if (nodes.length) nodes.setStyles(this.css.calendarTimeContent_mobile);
  1082. nodes = table.getElements(".calendarTimeFixWidthNode_mobile");
  1083. if (nodes.length) nodes.setStyles(this.css.calendarTimeFixWidthNode_mobile);
  1084. nodes = table.getElements(".calendarTimeWheels_mobile");
  1085. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheels_mobile);
  1086. nodes = table.getElements(".calendarTimeWheel_mobile");
  1087. if (nodes.length) nodes.setStyles(this.css.calendarTimeWheel_mobile);
  1088. nodes = table.getElements(".calendarTimeSelectContainer_mobile");
  1089. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectContainer_mobile);
  1090. nodes = table.getElements(".calendarTimeSelectLine_mobile");
  1091. if (nodes.length) nodes.setStyles(this.css.calendarTimeSelectLine_mobile);
  1092. nodes = table.getElements(".calendarTimeShadowMask_mobile");
  1093. if (nodes.length) nodes.setStyles(this.css.calendarTimeShadowMask_mobile);
  1094. var node = table.getElement(".MWF_calendar_action_show");
  1095. if (node){
  1096. node.setStyles(this.css.calendarActionShow);
  1097. //var buttons = node.getElements("button");
  1098. //buttons.setStyles(this.css.calendarActionShowButton);
  1099. }
  1100. }else{
  1101. var nodes = table.getElements(".calendarTimeArea");
  1102. if (nodes.length) nodes.setStyles(this.css.calendarTimeArea);
  1103. nodes = table.getElements(".calendarTimeSlider");
  1104. if (nodes.length) nodes.setStyles(this.css.calendarTimeSlider);
  1105. nodes = table.getElements(".calendarTimeSliderKnob");
  1106. if (nodes.length) nodes.setStyles(this.css.calendarTimeSliderKnob);
  1107. nodes = table.getElements(".calendarTimeShow");
  1108. if (nodes.length) nodes.setStyles(this.css.calendarTimeShow);
  1109. nodes = table.getElements(".calendarTimeShowItem");
  1110. if (nodes.length) nodes.setStyles(this.css.calendarTimeShowItem);
  1111. var node = table.getElement(".MWF_calendar_action_show");
  1112. if (node){
  1113. node.setStyles(this.css.calendarActionShow);
  1114. var buttons = node.getElements("button");
  1115. buttons.setStyles(this.css.calendarActionShowButton);
  1116. }
  1117. }
  1118. break;
  1119. default :
  1120. //nothing;
  1121. }
  1122. }
  1123. return table;
  1124. }
  1125. });
  1126. o2.Calendar.MobileSelect = new Class({
  1127. Implements: [Options, Events],
  1128. options: {
  1129. "lineHeight" : 40, //每个item的高度
  1130. "itemSize" : 0, //item数量
  1131. "ratio" : 1, //滑动距离倍率
  1132. "itemIndex" : 0
  1133. },
  1134. initialize: function (wheelNode, options) {
  1135. this.setOptions( options );
  1136. this.wheelNode = wheelNode;
  1137. this.sliderNode = wheelNode.getFirst();
  1138. },
  1139. load : function(){
  1140. var _this = this;
  1141. this.curDistance = 0;
  1142. this.sliderNode.style.transform = "translate3d(0px, 80px, 0px)";
  1143. this.wheelNode.addEventListener('touchstart', function () {
  1144. _this.touch(event);
  1145. }, false);
  1146. this.wheelNode.addEventListener('touchend', function () {
  1147. _this.touch(event);
  1148. }, false);
  1149. this.wheelNode.addEventListener('touchmove', function () {
  1150. _this.touch(event);
  1151. }, false);
  1152. this.locatePostion( this.options.itemIndex );
  1153. },
  1154. touch: function (ev) {
  1155. var sliderNode = this.sliderNode;
  1156. ev = ev || window.event;
  1157. switch (ev.type) {
  1158. case "touchstart":
  1159. this.startTime = new Date();
  1160. this.startY = event.touches[0].clientY;
  1161. this.oldMoveY = this.startY;
  1162. break;
  1163. case "touchend":
  1164. this.moveEndY = event.changedTouches[0].clientY;
  1165. this.overTime = new Date();
  1166. var speed = (this.moveEndY - this.startY) / ( this.overTime - this.startTime );
  1167. var ratio = 1;
  1168. if( Math.abs(speed) > 0.7 ){
  1169. ratio = 5;
  1170. }else if( Math.abs(speed) < 0.2 ){
  1171. ratio = 0.7
  1172. }
  1173. this.offsetSum = ( this.moveEndY - this.startY ) * this.options.ratio * ratio;
  1174. this.updateCurDistance();
  1175. this.curDistance = this.fixPosition(this.curDistance);
  1176. this.movePosition( this.curDistance );
  1177. this.oversizeBorder = - ( this.options.itemSize - 3) * this.options.lineHeight;
  1178. if (this.curDistance + this.offsetSum > 2 * this.options.lineHeight) {
  1179. this.curDistance = 2 * this.options.lineHeight;
  1180. setTimeout(function () {
  1181. this.movePosition( this.curDistance );
  1182. }.bind(this), 100);
  1183. } else if (this.curDistance + this.offsetSum < this.oversizeBorder) {
  1184. this.curDistance = this.oversizeBorder;
  1185. setTimeout(function () {
  1186. this.movePosition( this.curDistance );
  1187. }.bind(this), 100);
  1188. }
  1189. this.fireEvent( "change", [this.getCurIndex()] );
  1190. break;
  1191. case "touchmove":
  1192. ev.preventDefault();
  1193. this.moveY = event.touches[0].clientY;
  1194. this.overTime = new Date();
  1195. var speed = (this.moveY - this.oldMoveY) / ( this.overTime - this.oldOverTime );
  1196. var ratio = 1;
  1197. if( Math.abs(speed) > 0.7 ){
  1198. ratio = 5;
  1199. }else if( Math.abs(speed) < 0.2 ){
  1200. ratio = 0.7
  1201. }
  1202. this.offset = ( this.moveY - this.oldMoveY ) * this.options.ratio * ratio;
  1203. this.updateCurDistance();
  1204. this.curDistance = this.curDistance + this.offset;
  1205. this.movePosition( this.curDistance );
  1206. this.oldMoveY = this.moveY;
  1207. this.oldOverTime = this.overTime;
  1208. break;
  1209. }
  1210. },
  1211. calcDistance: function (index) {
  1212. return 2 * this.options.lineHeight - index * this.options.lineHeight;
  1213. },
  1214. setCurDistance: function ( index ) {
  1215. this.curDistance = this.calcDistance( index );
  1216. this.movePosition( this.curDistance );
  1217. },
  1218. fixPosition: function (distance) {
  1219. return -(this.getIndex(distance) - 2) * this.options.lineHeight;
  1220. },
  1221. getCurIndex : function(){
  1222. return this.getIndex( this.curDistance );
  1223. },
  1224. getIndex: function (distance) {
  1225. return Math.round((2 * this.options.lineHeight - distance) / this.options.lineHeight);
  1226. },
  1227. movePosition: function ( distance) {
  1228. this.sliderNode.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
  1229. this.sliderNode.style.transform = 'translate3d(0,' + distance + 'px, 0)';
  1230. },
  1231. locatePostion: function ( index ) {
  1232. this.curDistance = this.calcDistance(index);
  1233. this.movePosition( this.curDistance );
  1234. },
  1235. updateCurDistance: function () {
  1236. this.curDistance = parseInt(this.sliderNode.style.transform.split(',')[1]);
  1237. },
  1238. getDistance: function () {
  1239. return parseInt(this.sliderNode.style.transform.split(',')[1]);
  1240. }
  1241. });