| 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 );
|
|---|
![(please configure the [header_logo] section in trac.ini)](/trac_user/contrib/chrome/site/your_project_logo.png){kind=logo}
