git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/_TimePicker.js

   1 if(!dojo._hasResource["dijit._TimePicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dijit._TimePicker"] = true;
   3 dojo.provide("dijit._TimePicker");
   4
   5 dojo.require("dijit.form._FormWidget");
   6 dojo.require("dojo.date.locale");
   7
   8 /*=====
   9 dojo.declare(
  10         "dijit._TimePicker.__Constraints",
  11         [dojo.date.locale.__FormatOptions],
  12         {
  13                 // clickableIncrement: String
  14                 //              see dijit._TimePicker.clickableIncrement
  15                 clickableIncrement: "T00:15:00",
  16
  17                 // visibleIncrement: String
  18                 //              see dijit._TimePicker.visibleIncrement
  19                 visibleIncrement: "T01:00:00",
  20
  21                 // visibleRange: String
  22                 //              see dijit._TimePicker.visibleRange
  23                 visibleRange: "T05:00:00"
  24         }
  25 );
  26 =====*/
  27
  28 dojo.declare("dijit._TimePicker",
  29         [dijit._Widget, dijit._Templated],
  30         {
  31                 //      summary:
  32                 //              A graphical time picker.
  33                 //              This widget is used internally by other widgets and is not accessible
  34                 //              as a standalone widget.
  35
  36                 templateString:"<div id=\"widget_${id}\" class=\"dijitMenu\"\n    ><div dojoAttachPoint=\"upArrow\" class=\"dijitButtonNode\"><span class=\"dijitTimePickerA11yText\">&#9650;</span></div\n    ><div dojoAttachPoint=\"timeMenu,focusNode\" dojoAttachEvent=\"onclick:_onOptionSelected,onmouseover,onmouseout\"></div\n    ><div dojoAttachPoint=\"downArrow\" class=\"dijitButtonNode\"><span class=\"dijitTimePickerA11yText\">&#9660;</span></div\n></div>\n",
  37                 baseClass: "dijitTimePicker",
  38
  39                 // clickableIncrement: String
  40                 //              ISO-8601 string representing the amount by which
  41                 //              every clickable element in the time picker increases.
  42                 //              Set in local time, without a time zone.
  43                 //              Example: `T00:15:00` creates 15 minute increments
  44                 //              Must divide dijit._TimePicker.visibleIncrement evenly
  45                 clickableIncrement: "T00:15:00",
  46
  47                 // visibleIncrement: String
  48                 //              ISO-8601 string representing the amount by which
  49                 //              every element with a visible time in the time picker increases.
  50                 //              Set in local time, without a time zone.
  51                 //              Example: `T01:00:00` creates text in every 1 hour increment
  52                 visibleIncrement: "T01:00:00",
  53
  54                 // visibleRange: String
  55                 //              ISO-8601 string representing the range of this TimePicker.
  56                 //              The TimePicker will only display times in this range.
  57                 //              Example: `T05:00:00` displays 5 hours of options
  58                 visibleRange: "T05:00:00",
  59
  60                 // value: String
  61                 //              Date to display.
  62                 //              Defaults to current time and date.
  63                 //              Can be a Date object or an ISO-8601 string.
  64                 //              If you specify the GMT time zone (`-01:00`),
  65                 //              the time will be converted to the local time in the local time zone.
  66                 //              Otherwise, the time is considered to be in the local time zone.
  67                 //              If you specify the date and isDate is true, the date is used.
  68                 //              Example: if your local time zone is `GMT -05:00`,
  69                 //              `T10:00:00` becomes `T10:00:00-05:00` (considered to be local time),
  70                 //              `T10:00:00-01:00` becomes `T06:00:00-05:00` (4 hour difference),
  71                 //              `T10:00:00Z` becomes `T05:00:00-05:00` (5 hour difference between Zulu and local time)
  72                 //              `yyyy-mm-ddThh:mm:ss` is the format to set the date and time
  73                 //              Example: `2007-06-01T09:00:00`
  74                 value: new Date(),
  75
  76                 _visibleIncrement:2,
  77                 _clickableIncrement:1,
  78                 _totalIncrements:10,
  79
  80                 // constraints: dijit._TimePicker.__Constraints
  81                 constraints:{},
  82
  83                 serialize: dojo.date.stamp.toISOString,
  84
  85 //TODOC: what is priority?
  86                 setValue:function(/*Date*/ date, /*Boolean*/ priority){
  87                         // summary:
  88                         //      Set the value of the TimePicker
  89                         //      Redraws the TimePicker around the new date
  90
  91                         //dijit._TimePicker.superclass.setValue.apply(this, arguments);
  92                         this.value=date;
  93                         this._showText();
  94                 },
  95
  96                 isDisabledDate: function(/*Date*/dateObject, /*String?*/locale){
  97                         // summary:
  98                         //      May be overridden to disable certain dates in the TimePicker e.g. `isDisabledDate=dojo.date.locale.isWeekend`
  99                         return false; // Boolean
 100                 },
 101
 102                 _showText:function(){
 103                         this.timeMenu.innerHTML = "";
 104                         var fromIso = dojo.date.stamp.fromISOString;
 105                         this._clickableIncrementDate=fromIso(this.clickableIncrement);
 106                         this._visibleIncrementDate=fromIso(this.visibleIncrement);
 107                         this._visibleRangeDate=fromIso(this.visibleRange);
 108                         // get the value of the increments and the range in seconds (since 00:00:00) to find out how many divs to create
 109                         var sinceMidnight = function(/*Date*/ date){
 110                                 return date.getHours() * 60 * 60 + date.getMinutes() * 60 + date.getSeconds();
 111                         };
 112
 113                         var clickableIncrementSeconds = sinceMidnight(this._clickableIncrementDate);
 114                         var visibleIncrementSeconds = sinceMidnight(this._visibleIncrementDate);
 115                         var visibleRangeSeconds = sinceMidnight(this._visibleRangeDate);
 116
 117                         // round reference date to previous visible increment
 118                         var time = this.value.getTime();
 119                         this._refDate = new Date(time - time % (visibleIncrementSeconds*1000));
 120                         this._refDate.setFullYear(1970,0,1); // match parse defaults
 121
 122                         // assume clickable increment is the smallest unit
 123                         this._clickableIncrement = 1;
 124                         // divide the visible range by the clickable increment to get the number of divs to create
 125                         // example: 10:00:00/00:15:00 -> display 40 divs
 126                         this._totalIncrements = visibleRangeSeconds / clickableIncrementSeconds;
 127                         // divide the visible increments by the clickable increments to get how often to display the time inline
 128                         // example: 01:00:00/00:15:00 -> display the time every 4 divs
 129                         this._visibleIncrement = visibleIncrementSeconds / clickableIncrementSeconds;
 130                         for(var i = -(this._totalIncrements >> 1); i < (this._totalIncrements >> 1); i += this._clickableIncrement){
 131                                 this.timeMenu.appendChild(this._createOption(i));
 132                         }
 133
 134                         // TODO:
 135                         // I commented this out because it
 136                         // causes problems for a TimeTextBox in a Dialog, or as the editor of an InlineEditBox,
 137                         // because the timeMenu node isn't visible yet. -- Bill (Bug #????)
 138                         // dijit.focus(this.timeMenu);
 139                 },
 140
 141                 postCreate:function(){
 142                         // instantiate constraints
 143                         if(this.constraints===dijit._TimePicker.prototype.constraints){
 144                                 this.constraints={};
 145                         }
 146
 147                         // brings in visibleRange, increments, etc.
 148                         dojo.mixin(this, this.constraints);
 149
 150                         // dojo.date.locale needs the lang in the constraints as locale
 151                         if(!this.constraints.locale){
 152                                 this.constraints.locale=this.lang;
 153                         }
 154
 155                         // assign typematic mouse listeners to the arrow buttons
 156                         this.connect(this.timeMenu, dojo.isIE ? "onmousewheel" : 'DOMMouseScroll', "_mouseWheeled");
 157                         var typematic = dijit.typematic.addMouseListener;
 158                         typematic(this.upArrow,this,this._onArrowUp, 0.8, 500);
 159                         typematic(this.downArrow,this,this._onArrowDown, 0.8, 500);
 160                         //dijit.typematic.addListener(this.upArrow,this.timeMenu, {keyCode:dojo.keys.UP_ARROW,ctrlKey:false,altKey:false,shiftKey:false}, this, "_onArrowUp", 0.8, 500);
 161                         //dijit.typematic.addListener(this.downArrow, this.timeMenu, {keyCode:dojo.keys.DOWN_ARROW,ctrlKey:false,altKey:false,shiftKey:false}, this, "_onArrowDown", 0.8,500);
 162
 163                         this.inherited(arguments);
 164                         this.setValue(this.value);
 165                 },
 166
 167                 _createOption:function(/*Number*/ index){
 168                         // summary: creates a clickable time option
 169                         var div = dojo.doc.createElement("div");
 170                         var date = (div.date = new Date(this._refDate));
 171                         div.index = index;
 172                         var incrementDate = this._clickableIncrementDate;
 173                         date.setHours(date.getHours() + incrementDate.getHours() * index,
 174                                 date.getMinutes() + incrementDate.getMinutes() * index,
 175                                 date.getSeconds() + incrementDate.getSeconds() * index);
 176
 177                         var innerDiv = dojo.doc.createElement('div');
 178                         dojo.addClass(div,this.baseClass+"Item");
 179                         dojo.addClass(innerDiv,this.baseClass+"ItemInner");
 180                         innerDiv.innerHTML = dojo.date.locale.format(date, this.constraints);
 181                         div.appendChild(innerDiv);
 182
 183                         if(index%this._visibleIncrement<1 && index%this._visibleIncrement>-1){
 184                                 dojo.addClass(div, this.baseClass+"Marker");
 185                         }else if(!(index%this._clickableIncrement)){
 186                                 dojo.addClass(div, this.baseClass+"Tick");
 187                         }
 188
 189                         if(this.isDisabledDate(date)){
 190                                 // set disabled
 191                                 dojo.addClass(div, this.baseClass+"ItemDisabled");
 192                         }
 193                         if(!dojo.date.compare(this.value, date, this.constraints.selector)){
 194                                 div.selected = true;
 195                                 dojo.addClass(div, this.baseClass+"ItemSelected");
 196                         }
 197                         return div;
 198                 },
 199
 200                 _onOptionSelected:function(/*Object*/ tgt){
 201                         var tdate = tgt.target.date || tgt.target.parentNode.date;
 202                         if(!tdate || this.isDisabledDate(tdate)){ return; }
 203                         this.setValue(tdate);
 204                         this.onValueSelected(tdate);
 205                 },
 206
 207                 onValueSelected:function(value){
 208                 },
 209
 210                 onmouseover:function(/*Event*/ e){
 211                         var tgr = (e.target.parentNode === this.timeMenu) ? e.target : e.target.parentNode;
 212                         this._highlighted_option=tgr;
 213                         dojo.addClass(tgr, this.baseClass+"ItemHover");
 214                 },
 215
 216                 onmouseout:function(/*Event*/ e){
 217                         var tgr = (e.target.parentNode === this.timeMenu) ? e.target : e.target.parentNode;
 218                         if(this._highlighted_option===tgr){
 219                                 dojo.removeClass(tgr, this.baseClass+"ItemHover");
 220                         }
 221                 },
 222
 223                 _mouseWheeled:function(/*Event*/e){
 224                         // summary: handle the mouse wheel listener
 225                         dojo.stopEvent(e);
 226                         // we're not _measuring_ the scroll amount, just direction
 227                         var scrollAmount = (dojo.isIE ? e.wheelDelta : -e.detail);
 228                         this[(scrollAmount>0 ? "_onArrowUp" : "_onArrowDown")](); // yes, we're making a new dom node every time you mousewheel, or click
 229                 },
 230
 231                 _onArrowUp:function(){
 232                         // summary: remove the bottom time and add one to the top
 233                         var index = this.timeMenu.childNodes[0].index - 1;
 234                         var div = this._createOption(index);
 235                         this.timeMenu.removeChild(this.timeMenu.childNodes[this.timeMenu.childNodes.length - 1]);
 236                         this.timeMenu.insertBefore(div, this.timeMenu.childNodes[0]);
 237                 },
 238
 239                 _onArrowDown:function(){
 240                         // summary: remove the top time and add one to the bottom
 241                         var index = this.timeMenu.childNodes[this.timeMenu.childNodes.length - 1].index + 1;
 242                         var div = this._createOption(index);
 243                         this.timeMenu.removeChild(this.timeMenu.childNodes[0]);
 244                         this.timeMenu.appendChild(div);
 245                 }
 246         }
 247 );
 248
 249 }