Browse files

Add "durationflipbox" mode - options are identical to "duartionbox" -…

… closes #229
  • Loading branch information...
1 parent 2c6f562 commit 315d218b55b7bf170740efe39b8a130b84e1517c @jtsage committed Dec 6, 2012
Showing with 218 additions and 3 deletions.
  1. +1 −0 build/build.py
  2. +1 −0 demos/mode/durationbox.html
  3. +4 −1 index.html
  4. +1 −1 js/jqm-datebox.core.js
  5. +206 −0 js/jqm-datebox.mode.durationflipbox.js
  6. +5 −1 tests/dev.html
View
1 build/build.py
@@ -20,6 +20,7 @@
'../js/jqm-datebox.mode.calbox.js',
'../js/jqm-datebox.mode.datebox.js',
'../js/jqm-datebox.mode.durationbox.js',
+ '../js/jqm-datebox.mode.durationflipbox.js',
'../js/jqm-datebox.mode.flipbox.js',
'../js/jqm-datebox.mode.slidebox.js',
'../js/jqm-datebox.mode.customflip.js',
View
1 demos/mode/durationbox.html
@@ -54,6 +54,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
<div data-role="collapsible" data-collapsed="false">
<h2>Duration Default</h2>
<p>Using the duration mode is as simple as setting the 'mode' option to "durationbox".</p>
+ <p>Please note these exact same options work for "durationflipbox".</p>
<div data-role="fieldcontain">
<label for="defdurate">Some Date</label><input name="defdurate" type="date" data-role="datebox" id="defdurate" data-options='{"mode": "durationbox"}' />
View
5 index.html
@@ -19,6 +19,7 @@
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
+ <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationflipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.customflip.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.custombox.min.js"></script>
@@ -82,6 +83,8 @@ <h1 id="jqm-logo"><img src="demos/jquery-logo-db.png" alt="jQuery Mobile Framewo
<input name="mode4" id="mode4" type="text" data-role="datebox" data-options='{"mode":"slidebox", "useNewStyle":true}' />
<label for="mode5">DurationBox</label>
<input name="mode5" id="mode5" type="text" data-role="datebox" data-options='{"mode":"durationbox", "useNewStyle":true}' />
+ <label for="mode8">DurationFlipBox</label>
+ <input name="mode8" id="mode8" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "useNewStyle":true}' />
<label for="mode6">CustomBox</label>
<input name="mode6" id="mode6" type="text" data-role="datebox" data-options='{"mode":"custombox", "useNewStyle":true}' />
<label for="mode7">CustomFlip</label>
@@ -97,7 +100,7 @@ <h1 id="jqm-logo"><img src="demos/jquery-logo-db.png" alt="jQuery Mobile Framewo
<li><a href="demos/mode/flipbox.html">Flip Mode</a></li>
<li><a href="demos/mode/timebox.html">Time Mode</a></li>
<li><a href="demos/mode/timeflipbox.html">Time Flip Mode</a></li>
- <li><a href="demos/mode/durationbox.html">Duration Mode</a></li>
+ <li><a href="demos/mode/durationbox.html">Duration &amp; Duration Flip Mode</a></li>
<li><a href="demos/mode/custombox.html">Custom Box Mode (ext)</a></li>
<li><a href="demos/mode/customflipbox.html">Custom Flip Mode (ext)</a></li>
</ul>
View
2 js/jqm-datebox.core.js
@@ -10,7 +10,7 @@
$.widget( "mobile.datebox", $.mobile.widget, {
options: {
// All widget options, including some internal runtime details
- version: '2-1.2.0-2012120602', // jQMMajor.jQMMinor.DBoxMinor-YrMoDaySerial
+ version: '2-1.2.0-2012120603', // jQMMajor.jQMMinor.DBoxMinor-YrMoDaySerial
theme: false,
themeDefault: 'c',
themeHeader: 'a',
View
206 js/jqm-datebox.mode.durationflipbox.js
@@ -0,0 +1,206 @@
+/*
+ * jQuery Mobile Framework : plugin to provide a date and time picker.
+ * Copyright (c) JTSage
+ * CC 3.0 Attribution. May be relicensed without permission/notification.
+ * https://github.com/jtsage/jquery-mobile-datebox
+ */
+ /* DurationFlipBox Mode */
+
+(function($) {
+ $.extend( $.mobile.datebox.prototype.options, {
+ themeDatePick: 'a',
+ themeDate: 'd',
+ useSetButton: true,
+ durationSteppers: {'d': 1, 'h': 1, 'i': 1, 's': 1}
+ });
+ $.extend( $.mobile.datebox.prototype, {
+ '_durfbox_pos': function () {
+ var w = this,
+ ech = null,
+ top = null,
+ par = this.d.intHTML.find('.ui-datebox-flipcontent').innerHeight(),
+ tot = null;
+
+ w.d.intHTML.find('.ui-datebox-flipcenter').each(function() {
+ ech = $(this);
+ top = ech.innerHeight();
+ ech.css('top', ((par/2)-(top/2)+4)*-1);
+ });
+ w.d.intHTML.find('ul').each(function () {
+ ech = $(this);
+ par = ech.parent().innerHeight();
+ top = ech.find('li').first();
+ tot = ech.find('li').size() * top.outerHeight();
+ top.css('marginTop', ((tot/2)-(par/2)+(top.outerHeight()/2))*-1);
+ });
+ },
+ '_durfbox_series': function (middle, side, type) {
+ var w = this,
+ o = this.options,
+ ret = [[middle.toString(), middle]], nxt, prv;
+
+ for ( var i = 1; i <= side; i++ ) {
+ nxt = middle + ( i * o.durationSteppers[type] );
+ prv = middle - ( i * o.durationSteppers[type] );
+ ret.unshift([nxt.toString(), nxt]);
+ if ( prv > -1 ) {
+ ret.push([prv.toString(), prv]);
+ } else {
+ ret.push(['',-1]);
+ }
+ }
+ return ret;
+ }
+ });
+ $.extend( $.mobile.datebox.prototype._build, {
+ 'durationflipbox': function () {
+ var w = this,
+ o = this.options, i, y, tt, hRow, tmp, testDate,
+ sel = ['d','h','i','s'],
+ cDur = [0,0,0,0],
+ cDurS = {},
+ ival = {'d': 60*60*24, 'h': 60*60, 'i': 60},
+ uid = 'ui-datebox-',
+ flipBase = $("<div class='ui-overlay-shadow'><ul></ul></div>"),
+ ctrl = $("<div>", {"class":uid+'flipcontent'+' '+uid+'flipcontentd'});
+
+ if ( typeof w.d.intHTML !== 'boolean' ) {
+ w.d.intHTML.empty().remove();
+ }
+
+ w.d.input.on('datebox', function (e,p) {
+ if ( p.method === 'postrefresh' ) { w._durfbox_pos(); }
+ });
+
+ w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():w.__('titleDateDialogLabel'));
+ w.d.intHTML = $('<span>');
+
+ w.fldOrder = w.__('durationOrder');
+
+ tmp = $('<div class="'+uid+'header ui-grid-'+[0,0,'a','b','c'][w.fldOrder.length]+'"></div>');
+ for ( y=0; y<w.fldOrder.length; y++ ) {
+ $('<div class="ui-block-'+['a','b','c','d'][y]+'">'+w.__('durationLabel')[y]+'</div>').css('textAlign','center').appendTo(tmp);
+ }
+ tmp.appendTo(w.d.intHTML);
+
+ w.d.intHTML.append(ctrl);
+
+ i = w.theDate.getEpoch() - w.initDate.getEpoch();
+ if ( i<0 ) { i = 0; w.theDate.setTime(w.initDate.getTime()); }
+ w.lastDuration = i; // Let the number of seconds be sort of public.
+
+ // SPLIT TIME INTO DAYS, HRS, MIN, SEC
+ cDur[0] = parseInt( i / ival.d, 10); i = i % ival.d;
+ cDur[1] = parseInt( i / ival.h, 10); i = i % ival.h;
+ cDur[2] = parseInt( i / ival.i, 10);
+ cDur[3] = i % ival.i;
+
+ cDurS.d = w._durfbox_series(cDur[0],16,'d');
+ cDurS.h = w._durfbox_series(cDur[1],16,'h');
+ cDurS.i = w._durfbox_series(cDur[2],20,'i');
+ cDurS.s = w._durfbox_series(cDur[3],20,'s');
+
+ for ( y=0; y<w.fldOrder.length; y++ ) {
+ tt = w.fldOrder[y];
+ sel = cDur[jQuery.inArray(tt,['d','h','i','s'])];
+ hRow = w._makeEl(flipBase, {'attr': {'field':tt,'amount':o.durationSteppers[tt]} });
+ for ( i in cDurS[tt] ) {
+ tmp = (cDurS[tt][i][1]!==sel)?o.themeDate:o.themeDatePick;
+ $("<li>", { 'class' : 'ui-body-'+tmp})
+ .html("<span>"+cDurS[tt][i][0] +"</span>").appendTo(hRow.find('ul'));
+ }
+ hRow.appendTo(ctrl);
+ }
+
+ $("<div>", {"class":uid+'flipcenter ui-overlay-shadow'}).css('pointerEvents', 'none').appendTo(w.d.intHTML);
+
+ if ( o.useSetButton || o.useClearButton ) {
+ y = $('<div>', {'class':uid+'controls'});
+
+ if ( o.useSetButton ) {
+ $('<a href="#">'+w.__('setDurationButtonLabel')+'</a>')
+ .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
+ .on(o.clickEventAlt, function(e) {
+ e.preventDefault();
+ w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(w.__fmt(),w.theDate), 'date':w.theDate});
+ w.d.input.trigger('datebox', {'method':'close'});
+ });
+ }
+ if ( o.useClearButton ) {
+ $('<a href="#">'+w.__('clearButton')+'</a>')
+ .appendTo(y).buttonMarkup({theme: o.theme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
+ .on(o.clickEventAlt, function(e) {
+ e.preventDefault();
+ w.d.input.val('');
+ w.d.input.trigger('datebox',{'method':'clear'});
+ w.d.input.trigger('datebox',{'method':'close'});
+ });
+ }
+ if ( o.useCollapsedBut ) {
+ y.addClass('ui-datebox-collapse');
+ }
+ y.appendTo(w.d.intHTML);
+ }
+
+ if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
+ w.d.intHTML.on('mousewheel', '.ui-overlay-shadow', function(e,d) {
+ e.preventDefault();
+ w._offset($(this).jqmData('field'), ((d<0)?-1:1)*$(this).jqmData('amount'));
+ });
+ }
+
+ w.d.intHTML.on(w.drag.eStart, 'ul', function(e,f) {
+ if ( !w.drag.move ) {
+ if ( typeof f !== "undefined" ) { e = f; }
+ w.drag.move = true;
+ w.drag.target = $(this).find('li').first();
+ w.drag.pos = parseInt(w.drag.target.css('marginTop').replace(/px/i, ''),10);
+ w.drag.start = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
+ w.drag.end = false;
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ });
+
+ w.d.intHTML.on(w.drag.eStart, '.'+uid+'flipcenter', function(e) { // Used only on old browsers and IE.
+ if ( !w.drag.move ) {
+ w.drag.target = w.touch ? e.originalEvent.changedTouches[0].pageX - $(e.currentTarget).offset().left : e.pageX - $(e.currentTarget).offset().left;
+ 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);
+ $(w.d.intHTML.find('ul').get(parseInt(w.drag.target / w.drag.tmp,10))).trigger(w.drag.eStart,e);
+ }
+ });
+
+ }
+ });
+ $.extend( $.mobile.datebox.prototype._drag, {
+ 'durationflipbox': function() {
+ var w = this,
+ o = this.options,
+ g = this.drag;
+
+ $(document).on(g.eMove, function(e) {
+ if ( g.move && o.mode === 'durationflipbox' ) {
+ g.end = w.touch ? e.originalEvent.changedTouches[0].pageY : e.pageY;
+ g.target.css('marginTop', (g.pos + g.end - g.start) + 'px');
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+ });
+
+ $(document).on(g.eEnd, function(e) {
+ if ( g.move && o.mode === 'durationflipbox' ) {
+ g.move = false;
+ if ( g.end !== false ) {
+ e.preventDefault();
+ e.stopPropagation();
+ g.tmp = g.target.parent().parent();
+ w._offset(g.tmp.jqmData('field'), (parseInt((g.start - g.end) / g.target.innerHeight(),10) * g.tmp.jqmData('amount') *-1 ));
+ }
+ g.start = false;
+ g.end = false;
+ }
+ });
+ }
+ });
+})( jQuery );
View
6 tests/dev.html
@@ -43,8 +43,12 @@
</div>
<div data-role="content">
<div data-role="fieldcontain">
+ <label for="l1">l1</label>
+ <input name="l1" type="text" value="" data-role="datebox" data-options='{"mode": "timeflipbox", "useFocus": true, "centerHoriz":true, "themeHeader":"b", "themeDatePick":"b", "overrideTimeOutput": "%-I:%M %p"}' id="l1" />
+ </div>
+ <div data-role="fieldcontain">
<label for="lang1">calbox</label>
- <input name="lang1" type="text" value="3/6/2012" data-role="datebox" data-options='{"calShowWeek":true, "calUsePickers":true, "mode": "calbox"}' id="lang1" />
+ <input name="lang1" type="text" data-role="datebox" data-options='{"calShowWeek":true, "calUsePickers":true, "mode": "calbox"}' id="lang1" />
</div>
<div data-role="fieldcontain">
<label for="c2">custom box</label>

0 comments on commit 315d218

Please sign in to comment.