md-date-time-picker-rails 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: e591acb06c1465227cdb1360e482a1b2589aee1d
4
- data.tar.gz: 98c26dc832ad1e5ae46376da98369019597ecd74
3
+ metadata.gz: 80a340c03ae835c9f75499169fc930033ed9d442
4
+ data.tar.gz: 2ec13f77fea8e705fa2a3b79a82c512f01c80bec
5
5
  SHA512:
6
- metadata.gz: 795b6524385fe8c501ea1a840c7e8cf6b02f0f99772908286596ea8f43946712865de13eac89b8c44f6aaabdb3d2e4501f50289c6f28d012d7c6a1d13adbfb5e
7
- data.tar.gz: 2f5de7020b164dcdf105802357ce7dbbaaca307c742750abad0e06e942185e58645497822dee76dcc5ffac5dc5fc0ae83769ef27705befe0df0ce03d80d01cbb
6
+ metadata.gz: 39e17f033476c87ce9c534bf200ce9d21a40b2e83ce1f2ceaa1fcb0ccecb2b99547652ea0f903486165576e0b16d4918d39664d05904ae635f5f7608489185d7
7
+ data.tar.gz: a212090fc8594b3e3d4ac1ae0fad18a7f7cd47a29325c0a19c29313792743f09035097589a6824ab29acaf4ec9473fff101ebf62e757a9a06b6531cb4eceb8f3
data/README.md CHANGED
@@ -32,8 +32,8 @@ and add the following line:
32
32
  ``` javascript
33
33
  //= require moment.min
34
34
  //= require moment.locales# if using another locale
35
- //= require mdDateTimePicker
36
35
  //= require draggabilly.pkgd.min # If using TimeDialog
36
+ //= require mdDateTimePicker
37
37
  ```
38
38
 
39
39
  And you need to edit your `app/assets/stylesheets/application.css` file
@@ -1,5 +1,5 @@
1
1
  module MdDateTimePicker
2
2
  module Rails
3
- VERSION = "2.1.0"
3
+ VERSION = "2.1.1"
4
4
  end
5
5
  end
@@ -60,17 +60,18 @@
60
60
  * @param {String} type = 'date' or 'time [type of dialog]
61
61
  * @param {moment} init [initial value for the dialog date or time, defaults to today] [@default = today]
62
62
  * @param {moment} past [the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init]
63
- * @param {moment} future [the future moment till which the calendar shall render] [@default = init]
63
+ * @param {moment} future [the future moment till which the calendar shall render] [@default = init]
64
64
  * @param {Boolean} mode [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false]
65
65
  * @param {String} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE']
66
66
  * @param {element} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
