Dojo control for timing

I want to share my Dojo module for timing. I needed this controller during research at our institute. The task of the control was to provide students with a clear and fast interface for timing.




')
At first, there was a desire to simplify my life and make HTML hard code in the form of two drop-down lists with the choice of hours and minutes, then I thought why not do it in the form of a Dojo component, which would give me some advantages:
1. The ability to make a more beautiful and user-friendly interface
2. More convenient use of such a component to set / get the current time
3. The ability to easily create new instances of a component using JavaScript, as well as full control of this component
4. Good traffic savings.
And so begin. What should my component do:
1. Accept time in formats: H: M, the number of minutes (for example, 125 = 2: 05)
2. When choosing a time, put it in a hidden field to be able to get time when sending the form to the server
3. Have JavaScript - functions for setting / getting the current time of the component

Consider the whole development process.

1. Dojo is installed and configured. First, make sure Dojo is installed and configured correctly. In this article I will not consider the installation and configuration process, as this process is pretty well documented. Suppose Dojo is installed in the / js / dojo / dojo folder.
2. Configure Dojo to work with our components. We want to place our components in separate directories that will not conflict with Dojo, for our own Dojo components we will create the folder / js / dojo / switlle
Now, to use our components from this folder, we need to register this path. Do this immediately after connecting the Dojo:

3. Create DoS TimeSelect module. Now create the file /js/dojo/switlle/TimeSelect.js with the following contents:

if (!dojo._hasResource["switlle.dojo.TimeSelect"]) {
dojo._hasResource["switlle.dojo.TimeSelect"] = true;
dojo.require("dojo.cache");
dojo.provide("switlle.dojo.TimeSelect");
dojo.declare("switlle.dojo.TimeSelect", [dijit._Widget, dijit._Templated], {

/*
* ,
*
*/
templateString: " : />",

time: '00:00',
timemin: 0,
name: '',

/*
* name
* hiddenFieldNode.
*
*/
attributeMap: {
name: {
node: "hiddenFieldNode",
type: "attribute"
}
},
buildRendering: function () {
this.inherited(arguments);

/**
* .
* HTML .
* , 24-
*/
var thisObj = this;
var hours_dlg = new dijit.TooltipDialog({
content: "<table class='switlle-time-select-hours'><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>00</td></tr></table>",
onOpen: function()
{
dojo.query('.switlle-time-select-hours td', this.containerNode).removeClass('hover');
},
postCreate: function()
{
//
dojo.query('.switlle-time-select-hours td', this.containerNode).forEach(function(el){
dojo.connect(el, 'onclick', function(e) {
hours_button.attr('label', e.target.innerHTML);
hours_dlg.onCancel();
thisObj._onChange();
});
dojo.connect(el, 'onmouseover', function(e) {
dojo.addClass(e.target, 'hover');
});
dojo.connect(el, 'onmouseout', function(e) {
dojo.removeClass(e.target, 'hover');
});
});
}
});
var hours_button = new dijit.form.DropDownButton({
label: '00',
dropDown: hours_dlg
});
this.hoursNode.appendChild(hours_button.domNode);
// ,
this._hours_button = hours_button;

/**
*
* 5
*/
var minutes_dlg = new dijit.TooltipDialog({
content: "<table class='switlle-time-select-minutes'><tr><td>00</td><td>05</td><td>10</td><td>15</td><td>20</td><td>25</td></tr><tr><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td></tr></table>",
onOpen: function()
{
dojo.query('.switlle-time-select-hours td', this.containerNode).removeClass('hover');
},
postCreate: function()
{
//
dojo.query('.switlle-time-select-minutes td', this.containerNode).forEach(function(el){
dojo.connect(el, 'onclick', function(e) {
minutes_button.attr('label', e.target.innerHTML);
minutes_dlg.onCancel();
thisObj._onChange();
});
dojo.connect(el, 'onmouseover', function(e) {
dojo.addClass(e.target, 'hover');
});
dojo.connect(el, 'onmouseout', function(e) {
dojo.removeClass(e.target, 'hover');
});
});
}
});
var minutes_button = new dijit.form.DropDownButton({
label: '00',
dropDown: minutes_dlg
});
this.minutesNode.appendChild(minutes_button.domNode);
// ,
this._minutes_button = minutes_button;
},
/**
* time setter
*/
_setTimeAttr: function(time) {
this.time = time;
var dot = this.time.indexOf(':');
var hours = parseInt(this.time.substring(0, dot));
var minutes = parseInt(this.time.substring(dot+1));
this._hours_button.attr('label', hours);
this._minutes_button.attr('label', minutes);
this._onChange();
},
/**
* time getter
*/
_getTimeAttr: function() {
return this._hours_button.attr('label')+':'+this._minutes_button.attr('label');
},

/**
* timemin setter
*/
_setTimeminAttr: function(seconds) {
this.timemin = seconds;
var hours = parseInt(seconds/60);
var minutes = seconds-hours*60;
if (hours==0)
hours='00';
if (minutes<10)
minutes='0'+minutes;
this.time = hours+':'+minutes;
this._hours_button.attr('label', hours);
this._minutes_button.attr('label', minutes);
this._onChange();
},
/**
* timemin getter
*/
_getTimeminAttr: function() {
return parseInt( this._hours_button.attr('label'))*60+parseInt(this._minutes_button.attr('label'));
},
/**
*
* , onChange,
*
*/
_onChange: function() {
this.hiddenFieldNode.value = this.attr('time');
this.onChange(this);
},
onChange: function(control) {
}
});
}


4. Use of the component. To use our component, you first need to connect it. To do this, slightly modify the code in which we registered the path to the folder with our components:

Now we can add the following code to our page markup:
/>
or

Do not pay any attention to the fact that the first line contains the input tag, and the second span. The tag name does not play a role absolutely, anyway, this construction will be replaced with our content template. But two different attributes timemin and time cause different setters. In timemin, we pass the number of minutes, and at time the string representation of time.
Also, when sending a form to the server, we can get the value of this component from the GET or POST array with the key 'timeControl'.
In order to create this component programmatically using JavaScript, it also does not take much work:


To programmatically install / read the control value:

And finally, let's subscribe to the onChange event:

CSS used:
.switlle-time-select-hours td, .switlle-time-select-minutes td {
border:1px solid #EEEEEE;
color:#333333;
cursor:pointer;
padding:5px 7px;
text-align:center;
vertical-align:middle;
}
.switlle-time-select-hours td.hover, .switlle-time-select-minutes td.hover {
background-color:#EEEEEE;
border:1px solid #DDDDDD;
}

Of course, the control can be supplied with various checks for the correctness of time, any additional decorations may be useful, but we will leave this for later. I got the basic functionality I needed.