webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){ "use strict"; var curCfg; var formcfg = webshims.formcfg; var monthDigits = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']; var stopPropagation = function(e){ e.stopImmediatePropagation(); }; var getMonthOptions = (function(){ var str; return function(){ if(!str){ str = ('')+$.map(monthDigits, function(val){ return ''; }).join(''); } return str; }; })(); var createFormat = function(name){ if(!curCfg.patterns[name+'Obj']){ var obj = {}; $.each(curCfg.patterns[name].split(curCfg[name+'Format']), function(i, name){ obj[name] = i; }); curCfg.patterns[name+'Obj'] = obj; } }; var splitInputs = { date: { _create: function(opts){ var obj = { splits: [$('')[0]] }; if(opts.monthSelect){ obj.splits.push($('')[0]); } else { obj.splits.push($('')[0]); } obj.splits.push($('')[0]); obj.elements = [obj.splits[0], $('')[0], obj.splits[1], $('')[0], obj.splits[2]]; return obj; }, sort: function(element){ createFormat('d'); var i = 0; var seperators = $('.ws-input-seperator', element).html(curCfg.dFormat); var inputs = $('input, select', element); $.each(curCfg.patterns.dObj, function(name, value){ var input = inputs.filter('.'+ name); if(input[0]){ input.appendTo(element); if(i < seperators.length){ seperators.eq(i).insertAfter(input); } i++; } }); } }, month: { _create: function(opts){ var obj = { splits: [$('')[0]] }; if(opts.monthSelect){ obj.splits.push($('')[0]); } else { obj.splits.push($('')[0]); if(opts.onlyMonthDigits){ $(obj.splits[1]).attr({inputmode: 'numeric', size: 2, maxlength: 2}); } } obj.elements = [obj.splits[0], $('')[0], obj.splits[1]]; return obj; }, sort: function(element){ var seperator = $('.ws-input-seperator', element).html(curCfg.dFormat); var mm = $('input.mm, select.mm', element); var action; if(curCfg.date.showMonthAfterYear){ mm.appendTo(element); action = 'insertBefore'; } else { mm.prependTo(element); action = 'insertAfter'; } seperator[action](mm); } } }; var nowDate = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60 * 1000 )); nowDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), nowDate.getHours()).getTime() var steps = { number: { step: 1 }, // week: { // step: 1, // start: new Date(nowDate) // }, 'datetime-local': { step: 60, start: new Date(nowDate).getTime() }, time: { step: 60 }, month: { step: 1, start: new Date(nowDate) }, date: { step: 1, start: new Date(nowDate) } }; var labelWidth = (function(){ var getId = function(){ return webshims.getID(this); }; return function(element, labels, noFocus){ $(element).attr({'aria-labelledby': labels.map(getId).get().join(' ')}); if(!noFocus){ labels.on('click', function(e){ element.getShadowFocusElement().focus(); e.preventDefault(); return false; }); } }; })(); var addZero = function(val){ if(!val){return "";} val = val+''; return val.length == 1 ? '0'+val : val; }; (function(){ formcfg.de = $.extend(true, { numberFormat: { ",": ".", ".": "," }, timeSigns: ":. ", numberSigns: ',', dateSigns: '.', dFormat: ".", patterns: { d: "dd.mm.yy" }, month: { currentText: 'Aktueller Monat' }, date: { close: 'schließen', clear: 'Löschen', prevText: 'Zurück', nextText: 'Vor', currentText: 'Heute', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], weekHeader: 'KW', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: '' } }, formcfg.de || {}); formcfg.en = $.extend(true, { numberFormat: { ".": ".", ",": "," }, numberSigns: '.', dateSigns: '/', timeSigns: ":. ", dFormat: "/", patterns: { d: "mm/dd/yy" }, meridian: ['AM', 'PM'], month: { currentText: 'This month' }, date: { "closeText": "Done", clear: 'Clear', "prevText": "Prev", "nextText": "Next", "currentText": "Today", "monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"], "monthNamesShort": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], "dayNames": ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"], "dayNamesShort": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"], "dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"], "weekHeader": "Wk", "firstDay": 0, "isRTL": false, "showMonthAfterYear": false, "yearSuffix": "" } }, formcfg.en || {}); if(!formcfg['en-US']){ formcfg['en-US'] = $.extend(true, {}, formcfg['en']); } if(!formcfg['en-GB']){ formcfg['en-GB'] = $.extend(true, {}, formcfg.en, { date: {firstDay: 1}, patterns: {d: "dd/mm/yy"} }); } if(!formcfg['en-AU']){ formcfg['en-AU'] = $.extend(true, {}, formcfg['en-GB']); } if(!formcfg['']){ formcfg[''] = formcfg['en-US']; } curCfg = formcfg['']; var processLangCFG = function(langCfg){ if(!langCfg.date.monthkeys){ var create = function(i, name){ var strNum; var num = i + 1; strNum = (num < 10) ? '0'+num : ''+num; langCfg.date.monthkeys[num] = strNum; langCfg.date.monthkeys[name] = strNum; langCfg.date.monthkeys[name.toLowerCase()] = strNum; }; langCfg.date.monthkeys = {}; langCfg.date.monthDigits = monthDigits; langCfg.numberSigns += '-'; if(langCfg.meridian){ langCfg.timeSigns += langCfg.meridian[0] + langCfg.meridian[1]; } $.each(langCfg.date.monthNames, create); $.each(langCfg.date.monthNamesShort, create); } if(!langCfg.colorSigns){ langCfg.colorSigns = '#abcdefABCDEF'; } if(!langCfg['datetime-localSigns']){ langCfg['datetime-localSigns'] = langCfg.dateSigns+langCfg.timeSigns; } }; var triggerLocaleChange = function(){ processLangCFG(curCfg); $(document).triggerHandler('wslocalechange'); }; triggerLocaleChange(); webshims.activeLang({ register: 'form-core', callback: function(){ $.each(arguments, function(i, val){ if(formcfg[val]){ if(formcfg[val] != curCfg){ curCfg = formcfg[val]; triggerLocaleChange(); } return false; } }); } }); webshims.activeLang({ langObj: formcfg, module: 'form-core', callback: function(val){ if(curCfg != val){ curCfg = val; triggerLocaleChange(); } } }); })(); (function(){ var mousePress = function(e){ $(this)[e.type == 'mousepressstart' ? 'addClass' : 'removeClass']('mousepress-ui'); }; var retDefault = function(val, def){ if(!(typeof val == 'number' || (val && val == val * 1))){ return def; } return val * 1; }; var formatVal = { number: function(val){ return (val+'').replace(/\,/g, '').replace(/\./, curCfg.numberFormat['.']); }, time: function(val){ var fVal; if(val && curCfg.meridian){ val = val.split(':'); fVal = (val[0] * 1); if(fVal && fVal >= 12){ val[0] = addZero(fVal - 12+''); fVal = 1; } else { fVal = 0; } val = $.trim(val.join(':')) + ' '+ curCfg.meridian[fVal]; } return val; }, 'datetime-local': function(val, o){ var fVal = $.trim(val || '').split('T'); if(fVal.length == 2){ val = this.date(fVal[0], o) +' '+this.time(fVal[1], o); } return val; }, // week: function(val){ // return val; // }, //todo empty val for month/split month: function(val, options){ var names; var p = val.split('-'); if(p[0] && p[1]){ names = curCfg.date[options.formatMonthNames] || curCfg.date[options.monthNames] || curCfg.date.monthNames; p[1] = names[(p[1] * 1) - 1]; if(options && options.splitInput){ val = [p[0] || '', p[1] || '']; } else if(p[1]){ val = curCfg.date.showMonthAfterYear ? p.join(' ') : p[1]+' '+p[0]; } } else if(options && options.splitInput){ val = [p[0] || '', p[1] || '']; } return val; }, date: function(val, opts){ var p = (val+'').split('-'); if(p[2] && p[1] && p[0]){ if(opts && opts.splitInput){ val = p; } else { val = curCfg.patterns.d.replace('yy', p[0] || ''); val = val.replace('mm', p[1] || ''); val = val.replace('dd', p[2] || ''); } } else if(opts && opts.splitInput){ val = [p[0] || '', p[1] || '', p[2] || '']; } return val; }, color: function(val, opts){ var ret = '#000000'; if(val){ val = val.toLowerCase(); if(val.length == 7 && createHelper('color').isValid(val)) { ret = val; } } return ret; } }; var parseVal = { number: function(val){ return (val+'').replace(curCfg.numberFormat[','], '').replace(curCfg.numberFormat['.'], '.'); }, // week: function(val){ // return val; // }, 'datetime-local': function(val, o){ var tmp; var fVal = $.trim(val || '').split(/\s+/); if(fVal.length == 2){ if(fVal[0].indexOf(':') != -1 && fVal[1].indexOf(':') == -1){ tmp = fVal[1]; fVal[1] = fVal[0]; fVal[0] = tmp; } val = this.date(fVal[0], o) +'T'+ this.time(fVal[1], o); } else if (fVal.length == 3) { val = this.date(fVal[0], o) +'T'+ this.time(fVal[1]+fVal[2], o); } return val; }, time: function(val){ var fVal; if(val && curCfg.meridian){ if(val.indexOf(curCfg.meridian[1]) != -1){ val = val.split(':'); fVal = (val[0] * 1); if(!isNaN(fVal)){ val[0] = fVal + 12; } val = val.join(':'); } val = $.trim(val.replace(curCfg.meridian[0], '').replace(curCfg.meridian[1], '')); } return val; }, month: function(val, opts, noCorrect){ var p = (!opts.splitInput) ? val.trim().split(/[\.\s-\/\\]+/) : val; if(p.length == 2 && p[0] && p[1]){ p[0] = !noCorrect && curCfg.date.monthkeys[p[0]] || p[0]; p[1] = !noCorrect && curCfg.date.monthkeys[p[1]] || p[1]; if(p[1].length == 2 && p[0].length > 3){ val = p[0]+'-'+p[1]; } else if(p[0].length == 2 && p[1].length > 3){ val = p[1]+'-'+p[0]; } else { val = ''; } } else if(opts.splitInput) { val = ''; } return val; }, date: function(val, opts, noCorrect){ createFormat('d'); var i; var obj; if(opts.splitInput){ obj = {yy: 0, mm: 1, dd: 2}; } else { obj = curCfg.patterns.dObj; val = val.split(curCfg.dFormat); } return (val.length == 3 && val[0] && val[1] && val[2] && (!noCorrect || (val[obj.yy].length > 3 && val[obj.mm].length == 2 && val[obj.dd].length == 2))) ? ([addZero(val[obj.yy]), addZero(val[obj.mm]), addZero(val[obj.dd])]).join('-') : '' ; }, color: function(val, opts){ var ret = '#000000'; if(val){ val = val.toLowerCase(); if (val.indexOf('#') !== 0) { val = '#' + val; } if(val.length == 4){ val = '#' + val.charAt(1) + val.charAt(1) + val.charAt(2) + val.charAt(2) + val.charAt(3) + val.charAt(3); } if(val.length == 7 && createHelper('color').isValid(val)) { ret = val; } } return ret; } }; var placeholderFormat = { date: function(val, opts){ var hintValue = (val || '').split('-'); if(hintValue.length == 3){ hintValue = opts.splitInput ? hintValue : curCfg.patterns.d.replace('yy', hintValue[0]).replace('mm', hintValue[1]).replace('dd', hintValue[2]); } else { hintValue = opts.splitInput ? [val, val, val] : val; } return hintValue; }, month: function(val, opts){ var hintValue = (val || '').split('-'); if(hintValue.length == 2){ hintValue = opts.splitInput ? hintValue : curCfg.patterns.d.replace('yy', hintValue[0]).replace('mm', hintValue[1]); } else { hintValue = opts.splitInput ? [val, val] : val; } return hintValue; } }; var createHelper = (function(){ var types = {}; return function(type){ var input; if(!types[type]){ input = $(''); types[type] = { asNumber: function(val){ var type = (typeof val == 'object') ? 'valueAsDate' : 'value'; return input.prop(type, val).prop('valueAsNumber'); }, asValue: function(val){ var type = (typeof val == 'object') ? 'valueAsDate' : 'valueAsNumber'; return input.prop(type, val).prop('value'); }, isValid: function(val, attrs){ if(attrs && (attrs.nodeName || attrs.jquery)){ attrs = { min: $(attrs).prop('min') || '', max: $(attrs).prop('max') || '', step: $(attrs).prop('step') || 'any' }; } attrs = $.extend({step: 'any', min: '', max: ''}, attrs || {}); return input.attr(attrs).prop('value', val).is(':valid') && input.prop('value') == val; } }; } return types[type]; }; })(); steps.range = steps.number; var wsWidgetProto = { _create: function(){ var i, that, timedMirror; var o = this.options; var createOpts = this.createOpts; this.type = o.type; this.orig = o.orig; this.buttonWrapper = $('').insertAfter(this.element); this.options.containerElements.push(this.buttonWrapper[0]); o.mirrorValidity = o.mirrorValidity && this.orig && Modernizr.formvalidation && !webshims.bugs.bustedValidity; if(o.splitInput && this._addSplitInputs){ if(o.monthSelect){ this.element.addClass('ws-month-select'); } this._addSplitInputs(); } else { this.inputElements = this.element; } if( steps[this.type] && typeof steps[this.type].start == 'object'){ steps[this.type].start = this.asNumber(steps[this.type].start); } if(!webshims.picker[this.type]){ o.buttonOnly = false; } for(i = 0; i < createOpts.length; i++){ if(o[createOpts[i]] != null){ this[createOpts[i]](o[createOpts[i]], o[createOpts[i]]); } } if(this.type == 'color'){ this.inputElements.prop('maxLength', 7); } this.addBindings(); $(this.element).data('wsWidget'+o.type, this); if(o.buttonOnly){ this.inputElements.prop({readOnly: true}); } this._init = true; if(o.mirrorValidity){ that = this; timedMirror = function(){ clearTimeout(timedMirror._timerDealy); timedMirror._timerDealy = setTimeout(timedMirror._wsexec, 9); }; timedMirror._wsexec = function(){ clearTimeout(timedMirror._timerDealy); that.mirrorValidity(true); }; timedMirror(); $(this.orig).on('change input', function(e){ if(e.type == 'input'){ timedMirror(); } else { timedMirror._wsexec(); } }); } }, mirrorValidity: function(_noTest){ // if(this._init && this.options.mirrorValidity){ if(!_noTest){ $.prop(this.orig, 'validity'); } var message = $(this.orig).getErrorMessage(); if(message !== this.lastErrorMessage){ this.inputElements.prop('setCustomValidity', function(i, val){ if(val._supvalue){ val._supvalue.call(this, message); } }); this.lastErrorMessage = message; } } }, addBindings: function(){ var isFocused; var that = this; var o = this.options; var eventTimer = (function(){ var events = {}; return { init: function(name, curVal, fn){ if(!events[name]){ events[name] = {fn: fn}; $(that.orig).on(name, function(){ events[name].val = $.prop(that.orig, 'value'); }); } events[name].val = curVal; }, call: function(name, val){ if(events[name] && events[name].val != val){ clearTimeout(events[name].timer); events[name].val = val; events[name].timer = setTimeout(function(){ events[name].fn(val, that); }, 9); } } }; })(); var initChangeEvents = function(){ eventTimer.init('input', $.prop(that.orig, 'value'), that.options.input); eventTimer.init('change', $.prop(that.orig, 'value'), that.options.change); }; var step = {}; var preventBlur = function(e){ if(preventBlur.prevent){ e.preventDefault(); (isFocused || that.element.getShadowFocusElement()).focus(); stopPropagation(e); return true; } }; var callSplitChange = (function(){ var timer; var call = function(e){ var val; clearTimeout(timer); val = that.parseValue(); if(that.type == 'color'){ that.inputElements.val(val); } $.prop(that.orig, 'value', val); eventTimer.call('input', val); if(!e || e.type != 'wsupdatevalue'){ eventTimer.call('change', val); } }; var onFocus = function(){ clearTimeout(timer); }; var onBlur = function(e){ clearTimeout(timer); timer = setTimeout(call, 0); if(e.type == 'change'){ stopPropagation(e); if(!o.splitInput){ call(); } } }; that.element.on('wsupdatevalue', call); that.inputElements .add(that.buttonWrapper) .add(that.element) .on( { 'focus focusin': onFocus, 'blur focusout change': onBlur } ) ; setTimeout(function(){ if(that.popover){ that.popover.element.on('wspopoverhide', onBlur); $('> *', that.popover.element) .on({ 'focusin': onFocus, 'focusout': onBlur }) ; } }, 0); })(); var spinEvents = {}; var spinElement = o.splitInput ? this.inputElements.filter('.ws-spin') : this.inputElements.eq(0); var elementEvts = { blur: function(e){ if(!preventBlur(e) && !o.disabled && !o.readonly){ if(!preventBlur.prevent){ isFocused = false; } } stopPropagation(e); }, focus: function(e){ if(!isFocused){ initChangeEvents(); isFocused = this; } }, keypress: function(e){ if(e.isDefaultPrevented()){return;} var chr; var stepped = true; var code = e.keyCode; if(!e.ctrlKey && !e.metaKey && curCfg[that.type+'Signs']){ chr = String.fromCharCode(e.charCode == null ? code : e.charCode); stepped = !(chr < " " || (curCfg[that.type+'Signs']+'0123456789').indexOf(chr) > -1); } else { stepped = false; } if(stepped){ e.preventDefault(); } }, input: (this.type == 'color' && this.isValid) ? $.noop : (function(){ var timer; var check = function(){ var val = that.parseValue(true); if(val && that.isValid(val)){ that.setInput(val); } }; return function(){ clearTimeout(timer); timer = setTimeout(check, 200); }; })(), 'input keydown keypress': (function(){ var timer; var isStopped = false; var releaseTab = function(){ if(isStopped === true){ isStopped = 'semi'; timer = setTimeout(releaseTab, 250); } else { isStopped = false; } }; var stopTab = function(){ isStopped = true; clearTimeout(timer); timer = setTimeout(releaseTab, 300); }; var select = function(){ var elem = this; setTimeout(function(){ elem.focus(); elem.select(); }, 4); stopTab(); }; return function(e){ if(o.splitInput && o.jumpInputs){ if(e.type == 'input'){ if($.prop(this, 'value').length === $.prop(this, 'maxLength')){ try { $(this) .next() .next('input, select') .each(select) ; } catch(er){} } } else if(!e.shiftKey && !e.crtlKey && e.keyCode == 9 && (isStopped === true || (isStopped && !$.prop(this, 'value')))){ e.preventDefault(); } } }; })() }; var mouseDownInit = function(){ if(!o.disabled && !isFocused){ that.element.getShadowFocusElement().focus(); } preventBlur.set(); return false; }; preventBlur.set = (function(){ var timer; var reset = function(){ preventBlur.prevent = false; }; return function(){ clearTimeout(timer); preventBlur.prevent = true; setTimeout(reset, 9); }; })(); this.buttonWrapper.on('mousedown', mouseDownInit); this.setInput = function(value){ that.value(value); eventTimer.call('input', value); }; this.setChange = function(value){ that.setInput(value); eventTimer.call('change', value); }; this.inputElements.on(elementEvts); if(steps[this.type]){ ['stepUp', 'stepDown'].forEach(function(name){ step[name] = function(factor){ if(!o.disabled && !o.readonly){ if(!isFocused){ mouseDownInit(); } var ret = false; if (!factor) { factor = 1; } try { that.elemHelper[name](factor); ret = that.elemHelper.prop('value'); that.value(ret); eventTimer.call('input', ret); } catch (er) {} return ret; } }; }); if(!o.noSpinbtn){ spinEvents[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){ if(delta && isFocused && !o.disabled){ step[delta > 0 ? 'stepUp' : 'stepDown'](); e.preventDefault(); } }; spinEvents.keydown = function(e){ if(o.list || e.isDefaultPrevented() || (e.altKey && e.keyCode == 40) || $.attr(this, 'list')){return;} var stepped = true; var code = e.keyCode; if (code == 38) { step.stepUp(); } else if (code == 40) { step.stepDown(); } else { stepped = false; } if(stepped){ e.preventDefault(); } }; spinElement.attr({'autocomplete': 'off', role: 'spinbutton'}).on(spinEvents); } $(this.buttonWrapper) .on('mousepressstart mousepressend', '.step-up, .step-down', mousePress) .on('mousedown mousepress', '.step-up', function(e){ step.stepUp(); }) .on('mousedown mousepress', '.step-down', function(e){ step.stepDown(); }) ; } if(this.type != 'color'){ (function(){ var localeChange ; if(!o.splitInput){ localeChange = function(){ if(o.value){ that.value(o.value, true); } if(placeholderFormat[that.type] && o.placeholder){ that.placeholder(o.placeholder); } }; } else { localeChange = function(){ that.reorderInputs(); }; that.reorderInputs(); } $(that.orig).onWSOff('wslocalechange', localeChange); })(); } initChangeEvents(); }, value: function(val, force){ if(!this._init || force || val !== this.options.value){ this.element.val(this.formatValue(val)); this.options.value = val; this._propertyChange('value'); this.mirrorValidity(); } }, required: function(val, boolVal){ this.inputElements.attr({'aria-required': ''+boolVal}); this.mirrorValidity(); }, parseValue: function(noCorrect){ var value = this.inputElements.map(function(){ return $.prop(this, 'value'); }).get(); if(!this.options.splitInput){ value = value[0]; } return parseVal[this.type](value, this.options, noCorrect); }, formatValue: function(val, noSplit){ return formatVal[this.type](val, noSplit === false ? false : this.options); }, createOpts: ['readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'], placeholder: function(val){ var options = this.options; options.placeholder = val; var placeholder = val; if(placeholderFormat[this.type]){ placeholder = placeholderFormat[this.type](val, this.options); } if(options.splitInput && typeof placeholder == 'object'){ $.each(this.splits, function(i, elem){ $.prop(elem, 'placeholder', placeholder[i]); }); } else { this.element.prop('placeholder', placeholder); } }, initDataList: function(){ var listTimer; var that = this; var updateList = function(){ $(that.orig) .jProp('list') .off('updateDatalist', updateList) .on('updateDatalist', updateList) ; clearTimeout(listTimer); listTimer = setTimeout(function(){ if(that.list){ that.list(); } }, 9); }; $(this.orig).onTrigger('listdatalistchange', updateList); }, getOptions: function(){ var options = {}; var datalist = $(this.orig).jProp('list'); datalist.find('option').each(function(){ options[$.prop(this, 'value')] = $.prop(this, 'label'); }); return [options, datalist.data('label')]; }, list: function(val){ if(this.type == 'number'){ this.element.attr('list', $.attr(this.orig, 'list')); } this.options.list = val; this._propertyChange('list'); }, _propertyChange: $.noop, tabindex: function(val){ this.options.tabindex = val; this.inputElements.prop('tabindex', this.options.tabindex); $('button', this.buttonWrapper).prop('tabindex', this.options.tabindex); }, title: function(val){ if(!val && this.orig && $.attr(this.orig, 'title') == null){ val = null; } this.options.title = val; if(val == null){ this.inputElements.removeAttr('title'); } else { this.inputElements.prop('title', this.options.title); } } }; ['readonly', 'disabled'].forEach(function(name){ var isDisabled = name == 'disabled'; wsWidgetProto[name] = function(val, boolVal){ var options = this.options; if(options[name] != boolVal || !this._init){ options[name] = !!boolVal; if(!isDisabled && options.buttonOnly){ this.inputElements.attr({'aria-readonly': options[name]}); } else { this.inputElements.prop(name, options[name]); } this.buttonWrapper[options[name] ? 'addClass' : 'removeClass']('ws-'+name); if(isDisabled){ $('button', this.buttonWrapper).prop('disabled', options[name]); } } }; }); var spinBtnProto = $.extend({}, wsWidgetProto, { _create: function(){ var o = this.options; var helper = createHelper(o.type); this.elemHelper = $(''); this.asNumber = helper.asNumber; this.asValue = helper.asValue; this.isValid = helper.isValid; wsWidgetProto._create.apply(this, arguments); this._init = false; this.buttonWrapper.html(''); if(this.type == 'number'){ this.inputElements.attr('inputmode', 'numeric'); } if(!o.min && typeof o.relMin == 'number'){ o.min = this.asValue(this.getRelNumber(o.relMin)); $.prop(this.orig, 'min', o.min); } if(!o.max && typeof o.relMax == 'number'){ o.max = this.asValue(this.getRelNumber(o.relMax)); $.prop(this.orig, 'max', o.max); } this._init = true; }, createOpts: ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'], _addSplitInputs: function(){ if(!this.inputElements){ var create = splitInputs[this.type]._create(this.options); this.splits = create.splits; this.inputElements = $(create.elements).prependTo(this.element).filter('input, select'); } }, getRelNumber: function(rel){ var start = steps[this.type].start || 0; if(rel){ start += rel; } return start; }, addZero: addZero, _setStartInRange: function(){ var start = this.getRelNumber(this.options.relDefaultValue); if(!isNaN(this.minAsNumber) && start < this.minAsNumber){ start = this.minAsNumber; } else if(!isNaN(this.maxAsNumber) && start > this.maxAsNumber){ start = this.maxAsNumber; } this.elemHelper.prop('valueAsNumber', start); this.options.defValue = this.elemHelper.prop('value'); }, reorderInputs: function(){ if(splitInputs[this.type]){ var element = this.element; splitInputs[this.type].sort(element, this.options); setTimeout(function(){ var data = webshims.data(element); if(data && data.shadowData){ data.shadowData.shadowFocusElement = element.find('input, select')[0] || element[0]; } }, 9); } }, value: function(val, force){ if(!this._init || force || this.options.value !== val){ this.valueAsNumber = this.asNumber(val); this.options.value = val; if(isNaN(this.valueAsNumber) || (!isNaN(this.minAsNumber) && this.valueAsNumber < this.minAsNumber) || (!isNaN(this.maxAsNumber) && this.valueAsNumber > this.maxAsNumber)){ this._setStartInRange(); } else { this.elemHelper.prop('value', val); this.options.defValue = ""; } val = formatVal[this.type](val, this.options); if(this.options.splitInput){ $.each(this.splits, function(i, elem){ $.prop(elem, 'value', val[i]); }); } else { this.element.prop('value', val); } this._propertyChange('value'); this.mirrorValidity(); } }, step: function(val){ var defStep = steps[this.type]; this.options.step = val; this.elemHelper.prop('step', retDefault(val, defStep.step)); this.mirrorValidity(); } }); $.each({min: 1, max: -1}, function(name, factor){ var numName = name +'AsNumber'; spinBtnProto[name] = function(val){ this.elemHelper.prop(name, val); this[numName] = this.asNumber(val); if(this.valueAsNumber != null && (isNaN(this.valueAsNumber) || (!isNaN(this[numName]) && (this.valueAsNumber * factor) < (this[numName] * factor)))){ this._setStartInRange(); } this.options[name] = val; this._propertyChange(name); this.mirrorValidity(); }; }); $.fn.wsBaseWidget = function(opts){ opts = $.extend({}, opts); return this.each(function(){ $.webshims.objectCreate(wsWidgetProto, { element: { value: $(this) } }, opts); }); }; $.fn.spinbtnUI = function(opts){ opts = $.extend({ monthNames: 'monthNames', size: 1, startView: 0 }, opts); return this.each(function(){ $.webshims.objectCreate(spinBtnProto, { element: { value: $(this) } }, opts); }); }; })(); (function(){ var picker = {}; var loadPicker = function(type, name){ type = (type == 'color' ? 'color' : 'forms')+'-picker'; if(!loadPicker[name+'Loaded'+type]){ loadPicker[name+'Loaded'+type] = true; webshims.ready(name, function(){ webshims.loader.loadList([type]); }); } return type; }; options.addZero = addZero; webshims.loader.addModule('forms-picker', { noAutoCallback: true, options: options }); webshims.loader.addModule('color-picker', { noAutoCallback: true, css: 'jpicker/jpicker.css', options: options }); webshims.inlinePopover = { _create: function(){ this.element = $('
').data('wspopover', this); this.contentElement = $('.ws-po-box', this.element); this.element.insertAfter(this.options.prepareFor); }, show: $.noop, hide: $.noop, preventBlur: $.noop, isVisible: true }; picker._genericSetFocus = function(element, _noFocus){ element = $(element || this.activeButton); if(!this.popover.openedByFocus && !_noFocus){ var that = this; var setFocus = function(noTrigger){ clearTimeout(that.timer); that.timer = setTimeout(function(){ if(element[0]){ element[0].focus(); if(noTrigger !== true && !element.is(':focus')){ setFocus(true); } } }, that.popover.isVisible ? 99 : 360); }; this.popover.activateElement(element); setFocus(); } }; picker._actions = { changeInput: function(val, popover, data){ if(!data.options.noChangeDismiss){ picker._actions.cancel(val, popover, data); } data.setChange(val); }, cancel: function(val, popover, data){ if(!data.options.inlinePicker){ popover.stopOpen = true; data.element.getShadowFocusElement().focus(); setTimeout(function(){ popover.stopOpen = false; }, 9); popover.hide(); } } }; picker.commonInit = function(data, popover){ var tabbable; popover.isDirty = true; popover.element.on('updatepickercontent pickerchange', function(){ tabbable = false; }); if(!data.options.inlinePicker){ popover.contentElement.on({ keydown: function(e){ if(e.keyCode == 9){ if(!tabbable){ tabbable = $('input:not(:disabled), [tabindex="0"]:not(:disabled)', this).filter(':visible'); } var index = tabbable.index(e.target); if(e.shiftKey && index <= 0){ tabbable.last().focus(); return false; } if(!e.shiftKey && index >= tabbable.length - 1){ tabbable.first().focus(); return false; } } else if(e.keyCode == 27){ data.element.getShadowFocusElement().focus(); popover.hide(); return false; } } }); } data._propertyChange = (function(){ var timer; var update = function(){ if(popover.isVisible){ popover.element.triggerHandler('updatepickercontent'); } }; return function(prop){ if(prop == 'value' && !data.options.inlinePicker){return;} popover.isDirty = true; if(popover.isVisible){ clearTimeout(timer); timer = setTimeout(update, 9); } }; })(); popover.activeElement = $([]); popover.activateElement = function(element){ element = $(element); if(element[0] != popover.activeElement[0]){ popover.activeElement.removeClass('ws-focus'); element.addClass('ws-focus'); } popover.activeElement = element; }; popover.element.on({ wspopoverbeforeshow: function(){ data.element.triggerHandler('wsupdatevalue'); popover.element.triggerHandler('updatepickercontent'); } }); $(data.orig).on('remove', function(e){ if(!e.originalEvent){ $(document).off('wslocalechange', data._propertyChange); } }); }; picker._common = function(data){ var options = data.options; var popover = webshims.objectCreate(options.inlinePicker ? webshims.inlinePopover : webshims.wsPopover, {}, {prepareFor: options.inlinePicker ? data.buttonWrapper : data.element, position: options.widgetPosition}); var opener = $('').appendTo(data.buttonWrapper); var showPickerContent = function(){ (picker[data.type].showPickerContent || picker.showPickerContent)(data, popover); }; var show = function(){ var type = loadPicker(data.type, 'DOM'); if(!options.disabled && !options.readonly && (options.inlinePicker || !popover.isVisible)){ webshims.ready(type, showPickerContent); popover.show(data.element); } }; var open = function(){ if((options.inlinePicker || popover.isVisible) && popover.activeElement){ popover.openedByFocus = false; popover.activeElement.focus(); } show(); }; options.containerElements.push(popover.element[0]); if(data.type != 'color'){ if(options.yearButtons){ options.startView = 2; } if(!options.startView){ options.startView = 0; } if(data.type == 'time'){ options.minView = 3; options.startView = 3; } if(!options.minView){ options.minView = 0; } if(options.startView < options.minView){ options.startView = options.minView; webshims.warn("wrong config for minView/startView."); } if(!options.size){ options.size = 1; } } popover.element .addClass(data.type+'-popover input-picker') .attr({role: 'application'}) .on({ wspopoverhide: function(){ popover.openedByFocus = false; }, focusin: function(e){ if(popover.activateElement){ popover.openedByFocus = false; popover.activateElement(e.target); } }, focusout: function(){ if(popover.activeElement){ popover.activeElement.removeClass('ws-focus'); } if(options.inlinePicker){ popover.openedByFocus = true; } } }) ; labelWidth(popover.element.children('div.ws-po-outerbox').attr({role: 'group'}), options.labels, true); labelWidth(opener, options.labels, true); if(options.tabindex != null){ opener.attr({tabindex: options.tabindex}); } if(options.disabled){ opener.prop({disabled: true}); } opener.on({click: open}); if(options.inlinePicker){ popover.openedByFocus = true; } else { opener .on({ mousedown: function(){ stopPropagation.apply(this, arguments); popover.preventBlur(); }, focus: function(){ popover.preventBlur(); } }) ; (function(){ var mouseFocus = false; var resetMouseFocus = function(){ mouseFocus = false; }; data.inputElements.on({ keydown: function(e){ if(e.keyCode == 40 && e.altKey){ open(); } }, focus: function(){ if(!popover.stopOpen && (options.buttonOnly || options.openOnFocus || (mouseFocus && options.openOnMouseFocus))){ popover.openedByFocus = options.buttonOnly ? false : !options.noInput; show(); } else { popover.preventBlur(); } }, mousedown: function(){ mouseFocus = true; setTimeout(resetMouseFocus, 9); if(options.buttonOnly && popover.isVisible && popover.activeElement){ popover.openedByFocus = false; setTimeout(function(){ popover.openedByFocus = false; popover.activeElement.focus(); }, 4); } if(data.element.is(':focus')){ popover.openedByFocus = options.buttonOnly ? false : !options.noInput; show(); } popover.preventBlur(); } }); })(); } data.popover = popover; data.opener = opener; $(data.orig).on('remove', function(e){ if(!e.originalEvent){ setTimeout(function(){ opener.remove(); popover.element.remove(); }, 4); } }); if(options.inlinePicker){ show(); } loadPicker(data.type, 'WINDOWLOAD'); }; picker.month = picker._common; picker.date = picker._common; picker.time = picker._common; picker['datetime-local'] = picker._common; // picker.week = picker._common; picker.color = function(data){ var ret = picker._common.apply(this, arguments); var alpha = $(data.orig).data('alphacontrol'); var colorIndicator = data.opener .prepend('') .find('.ws-color-indicator') ; var showColor = function(){ colorIndicator.css({backgroundColor: $.prop(this, 'value') || '#000'}) }; var showOpacity = (function(){ var timer; var show = function(){ try { var value = data.alpha.prop('valueAsNumber') / (data.alpha.prop('max') || 1); if(!isNaN(value)){ colorIndicator.css({opacity: value}); } } catch(er){} }; return function(e){ clearTimeout(timer); timer = setTimeout(show, !e || e.type == 'change' ? 4: 40); }; })(); data.alpha = (alpha) ? $('#'+alpha) : $([]); $(data.orig).on('wsupdatevalue change', showColor).each(showColor); data.alpha.on('wsupdatevalue change input', showOpacity).each(showOpacity); return ret; }; webshims.picker = picker; })(); (function(){ var stopCircular, isCheckValidity; var modernizrInputTypes = Modernizr.inputtypes; var inputTypes = { }; var copyProps = [ 'disabled', 'readonly', 'value', 'min', 'max', 'step', 'title', 'required', 'placeholder' ]; // var copyAttrs = ['data-placeholder', 'tabindex']; $.each(copyProps.concat(copyAttrs), function(i, name){ var fnName = name.replace(/^data\-/, ''); webshims.onNodeNamesPropertyModify('input', name, function(val, boolVal){ if(!stopCircular){ var shadowData = webshims.data(this, 'shadowData'); if(shadowData && shadowData.data && shadowData.nativeElement === this && shadowData.data[fnName]){ shadowData.data[fnName](val, boolVal); } } }); }); if(options.replaceUI && 'valueAsNumber' in document.createElement('input')){ var reflectFn = function(val){ if(webshims.data(this, 'hasShadow')){ $.prop(this, 'value', $.prop(this, 'value')); } }; webshims.onNodeNamesPropertyModify('input', 'valueAsNumber', reflectFn); webshims.onNodeNamesPropertyModify('input', 'valueAsDate', reflectFn); } var extendType = (function(){ return function(name, data){ inputTypes[name] = data; data.attrs = $.merge([], copyAttrs, data.attrs); data.props = $.merge([], copyProps, data.props); }; })(); var isVisible = function(){ return $.css(this, 'display') != 'none'; }; var sizeInput = function(data){ var init; var updateStyles = function(){ $(data.orig).removeClass('ws-important-hide'); $.style( data.orig, 'display', '' ); var hasButtons, marginR, marginL; var correctWidth = 0.6; if(!init || data.orig.offsetWidth){ hasButtons = data.buttonWrapper && data.buttonWrapper.filter(isVisible).length; marginR = $.css( data.orig, 'marginRight'); data.element.css({ marginLeft: $.css( data.orig, 'marginLeft'), marginRight: hasButtons ? 0 : marginR }); if(hasButtons){ marginL = (parseInt(data.buttonWrapper.css('marginLeft'), 10) || 0); data.element.css({paddingRight: ''}); if(marginL < 0){ marginR = (parseInt(marginR, 10) || 0) + ((data.buttonWrapper.outerWidth() + marginL) * -1); data.buttonWrapper.css('marginRight', marginR); data.element .css({paddingRight: ''}) .css({ paddingRight: (parseInt( data.element.css('paddingRight'), 10) || 0) + data.buttonWrapper.outerWidth() }) ; } else { data.buttonWrapper.css('marginRight', marginR); correctWidth = data.buttonWrapper.outerWidth(true) + 0.6; } } data.element.outerWidth( $(data.orig).outerWidth() - correctWidth ); } init = true; $(data.orig).addClass('ws-important-hide'); }; data.element.onWSOff('updateshadowdom', updateStyles, true); }; var implementType = function(){ var type = $.prop(this, 'type'); var i, opts, data, optsName, labels; if(inputTypes[type] && webshims.implement(this, 'inputwidgets')){ data = {}; optsName = type; //todo: do we need deep extend? labels = $(this).jProp('labels'); opts = $.extend({}, options.widgets, options[type], $($.prop(this, 'form')).data(type) || {}, $(this).data(type) || {}, { orig: this, type: type, labels: labels, options: {}, input: function(val){ opts._change(val, 'input'); }, change: function(val){ opts._change(val, 'change'); }, _change: function(val, trigger){ stopCircular = true; $.prop(opts.orig, 'value', val); stopCircular = false; if(trigger){ $(opts.orig).trigger(trigger); } }, containerElements: [] }); for(i = 0; i < copyProps.length; i++){ opts[copyProps[i]] = $.prop(this, copyProps[i]); } for(i = 0; i < copyAttrs.length; i++){ optsName = copyAttrs[i].replace(/^data\-/, ''); if(optsName == 'placeholder' || !opts[optsName]){ opts[optsName] = $.attr(this, copyAttrs[i]) || opts[optsName]; } } if(opts.monthSelect){ opts.onlyMonthDigits = true; } if(opts.onlyMonthDigits){ opts.formatMonthNames = 'monthDigits'; } data.shim = inputTypes[type]._create(opts); webshims.addShadowDom(this, data.shim.element, { data: data.shim || {} }); data.shim.options.containerElements.push(data.shim.element[0]); labelWidth($(this).getShadowFocusElement(), labels); $(this).on('change', function(e){ if(!stopCircular){ data.shim.value($.prop(this, 'value')); } }); (function(){ var has = { focusin: true, focus: true }; var timer; var hasFocusTriggered = false; var hasFocus = false; $(data.shim.options.containerElements) .on({ 'focusin focus focusout blur': function(e){ e.stopImmediatePropagation(); hasFocus = has[e.type]; clearTimeout(timer); timer = setTimeout(function(){ if(hasFocus != hasFocusTriggered){ hasFocusTriggered = hasFocus; $(opts.orig).triggerHandler(hasFocus ? 'focus' : 'blur'); $(opts.orig).trigger(hasFocus ? 'focusin' : 'focusout'); } hasFocusTriggered = hasFocus; }, 0); } }) ; })(); data.shim.element.on('change input', stopPropagation); if(Modernizr.formvalidation){ $(opts.orig).on('firstinvalid', function(e){ if(!webshims.fromSubmit && isCheckValidity){return;} $(opts.orig).off('invalid.replacedwidgetbubble').on('invalid.replacedwidgetbubble', function(evt){ if(!e.isInvalidUIPrevented() && !evt.isDefaultPrevented()){ webshims.validityAlert.showFor( e.target ); e.preventDefault(); evt.preventDefault(); } $(opts.orig).off('invalid.replacedwidgetbubble'); }); }); } if(data.shim.buttonWrapper && data.shim.buttonWrapper.filter(isVisible).length){ data.shim.element.addClass('has-input-buttons'); } data.shim.element.addClass($.prop(this, 'className')); if(opts.calculateWidth){ sizeInput(data.shim); } else { $(this).addClass('ws-important-hide'); } } }; if(Modernizr.formvalidation){ ['input', 'form'].forEach(function(name){ var desc = webshims.defineNodeNameProperty(name, 'checkValidity', { prop: { value: function(){ isCheckValidity = true; var ret = desc.prop._supvalue.apply(this, arguments); isCheckValidity = false; return ret; } } }); }); } if(!modernizrInputTypes.range || options.replaceUI){ extendType('range', { _create: function(opts, set){ var data = $('').insertAfter(opts.orig).rangeUI(opts).data('rangeUi'); return data; } }); } var isStupid = modernizrInputTypes.number && navigator.userAgent.indexOf('Touch') == -1 && ((/MSIE 1[0|1]\.\d/.test(navigator.userAgent)) || (/Trident\/7\.0/.test(navigator.userAgent))); ['number', 'time', 'month', 'date', 'color', 'datetime-local'].forEach(function(name){ if(!modernizrInputTypes[name] || options.replaceUI || (name == 'number' && isStupid)){ extendType(name, { _create: function(opts, set){ if(opts.monthSelect){ opts.splitInput = true; } if(opts.splitInput && !splitInputs[name]){ webshims.warn('splitInput not supported for '+ name); opts.splitInput = false; } var markup = opts.splitInput ? '' : ''; var data = $(markup).insertAfter(opts.orig); if(steps[name]){ data = data.spinbtnUI(opts).data('wsWidget'+name); } else { data = data.wsBaseWidget(opts).data('wsWidget'+name); } if(webshims.picker && webshims.picker[name]){ webshims.picker[name](data); } data.buttonWrapper.addClass('input-button-size-'+(data.buttonWrapper.children().filter(isVisible).length)); return data; } }); } }); webshims.addReady(function(context, contextElem){ $('input', context) .add(contextElem.filter('input')) .each(implementType) ; }); })(); });