1 | /*
|
---|
2 | * jQuery Mobile Framework : plugin to provide a date and time picker.
|
---|
3 | * Copyright (c) JTSage
|
---|
4 | * CC 3.0 Attribution. May be relicensed without permission/notification.
|
---|
5 | * https://github.com/jtsage/jquery-mobile-datebox
|
---|
6 | */
|
---|
7 | /* FLIPBOX Mode */
|
---|
8 |
|
---|
9 | (function($) {
|
---|
10 | $.extend( $.mobile.datebox.prototype.options, {
|
---|
11 | themeDateHigh: 'b',
|
---|
12 | themeDatePick: 'b',
|
---|
13 | themeDate: 'a',
|
---|
14 | useSetButton: true,
|
---|
15 | validHours: false,
|
---|
16 | flen: {'y': 15, 'm':12, 'd':15, 'h':12, 'i':15, 'a':3}
|
---|
17 | });
|
---|
18 | $.extend( $.mobile.datebox.prototype, {
|
---|
19 | '_fbox_pos': function () {
|
---|
20 | var w = this,
|
---|
21 | ech = null,
|
---|
22 | top = null,
|
---|
23 | par = this.d.intHTML.find('.ui-datebox-flipcontent').innerHeight(),
|
---|
24 | tot = null;
|
---|
25 |
|
---|
26 | w.d.intHTML.find('.ui-datebox-flipcenter').each(function() {
|
---|
27 | ech = $(this);
|
---|
28 | top = ech.innerHeight();
|
---|
29 | ech.css('top', ((par/2)-(top/2)+4)*-1);
|
---|
30 | });
|
---|
31 | w.d.intHTML.find('ul').each(function () {
|
---|
32 | ech = $(this);
|
---|
33 | par = ech.parent().innerHeight();
|
---|
34 | top = ech.find('li').first();
|
---|
35 | tot = ech.find('li').size() * top.outerHeight();
|
---|
36 | top.css('marginTop', ((tot/2)-(par/2)+(top.outerHeight()/2))*-1);
|
---|
37 | });
|
---|
38 | }
|
---|
39 | });
|
---|
40 | $.extend( $.mobile.datebox.prototype._build, {
|
---|
41 | 'timeflipbox': function() {
|
---|
42 | this._build.flipbox.apply(this);
|
---|
43 | },
|
---|
44 | 'flipbox': function () {
|
---|
45 | var w = this,
|
---|
46 | o = this.options, i, y, hRow, tmp, testDate,
|
---|
47 | iDate = (w.d.input.val() === "") ? w._startOffset(w._makeDate(w.d.input.val())) : w._makeDate(w.d.input.val()),
|
---|
48 | uid = 'ui-datebox-',
|
---|
49 | flipBase = $("<div class='ui-overlay-shadow'><ul></ul></div>"),
|
---|
50 | ctrl = $("<div>", {"class":uid+'flipcontent'});
|
---|
51 |
|
---|
52 | if ( typeof w.d.intHTML !== 'boolean' ) {
|
---|
53 | w.d.intHTML.empty();
|
---|
54 | }
|
---|
55 |
|
---|
56 | w.d.input.on('datebox', function (e,p) {
|
---|
57 | if ( p.method === 'postrefresh' ) {
|
---|
58 | w._fbox_pos();
|
---|
59 | }
|
---|
60 | });
|
---|
61 |
|
---|
62 | w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():((o.mode==='flipbox')?w.__('titleDateDialogLabel'):w.__('titleTimeDialogLabel')));
|
---|
63 | w.d.intHTML = $('<span>')
|
---|
64 |
|
---|
65 | w.fldOrder = ((o.mode==='flipbox')?w.__('dateFieldOrder'):w.__('timeFieldOrder'));
|
---|
66 | w._check();
|
---|
67 | w._minStepFix();
|
---|
68 |
|
---|
69 | if ( o.mode === 'flipbox' ) { $('<div class="'+uid+'header"><h4>'+w._formatter(w.__('headerFormat'), w.theDate)+'</h4></div>').appendTo(w.d.intHTML); }
|
---|
70 |
|
---|
71 | w.d.intHTML.append(ctrl);
|
---|
72 |
|
---|
73 | for ( y=0; y<w.fldOrder.length; y++ ) {
|
---|
74 | switch (w.fldOrder[y]) {
|
---|
75 | case 'y':
|
---|
76 | hRow = w._makeEl(flipBase, {'attr': {'field':'y','amount':1} });
|
---|
77 | for ( i=o.flen.y*-1; i<(o.flen.y+1); i++ ) {
|
---|
78 | tmp = (i!==0)?((iDate.get(0) === (w.theDate.get(0) + i))?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
79 | $('<li>', {'class':'ui-body-'+tmp})
|
---|
80 | .html('<span>'+(w.theDate.get(0)+i)+'</span>').appendTo(hRow.find('ul'));
|
---|
81 | }
|
---|
82 | hRow.appendTo(ctrl);
|
---|
83 | break;
|
---|
84 | case 'm':
|
---|
85 | hRow = w._makeEl(flipBase, {'attr': {'field':'m','amount':1} });
|
---|
86 | for ( i=o.flen.m*-1; i<(o.flen.m+1); i++ ) {
|
---|
87 | testDate = w.theDate.copy([0],[0,0,1]);
|
---|
88 | testDate.adj(1,i);
|
---|
89 | tmp = (i!==0)?((iDate.get(1) === testDate.get(1) && iDate.get(0) === testDate.get(0))?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
90 | $("<li>", { 'class' : 'ui-body-'+tmp})
|
---|
91 | .html("<span>"+w.__('monthsOfYearShort')[testDate.getMonth()]+"</span>").appendTo(hRow.find('ul'));
|
---|
92 | }
|
---|
93 | hRow.appendTo(ctrl);
|
---|
94 | break;
|
---|
95 | case 'd':
|
---|
96 | hRow = w._makeEl(flipBase, {'attr': {'field':'d','amount':1} });
|
---|
97 | for ( i=o.flen.d*-1; i<(o.flen.d+1); i++ ) {
|
---|
98 | testDate = w.theDate.copy();
|
---|
99 | testDate.adj(2,i);
|
---|
100 | tmp = (i!==0)?((iDate.comp() === testDate.comp())?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
101 | if ( ( o.blackDates !== false && $.inArray(testDate.iso(), o.blackDates) > -1 ) ||
|
---|
102 | ( o.blackDays !== false && $.inArray(testDate.getDay(), o.blackDays) > -1 ) ) {
|
---|
103 | tmp += ' '+uid+'griddate-disable';
|
---|
104 | }
|
---|
105 | $("<li>", { 'class' : 'ui-body-'+tmp})
|
---|
106 | .html("<span>"+testDate.getDate()+"</span>").appendTo(hRow.find('ul'));
|
---|
107 | }
|
---|
108 | hRow.appendTo(ctrl);
|
---|
109 | break;
|
---|
110 | case 'h':
|
---|
111 | hRow = w._makeEl(flipBase, {'attr': {'field':'h','amount':1} });
|
---|
112 | for ( i=o.flen.h*-1; i<(o.flen.h+1); i++ ) {
|
---|
113 | testDate = w.theDate.copy();
|
---|
114 | testDate.adj(3,i);
|
---|
115 | tmp = (i!==0)?o.themeDate:o.themeDatePick;
|
---|
116 | if ( o.validHours !== false && $.inArray(testDate.get(3), o.validHours) < 0 ) {
|
---|
117 | tmp += ' '+uid+'griddate-disable';
|
---|
118 | }
|
---|
119 | $("<li>", { 'class' : 'ui-body-'+tmp})
|
---|
120 | .html("<span>"+((w.__('timeFormat')===12) ? (( testDate.get(3) === 0 ) ? '12' : (( testDate.get(3) < 13 ) ? testDate.get(3) : (testDate.get(3)-12))) : testDate.get(3))+"</span>").appendTo(hRow.find('ul'));
|
---|
121 | }
|
---|
122 | hRow.appendTo(ctrl);
|
---|
123 | break;
|
---|
124 | case 'i':
|
---|
125 | hRow = w._makeEl(flipBase, {'attr': {'field':'i','amount':o.minuteStep} });
|
---|
126 | for ( i=o.flen.i*-1; i<(o.flen.i+1); i++ ) {
|
---|
127 | testDate = w.theDate.copy();
|
---|
128 | testDate.adj(4,(i*o.minuteStep));
|
---|
129 | tmp = (i!==0)?o.themeDate:o.themeDatePick;
|
---|
130 | $("<li>", { 'class' : 'ui-body-'+tmp})
|
---|
131 | .html("<span>"+w._zPad(testDate.get(4))+"</span>").appendTo(hRow.find('ul'));
|
---|
132 | }
|
---|
133 | hRow.appendTo(ctrl);
|
---|
134 | break;
|
---|
135 | case 'a':
|
---|
136 | if ( w.__('timeFormat') !== 12 ) { break; }
|
---|
137 | hRow = w._makeEl(flipBase, {'attr': {'field':'a','amount':1} });
|
---|
138 | testDate = $("<li class='ui-body-"+o.themeDate+"'><span> </span></li>");
|
---|
139 |
|
---|
140 | for ( i=0; i<o.flen.a; i++ ) { testDate.clone().appendTo(hRow.find('ul')); }
|
---|
141 | if ( w.theDate.get(3) < 12 ) { testDate.clone().appendTo(hRow.find('ul')); }
|
---|
142 |
|
---|
143 | tmp = (w.theDate.get(3) > 11) ? [o.themeDate,o.themeDatePick] : [o.themeDatePick,o.themeDate];
|
---|
144 |
|
---|
145 | $("<li>", { 'class' : 'ui-body-'+tmp[0]}).html('<span>'+w.__('meridiem')[0]+'</span>').appendTo(hRow.find('ul'));
|
---|
146 | $("<li>", { 'class' : 'ui-body-'+tmp[1]}).html('<span>'+w.__('meridiem')[1]+'</span>').appendTo(hRow.find('ul'));
|
---|
147 |
|
---|
148 | if ( w.theDate.get(3) > 11 ) { testDate.clone().appendTo(hRow.find('ul')); }
|
---|
149 | for ( i=0; i<o.flen.a; i++ ) { testDate.clone().appendTo(hRow.find('ul')); }
|
---|
150 |
|
---|
151 | hRow.appendTo(ctrl);
|
---|
152 | break;
|
---|
153 | }
|
---|
154 | }
|
---|
155 |
|
---|
156 | $("<div>", {"class":uid+'flipcenter ui-overlay-shadow'}).css('pointerEvents', 'none').appendTo(w.d.intHTML);
|
---|
157 |
|
---|
158 | if ( o.useSetButton || o.useClearButton ) {
|
---|
159 | y = $('<div>', {'class':uid+'controls'});
|
---|
160 |
|
---|
161 | if ( o.useSetButton ) {
|
---|
162 | $('<a href="#">'+((o.mode==='flipbox')?w.__('setDateButtonLabel'):w.__('setTimeButtonLabel'))+'</a>')
|
---|
163 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
|
---|
164 | .on(o.clickEventAlt, function(e) {
|
---|
165 | e.preventDefault();
|
---|
166 | if ( w.dateOK === true ) {
|
---|
167 | w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(w.__fmt(),w.theDate), 'date':w.theDate});
|
---|
168 | w.d.input.trigger('datebox', {'method':'close'});
|
---|
169 | }
|
---|
170 | });
|
---|
171 | }
|
---|
172 | if ( o.useClearButton ) {
|
---|
173 | $('<a href="#">'+w.__('clearButton')+'</a>')
|
---|
174 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
|
---|
175 | .on(o.clickEventAlt, function(e) {
|
---|
176 | e.preventDefault();
|
---|
177 | w.d.input.val('');
|
---|
178 | w.d.input.trigger('datebox',{'method':'clear'});
|
---|
179 | w.d.input.trigger('datebox',{'method':'close'});
|
---|
180 | });
|
---|
181 | }
|
---|
182 | if ( o.useCollapsedBut ) {
|
---|
183 | y.addClass('ui-datebox-collapse');
|
---|
184 | }
|
---|
185 | y.appendTo(w.d.intHTML);
|
---|
186 | }
|
---|
187 |
|
---|
188 | if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
|
---|
189 | w.d.intHTML.on('mousewheel', '.ui-overlay-shadow', function(e,d) {
|
---|
190 | e.preventDefault();
|
---|
191 | w._offset($(this).jqmData('field'), ((d<0)?-1:1)*$(this).jqmData('amount'));
|
---|
192 | });
|
---|
193 | }
|
---|
194 |
|
---|
195 | w.d.intHTML.on(w.drag.eStart, 'ul', function(e,f) {
|
---|
196 | if ( !w.drag.move ) {
|
---|
197 | if ( typeof f !== "undefined" ) { e = f; }
|
---|
198 | w.drag.move = true;
|
---|
199 | w.drag.target = $(this).find('li').first();
|
---|
200 | w.drag.pos = parseInt(w.drag.target.css('marginTop').replace(/px/i, ''),10);
|
---|
201 | w.drag.start = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
|
---|
202 | w.drag.end = false;
|
---|
203 | e.stopPropagation();
|
---|
204 | e.preventDefault();
|
---|
205 | }
|
---|
206 | });
|
---|
207 |
|
---|
208 | w.d.intHTML.on(w.drag.eStart, '.'+uid+'flipcenter', function(e) { // Used only on old browsers and IE.
|
---|
209 | if ( !w.drag.move ) {
|
---|
210 | w.drag.target = w.touch ? e.originalEvent.changedTouches[0].pageX - $(e.currentTarget).offset().left : e.pageX - $(e.currentTarget).offset().left;
|
---|
211 | w.drag.tmp = w.d.intHTML.find('.'+uid+'flipcenter').innerWidth() / (( $.inArray('a', w.fldOrder) > -1 && w.__('timeFormat') !== 12 )?w.fldOrder.length-1:w.fldOrder.length);
|
---|
212 | $(w.d.intHTML.find('ul').get(parseInt(w.drag.target / w.drag.tmp,10))).trigger(w.drag.eStart,e);
|
---|
213 | }
|
---|
214 | });
|
---|
215 | }
|
---|
216 | });
|
---|
217 | $.extend( $.mobile.datebox.prototype._drag, {
|
---|
218 | 'timeflipbox': function() {
|
---|
219 | this._drag.flipbox.apply(this);
|
---|
220 | },
|
---|
221 | 'flipbox': function() {
|
---|
222 | var w = this,
|
---|
223 | o = this.options,
|
---|
224 | g = this.drag;
|
---|
225 |
|
---|
226 | $(document).on(g.eMove, function(e) {
|
---|
227 | if ( g.move && ( o.mode === 'flipbox' || o.mode === 'timeflipbox' )) {
|
---|
228 | g.end = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
|
---|
229 | g.target.css('marginTop', (g.pos + g.end - g.start) + 'px');
|
---|
230 | e.preventDefault();
|
---|
231 | e.stopPropagation();
|
---|
232 | return false;
|
---|
233 | }
|
---|
234 | });
|
---|
235 |
|
---|
236 | $(document).on(g.eEnd, function(e) {
|
---|
237 | if ( g.move && (o.mode === 'flipbox' || o.mode === 'timeflipbox' )) {
|
---|
238 | g.move = false;
|
---|
239 | if ( g.end !== false ) {
|
---|
240 | e.preventDefault();
|
---|
241 | e.stopPropagation();
|
---|
242 | g.tmp = g.target.parent().parent();
|
---|
243 | w._offset(g.tmp.jqmData('field'), (parseInt((g.start - g.end) / g.target.innerHeight(),10) * g.tmp.jqmData('amount')));
|
---|
244 | }
|
---|
245 | g.start = false;
|
---|
246 | g.end = false;
|
---|
247 | }
|
---|
248 | });
|
---|
249 | }
|
---|
250 | });
|
---|
251 | })( jQuery );
|
---|