Skip to content

Commit

Permalink
full component working with 24 hour mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@puranjayjain
puranjayjain committed Mar 26, 2016
1 parent 10c1050 commit 1b4172f
Show file tree
Hide file tree
Showing 8 changed files with 814 additions and 179 deletions.
718 changes: 599 additions & 119 deletions dist/css/component.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/component.min.css
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion dist/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ <h1>Time dialog</h1>
});
var c = new mdDateTimePicker({
type: 'time',
init: moment('9:0 PM', 'h:m A')
init: moment('22:0', 'H:m'),
mode: true
});
document.getElementById('trigger4').addEventListener('click', function() {
a.toggle();
Expand Down
134 changes: 106 additions & 28 deletions dist/js/md-date-time-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,6 @@ var _createClass = function () { function defineProperties(target, props) { for

// switch according to 12 hour or 24 hour mode
if (this._mode) {
// REVIEW 24 HOUR MODE
this._fillText(hour, m.format('H'));
} else {
this._fillText(hour, m.format('h'));
Expand All @@ -438,35 +437,54 @@ var _createClass = function () { function defineProperties(target, props) { for
this._dragDial();
this._switchToView(hour);
this._switchToView(minute);
this._addClockEvent();
}
}, {
key: '_initHour',
value: function _initHour() {
var hourView = this._sDialog.hourView,
needle = this._sDialog.needle,
hour = 'mddtp-hour__selected',
selected = 'mddtp-picker__cell--selected',
rotate = 'mddtp-picker__cell--rotate-',
docfrag = document.createDocumentFragment();
cell = 'mddtp-picker__cell',
docfrag = document.createDocumentFragment(),
hourNow = void 0;

if (this._mode) {
// REVIEW 24 HOUR MODE
var hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
} else {
var _hourNow = parseInt(this._sDialog.tDate.format('h'), 10);
for (var i = 1, j = 5; i <= 12; i++, j += 5) {
hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
for (var i = 1, j = 5; i <= 24; i++, j += 5) {
var div = document.createElement('div'),
span = document.createElement('span');

div.classList.add('mddtp-picker__cell');
div.classList.add(cell);
span.textContent = i;
div.classList.add(rotate + j);
if (_hourNow === i) {
if (hourNow === i) {
div.id = hour;
div.classList.add(selected);
needle.classList.add(rotate + j);
}
div.appendChild(span);
docfrag.appendChild(div);
}
} else {
hourNow = parseInt(this._sDialog.tDate.format('h'), 10);
for (var _i = 1, _j = 10; _i <= 12; _i++, _j += 10) {
var _div = document.createElement('div'),
_span = document.createElement('span');

_div.classList.add(cell);
_span.textContent = _i;
_div.classList.add(rotate + _j);
if (hourNow === _i) {
_div.id = hour;
_div.classList.add(selected);
needle.classList.add(rotate + _j);
}
_div.appendChild(_span);
docfrag.appendChild(_div);
}
}
//empty the hours
while (hourView.lastChild) {
Expand All @@ -480,12 +498,13 @@ var _createClass = function () { function defineProperties(target, props) { for
value: function _initMinute() {
var minuteView = this._sDialog.minuteView,
minuteNow = parseInt(this._sDialog.tDate.format('m'), 10),
sMinute = 'mddtp-minute__selected',
selected = 'mddtp-picker__cell--selected',
rotate = 'mddtp-picker__cell--rotate-',
cell = 'mddtp-picker__cell',
docfrag = document.createDocumentFragment();

for (var i = 5, j = 5; i <= 60; i += 5, j += 5) {
for (var i = 5, j = 10; i <= 60; i += 5, j += 10) {
var div = document.createElement('div'),
span = document.createElement('span');

Expand All @@ -501,6 +520,7 @@ var _createClass = function () { function defineProperties(target, props) { for
div.classList.add(rotate + j);
// (minuteNow === 1 && i === 60) for corner case highlight 00 at 01
if (minuteNow === i || minuteNow - 1 === i || minuteNow + 1 === i || minuteNow === 1 && i === 60) {
div.id = sMinute;
div.classList.add(selected);
}
div.appendChild(span);
Expand Down Expand Up @@ -684,7 +704,7 @@ var _createClass = function () { function defineProperties(target, props) { for
});
} else {
el.addEventListener('click', function () {
me._switchToTimeView(el, me);
me._switchToTimeView(me);
});
}
}
Expand All @@ -694,14 +714,13 @@ var _createClass = function () { function defineProperties(target, props) { for
*
* @method _switchToTimeView
*
* @param {[type]} el [element to attach event to]
* @param {[type]} me [context]
*
*/

}, {
key: '_switchToTimeView',
value: function _switchToTimeView(el, me) {
value: function _switchToTimeView(me) {
var hourView = me._sDialog.hourView,
minuteView = me._sDialog.minuteView,
hour = me._sDialog.hour,
Expand Down Expand Up @@ -792,6 +811,67 @@ var _createClass = function () { function defineProperties(target, props) { for
el.removeAttribute('disabled');
}, 300);
}
}, {
key: '_addClockEvent',
value: function _addClockEvent() {
var me = this,
hourView = this._sDialog.hourView,
minuteView = this._sDialog.minuteView,
sClass = 'mddtp-picker__cell--selected';

hourView.addEventListener('click', function (e) {
var sHour = 'mddtp-hour__selected',
selectedHour = document.getElementById(sHour),
setHour = 0;

if (e.target && e.target.nodeName == 'SPAN') {
// clear the previously selected hour
selectedHour.id = '';
selectedHour.classList.remove(sClass);
// select the new hour
e.target.parentNode.classList.add(sClass);
e.target.parentNode.id = sHour;
// set the sDate according to 24 or 12 hour mode
if (me._mode) {
setHour = e.target.textContent;
} else {
if (me._sDialog.sDate.format('A') === 'AM') {
setHour = e.target.textContent;
} else {
setHour = parseInt(e.target.textContent, 10) + 12;
}
}
me._sDialog.sDate.hour(setHour);
// set the display hour
me._sDialog.hour.textContent = e.target.textContent;
// switch the view
me._switchToTimeView(me);
}
});
minuteView.addEventListener('click', function (e) {
var sMinute = 'mddtp-minute__selected',
selectedMinute = document.getElementById(sMinute),
setMinute = 0;

if (e.target && e.target.nodeName == 'SPAN') {
// clear the previously selected hour
if (selectedMinute) {
selectedMinute.id = '';
selectedMinute.classList.remove(sClass);
}
// select the new hour
e.target.parentNode.classList.add(sClass);
e.target.parentNode.id = sMinute;
// set the sDate minute
setMinute = e.target.textContent;
me._sDialog.sDate.minute(setMinute);
// set the display minute
me._sDialog.minute.textContent = setMinute;
// switch the view
me._switchToTimeView(me);
}
});
}
}, {
key: '_addCellClickEvent',
value: function _addCellClickEvent(el) {
Expand Down Expand Up @@ -1047,11 +1127,12 @@ var _createClass = function () { function defineProperties(target, props) { for
divides++;
}
divides += 15;
needle.classList.add(selection, quick, rotate + divides);
needle.classList.add(selection, quick, rotate + divides * 2);
});
fakeNeedleDraggabilly.on('dragEnd', function () {
var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'),
minuteNow = parseInt(me._sDialog.sDate.format('m'), 10),
sMinute = 'mddtp-minute__selected',
selectedMinute = document.getElementById(sMinute),
cOffset = circle.getBoundingClientRect();

fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
Expand All @@ -1066,19 +1147,15 @@ var _createClass = function () { function defineProperties(target, props) { for
divides = 0;
}
// remove previously selected value
// normalize 0 and 1 => 60
if (minuteNow >= 0 && minuteNow <= 1) {
minuteNow = 60;
}
minuteNow = me._nearestDivisor(minuteNow, 5);
if (minuteNow % 5 === 0) {
minuteNow /= 5;
minuteNow--;
minuteViewChildren[minuteNow].classList.remove(selected);
if (selectedMinute) {
selectedMinute.id = '';
selectedMinute.classList.remove(selected);
}
// add the new selected
if (select > 0) {
select /= 5;
select--;
minuteViewChildren[select].id = sMinute;
minuteViewChildren[select].classList.add(selected);
}
minute.textContent = me._numWithZero(divides);
Expand Down Expand Up @@ -1284,14 +1361,15 @@ var _createClass = function () { function defineProperties(target, props) { for
var start = spoke / 12 * 3;
// set clocks top and right side value
if (spoke === 12) {
value *= 5;
} else if (spoke === 24) {
// REVIEW this multiplicativeFactor and also revise css classes for this style
value *= 10;
} else if (spoke === 24) {
value *= 5;
} else {
value *= 2;
}
// special case for 00 => 60
if (spoke === 60 && value === 0) {
value = 60;
value = 120;
}
return 'mddtp-picker__cell--rotate-' + value;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/js/md-date-time-picker.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "md-date-time-picker",
"version": "0.1.0",
"version": "0.2.0",
"description": "An implementation of the Material Design Picker components in vanilla CSS, JS, and HTML",
"main": "gulpfile.js",
"scripts": {
Expand Down
Loading

0 comments on commit 1b4172f

Please sign in to comment.