diff --git a/README.md b/README.md index 36a1d5e8..1d129933 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,27 @@ It'd be cool to see how you're using Mobiscroll! We're looking at showcasing some of the best work on http://mobiscroll.com . Feel free to let us know on twitter @mobiscroll! +Changelog 2.0rc3 +================ + +Bugfixes +-------- + + * Fixed: In clickpick mode minus button had plus button behavior + + * Fixed: In inline mode getValue always returned the initial values + + * Fixed: min/max attributes were incorrectly parsed when using HTML5 time input + +Enhancements +------------ + + * Added: _invalid_ option for the datetime preset to set dates unselectable. There are three properties to specify dates, all can be used separate or combined. _dates_ is be an array of dates to disable exact dates on the scroller. _daysOfWeek_ is an array with values from 0 to 6, _daysOfMonth_ is an array which accepts numbers (e.g. every month's 2nd day) or a string in 'x/y' format (e.g. 12/24 means every year's 24th December is disabled). A sample configuration: invalid: { dates: [new Date(2012,5,4), new Date(2012,5,13)], daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] } + + * Added: The select preset automatically disables elements on the scroller if they were disabled in the original html select element + + + Changelog 2.0rc2 ================ diff --git a/css/mobiscroll.core.css b/css/mobiscroll.core.css index 6197d595..837d2e77 100644 --- a/css/mobiscroll.core.css +++ b/css/mobiscroll.core.css @@ -32,7 +32,6 @@ } /* Datewheel wheel container wrapper */ .dwc { - display: block; float: left; margin: 0 2px 5px 2px; padding-top: 30px; @@ -63,7 +62,6 @@ border-radius: 3px; } .dwwc { - display: block; margin: 0; padding: 0 2px; position: relative; @@ -73,8 +71,6 @@ /* Datewheel wheels */ .dwwl { margin: 4px 2px; - float: left; - display: block; position: relative; background: #888; background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),color-stop(1, #000)); diff --git a/demo-zepto.html b/demo-zepto.html index f26b57b3..6781a9e9 100644 --- a/demo-zepto.html +++ b/demo-zepto.html @@ -85,7 +85,9 @@ var curr = new Date().getFullYear(); var opt = { 'date': { - preset: 'date' + preset: 'date', + dateOrder: 'mmddyy', + invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] } }, 'datetime': { preset: 'datetime', diff --git a/demo.html b/demo.html index 3480e7e3..3adb61fd 100644 --- a/demo.html +++ b/demo.html @@ -49,7 +49,8 @@ var curr = new Date().getFullYear(); var opt = { 'date': { - preset: 'date' + preset: 'date', + invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] } }, 'datetime': { preset: 'datetime', diff --git a/js/mobiscroll.core.js b/js/mobiscroll.core.js index 49da4c2c..13ab4c61 100644 --- a/js/mobiscroll.core.js +++ b/js/mobiscroll.core.js @@ -46,17 +46,51 @@ that.setValue(true); } - function scrollToPos(time) { + function scrollToPos(time, orig, index, manual, dir) { + // Initial validate + s.validate.call(e, dw, index); + // Set scrollers to position $('.dww ul', dw).each(function(i) { - var cell = $('li[data-val="' + that.temp[i] + '"]', this), - x = cell.index(); - // Initial validate - x = that.validate(i, x, cell); - that.scroll($(this), x < 0 ? 0 : x, time); + var t = $(this), + cell = $('li[data-val="' + that.temp[i] + '"]', t), + x = cell.index(), + v = scrollToValid(cell, x, i, dir); + if (x != v || i == index || index === undefined) + that.scroll($(this), v, (i == index ? time : 0), orig, i); }); - // Refromat value if validation changed something - that.change(); + + // Reformat value if validation changed something + that.change(manual); + } + + function scrollToValid(cell, val, i, dir) { + // Process invalid cells + if (!cell.hasClass('dw-v')) { + var cell1 = cell, + cell2 = cell, + dist1 = 0, + dist2 = 0; + while (cell1.prev().length && !cell1.hasClass('dw-v')) { + cell1 = cell1.prev(); + dist1++; + } + while (cell2.next().length && !cell2.hasClass('dw-v')) { + cell2 = cell2.next(); + dist2++; + } + // If we have direction (+/- or mouse wheel), the distance does not count + if ((dist2 < dist1 && dist2 && !dir == 1) || !dist1 || !cell1.hasClass('dw-v') || dir == 1) { + cell = cell2; + val = val + dist2; + } + else { + cell = cell1; + val = val - dist1; + } + that.temp[i] = cell.data('val'); + } + return val; } function position() { @@ -84,26 +118,15 @@ } function plus(t) { - if (timer) { - var p = +t.data('pos'), - val = p + 1; - calc(t, val > max ? min : val); - } - else { - clearInterval(timer); - } + var p = +t.data('pos'), + val = p + 1; + calc(t, val > max ? min : val, 1); } function minus(t) { - if (timer) { - var p = +t.data('pos'), - val = p - 1; - - calc(t, val < min ? max : val); - } - else { - clearInterval(timer); - } + var p = +t.data('pos'), + val = p - 1; + calc(t, val < min ? max : val, 2); } // Public functions @@ -158,9 +181,8 @@ t.closest('.dwwl').find('.dwwb').fadeIn('fast'); }, time * 1000); } - else { + else t.data('pos', val) - } } /** @@ -181,30 +203,8 @@ * In case of date presets it checks the number of days in a month. * @param {Integer} i - Currently changed wheel index, -1 if initial validation. */ - that.validate = function (i, val, cell) { - // If target is month, show/hide days - s.validate.call(e, dw, i) - - // Process invalid cells - if (!cell.hasClass('dw-v')) { - var cell1 = cell, - cell2 = cell, - dist1 = 0, - dist2 = 0; - while (cell1.prev().length && !cell1.hasClass('dw-v')) { - cell1 = cell1.prev(); - dist1++; - } - while (cell2.next().length && !cell2.hasClass('dw-v')) { - cell2 = cell2.next(); - dist2++; - } - cell = dist2 < dist1 ? cell2 : cell1; - val = dist2 < dist1 ? val + dist2 : val - dist1; - that.temp[i] = cell.data('val'); - } - - return val; + that.validate = function(time, orig, i, dir) { + scrollToPos(time, orig, i, true, dir); } /** @@ -252,17 +252,17 @@ // Create wheels containers var html = '
' + (s.display == 'inline' ? '
' : '
' + (s.headerText ? '
' : '')); for (var i = 0; i < s.wheels.length; i++) { - html += '
'; + html += '
'; // Create wheels for (var label in s.wheels[i]) { - html += '
' + (s.mode != 'scroller' ? '
+
–
' : '') + '
' + label + '
    '; + html += '
'; } - html += '
'; + html += '
' + (s.mode != 'scroller' ? '
+
–
' : '') + '
' + label + '
    '; // Create wheel values for (var j in s.wheels[i][label]) { html += '
  • ' + s.wheels[i][label][j] + '
    • '; } - html += '
'; + html += '
'; } html += (s.display != 'inline' ? '
' + s.setText + '' + s.cancelText + '
' : '
') + '
'; @@ -314,7 +314,7 @@ p = +t.data('pos'), val = Math.round(p - delta); setGlobals(t); - calc(t, val); + calc(t, val, delta < 0 ? 1 : 2); } }).delegate('.dwb, .dwwb', START_EVENT, function (e) { // Active button @@ -433,7 +433,7 @@ return (v === true || v == 'true'); } - function calc(t, val, anim, orig) { + function calc(t, val, dir, anim, orig) { var i = t.closest('.dwwr').find('ul').index(t); val = val > max ? max : val; @@ -444,13 +444,14 @@ inst.temp[i] = cell.data('val'); // Validate - val = inst.validate(i, val, cell); + //val = inst.validate(i, val, cell); // Call scroll with animation (calc animation time) - inst.scroll(t, val, anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i); + //inst.scroll(t, val, anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i); + inst.validate(anim ? (val == orig ? 0.1 : Math.abs((val - orig) * 0.1)) : 0, orig, i, dir); // Set value text - inst.change(true); + //inst.change(true); } var scrollers = {}, @@ -642,7 +643,7 @@ else { var dist = stop - start; } - calc(target, Math.round(pos - dist / h), true, Math.round(val)); + calc(target, Math.round(pos - dist / h), 0, true, Math.round(val)); move = false; target = null; } diff --git a/js/mobiscroll.datetime.js b/js/mobiscroll.datetime.js index a30e8888..1bd21d14 100644 --- a/js/mobiscroll.datetime.js +++ b/js/mobiscroll.datetime.js @@ -23,8 +23,7 @@ stepHour: 1, stepMinute: 1, stepSecond: 1, - separator: ' ', - invalid: [] + separator: ' ' }, preset = function(inst) { var that = $(this), @@ -224,7 +223,7 @@ var temp = inst.temp, mins = { m: 0, d: 1, h: 0, i: 0, s: 0, ap: 0 }, maxs = { m: 11, d: 31, h: step(hampm ? 11 : 23, stepH), i: step(59, stepM), s: step(59, stepS), ap: 1 }, - w = (mind || maxd) ? ['y', 'm', 'd', 'ap', 'h', 'i', 's'] : ((i == o.y || i == o.m) ? ['d'] : []), // Validate day only, if no min/max date set + w = (mind || maxd) ? ['y', 'm', 'd', 'ap', 'h', 'i', 's'] : ((i == o.y || i == o.m || i === undefined) ? ['d'] : []), // Validate day only, if no min/max date set minprop = true, maxprop = true; $.each(w, function(x, i) { @@ -261,29 +260,49 @@ if (i == 'd') { // Hide days not in month $('li', t).removeClass('dw-h').slice(maxdays).addClass('dw-h'); } - if (val < min) { - inst.scroll(t, i1); - temp[o[i]] = $('li', t).eq(i1).data('val'); + if (val < min) val = min; - } - if (val > max) { - inst.scroll(t, i2); - temp[o[i]] = $('li', t).eq(i2).data('val'); + if (val > max) val = max; - } - } - if (i == 'd') { - // Disable dates - $.each(s.invalid, function(i, v) { - if (v.getFullYear() == y && v.getMonth() == m) { - $('li[data-val="' + v.getDate() + '"]', t).removeClass('dw-v'); - } - }); } if (minprop) minprop = val == min; if (maxprop) maxprop = val == max; + // Disable some days + if (s.invalid && i == 'd') { + var idx = []; + // Disable exact dates + if (s.invalid.dates) + $.each(s.invalid.dates, function(i, v) { + if (v.getFullYear() == y && v.getMonth() == m) { + idx.push(v.getDate() - 1); + } + }); + // Disable days of week + if (s.invalid.daysOfWeek) { + var first = new Date(y, m, 1).getDay(); + $.each(s.invalid.daysOfWeek, function(i, v) { + for (var j = v - first; j < maxdays; j += 7) + if (j >= 0) + idx.push(j); + }); + } + // Disable days of month + if (s.invalid.daysOfMonth) + $.each(s.invalid.daysOfMonth, function(i, v) { + v = (v + '').split('/'); + if (v[1]) { + if (v[0] - 1 == m) + idx.push(v[1] - 1); + } + else + idx.push(v[0] - 1); + }); + $.each(idx, function(i, v) { + $('li', t).eq(v).removeClass('dw-v'); + }); + } } }); }, diff --git a/js/mobiscroll.select.js b/js/mobiscroll.select.js index cdd2c543..ab6b2eb6 100644 --- a/js/mobiscroll.select.js +++ b/js/mobiscroll.select.js @@ -1,8 +1,7 @@ (function ($) { var defaults = { - inputClass: '', - invalid: [] + inputClass: '' } $.scroller.presets.select = function(inst) { @@ -12,6 +11,7 @@ l1 = $('label[for="' + this.id + '"]').attr('for', id), l2 = $('label[for="' + id + '"]'), label = l2.length ? l2.text() : elm.attr('name'), + invalid = [], w = [{}]; w[0][label] = {}; @@ -21,7 +21,7 @@ $('option', elm).each(function() { var v = $(this).attr('value'); main[v] = $(this).text(); - if ($(this).prop('disabled')) s.invalid.push(v); + if ($(this).prop('disabled')) invalid.push(v); }); $('#' + id).remove(); @@ -44,7 +44,7 @@ return [elm.val()]; }, validate: function(dw) { - $.each(s.invalid, function(i, v) { + $.each(invalid, function(i, v) { $('li[data-val="' + v + '"]', dw).removeClass('dw-v'); }); },