67
67
  * @param {String} ok = 'ok' [ok button's text]
68
68
  * @param {String} cancel = 'cancel' [cancel button's text]
69
69
  * @param {Boolean} colon = true [add an option to enable quote in 24 hour mode]
70
+ * @param {Boolean} autoClose = false [close dialog on date/time selection]
71
+ * @param {Boolean} inner24 = false [if 24-hour mode and (true), the PM hours shows in an inner dial]
70
72
  *
71
- * @return {Object} [mdDateTimePicker]
73
+ * @return {Object} [mdDateTimePicker]
72
74
  */
73
-
74
75
  function mdDateTimePicker(_ref) {
75
76
  var type = _ref.type,
76
77
  _ref$init = _ref.init,
@@ -90,7 +91,11 @@
90
91
  _ref$cancel = _ref.cancel,
91
92
  cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel,
92
93
  _ref$colon = _ref.colon,
93
- colon = _ref$colon === undefined ? !0 : _ref$colon;
94
+ colon = _ref$colon === undefined ? !0 : _ref$colon,
95
+ _ref$autoClose = _ref.autoClose,
96
+ autoClose = _ref$autoClose === undefined ? !1 : _ref$autoClose,
97
+ _ref$inner = _ref.inner24,
98
+ inner24 = _ref$inner === undefined ? !1 : _ref$inner;
94
99
 
95
100
  _classCallCheck(this, mdDateTimePicker);
96
101
 
@@ -104,6 +109,8 @@
104
109
  this._ok = ok;
105
110
  this._cancel = cancel;
106
111
  this._colon = colon;
112
+ this._autoClose = autoClose;
113
+ this._inner24 = inner24;
107
114
 
108
115
  /**
109
116
  * [dialog selected classes have the same structure as dialog but one level down]
@@ -132,19 +139,31 @@
132
139
 
133
140
 
134
141
  _createClass(mdDateTimePicker, [{
142
+ key: 'hide',
143
+ value: function hide() {
144
+ this._selectDialog();
145
+ this._hideDialog();
146
+ }
147
+ }, {
148
+ key: 'show',
149
+ value: function show() {
150
+ this._selectDialog();
151
+ if (this._type === 'date') {
152
+ this._initDateDialog(this._init);
153
+ } else if (this._type === 'time') {
154
+ this._initTimeDialog(this._init);
155
+ }
156
+ this._showDialog();
157
+ }
158
+ }, {
135
159
  key: 'toggle',
136
160
  value: function toggle() {
137
161
  this._selectDialog();
138
162
  // work according to the current state of the dialog
139
163
  if (mdDateTimePicker.dialog.state) {
140
- this._hideDialog();
164
+ this.hide();
141
165
  } else {
142
- if (this._type === 'date') {
143
- this._initDateDialog(this._init);
144
- } else if (this._type === 'time') {
145
- this._initTimeDialog(this._init);
146
- }
147
- this._showDialog();
166
+ this.show();
148
167
  }
149
168
  }
150
169
  }, {
@@ -369,9 +388,13 @@
369
388
  this._addClass(_subtitle, 'subtitle');
370
389
  _subtitle.setAttribute('style', 'display: none');
371
390
  this._addId(AM, 'AM');
372
- AM.textContent = 'AM';
391
+ //AM.textContent = 'AM'
392
+ // Change to 'AM' to Locale Meridiem
393
+ AM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[0];
373
394
  this._addId(PM, 'PM');
374
- PM.textContent = 'PM';
395
+ //PM.textContent = 'PM'
396
+ // Change to 'PM' to Locale Meridiem
397
+ PM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[1];
375
398
  // add them to title and subtitle
376
399
  _title.appendChild(hour);
377
400
  _title.appendChild(span);
@@ -410,6 +433,11 @@
410
433
  body.appendChild(circularHolder);
411
434
  }
412
435
  action.classList.add('mddtp-picker__action');
436
+
437
+ if (this._autoClose === !0) {
438
+ action.style.display = "none";
439
+ }
440
+
413
441
  this._addId(cancel, 'cancel');
414
442
  cancel.classList.add('mddtp-button');
415
443
  cancel.setAttribute('type', 'button');
@@ -447,7 +475,13 @@
447
475
  }
448
476
  } else {
449
477
  this._fillText(hour, m.format('h'));
450
- this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active');
478
+ //this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active')
479
+ // Using isPM function for Find PM
480
+ if (m._locale.isPM(m.format('A'))) {
481
+ this._sDialog.PM.classList.add('mddtp-picker__color--active');
482
+ } else {
483
+ this._sDialog.AM.classList.add('mddtp-picker__color--active');
484
+ }
451
485
  subtitle.removeAttribute('style');
452
486
  dotSpan.removeAttribute('style');
453
487
  }
@@ -470,13 +504,15 @@
470
504
  hour = 'mddtp-hour__selected',
471
505
  selected = 'mddtp-picker__cell--selected',
472
506
  rotate = 'mddtp-picker__cell--rotate-',
507
+ rotate24 = 'mddtp-picker__cell--rotate24',
473
508
  cell = 'mddtp-picker__cell',
474
509
  docfrag = document.createDocumentFragment(),
475
510
  hourNow = void 0;
476
511
 
477
512
  if (this._mode) {
513
+ var degreeStep = this._inner24 === !0 ? 10 : 5;
478
514
  hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
479
- for (var i = 1, j = 5; i <= 24; i++, j += 5) {
515
+ for (var i = 1, j = degreeStep; i <= 24; i++, j += degreeStep) {
480
516
  var div = document.createElement('div'),
481
517
  span = document.createElement('span');
482
518
 
@@ -487,17 +523,24 @@
487
523
  } else {
488
524
  span.textContent = i;
489
525
  }
490
- div.classList.add(rotate + j);
526
+
527
+ var position = j;
528
+ if (this._inner24 === !0 && i > 12) {
529
+ position -= 120;
530
+ div.classList.add(rotate24);
531
+ }
532
+
533
+ div.classList.add(rotate + position);
491
534
  if (hourNow === i) {
492
535
  div.id = hour;
493
536
  div.classList.add(selected);
494
- needle.classList.add(rotate + j);
537
+ needle.classList.add(rotate + position);
495
538
  }
496
539
  // CHANGED exception case for 24 => 0 issue #58
497
540
  if (i === 24 && hourNow === 0) {
498
541
  div.id = hour;
499
542
  div.classList.add(selected);
500
- needle.classList.add(rotate + j);
543
+ needle.classList.add(rotate + position);
501
544
  }
502
545
  div.appendChild(span);
503
546
  docfrag.appendChild(div);
@@ -590,7 +633,6 @@
590
633
  key: '_initViewHolder',
591
634
  value: function _initViewHolder() {
592
635
  var m = this._sDialog.tDate,
593
- picker = this._sDialog.picker,
594
636
  current = this._sDialog.current,
595
637
  previous = this._sDialog.previous,
596
638
  next = this._sDialog.next,
@@ -715,6 +757,14 @@
715
757
  me._switchToDateView(el, me);
716
758
  };
717
759
  } else {
760
+ if (this._inner24 === !0 && me._mode) {
761
+ if (parseInt(me._sDialog.sDate.format('H'), 10) > 12) {
762
+ me._sDialog.needle.classList.add('mddtp-picker__cell--rotate24');
763
+ } else {
764
+ me._sDialog.needle.classList.remove('mddtp-picker__cell--rotate24');
765
+ }
766
+ }
767
+
718
768
  el.onclick = function () {
719
769
  me._switchToTimeView(me);
720
770
  };
@@ -747,13 +797,17 @@
747
797
  needle.classList.add(selection);
748
798
  if (mdDateTimePicker.dialog.view) {
749
799
  value = me._sDialog.sDate.format('m');
750
- // move the fakeNeedle to correct position
751
- setTimeout(function () {
752
- var hOffset = circularHolder.getBoundingClientRect(),
753
- cOffset = circle.getBoundingClientRect();
754
800
 
755
- fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
756
- }, 300);
801
+ // Need to desactivate for the autoClose mode as it mess things up. If you have an idea, feel free to give it a shot !
802
+ if (me._autoClose !== !0) {
803
+ // move the fakeNeedle to correct position
804
+ setTimeout(function () {
805
+ var hOffset = circularHolder.getBoundingClientRect(),
806
+ cOffset = circle.getBoundingClientRect();
807
+
808
+ fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
809
+ }, 300);
810
+ }
757
811
  } else {
758
812
  if (me._mode) {
759
813
  spoke = 24;
@@ -865,6 +919,10 @@
865
919
  me._sDialog.minute.textContent = setMinute;
866
920
  // switch the view
867
921
  me._switchToTimeView(me);
922
+
923
+ if (me._autoClose === !0) {
924
+ me._sDialog.ok.onclick();
925
+ }
868
926
  }
869
927
  };
870
928
  }
@@ -874,8 +932,7 @@
874
932
  var me = this;
875
933
  el.onclick = function (e) {
876
934
  if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) {
877
- var picker = me._sDialog.picker,
878
- day = e.target.textContent,
935
+ var day = e.target.textContent,
879
936
  currentDate = me._sDialog.tDate.date(day),
880
937
  sId = 'mddtp-date__selected',
881
938
  sClass = 'mddtp-picker__cell--selected',
@@ -897,6 +954,10 @@
897
954
  me._fillText(subtitle, currentDate.year());
898
955
  me._fillText(titleDay, currentDate.format('ddd, '));
899
956
  me._fillText(titleMonth, currentDate.format('MMM D'));
957
+
958
+ if (me._autoClose === !0) {
959
+ me._sDialog.ok.onclick();
960
+ }
900
961
  }
901
962
  };
902
963
  }
@@ -1044,7 +1105,12 @@
1044
1105
  PM = this._sDialog.PM;
1045
1106
 
1046
1107
  AM.onclick = function (e) {
1047
- var m = me._sDialog.sDate.format('A');
1108
+ //let m = me._sDialog.sDate.format('A')
1109
+ // Change Locale Meridiem to AM/PM String
1110
+ var m = 'AM';
1111
+ if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
1112
+ m = 'PM';
1113
+ }
1048
1114
  if (m === 'PM') {
1049
1115
  me._sDialog.sDate.subtract(12, 'h');
1050
1116
  AM.classList.toggle('mddtp-picker__color--active');
@@ -1052,7 +1118,12 @@
1052
1118
  }
1053
1119
  };
1054
1120
  PM.onclick = function (e) {
1055
- var m = me._sDialog.sDate.format('A');
1121
+ //let m = me._sDialog.sDate.format('A')
1122
+ // Change Locale Meridiem to AM/PM String
1123
+ var m = 'AM';
1124
+ if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
1125
+ m = 'PM';
1126
+ }
1056
1127
  if (m === 'AM') {
1057
1128
  me._sDialog.sDate.add(12, 'h');
1058
1129
  AM.classList.toggle('mddtp-picker__color--active');
@@ -1079,12 +1150,38 @@
1079
1150
  containment: !0
1080
1151
  });
1081
1152
 
1082
- fakeNeedleDraggabilly.on('pointerDown', function () {
1153
+ fakeNeedleDraggabilly.on('pointerDown', function (e) {
1154
+ //console.info ( 'pointerDown' , e );
1083
1155
  hOffset = circularHolder.getBoundingClientRect();
1084
1156
  });
1085
- fakeNeedleDraggabilly.on('dragMove', function (e) {
1086
- var xPos = e.clientX - hOffset.left - hOffset.width / 2,
1087
- yPos = e.clientY - hOffset.top - hOffset.height / 2,
1157
+ /**
1158
+ * netTrek
1159
+ * fixes for iOS - drag
1160
+ */
1161
+ fakeNeedleDraggabilly.on('pointerMove', function (e) {
1162
+
1163
+ var clientX = e.clientX,
1164
+ clientY = e.clientY;
1165
+
1166
+
1167
+ if (clientX === undefined) {
1168
+
1169
+ if (e.pageX === undefined) {
1170
+ if (e.touches && e.touches.length > 0) {
1171
+ clientX = e.touches[0].clientX;
1172
+ clientY = e.touches[0].clientY;
1173
+ } else {
1174
+ console.error('coult not detect pageX, pageY');
1175
+ }
1176
+ } else {
1177
+ clientX = pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
1178
+ clientY = pageY - document.body.scrollTop - document.documentElement.scrollTop;
1179
+ }
1180
+ }
1181
+ //console.info ( 'Drag clientX' , clientX, clientY, e );
1182
+
1183
+ var xPos = clientX - hOffset.left - hOffset.width / 2,
1184
+ yPos = clientY - hOffset.top - hOffset.height / 2,
1088
1185
  slope = Math.atan2(-yPos, xPos);
1089
1186
 
1090
1187
  needle.className = '';
@@ -1108,7 +1205,11 @@
1108
1205
  needle.classList.add(quick);
1109
1206
  needle.classList.add(rotate + divides * 2);
1110
1207
  });
1111
- fakeNeedleDraggabilly.on('dragEnd', function () {
1208
+ /**
1209
+ * netTrek
1210
+ * fixes for iOS - drag
1211
+ */
1212
+ fakeNeedleDraggabilly.on('pointerUp', function (e) {
1112
1213
  var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'),
1113
1214
  sMinute = 'mddtp-minute__selected',
1114
1215
  selectedMinute = document.getElementById(sMinute),
@@ -1258,7 +1359,6 @@
1258
1359
  }, {
1259
1360
  key: '_calcRotation',
1260
1361
  value: function _calcRotation(spoke, value) {
1261
- var start = spoke / 12 * 3;
1262
1362
  // set clocks top and right side value
1263
1363
  if (spoke === 12) {
1264
1364
  value *= 10;
@@ -1312,4 +1412,4 @@
1312
1412
  };
1313
1413
 
1314
1414
  exports.default = mdDateTimePicker;
1315
- });
1415
+ });
@@ -1,4 +1,4 @@
1
- @import "mdDateTimePicker.min";
1
+ @import "mdDateTimePicker.min";
2
2
 
3
3
  .mddtp-picker-date .mddtp-picker__left {
4
4
  /*background: url("../images/ic_keyboard_arrow_left_black_24px.svg"); */
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: md-date-time-picker-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.0
4
+ version: 2.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kai Park