source: uKadecot/trunk/tools/EcnlControllerUI/EcnlCtrlUI/js/jqm-datebox/jqm-datebox.mode.flipbox.js@ 108

Last change on this file since 108 was 108, checked in by coas-nagasima, 9 years ago

MIMEプロパティの変更
  • Property svn:eol-style set to native
  • Property svn:keywords set to Id
  • Property svn:mime-type set to text/javascript
File size: 9.6 KB
Line 
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 );
Note: See TracBrowser for help on using the repository browser.