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 | /* DurationFlipBox Mode */
|
---|
8 |
|
---|
9 | (function($) {
|
---|
10 | $.extend( $.mobile.datebox.prototype.options, {
|
---|
11 | themeDatePick: 'b',
|
---|
12 | themeDate: 'a',
|
---|
13 | useSetButton: true,
|
---|
14 | durationSteppers: {'d': 1, 'h': 1, 'i': 1, 's': 1}
|
---|
15 | });
|
---|
16 | $.extend( $.mobile.datebox.prototype, {
|
---|
17 | '_durfbox_pos': function () {
|
---|
18 | var w = this,
|
---|
19 | ech = null,
|
---|
20 | top = null,
|
---|
21 | par = this.d.intHTML.find('.ui-datebox-flipcontent').innerHeight(),
|
---|
22 | tot = null;
|
---|
23 |
|
---|
24 | w.d.intHTML.find('.ui-datebox-flipcenter').each(function() {
|
---|
25 | ech = $(this);
|
---|
26 | top = ech.innerHeight();
|
---|
27 | ech.css('top', ((par/2)-(top/2)+4)*-1);
|
---|
28 | });
|
---|
29 | w.d.intHTML.find('ul').each(function () {
|
---|
30 | ech = $(this);
|
---|
31 | par = ech.parent().innerHeight();
|
---|
32 | top = ech.find('li').first();
|
---|
33 | tot = ech.find('li').size() * top.outerHeight();
|
---|
34 | top.css('marginTop', ((tot/2)-(par/2)+(top.outerHeight()/2))*-1);
|
---|
35 | });
|
---|
36 | },
|
---|
37 | '_durfbox_series': function (middle, side, type) {
|
---|
38 | var w = this,
|
---|
39 | o = this.options,
|
---|
40 | ret = [[middle.toString(), middle]], nxt, prv;
|
---|
41 |
|
---|
42 | for ( var i = 1; i <= side; i++ ) {
|
---|
43 | nxt = middle + ( i * o.durationSteppers[type] );
|
---|
44 | prv = middle - ( i * o.durationSteppers[type] );
|
---|
45 | ret.unshift([nxt.toString(), nxt]);
|
---|
46 | if ( prv > -1 ) {
|
---|
47 | ret.push([prv.toString(), prv]);
|
---|
48 | } else {
|
---|
49 | ret.push(['',-1]);
|
---|
50 | }
|
---|
51 | }
|
---|
52 | return ret;
|
---|
53 | }
|
---|
54 | });
|
---|
55 | $.extend( $.mobile.datebox.prototype._build, {
|
---|
56 | 'durationflipbox': function () {
|
---|
57 | var w = this,
|
---|
58 | o = this.options, i, y, tt, hRow, tmp, testDate,
|
---|
59 | sel = ['d','h','i','s'],
|
---|
60 | cDur = [0,0,0,0],
|
---|
61 | cDurS = {},
|
---|
62 | ival = {'d': 60*60*24, 'h': 60*60, 'i': 60},
|
---|
63 | uid = 'ui-datebox-',
|
---|
64 | flipBase = $("<div class='ui-overlay-shadow'><ul></ul></div>"),
|
---|
65 | ctrl = $("<div>", {"class":uid+'flipcontent'+' '+uid+'flipcontentd'});
|
---|
66 |
|
---|
67 | if ( typeof w.d.intHTML !== 'boolean' ) {
|
---|
68 | w.d.intHTML.empty().remove();
|
---|
69 | }
|
---|
70 |
|
---|
71 | w.d.input.on('datebox', function (e,p) {
|
---|
72 | if ( p.method === 'postrefresh' ) { w._durfbox_pos(); }
|
---|
73 | });
|
---|
74 |
|
---|
75 | w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():w.__('titleDateDialogLabel'));
|
---|
76 | w.d.intHTML = $('<span>');
|
---|
77 |
|
---|
78 | w.fldOrder = w.__('durationOrder');
|
---|
79 |
|
---|
80 | tmp = $('<div class="'+uid+'header ui-grid-'+[0,0,'a','b','c'][w.fldOrder.length]+'"></div>');
|
---|
81 | for ( y=0; y<w.fldOrder.length; y++ ) {
|
---|
82 | $('<div class="ui-block-'+['a','b','c','d'][y]+'">'+w.__('durationLabel')[jQuery.inArray(w.fldOrder[y],['d','h','i','s'])]+'</div>').css('textAlign','center').appendTo(tmp);
|
---|
83 | }
|
---|
84 | tmp.appendTo(w.d.intHTML);
|
---|
85 |
|
---|
86 | w.d.intHTML.append(ctrl);
|
---|
87 |
|
---|
88 | i = w.theDate.getEpoch() - w.initDate.getEpoch();
|
---|
89 | if ( i<0 ) { i = 0; w.theDate.setTime(w.initDate.getTime()); }
|
---|
90 | w.lastDuration = i; // Let the number of seconds be sort of public.
|
---|
91 |
|
---|
92 | // SPLIT TIME INTO DAYS, HRS, MIN, SEC
|
---|
93 | cDur[0] = parseInt( i / ival.d, 10); i = i % ival.d;
|
---|
94 | cDur[1] = parseInt( i / ival.h, 10); i = i % ival.h;
|
---|
95 | cDur[2] = parseInt( i / ival.i, 10);
|
---|
96 | cDur[3] = i % ival.i;
|
---|
97 |
|
---|
98 | cDurS.d = w._durfbox_series(cDur[0],16,'d');
|
---|
99 | cDurS.h = w._durfbox_series(cDur[1],16,'h');
|
---|
100 | cDurS.i = w._durfbox_series(cDur[2],20,'i');
|
---|
101 | cDurS.s = w._durfbox_series(cDur[3],20,'s');
|
---|
102 |
|
---|
103 | for ( y=0; y<w.fldOrder.length; y++ ) {
|
---|
104 | tt = w.fldOrder[y];
|
---|
105 | sel = cDur[jQuery.inArray(tt,['d','h','i','s'])];
|
---|
106 | hRow = w._makeEl(flipBase, {'attr': {'field':tt,'amount':o.durationSteppers[tt]} });
|
---|
107 | for ( i in cDurS[tt] ) {
|
---|
108 | tmp = (cDurS[tt][i][1]!==sel)?o.themeDate:o.themeDatePick;
|
---|
109 | $("<li>", { 'class' : 'ui-body-'+tmp})
|
---|
110 | .html("<span>"+cDurS[tt][i][0] +"</span>").appendTo(hRow.find('ul'));
|
---|
111 | }
|
---|
112 | hRow.appendTo(ctrl);
|
---|
113 | }
|
---|
114 |
|
---|
115 | $("<div>", {"class":uid+'flipcenter ui-overlay-shadow'}).css('pointerEvents', 'none').appendTo(w.d.intHTML);
|
---|
116 |
|
---|
117 | if ( o.useSetButton || o.useClearButton ) {
|
---|
118 | y = $('<div>', {'class':uid+'controls'});
|
---|
119 |
|
---|
120 | if ( o.useSetButton ) {
|
---|
121 | $('<a href="#">'+w.__('setDurationButtonLabel')+'</a>')
|
---|
122 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
|
---|
123 | .on(o.clickEventAlt, function(e) {
|
---|
124 | e.preventDefault();
|
---|
125 | w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(w.__fmt(),w.theDate), 'date':w.theDate});
|
---|
126 | w.d.input.trigger('datebox', {'method':'close'});
|
---|
127 | });
|
---|
128 | }
|
---|
129 | if ( o.useClearButton ) {
|
---|
130 | $('<a href="#">'+w.__('clearButton')+'</a>')
|
---|
131 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
|
---|
132 | .on(o.clickEventAlt, function(e) {
|
---|
133 | e.preventDefault();
|
---|
134 | w.d.input.val('');
|
---|
135 | w.d.input.trigger('datebox',{'method':'clear'});
|
---|
136 | w.d.input.trigger('datebox',{'method':'close'});
|
---|
137 | });
|
---|
138 | }
|
---|
139 | if ( o.useCollapsedBut ) {
|
---|
140 | y.addClass('ui-datebox-collapse');
|
---|
141 | }
|
---|
142 | y.appendTo(w.d.intHTML);
|
---|
143 | }
|
---|
144 |
|
---|
145 | if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
|
---|
146 | w.d.intHTML.on('mousewheel', '.ui-overlay-shadow', function(e,d) {
|
---|
147 | e.preventDefault();
|
---|
148 | w._offset($(this).jqmData('field'), ((d<0)?-1:1)*$(this).jqmData('amount'));
|
---|
149 | });
|
---|
150 | }
|
---|
151 |
|
---|
152 | w.d.intHTML.on(w.drag.eStart, 'ul', function(e,f) {
|
---|
153 | if ( !w.drag.move ) {
|
---|
154 | if ( typeof f !== "undefined" ) { e = f; }
|
---|
155 | w.drag.move = true;
|
---|
156 | w.drag.target = $(this).find('li').first();
|
---|
157 | w.drag.pos = parseInt(w.drag.target.css('marginTop').replace(/px/i, ''),10);
|
---|
158 | w.drag.start = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
|
---|
159 | w.drag.end = false;
|
---|
160 | e.stopPropagation();
|
---|
161 | e.preventDefault();
|
---|
162 | }
|
---|
163 | });
|
---|
164 |
|
---|
165 | w.d.intHTML.on(w.drag.eStart, '.'+uid+'flipcenter', function(e) { // Used only on old browsers and IE.
|
---|
166 | if ( !w.drag.move ) {
|
---|
167 | w.drag.target = w.touch ? e.originalEvent.changedTouches[0].pageX - $(e.currentTarget).offset().left : e.pageX - $(e.currentTarget).offset().left;
|
---|
168 | 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);
|
---|
169 | $(w.d.intHTML.find('ul').get(parseInt(w.drag.target / w.drag.tmp,10))).trigger(w.drag.eStart,e);
|
---|
170 | }
|
---|
171 | });
|
---|
172 |
|
---|
173 | }
|
---|
174 | });
|
---|
175 | $.extend( $.mobile.datebox.prototype._drag, {
|
---|
176 | 'durationflipbox': function() {
|
---|
177 | var w = this,
|
---|
178 | o = this.options,
|
---|
179 | g = this.drag;
|
---|
180 |
|
---|
181 | $(document).on(g.eMove, function(e) {
|
---|
182 | if ( g.move && o.mode === 'durationflipbox' ) {
|
---|
183 | g.end = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
|
---|
184 | g.target.css('marginTop', (g.pos + g.end - g.start) + 'px');
|
---|
185 | e.preventDefault();
|
---|
186 | e.stopPropagation();
|
---|
187 | return false;
|
---|
188 | }
|
---|
189 | });
|
---|
190 |
|
---|
191 | $(document).on(g.eEnd, function(e) {
|
---|
192 | if ( g.move && o.mode === 'durationflipbox' ) {
|
---|
193 | g.move = false;
|
---|
194 | if ( g.end !== false ) {
|
---|
195 | e.preventDefault();
|
---|
196 | e.stopPropagation();
|
---|
197 | g.tmp = g.target.parent().parent();
|
---|
198 | w._offset(g.tmp.jqmData('field'), (parseInt((g.start - g.end) / g.target.innerHeight(),10) * g.tmp.jqmData('amount') *-1 ));
|
---|
199 | }
|
---|
200 | g.start = false;
|
---|
201 | g.end = false;
|
---|
202 | }
|
---|
203 | });
|
---|
204 | }
|
---|
205 | });
|
---|
206 | })( jQuery );
|
---|