/*jslint eqeq: true, plusplus: true, undef: true, sloppy: true, vars: true, forin: true */ /*! * jquery mobiscroll v2.5.1 * http://mobiscroll.com * * copyright 2010-2013, acid media * licensed under the mit license. * */ (function ($) { function scroller(elem, settings) { var m, hi, v, dw, ww, // window width wh, // window height rwh, mw, // modal width mh, // modal height anim, debounce, that = this, ms = $.mobiscroll, e = elem, elm = $(e), theme, lang, s = extend({}, defaults), pres = {}, warr = [], iv = {}, pixels = {}, input = elm.is('input'), visible = false; // private functions function isreadonly(wh) { if ($.isarray(s.readonly)) { var i = $('.dwwl', dw).index(wh); return s.readonly[i]; } return s.readonly; } function generatewheelitems(i) { var html = '
', l = 1, j; for (j in warr[i]) { if (l % 20 == 0) { html += '
'; } html += '
' + warr[i][j] + '
'; l++; } html += '
'; return html; } function setglobals(t) { min = $('.dw-li', t).index($('.dw-v', t).eq(0)); max = $('.dw-li', t).index($('.dw-v', t).eq(-1)); index = $('.dw-ul', dw).index(t); h = hi; inst = that; } function formatheader(v) { var t = s.headertext; return t ? (typeof t === 'function' ? t.call(e, v) : t.replace(/\{value\}/i, v)) : ''; } function read() { that.temp = ((input && that.val !== null && that.val != elm.val()) || that.values === null) ? s.parsevalue(elm.val() || '', that) : that.values.slice(0); that.setvalue(true); } function scrolltopos(time, index, manual, dir, orig) { // call validation event if (event('validate', [dw, index, time]) !== false) { // set scrollers to position $('.dw-ul', dw).each(function (i) { var t = $(this), cell = $('.dw-li[data-val="' + that.temp[i] + '"]', t), cells = $('.dw-li', t), v = cells.index(cell), l = cells.length, sc = i == index || index === undefined; // scroll to a valid cell if (!cell.hasclass('dw-v')) { var cell1 = cell, cell2 = cell, dist1 = 0, dist2 = 0; while (v - dist1 >= 0 && !cell1.hasclass('dw-v')) { dist1++; cell1 = cells.eq(v - dist1); } while (v + dist2 < l && !cell2.hasclass('dw-v')) { dist2++; cell2 = cells.eq(v + dist2); } // if we have direction (+/- or mouse wheel), the distance does not count if (((dist2 < dist1 && dist2 && dir !== 2) || !dist1 || (v - dist1 < 0) || dir == 1) && cell2.hasclass('dw-v')) { cell = cell2; v = v + dist2; } else { cell = cell1; v = v - dist1; } } if (!(cell.hasclass('dw-sel')) || sc) { // set valid value that.temp[i] = cell.attr('data-val'); // add selected class to cell $('.dw-sel', t).removeclass('dw-sel'); cell.addclass('dw-sel'); // scroll to position //that.scroll(t, i, v, time); that.scroll(t, i, v, sc ? time : 0.1, sc ? orig : undefined); } }); // reformat value if validation changed something that.change(manual); } } function position(check) { if (s.display == 'inline' || (ww === $(window).width() && rwh === $(window).height() && check)) { return; } var w, l, t, aw, // anchor width ah, // anchor height ap, // anchor position at, // anchor top al, // anchor left arr, // arrow arrw, // arrow width arrl, // arrow left scroll, totalw = 0, minw = 0, st = $(window).scrolltop(), wr = $('.dwwr', dw), d = $('.dw', dw), css = {}, anchor = s.anchor === undefined ? elm : s.anchor; ww = $(window).width(); rwh = $(window).height(); wh = window.innerheight; // on ios we need innerheight wh = wh || rwh; if (/modal|bubble/.test(s.display)) { $('.dwc', dw).each(function () { w = $(this).outerwidth(true); totalw += w; minw = (w > minw) ? w : minw; }); w = totalw > ww ? minw : totalw; wr.width(w); } mw = d.outerwidth(); mh = d.outerheight(true); if (s.display == 'modal') { l = (ww - mw) / 2; t = st + (wh - mh) / 2; } else if (s.display == 'bubble') { scroll = true; arr = $('.dw-arrw-i', dw); ap = anchor.offset(); at = ap.top; al = ap.left; // horizontal positioning aw = anchor.outerwidth(); ah = anchor.outerheight(); l = al - (d.outerwidth(true) - aw) / 2; l = l > (ww - mw) ? (ww - (mw + 20)) : l; l = l >= 0 ? l : 20; // vertical positioning t = at - mh; //(mh + 3); // above the input if ((t < st) || (at > st + wh)) { // if doesn't fit above or the input is out of the screen d.removeclass('dw-bubble-top').addclass('dw-bubble-bottom'); t = at + ah;// + 3; // below the input } else { d.removeclass('dw-bubble-bottom').addclass('dw-bubble-top'); } //t = t >= st ? t : st; // calculate arrow position arrw = arr.outerwidth(); arrl = al + aw / 2 - (l + (mw - arrw) / 2); // limit arrow position to [0, pocw.width] intervall $('.dw-arr', dw).css({ left: arrl > arrw ? arrw : arrl }); } else { css.width = '100%'; if (s.display == 'top') { t = st; } else if (s.display == 'bottom') { t = st + wh - mh; } } css.top = t < 0 ? 0 : t; css.left = l; d.css(css); // if top + modal height > doc height, increase doc height $('.dw-persp', dw).height(0).height(t + mh > $(document).height() ? t + mh : $(document).height()); // scroll needed if (scroll && ((t + mh > st + wh) || (at > st + wh))) { $(window).scrolltop(t + mh - wh); } } function testtouch(e) { if (e.type === 'touchstart') { touch = true; settimeout(function () { touch = false; // reset if mouse event was not fired }, 500); } else if (touch) { touch = false; return false; } return true; } function event(name, args) { var ret; args.push(that); $.each([theme.defaults, pres, settings], function (i, v) { if (v[name]) { // call preset event ret = v[name].apply(e, args); } }); return ret; } function plus(t) { var p = +t.data('pos'), val = p + 1; calc(t, val > max ? min : val, 1, true); } function minus(t) { var p = +t.data('pos'), val = p - 1; calc(t, val < min ? max : val, 2, true); } // public functions /** * enables the scroller and the associated input. */ that.enable = function () { s.disabled = false; if (input) { elm.prop('disabled', false); } }; /** * disables the scroller and the associated input. */ that.disable = function () { s.disabled = true; if (input) { elm.prop('disabled', true); } }; /** * scrolls target to the specified position * @param {object} t - target wheel jquery object. * @param {number} index - index of the changed wheel. * @param {number} val - value. * @param {number} time - duration of the animation, optional. * @param {number} orig - original value. */ that.scroll = function (t, index, val, time, orig) { function getval(t, b, c, d) { return c * math.sin(t / d * (math.pi / 2)) + b; } function ready() { clearinterval(iv[index]); delete iv[index]; t.data('pos', val).closest('.dwwl').removeclass('dwa'); } var px = (m - val) * hi, i; if (px == pixels[index] && iv[index]) { return; } if (time && px != pixels[index]) { // trigger animation start event event('onanimstart', [dw, index, time]); } pixels[index] = px; t.attr('style', (prefix + '-transition:all ' + (time ? time.tofixed(3) : 0) + 's ease-out;') + (has3d ? (prefix + '-transform:translate3d(0,' + px + 'px,0);') : ('top:' + px + 'px;'))); if (iv[index]) { ready(); } if (time && orig !== undefined) { i = 0; t.closest('.dwwl').addclass('dwa'); iv[index] = setinterval(function () { i += 0.1; t.data('pos', math.round(getval(i, orig, val - orig, time))); if (i >= time) { ready(); } }, 100); } else { t.data('pos', val); } }; /** * gets the selected wheel values, formats it, and set the value of the scroller instance. * if input parameter is true, populates the associated input element. * @param {boolean} sc - scroll the wheel in position. * @param {boolean} fill - also set the value of the associated input element. default is true. * @param {number} time - animation time * @param {boolean} temp - if true, then only set the temporary value.(only scroll there but not set the value) */ that.setvalue = function (sc, fill, time, temp) { if (!$.isarray(that.temp)) { that.temp = s.parsevalue(that.temp + '', that); } if (visible && sc) { scrolltopos(time); } v = s.formatresult(that.temp); if (!temp) { that.values = that.temp.slice(0); that.val = v; } if (fill) { if (input) { elm.val(v).trigger('change'); } } }; that.getvalues = function () { var ret = [], i; for (i in that._selectedvalues) { ret.push(that._selectedvalues[i]); } return ret; }; /** * checks if the current selected values are valid together. * in case of date presets it checks the number of days in a month. * @param {number} time - animation time * @param {number} orig - original value * @param {number} i - currently changed wheel index, -1 if initial validation. * @param {number} dir - scroll direction */ that.validate = function (i, dir, time, orig) { scrolltopos(time, i, true, dir, orig); }; /** * */ that.change = function (manual) { v = s.formatresult(that.temp); if (s.display == 'inline') { that.setvalue(false, manual); } else { $('.dwv', dw).html(formatheader(v)); } if (manual) { event('onchange', [v]); } }; /** * changes the values of a wheel, and scrolls to the correct position */ that.changewheel = function (idx, time) { if (dw) { var i = 0, j, k, nr = idx.length; for (j in s.wheels) { for (k in s.wheels[j]) { if ($.inarray(i, idx) > -1) { warr[i] = s.wheels[j][k]; $('.dw-ul', dw).eq(i).html(generatewheelitems(i)); nr--; if (!nr) { position(); scrolltopos(time, undefined, true); return; } } i++; } } } }; /** * return true if the scroller is currently visible. */ that.isvisible = function () { return visible; }; /** * */ that.tap = function (el, handler) { var startx, starty; if (s.tap) { el.bind('touchstart', function (e) { e.preventdefault(); startx = getcoord(e, 'x'); starty = getcoord(e, 'y'); }).bind('touchend', function (e) { // if movement is less than 20px, fire the click event handler if (math.abs(getcoord(e, 'x') - startx) < 20 && math.abs(getcoord(e, 'y') - starty) < 20) { handler.call(this, e); } tap = true; settimeout(function () { tap = false; }, 300); }); } el.bind('click', function (e) { if (!tap) { // if handler was not called on touchend, call it on click; handler.call(this, e); } }); }; /** * shows the scroller instance. * @param {boolean} prevanim - prevent animation if true */ that.show = function (prevanim) { if (s.disabled || visible) { return false; } if (s.display == 'top') { anim = 'slidedown'; } if (s.display == 'bottom') { anim = 'slideup'; } // parse value from input read(); event('onbeforeshow', [dw]); // create wheels var l = 0, i, label, manim = ''; if (anim && !prevanim) { manim = 'dw-' + anim + ' dw-in'; } // create wheels containers var html = '
' + (s.display == 'inline' ? '
' : '
' + '
' + (s.headertext ? '
' : '')); for (i = 0; i < s.wheels.length; i++) { html += '
'; // create wheels for (label in s.wheels[i]) { warr[l] = s.wheels[i][label]; html += ''; l++; } html += '
' + (s.mode != 'scroller' ? '
+
' : '') + '
' + label + '
'; // create wheel values html += generatewheelitems(l); html += '
'; } html += (s.display != 'inline' ? '
' + s.settext + '' + (s.button3 ? '' + s.button3text + '' : '') + '' + s.canceltext + '
' : '
') + '
'; dw = $(html); scrolltopos(); event('onmarkupready', [dw]); // show if (s.display != 'inline') { dw.appendto('body'); // remove animation class settimeout(function () { dw.removeclass('dw-trans').find('.dw').removeclass(manim); }, 350); } else if (elm.is('div')) { elm.html(dw); } else { dw.insertafter(elm); } event('onmarkupinserted', [dw]); visible = true; // theme init theme.init(dw, that); if (s.display != 'inline') { // init buttons that.tap($('.dwb-s span', dw), function () { if (that.hide(false, 'set') !== false) { that.setvalue(false, true); event('onselect', [that.val]); } }); that.tap($('.dwb-c span', dw), function () { that.cancel(); }); if (s.button3) { that.tap($('.dwb-n span', dw), s.button3); } // prevent scrolling if not specified otherwise if (s.scrolllock) { dw.bind('touchmove', function (e) { if (mh <= wh && mw <= ww) { e.preventdefault(); } }); } // disable inputs to prevent bleed through (android bug) $('input,select,button').each(function () { if (!$(this).prop('disabled')) { $(this).addclass('dwtd').prop('disabled', true); } }); // set position position(); $(window).bind('resize.dw', function () { // sometimes scrolltop is not correctly set, so we wait a little cleartimeout(debounce); debounce = settimeout(function () { position(true); }, 100); }); } // events dw.delegate('.dwwl', 'dommousescroll mousewheel', function (e) { if (!isreadonly(this)) { e.preventdefault(); e = e.originalevent; var delta = e.wheeldelta ? (e.wheeldelta / 120) : (e.detail ? (-e.detail / 3) : 0), t = $('.dw-ul', this), p = +t.data('pos'), val = math.round(p - delta); setglobals(t); calc(t, val, delta < 0 ? 1 : 2); } }).delegate('.dwb, .dwwb', start_event, function (e) { // active button $(this).addclass('dwb-a'); }).delegate('.dwwb', start_event, function (e) { e.stoppropagation(); e.preventdefault(); var w = $(this).closest('.dwwl'); if (testtouch(e) && !isreadonly(w) && !w.hasclass('dwa')) { click = true; // + button var t = w.find('.dw-ul'), func = $(this).hasclass('dwwbp') ? plus : minus; setglobals(t); clearinterval(timer); timer = setinterval(function () { func(t); }, s.delay); func(t); } }).delegate('.dwwl', start_event, function (e) { // prevent scroll e.preventdefault(); // scroll start if (testtouch(e) && !move && !isreadonly(this) && !click) { move = true; $(document).bind(move_event, onmove); target = $('.dw-ul', this); scrollable = s.mode != 'clickpick'; pos = +target.data('pos'); setglobals(target); moved = iv[index] !== undefined; // don't allow tap, if still moving start = getcoord(e, 'y'); starttime = new date(); stop = start; that.scroll(target, index, pos, 0.001); if (scrollable) { target.closest('.dwwl').addclass('dwa'); } } }); event('onshow', [dw, v]); }; /** * hides the scroller instance. */ that.hide = function (prevanim, btn) { // if onclose handler returns false, prevent hide if (!visible || event('onclose', [v, btn]) === false) { return false; } // re-enable temporary disabled fields $('.dwtd').prop('disabled', false).removeclass('dwtd'); elm.blur(); // hide wheels and overlay if (dw) { if (s.display != 'inline' && anim && !prevanim) { dw.addclass('dw-trans').find('.dw').addclass('dw-' + anim + ' dw-out'); settimeout(function () { dw.remove(); dw = null; }, 350); } else { dw.remove(); dw = null; } visible = false; pixels = {}; // stop positioning on window resize $(window).unbind('.dw'); } }; /** * cancel and hide the scroller instance. */ that.cancel = function () { if (that.hide(false, 'cancel') !== false) { event('oncancel', [that.val]); } }; /** * scroller initialization. */ that.init = function (ss) { // get theme defaults theme = extend({ defaults: {}, init: empty }, ms.themes[ss.theme || s.theme]); // get language defaults lang = ms.i18n[ss.lang || s.lang]; extend(settings, ss); // update original user settings extend(s, theme.defaults, lang, settings); that.settings = s; // unbind all events (if re-init) elm.unbind('.dw'); var preset = ms.presets[s.preset]; if (preset) { pres = preset.call(e, that); extend(s, pres, settings); // load preset settings extend(methods, pres.methods); // extend core methods } // set private members m = math.floor(s.rows / 2); hi = s.height; anim = s.animate; if (elm.data('dwro') !== undefined) { e.readonly = bool(elm.data('dwro')); } if (visible) { that.hide(); } if (s.display == 'inline') { that.show(); } else { read(); if (input && s.showonfocus) { // set element readonly, save original state elm.data('dwro', e.readonly); e.readonly = true; // init show datewheel elm.bind('focus.dw', function () { that.show(); }); } } }; that.trigger = function (name, params) { return event(name, params); }; that.values = null; that.val = null; that.temp = null; that._selectedvalues = {}; // []; that.init(settings); } function testprops(props) { var i; for (i in props) { if (mod[props[i]] !== undefined) { return true; } } return false; } function testprefix() { var prefixes = ['webkit', 'moz', 'o', 'ms'], p; for (p in prefixes) { if (testprops([prefixes[p] + 'transform'])) { return '-' + prefixes[p].tolowercase(); } } return ''; } function getinst(e) { return scrollers[e.id]; } function getcoord(e, c) { var org = e.originalevent, ct = e.changedtouches; return ct || (org && org.changedtouches) ? (org ? org.changedtouches[0]['page' + c] : ct[0]['page' + c]) : e['page' + c]; } function bool(v) { return (v === true || v == 'true'); } function constrain(val, min, max) { val = val > max ? max : val; val = val < min ? min : val; return val; } function calc(t, val, dir, anim, orig) { val = constrain(val, min, max); var cell = $('.dw-li', t).eq(val), o = orig === undefined ? val : orig, idx = index, time = anim ? (val == o ? 0.1 : math.abs((val - o) * 0.1)) : 0; // set selected scroller value inst.temp[idx] = cell.attr('data-val'); inst.scroll(t, idx, val, time, orig); settimeout(function () { // validate inst.validate(idx, dir, time, orig); }, 10); } function init(that, method, args) { if (methods[method]) { return methods[method].apply(that, array.prototype.slice.call(args, 1)); } if (typeof method === 'object') { return methods.init.call(that, method); } return that; } var scrollers = {}, timer, empty = function () { }, h, min, max, inst, // current instance date = new date(), uuid = date.gettime(), move, click, target, index, start, stop, starttime, pos, moved, scrollable, mod = document.createelement('modernizr').style, has3d = testprops(['perspectiveproperty', 'webkitperspective', 'mozperspective', 'operspective', 'msperspective']), prefix = testprefix(), extend = $.extend, tap, touch, start_event = 'touchstart mousedown', move_event = 'touchmove mousemove', end_event = 'touchend mouseup', onmove = function (e) { if (scrollable) { e.preventdefault(); stop = getcoord(e, 'y'); inst.scroll(target, index, constrain(pos + (start - stop) / h, min - 1, max + 1)); } moved = true; }, defaults = { // options width: 70, height: 40, rows: 3, delay: 300, disabled: false, readonly: false, showonfocus: true, showlabel: true, wheels: [], theme: '', headertext: '{value}', display: 'modal', mode: 'scroller', preset: '', lang: 'en-us', settext: 'set', canceltext: 'cancel', scrolllock: true, tap: true, formatresult: function (d) { return d.join(' '); }, parsevalue: function (value, inst) { var w = inst.settings.wheels, val = value.split(' '), ret = [], j = 0, i, l, v; for (i = 0; i < w.length; i++) { for (l in w[i]) { if (w[i][l][val[j]] !== undefined) { ret.push(val[j]); } else { for (v in w[i][l]) { // select first value from wheel ret.push(v); break; } } j++; } } return ret; } }, methods = { init: function (options) { if (options === undefined) { options = {}; } return this.each(function () { if (!this.id) { uuid += 1; this.id = 'scoller' + uuid; } scrollers[this.id] = new scroller(this, options); }); }, enable: function () { return this.each(function () { var inst = getinst(this); if (inst) { inst.enable(); } }); }, disable: function () { return this.each(function () { var inst = getinst(this); if (inst) { inst.disable(); } }); }, isdisabled: function () { var inst = getinst(this[0]); if (inst) { return inst.settings.disabled; } }, isvisible: function () { var inst = getinst(this[0]); if (inst) { return inst.isvisible(); } }, option: function (option, value) { return this.each(function () { var inst = getinst(this); if (inst) { var obj = {}; if (typeof option === 'object') { obj = option; } else { obj[option] = value; } inst.init(obj); } }); }, setvalue: function (d, fill, time, temp) { return this.each(function () { var inst = getinst(this); if (inst) { inst.temp = d; inst.setvalue(true, fill, time, temp); } }); }, getinst: function () { return getinst(this[0]); }, getvalue: function () { var inst = getinst(this[0]); if (inst) { return inst.values; } }, getvalues: function () { var inst = getinst(this[0]); if (inst) { return inst.getvalues(); } }, show: function () { var inst = getinst(this[0]); if (inst) { return inst.show(); } }, hide: function () { return this.each(function () { var inst = getinst(this); if (inst) { inst.hide(); } }); }, destroy: function () { return this.each(function () { var inst = getinst(this); if (inst) { inst.hide(); $(this).unbind('.dw'); delete scrollers[this.id]; if ($(this).is('input')) { this.readonly = bool($(this).data('dwro')); } } }); } }; $(document).bind(end_event, function (e) { if (move) { var time = new date() - starttime, val = constrain(pos + (start - stop) / h, min - 1, max + 1), speed, dist, tindex, ttop = target.offset().top; if (time < 300) { speed = (stop - start) / time; dist = (speed * speed) / (2 * 0.0006); if (stop - start < 0) { dist = -dist; } } else { dist = stop - start; } tindex = math.round(pos - dist / h); if (!dist && !moved) { // this is a "tap" var idx = math.floor((stop - ttop) / h), li = $('.dw-li', target).eq(idx), hl = scrollable; if (inst.trigger('onvaluetap', [li]) !== false) { tindex = idx; } else { hl = true; } if (hl) { li.addclass('dw-hl'); // highlight settimeout(function () { li.removeclass('dw-hl'); }, 200); } } if (scrollable) { calc(target, tindex, 0, true, math.round(val)); } move = false; target = null; $(document).unbind(move_event, onmove); } if (click) { clearinterval(timer); click = false; } $('.dwb-a').removeclass('dwb-a'); }).bind('mouseover mouseup mousedown click', function (e) { // prevent standard behaviour on body click if (tap) { e.stoppropagation(); e.preventdefault(); return false; } }); $.fn.mobiscroll = function (method) { extend(this, $.mobiscroll.shorts); return init(this, method, arguments); }; $.mobiscroll = $.mobiscroll || { /** * set settings for all instances. * @param {object} o - new default settings. */ setdefaults: function (o) { extend(defaults, o); }, presetshort: function (name) { this.shorts[name] = function (method) { return init(this, extend(method, { preset: name }), arguments); }; }, shorts: {}, presets: {}, themes: {}, i18n: {} }; $.scroller = $.scroller || $.mobiscroll; $.fn.scroller = $.fn.scroller || $.fn.mobiscroll; })(jquery);