vendor/assets/javascripts/mdDateTimePicker.js in md-date-time-picker-rails-2.1.0 vs vendor/assets/javascripts/mdDateTimePicker.js in md-date-time-picker-rails-2.1.1
- old
+ new
@@ -58,21 +58,22 @@
* @method constructor
*
* @param {String} type = 'date' or 'time [type of dialog]
* @param {moment} init [initial value for the dialog date or time, defaults to today] [@default = today]
* @param {moment} past [the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init]
- * @param {moment} future [the future moment till which the calendar shall render] [@default = init]
+ * @param {moment} future [the future moment till which the calendar shall render] [@default = init]
* @param {Boolean} mode [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false]
* @param {String} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE']
* @param {element} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
* @param {String} ok = 'ok' [ok button's text]
* @param {String} cancel = 'cancel' [cancel button's text]
* @param {Boolean} colon = true [add an option to enable quote in 24 hour mode]
+ * @param {Boolean} autoClose = false [close dialog on date/time selection]
+ * @param {Boolean} inner24 = false [if 24-hour mode and (true), the PM hours shows in an inner dial]
*
- * @return {Object} [mdDateTimePicker]
+ * @return {Object} [mdDateTimePicker]
*/
-
function mdDateTimePicker(_ref) {
var type = _ref.type,
_ref$init = _ref.init,
init = _ref$init === undefined ? (0, _moment2.default)() : _ref$init,
_ref$past = _ref.past,
@@ -88,11 +89,15 @@
_ref$ok = _ref.ok,
ok = _ref$ok === undefined ? 'ok' : _ref$ok,
_ref$cancel = _ref.cancel,
cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel,
_ref$colon = _ref.colon,
- colon = _ref$colon === undefined ? !0 : _ref$colon;
+ colon = _ref$colon === undefined ? !0 : _ref$colon,
+ _ref$autoClose = _ref.autoClose,
+ autoClose = _ref$autoClose === undefined ? !1 : _ref$autoClose,
+ _ref$inner = _ref.inner24,
+ inner24 = _ref$inner === undefined ? !1 : _ref$inner;
_classCallCheck(this, mdDateTimePicker);
this._type = type;
this._init = init;
@@ -102,10 +107,12 @@
this._orientation = orientation;
this._trigger = trigger;
this._ok = ok;
this._cancel = cancel;
this._colon = colon;
+ this._autoClose = autoClose;
+ this._inner24 = inner24;
/**
* [dialog selected classes have the same structure as dialog but one level down]
* @type {Object}
* All declarations starting with _ are considered @private
@@ -130,23 +137,35 @@
*
*/
_createClass(mdDateTimePicker, [{
+ key: 'hide',
+ value: function hide() {
+ this._selectDialog();
+ this._hideDialog();
+ }
+ }, {
+ key: 'show',
+ value: function show() {
+ this._selectDialog();
+ if (this._type === 'date') {
+ this._initDateDialog(this._init);
+ } else if (this._type === 'time') {
+ this._initTimeDialog(this._init);
+ }
+ this._showDialog();
+ }
+ }, {
key: 'toggle',
value: function toggle() {
this._selectDialog();
// work according to the current state of the dialog
if (mdDateTimePicker.dialog.state) {
- this._hideDialog();
+ this.hide();
} else {
- if (this._type === 'date') {
- this._initDateDialog(this._init);
- } else if (this._type === 'time') {
- this._initTimeDialog(this._init);
- }
- this._showDialog();
+ this.show();
}
}
}, {
key: '_selectDialog',
value: function _selectDialog() {
@@ -367,13 +386,17 @@
this._addId(minute, 'minute');
this._addId(_subtitle, 'subtitle');
this._addClass(_subtitle, 'subtitle');
_subtitle.setAttribute('style', 'display: none');
this._addId(AM, 'AM');
- AM.textContent = 'AM';
+ //AM.textContent = 'AM'
+ // Change to 'AM' to Locale Meridiem
+ AM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[0];
this._addId(PM, 'PM');
- PM.textContent = 'PM';
+ //PM.textContent = 'PM'
+ // Change to 'PM' to Locale Meridiem
+ PM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[1];
// add them to title and subtitle
_title.appendChild(hour);
_title.appendChild(span);
_title.appendChild(minute);
_subtitle.appendChild(AM);
@@ -408,10 +431,15 @@
circularHolder.appendChild(hourView);
// add them to body
body.appendChild(circularHolder);
}
action.classList.add('mddtp-picker__action');
+
+ if (this._autoClose === !0) {
+ action.style.display = "none";
+ }
+
this._addId(cancel, 'cancel');
cancel.classList.add('mddtp-button');
cancel.setAttribute('type', 'button');
this._addId(ok, 'ok');
ok.classList.add('mddtp-button');
@@ -445,11 +473,17 @@
if (this._colon) {
dotSpan.removeAttribute('style');
}
} else {
this._fillText(hour, m.format('h'));
- this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active');
+ //this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active')
+ // Using isPM function for Find PM
+ if (m._locale.isPM(m.format('A'))) {
+ this._sDialog.PM.classList.add('mddtp-picker__color--active');
+ } else {
+ this._sDialog.AM.classList.add('mddtp-picker__color--active');
+ }
subtitle.removeAttribute('style');
dotSpan.removeAttribute('style');
}
this._fillText(minute, m.format('mm'));
this._initHour();
@@ -468,38 +502,47 @@
var hourView = this._sDialog.hourView,
needle = this._sDialog.needle,
hour = 'mddtp-hour__selected',
selected = 'mddtp-picker__cell--selected',
rotate = 'mddtp-picker__cell--rotate-',
+ rotate24 = 'mddtp-picker__cell--rotate24',
cell = 'mddtp-picker__cell',
docfrag = document.createDocumentFragment(),
hourNow = void 0;
if (this._mode) {
+ var degreeStep = this._inner24 === !0 ? 10 : 5;
hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
- for (var i = 1, j = 5; i <= 24; i++, j += 5) {
+ for (var i = 1, j = degreeStep; i <= 24; i++, j += degreeStep) {
var div = document.createElement('div'),
span = document.createElement('span');
div.classList.add(cell);
// CHANGED exception case for 24 => 0 issue #57
if (i === 24) {
span.textContent = '00';
} else {
span.textContent = i;
}
- div.classList.add(rotate + j);
+
+ var position = j;
+ if (this._inner24 === !0 && i > 12) {
+ position -= 120;
+ div.classList.add(rotate24);
+ }
+
+ div.classList.add(rotate + position);
if (hourNow === i) {
div.id = hour;
div.classList.add(selected);
- needle.classList.add(rotate + j);
+ needle.classList.add(rotate + position);
}
// CHANGED exception case for 24 => 0 issue #58
if (i === 24 && hourNow === 0) {
div.id = hour;
div.classList.add(selected);
- needle.classList.add(rotate + j);
+ needle.classList.add(rotate + position);
}
div.appendChild(span);
docfrag.appendChild(div);
}
} else {
@@ -588,11 +631,10 @@
}
}, {
key: '_initViewHolder',
value: function _initViewHolder() {
var m = this._sDialog.tDate,
- picker = this._sDialog.picker,
current = this._sDialog.current,
previous = this._sDialog.previous,
next = this._sDialog.next,
past = this._past,
future = this._future;
@@ -713,10 +755,18 @@
if (this._type == 'date') {
el.onclick = function () {
me._switchToDateView(el, me);
};
} else {
+ if (this._inner24 === !0 && me._mode) {
+ if (parseInt(me._sDialog.sDate.format('H'), 10) > 12) {
+ me._sDialog.needle.classList.add('mddtp-picker__cell--rotate24');
+ } else {
+ me._sDialog.needle.classList.remove('mddtp-picker__cell--rotate24');
+ }
+ }
+
el.onclick = function () {
me._switchToTimeView(me);
};
}
}
@@ -745,17 +795,21 @@
// move the needle to correct position
needle.className = '';
needle.classList.add(selection);
if (mdDateTimePicker.dialog.view) {
value = me._sDialog.sDate.format('m');
- // move the fakeNeedle to correct position
- setTimeout(function () {
- var hOffset = circularHolder.getBoundingClientRect(),
- cOffset = circle.getBoundingClientRect();
- fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
- }, 300);
+ // Need to desactivate for the autoClose mode as it mess things up. If you have an idea, feel free to give it a shot !
+ if (me._autoClose !== !0) {
+ // move the fakeNeedle to correct position
+ setTimeout(function () {
+ var hOffset = circularHolder.getBoundingClientRect(),
+ cOffset = circle.getBoundingClientRect();
+
+ fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
+ }, 300);
+ }
} else {
if (me._mode) {
spoke = 24;
value = parseInt(me._sDialog.sDate.format('H'), 10);
// CHANGED exception for 24 => 0 issue #58
@@ -863,21 +917,24 @@
me._sDialog.sDate.minute(setMinute);
// set the display minute
me._sDialog.minute.textContent = setMinute;
// switch the view
me._switchToTimeView(me);
+
+ if (me._autoClose === !0) {
+ me._sDialog.ok.onclick();
+ }
}
};
}
}, {
key: '_addCellClickEvent',
value: function _addCellClickEvent(el) {
var me = this;
el.onclick = function (e) {
if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) {
- var picker = me._sDialog.picker,
- day = e.target.textContent,
+ var day = e.target.textContent,
currentDate = me._sDialog.tDate.date(day),
sId = 'mddtp-date__selected',
sClass = 'mddtp-picker__cell--selected',
selected = document.getElementById(sId),
subtitle = me._sDialog.subtitle,
@@ -895,10 +952,14 @@
me._sDialog.sDate = currentDate.clone();
me._fillText(subtitle, currentDate.year());
me._fillText(titleDay, currentDate.format('ddd, '));
me._fillText(titleMonth, currentDate.format('MMM D'));
+
+ if (me._autoClose === !0) {
+ me._sDialog.ok.onclick();
+ }
}
};
}
}, {
key: '_toMoveMonth',
@@ -1042,19 +1103,29 @@
var me = this,
AM = this._sDialog.AM,
PM = this._sDialog.PM;
AM.onclick = function (e) {
- var m = me._sDialog.sDate.format('A');
+ //let m = me._sDialog.sDate.format('A')
+ // Change Locale Meridiem to AM/PM String
+ var m = 'AM';
+ if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
+ m = 'PM';
+ }
if (m === 'PM') {
me._sDialog.sDate.subtract(12, 'h');
AM.classList.toggle('mddtp-picker__color--active');
PM.classList.toggle('mddtp-picker__color--active');
}
};
PM.onclick = function (e) {
- var m = me._sDialog.sDate.format('A');
+ //let m = me._sDialog.sDate.format('A')
+ // Change Locale Meridiem to AM/PM String
+ var m = 'AM';
+ if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
+ m = 'PM';
+ }
if (m === 'AM') {
me._sDialog.sDate.add(12, 'h');
AM.classList.toggle('mddtp-picker__color--active');
PM.classList.toggle('mddtp-picker__color--active');
}
@@ -1077,16 +1148,42 @@
divides = void 0,
fakeNeedleDraggabilly = new _Draggabilly2.default(fakeNeedle, {
containment: !0
});
- fakeNeedleDraggabilly.on('pointerDown', function () {
+ fakeNeedleDraggabilly.on('pointerDown', function (e) {
+ //console.info ( 'pointerDown' , e );
hOffset = circularHolder.getBoundingClientRect();
});
- fakeNeedleDraggabilly.on('dragMove', function (e) {
- var xPos = e.clientX - hOffset.left - hOffset.width / 2,
- yPos = e.clientY - hOffset.top - hOffset.height / 2,
+ /**
+ * netTrek
+ * fixes for iOS - drag
+ */
+ fakeNeedleDraggabilly.on('pointerMove', function (e) {
+
+ var clientX = e.clientX,
+ clientY = e.clientY;
+
+
+ if (clientX === undefined) {
+
+ if (e.pageX === undefined) {
+ if (e.touches && e.touches.length > 0) {
+ clientX = e.touches[0].clientX;
+ clientY = e.touches[0].clientY;
+ } else {
+ console.error('coult not detect pageX, pageY');
+ }
+ } else {
+ clientX = pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
+ clientY = pageY - document.body.scrollTop - document.documentElement.scrollTop;
+ }
+ }
+ //console.info ( 'Drag clientX' , clientX, clientY, e );
+
+ var xPos = clientX - hOffset.left - hOffset.width / 2,
+ yPos = clientY - hOffset.top - hOffset.height / 2,
slope = Math.atan2(-yPos, xPos);
needle.className = '';
if (slope < 0) {
slope += 2 * Math.PI;
@@ -1106,11 +1203,15 @@
divides += 15;
needle.classList.add(selection);
needle.classList.add(quick);
needle.classList.add(rotate + divides * 2);
});
- fakeNeedleDraggabilly.on('dragEnd', function () {
+ /**
+ * netTrek
+ * fixes for iOS - drag
+ */
+ fakeNeedleDraggabilly.on('pointerUp', function (e) {
var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'),
sMinute = 'mddtp-minute__selected',
selectedMinute = document.getElementById(sMinute),
cOffset = circle.getBoundingClientRect();
@@ -1256,11 +1357,10 @@
grid.appendChild(tr);
}
}, {
key: '_calcRotation',
value: function _calcRotation(spoke, value) {
- var start = spoke / 12 * 3;
// set clocks top and right side value
if (spoke === 12) {
value *= 10;
} else if (spoke === 24) {
value *= 5;
@@ -1310,6 +1410,6 @@
view: !0,
state: !1
};
exports.default = mdDateTimePicker;
-});
\ No newline at end of file
+});