Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

calendar-debug.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. /*
  2. Copyright (c) 2010, Yahoo! Inc. All rights reserved.
  3. Code licensed under the BSD License:
  4. http://developer.yahoo.com/yui/license.html
  5. version: 3.4.0
  6. build: nightly
  7. */
  8. YUI.add('calendar', function(Y) {
  9. /**
  10. * The Calendar component is a UI widget that allows users
  11. * to view dates in a two-dimensional month grid, as well as
  12. * to select one or more dates, or ranges of dates. Calendar
  13. * is generated dynamically and relies on the developer to
  14. * provide for a progressive enhancement alternative.
  15. *
  16. *
  17. * @module calendar
  18. */
  19. var getCN = Y.ClassNameManager.getClassName,
  20. CALENDAR = 'calendar',
  21. CAL_HD = getCN(CALENDAR, 'header'),
  22. CAL_DAY_SELECTED = getCN(CALENDAR, 'day-selected'),
  23. CAL_DAY = getCN(CALENDAR, 'day'),
  24. CAL_PREVMONTH_DAY = getCN(CALENDAR, 'prevmonth-day'),
  25. CAL_NEXTMONTH_DAY = getCN(CALENDAR, 'nextmonth-day'),
  26. ydate = Y.DataType.Date,
  27. delegate = Y.delegate,
  28. CAL_PANE = getCN(CALENDAR, 'pane'),
  29. os = Y.UA.os;
  30. /** Create a calendar view to represent a single or multiple
  31. * month range of dates, rendered as a grid with date and
  32. * weekday labels.
  33. *
  34. * @class Calendar
  35. * @extends CalendarBase
  36. * @param config {Object} Configuration object (see Configuration attributes)
  37. * @constructor
  38. */
  39. function Calendar(config) {
  40. Calendar.superclass.constructor.apply ( this, arguments );
  41. }
  42. Y.Calendar = Y.extend(Calendar, Y.CalendarBase, {
  43. /**
  44. * A property tracking the last selected date on the calendar, for the
  45. * purposes of multiple selection.
  46. *
  47. * @property _lastSelectedDate
  48. * @type Date
  49. * @default null
  50. * @private
  51. */
  52. _lastSelectedDate: null,
  53. /**
  54. * Designated initializer. Activates the navigation plugin for the calendar.
  55. *
  56. * @method initializer
  57. */
  58. initializer : function () {
  59. this.plug(Y.Plugin.CalendarNavigator);
  60. },
  61. /**
  62. * syncUI implementation
  63. *
  64. * Update the scroll position, based on the current value of scrollY
  65. * @method syncUI
  66. */
  67. syncUI : function () {
  68. },
  69. /**
  70. * Overrides the _bindCalendarEvents placeholder in CalendarBase
  71. * and binds calendar events during bindUI stage.
  72. * @method _bindCalendarEvents
  73. * @protected
  74. */
  75. _bindCalendarEvents : function () {
  76. var contentBox = this.get('contentBox'),
  77. pane = contentBox.one("." + CAL_PANE);
  78. pane.on("selectstart", function (ev) { ev.preventDefault();});
  79. pane.delegate("click", this._clickCalendar, "." + CAL_DAY, this);
  80. },
  81. /**
  82. * Handles the calendar clicks based on selection mode.
  83. * @method _clickCalendar
  84. * @param {Event} ev A click event
  85. * @private
  86. */
  87. _clickCalendar : function (ev) {
  88. var clickedCell = ev.target,
  89. clickedCellIsDay = clickedCell.hasClass(CAL_DAY) &&
  90. !clickedCell.hasClass(CAL_PREVMONTH_DAY) &&
  91. !clickedCell.hasClass(CAL_NEXTMONTH_DAY),
  92. clickedCellIsSelected = clickedCell.hasClass(CAL_DAY_SELECTED);
  93. switch (this.get("selectionMode")) {
  94. case("single"):
  95. if (clickedCellIsDay) {
  96. if (!clickedCellIsSelected) {
  97. this._clearSelection(true);
  98. this._addDateToSelection(this._nodeToDate(clickedCell));
  99. }
  100. }
  101. break;
  102. case("multiple-sticky"):
  103. if (clickedCellIsDay) {
  104. if (clickedCellIsSelected) {
  105. this._removeDateFromSelection(this._nodeToDate(clickedCell));
  106. }
  107. else {
  108. this._addDateToSelection(this._nodeToDate(clickedCell));
  109. }
  110. }
  111. break;
  112. case("multiple"):
  113. if (!ev.metaKey && !ev.ctrlKey && !ev.shiftKey) {
  114. this._clearSelection(true);
  115. this._lastSelectedDate = this._nodeToDate(clickedCell);
  116. this._addDateToSelection(this._lastSelectedDate);
  117. }
  118. else if (((os == 'macintosh' && ev.metaKey) || (os != 'macintosh' && ev.ctrlKey)) && !ev.shiftKey) {
  119. if (clickedCellIsSelected) {
  120. this._removeDateFromSelection(this._nodeToDate(clickedCell));
  121. this._lastSelectedDate = null;
  122. }
  123. else {
  124. this._lastSelectedDate = this._nodeToDate(clickedCell);
  125. this._addDateToSelection(this._lastSelectedDate);
  126. }
  127. }
  128. else if (((os == 'macintosh' && ev.metaKey) || (os != 'macintosh' && ev.ctrlKey)) && ev.shiftKey) {
  129. if (this._lastSelectedDate != null) {
  130. var selectedDate = this._nodeToDate(clickedCell);
  131. this._addDateRangeToSelection(selectedDate, this._lastSelectedDate);
  132. this._lastSelectedDate = selectedDate;
  133. }
  134. else {
  135. this._lastSelectedDate = this._nodeToDate(clickedCell);
  136. this._addDateToSelection(this._lastSelectedDate);
  137. }
  138. }
  139. else if (ev.shiftKey) {
  140. if (this._lastSelectedDate != null) {
  141. var selectedDate = this._nodeToDate(clickedCell);
  142. this._clearSelection(true);
  143. this._addDateRangeToSelection(selectedDate, this._lastSelectedDate);
  144. this._lastSelectedDate = selectedDate;
  145. }
  146. else {
  147. this._clearSelection(true);
  148. this._lastSelectedDate = this._nodeToDate(clickedCell);
  149. this._addDateToSelection(this._lastSelectedDate);
  150. }
  151. }
  152. break;
  153. }
  154. if (clickedCellIsDay) {
  155. /**
  156. * Fired when a specific date cell in the calendar is clicked. The event carries a
  157. * payload which includes a `cell` property corresponding to the node of the actual
  158. * date cell, and a `date` property, with the `Date` that was clicked.
  159. *
  160. * @event dateClick
  161. */
  162. this.fire("dateClick", {cell: clickedCell, date: this._nodeToDate(clickedCell)});
  163. }
  164. else if (clickedCell.hasClass(CAL_PREVMONTH_DAY)) {
  165. /**
  166. * Fired when any of the previous month's days displayed before the calendar grid
  167. * are clicked.
  168. *
  169. * @event prevMonthClick
  170. */
  171. this.fire("prevMonthClick");
  172. }
  173. else if (clickedCell.hasClass(CAL_NEXTMONTH_DAY)) {
  174. /**
  175. * Fired when any of the next month's days displayed after the calendar grid
  176. * are clicked.
  177. *
  178. * @event nextMonthClick
  179. */
  180. this.fire("nextMonthClick");
  181. }
  182. },
  183. /**
  184. * Subtracts one month from the current calendar view.
  185. * @method subtractMonth
  186. */
  187. subtractMonth : function (e) {
  188. this.set("date", ydate.addMonths(this.get("date"), -1));
  189. e.halt();
  190. },
  191. /**
  192. * Subtracts one year from the current calendar view.
  193. * @method subtractYear
  194. */
  195. subtractYear : function (e) {
  196. this.set("date", ydate.addYears(this.get("date"), -1));
  197. e.halt();
  198. },
  199. /**
  200. * Adds one month to the current calendar view.
  201. * @method addMonth
  202. */
  203. addMonth : function (e) {
  204. this.set("date", ydate.addMonths(this.get("date"), 1));
  205. e.halt();
  206. },
  207. /**
  208. * Adds one year to the current calendar view.
  209. * @method addYear
  210. */
  211. addYear : function (e) {
  212. this.set("date", ydate.addYears(this.get("date"), 1));
  213. e.halt();
  214. }
  215. },
  216. {
  217. /**
  218. * The identity of the widget.
  219. *
  220. * @property NAME
  221. * @type String
  222. * @default 'Calendar'
  223. * @readOnly
  224. * @protected
  225. * @static
  226. */
  227. NAME: "Calendar",
  228. /**
  229. * Static property used to define the default attribute configuration of
  230. * the Widget.
  231. *
  232. * @property ATTRS
  233. * @type {Object}
  234. * @protected
  235. * @static
  236. */
  237. ATTRS: {
  238. /**
  239. * A setting specifying the type of selection the calendar allows.
  240. * Possible values include:
  241. * <ul>
  242. * <li>`single`</li> - One date at a time
  243. * <li>`multiple-sticky</li> - Multiple dates, selected one at a time (the dates "stick")
  244. * <li>`multiple`</li> - Multiple dates, selected with Ctrl/Meta keys for additional single
  245. * dates, and Shift key for date ranges.
  246. *
  247. * @attribute selectionMode
  248. * @type String
  249. * @default single
  250. */
  251. selectionMode: {
  252. value: "single"
  253. },
  254. /**
  255. * The date corresponding to the current calendar view. Always
  256. * normalized to the first of the month that contains the date
  257. * at assignment time. Used as the first date visible in the
  258. * calendar.
  259. *
  260. * @attribute date
  261. * @type Date
  262. * @default Today's date as set on the user's computer.
  263. */
  264. date: {
  265. value: new Date(),
  266. setter: function (val) {
  267. var newDate = this._normalizeDate(val),
  268. newTopDate = ydate.addMonths(newDate, this._paneNumber - 1),
  269. minDate = this.get("minimumDate"),
  270. maxDate = this.get("maximumDate");
  271. if ((minDate == null || ydate.isGreaterOrEqual(newDate, minDate)) &&
  272. (maxDate == null || ydate.isGreaterOrEqual(maxDate, newTopDate))) {
  273. return newDate;
  274. }
  275. else if (minDate != null && ydate.isGreater(minDate, newDate)) {
  276. return minDate;
  277. }
  278. else if (maxDate != null && ydate.isGreater(newTopDate, maxDate)) {
  279. var actualMaxDate = ydate.addMonths(maxDate, -1*(this._paneNumber - 1));
  280. return actualMaxDate;
  281. }
  282. }
  283. },
  284. /**
  285. * The minimum date that can be displayed by the calendar. The calendar will not
  286. * allow dates earlier than this one to be set, and will reset any earlier date to
  287. * this date. Should be `null` if no minimum date is needed.
  288. *
  289. * @attribute minimumDate
  290. * @type Date
  291. * @default null
  292. */
  293. minimumDate: {
  294. value: null,
  295. setter: function (val) {
  296. if (val != null) {
  297. var curDate = this.get('date'),
  298. newMinDate = this._normalizeDate(val);
  299. if (curDate!= null && !ydate.isGreaterOrEqual(curDate, newMinDate)) {
  300. this.set('date', newMinDate);
  301. }
  302. return newMinDate;
  303. }
  304. else {
  305. return val;
  306. }
  307. }
  308. },
  309. /**
  310. * The maximum date that can be displayed by the calendar. The calendar will not
  311. * allow dates later than this one to be set, and will reset any later date to
  312. * this date. Should be `null` if no maximum date is needed.
  313. *
  314. * @attribute maximumDate
  315. * @type Date
  316. * @default null
  317. */
  318. maximumDate: {
  319. value: null,
  320. setter: function (val) {
  321. if (val != null) {
  322. var curDate = this.get('date'),
  323. newMaxDate = this._normalizeDate(val);
  324. if (curDate!= null && !ydate.isGreaterOrEqual(val, ydate.addMonths(curDate, this._paneNumber - 1))) {
  325. this.set('date', ydate.addMonths(newMaxDate, -1*(this._paneNumber -1)));
  326. }
  327. return newMaxDate;
  328. }
  329. else {
  330. return val;
  331. }
  332. }
  333. }
  334. }
  335. });
  336. }, '3.4.0' ,{requires:['calendar-base', 'calendarnavigator'], lang:['en', 'ja', 'ru']});