vendor/assets/javascripts/webshims/shims/combos/11.js in webshims-rails-1.10.10 vs vendor/assets/javascripts/webshims/shims/combos/11.js in webshims-rails-1.10.11

- old
+ new

@@ -496,14 +496,25 @@ })(window.webshims ? webshims.$ : jQuery); 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 = ('<option></option>')+$.map(monthDigits, function(val){ + return '<option>'+val+'</option>'; + }).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; @@ -511,22 +522,30 @@ curCfg.patterns[name+'Obj'] = obj; } }; var splitInputs = { date: { - _create: function(){ + _create: function(opts){ var obj = { - splits: [$('<input type="text" class="yy" size="4" inputmode="numeric" />')[0], $('<input type="text" class="mm" inputmode="numeric" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" inputmode="numeric" maxlength="2" size="2" />')[0]] + splits: [$('<input type="text" class="yy" size="4" inputmode="numeric" />')[0]] }; + if(opts.monthSelect){ + obj.splits.push($('<select class="mm">'+getMonthOptions()+'</select>')[0]); + } else { + obj.splits.push($('<input type="text" class="mm" inputmode="numeric" maxlength="2" size="2" />')[0]); + } + obj.splits.push($('<input type="text" class="dd ws-spin" inputmode="numeric" maxlength="2" size="2" />')[0]); + + obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1], $('<span class="ws-input-seperator" />')[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', element); + var inputs = $('input, select', element); $.each(curCfg.patterns.dObj, function(name, value){ var input = inputs.filter('.'+ name); if(input[0]){ input.appendTo(element); @@ -540,21 +559,27 @@ }, month: { _create: function(opts){ var obj = { - splits: [$('<input type="text" class="yy" inputmode="numeric" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]] + splits: [$('<input type="text" class="yy" inputmode="numeric" size="4" />')[0]] }; - if(opts.onlyMonthDigits){ - $(obj.splits[1]).attr({inputmode: 'numeric', size: 2, maxlength: 2}); + if(opts.monthSelect){ + obj.splits.push($('<select class="mm ws-spin">'+getMonthOptions()+'</select>')[0]); + } else { + obj.splits.push($('<input type="text" class="mm ws-spin" />')[0]); + if(opts.onlyMonthDigits){ + $(obj.splits[1]).attr({inputmode: 'numeric', size: 2, maxlength: 2}); + } } + obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1]]; return obj; }, sort: function(element){ var seperator = $('.ws-input-seperator', element).html(curCfg.dFormat); - var mm = $('input.mm', element); + var mm = $('input.mm, select.mm', element); var action; if(curCfg.date.showMonthAfterYear){ mm.appendTo(element); action = 'insertBefore'; } else { @@ -564,19 +589,24 @@ seperator[action](mm); } } }; - var nowDate = new Date().getTime() - (new Date().getTimezoneOffset() * 60 * 1000 ); + 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, @@ -608,11 +638,10 @@ return val.length == 1 ? '0'+val : val; }; (function(){ - var monthDigits = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']; formcfg.de = $.extend(true, { numberFormat: { ",": ".", ".": "," @@ -658,10 +687,11 @@ timeSigns: ":. ", dFormat: "/", patterns: { d: "mm/dd/yy" }, + meridian: ['AM', 'PM'], month: { currentText: 'This month' }, date: { "closeText": "Done", @@ -711,16 +741,22 @@ 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'); }; @@ -773,15 +809,35 @@ 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; }, - week: function(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]){ @@ -830,11 +886,36 @@ 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); + } + 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; @@ -931,12 +1012,20 @@ }, asValue: function(val){ var type = (typeof val == 'object') ? 'valueAsDate' : 'valueAsNumber'; return input.prop(type, val).prop('value'); }, - isValid: function(val){ - return input.prop('value', val).is(':valid') && input.prop('value') == val; + 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]; }; @@ -957,10 +1046,13 @@ 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; } @@ -1208,11 +1300,11 @@ if(e.type == 'input'){ if($.prop(this, 'value').length === $.prop(this, 'maxLength')){ try { $(this) .next() - .next('input') + .next('input, select') .each(select) ; } catch(er){} } } else if(!e.shiftKey && !e.crtlKey && e.keyCode == 9 && (isStopped === true || (isStopped && !$.prop(this, 'value')))){ @@ -1286,11 +1378,11 @@ step[delta > 0 ? 'stepUp' : 'stepDown'](); e.preventDefault(); } }; spinEvents.keydown = function(e){ - if(o.list || e.isDefaultPrevented() || $.attr(this, 'list')){return;} + 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) { @@ -1409,11 +1501,11 @@ options[$.prop(this, 'value')] = $.prop(this, 'label'); }); return [options, datalist.data('label')]; }, list: function(val){ - if(this.type == 'number' || this.type == 'time'){ + if(this.type == 'number'){ this.element.attr('list', $.attr(this.orig, 'list')); } this.options.list = val; this._propertyChange('list'); }, @@ -1492,11 +1584,11 @@ 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'); + this.inputElements = $(create.elements).prependTo(this.element).filter('input, select'); } }, getRelNumber: function(rel){ var start = steps[this.type].start || 0; @@ -1518,15 +1610,15 @@ }, reorderInputs: function(){ if(splitInputs[this.type]){ var element = this.element; - splitInputs[this.type].sort(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')[0] || element[0]; + data.shadowData.shadowFocusElement = element.find('input, select')[0] || element[0]; } }, 9); } }, value: function(val, force){ @@ -1625,12 +1717,25 @@ noAutoCallback: true, css: 'jpicker/jpicker.css', options: options }); + webshims.inlinePopover = { + _create: function(){ + this.element = $('<div class="ws-inline-picker"><div class="ws-po-box" /></div>').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(){ @@ -1651,16 +1756,18 @@ changeInput: function(val, popover, data){ picker._actions.cancel(val, popover, data); data.setChange(val); }, cancel: function(val, popover, data){ - popover.stopOpen = true; - data.element.getShadowFocusElement().focus(); - setTimeout(function(){ - popover.stopOpen = false; - }, 9); - popover.hide(); + if(!data.options.inlinePicker){ + popover.stopOpen = true; + data.element.getShadowFocusElement().focus(); + setTimeout(function(){ + popover.stopOpen = false; + }, 9); + popover.hide(); + } } }; picker.commonInit = function(data, popover){ @@ -1669,42 +1776,45 @@ popover.isDirty = true; popover.element.on('updatepickercontent pickerchange', function(){ tabbable = false; }); - 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(); + + 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; } - 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'){return;} + if(prop == 'value' && !data.options.inlinePicker){return;} popover.isDirty = true; if(popover.isVisible){ clearTimeout(timer); timer = setTimeout(update, 9); } @@ -1737,31 +1847,47 @@ }; picker._common = function(data){ var options = data.options; - var popover = webshims.objectCreate(webshims.wsPopover, {}, {prepareFor: data.element, position: options.widgetPosition}); + var popover = webshims.objectCreate(options.inlinePicker ? webshims.inlinePopover : webshims.wsPopover, {}, {prepareFor: options.inlinePicker ? data.buttonWrapper : data.element, position: options.widgetPosition}); var opener = $('<button type="button" class="ws-popover-opener"><span /></button>').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 && !popover.isVisible){ + 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; @@ -1787,10 +1913,13 @@ }, 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); @@ -1802,77 +1931,87 @@ if(options.disabled){ opener.prop({disabled: true}); } - opener - .on({ - mousedown: function(){ - stopPropagation.apply(this, arguments); - popover.preventBlur(); - }, - click: function(){ - if(popover.isVisible && popover.activeElement){ - popover.openedByFocus = false; - popover.activeElement.focus(); - } - show(); - }, - focus: function(){ - popover.preventBlur(); - } - }) - ; - (function(){ - var mouseFocus = false; - var resetMouseFocus = function(){ - mouseFocus = false; - }; - data.inputElements.on({ - focus: function(){ - if(!popover.stopOpen && (options.buttonOnly || options.openOnFocus || (mouseFocus && options.openOnMouseFocus))){ - popover.openedByFocus = options.buttonOnly ? false : !options.noInput; - show(); - } else { + 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(); } - }, - mousedown: function(){ - mouseFocus = true; - setTimeout(resetMouseFocus, 9); - if(options.buttonOnly && popover.isVisible && popover.activeElement){ - popover.openedByFocus = false; - setTimeout(function(){ + }) + ; + + (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; - popover.activeElement.focus(); - }, 4); + setTimeout(function(){ + popover.openedByFocus = false; + popover.activeElement.focus(); + }, 4); + } + if(data.element.is(':focus')){ + popover.openedByFocus = options.buttonOnly ? false : !options.noInput; + show(); + } + popover.preventBlur(); } - 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 @@ -2052,10 +2191,13 @@ 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); @@ -2157,14 +2299,17 @@ return data; } }); } - var isStupid = navigator.userAgent.indexOf('MSIE 10.0') != -1 && navigator.userAgent.indexOf('Touch') == -1; - ['number', 'time', 'month', 'date', 'color'].forEach(function(name){ + 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 ?