vendor/assets/javascripts/webshims/shims/combos/17.js in webshims-rails-1.10.3 vs vendor/assets/javascripts/webshims/shims/combos/17.js in webshims-rails-1.10.6
- old
+ new
@@ -1,9 +1,11 @@
-jQuery.webshims.register('form-number-date-api', function($, webshims, window, document, undefined){
+webshims.register('form-number-date-api', function($, webshims, window, document, undefined, options){
"use strict";
+ if(!webshims.addInputType){
+ webshims.error("you can not call forms-ext feature after calling forms feature. call both at once instead: $.webshims.polyfill('forms forms-ext')");
+ }
-
if(!webshims.getStep){
webshims.getStep = function(elem, type){
var step = $.attr(elem, 'step');
if(step === 'any'){
return step;
@@ -268,11 +270,18 @@
range: {
minDefault: 0,
maxDefault: 100
},
-
+ color: {
+ mismatch: (function(){
+ var cReg = /^\u0023[a-f0-9]{6}$/;
+ return function(val){
+ return (!val || val.length != 7 || !(cReg.test(val)));
+ };
+ })()
+ },
date: {
mismatch: function(val){
if(!val || !val.split || !(/\d$/.test(val))){return true;}
var i;
var valA = val.split(/\u002D/);
@@ -466,24 +475,26 @@
// return typeProtos.date.dateToString(date) +'T'+ typeProtos.time.dateToString(date, _getParsed);
// }
// }
};
- if(typeBugs || !supportsType('range') || !supportsType('time')){
+ if(typeBugs || !supportsType('range') || !supportsType('time') || !supportsType('month')){
typeProtos.range = $.extend({}, typeProtos.number, typeProtos.range);
typeProtos.time = $.extend({}, typeProtos.date, typeProtos.time);
typeProtos.month = $.extend({}, typeProtos.date, typeProtos.month);
// typeProtos['datetime-local'] = $.extend({}, typeProtos.date, typeProtos.time, typeProtos['datetime-local']);
}
+
+
//'datetime-local'
- ['number', 'month', 'range', 'date', 'time'].forEach(function(type){
+ ['number', 'month', 'range', 'date', 'time', 'color'].forEach(function(type){
if(typeBugs || !supportsType(type)){
webshims.addInputType(type, typeProtos[type]);
}
});
-
+
if($('<input />').prop('labels') == null){
webshims.defineNodeNamesProperty('button, input, keygen, meter, output, progress, select, textarea', 'labels', {
prop: {
get: function(){
if(this.type == 'hidden'){return null;}
@@ -549,19 +560,21 @@
var left, posDif;
var o = this.options;
var oVal = val;
var thumbStyle = {};
var rangeStyle = {};
+
if(!_noNormalize && parseFloat(val, 10) != val){
val = o.min + ((o.max - o.min) / 2);
}
if(!_noNormalize){
val = this.normalizeVal(val);
}
left = 100 * ((val - o.min) / (o.max - o.min));
+ if(this._init && val == o.value && oVal == val){return;}
this.options.value = val;
this.thumb.stop();
this.range.stop();
rangeStyle[this.dirs.width] = left+'%';
@@ -627,37 +640,46 @@
this.element.attr({'aria-valuetext': o.options[o.value] || o.value});
$('.ws-range-ticks', trail).remove();
- $(this.orig).jProp('list').find('option').each(function(){
- o.options[$.prop(this, 'value')] = $.prop(this, 'label');
+ $(this.orig).jProp('list').find('option:not([disabled])').each(function(){
+ o.options[$.prop(this, 'value')] = $.prop(this, 'label') || '';
});
$.each(o.options, function(val, label){
if(!isNumber(val) || val < min || val > max){return;}
var left = 100 * ((val - min) / (max - min));
- var title = o.showLabels ? ' title="'+ label +'"' : '';
+ var title = o.showLabels && label ? ' title="'+ label +'"' : '';
if(that.vertical){
left = Math.abs(left - 100);
}
- trail.append('<span class="ws-range-ticks"'+ title +' style="'+(that.dirs.left)+': '+left+'%;" />');
+
+ that.posCenter(
+ $('<span class="ws-range-ticks"'+ title +' data-label="'+label+'" style="'+(that.dirs.left)+': '+left+'%;" />').appendTo(trail)
+ );
});
},
readonly: function(val){
val = !!val;
this.options.readonly = val;
this.element.attr('aria-readonly', ''+val);
+ if(this._init){
+ this.updateMetrics();
+ }
},
disabled: function(val){
val = !!val;
this.options.disabled = val;
if(val){
this.element.attr({tabindex: -1, 'aria-disabled': 'true'});
} else {
this.element.attr({tabindex: this.options.tabindex, 'aria-disabled': 'false'});
}
+ if(this._init){
+ this.updateMetrics();
+ }
},
tabindex: function(val){
this.options.tabindex = val;
if(!this.options.disabled){
this.element.attr({tabindex: val});
@@ -733,10 +755,28 @@
}
}
return val;
},
+ addRemoveClass: function(cName, add){
+ var isIn = this.element.prop('className').indexOf(cName) != -1;
+ var action;
+ if(!add && isIn){
+ action = 'removeClass';
+ this.element.removeClass(cName);
+ this.updateMetrics();
+ } else if(add && !isIn){
+ action = 'addClass';
+
+ }
+ if(action){
+ this.element[action](cName);
+ if(this._init){
+ this.updateMetrics();
+ }
+ }
+ },
addBindings: function(){
var leftOffset, widgetUnits, hasFocus;
var that = this;
var o = this.options;
@@ -772,57 +812,71 @@
var val = that.getStepedValueFromPos((e[that.dirs.mouse] - leftOffset) * widgetUnits);
if(val != o.value){
that.value(val, false, animate);
eventTimer.call('input', val);
}
+ if(e && e.type == 'mousemove'){
+ e.preventDefault();
+ }
};
-
var remove = function(e){
if(e && e.type == 'mouseup'){
eventTimer.call('input', o.value);
eventTimer.call('change', o.value);
}
- that.element.removeClass('ws-active');
+ that.addRemoveClass('ws-active');
$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+ $(window).off('blur', removeWin);
};
+ var removeWin = function(e){
+ if(e.target == window){remove();}
+ };
var add = function(e){
+ var outerWidth;
e.preventDefault();
$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+ $(window).off('blur', removeWin);
if(!o.readonly && !o.disabled){
- leftOffset = that.element.focus().addClass('ws-active').offset();
- widgetUnits = that.element[that.dirs.width]();
+ that.element.focus();
+ that.addRemoveClass('ws-active', true);
+ leftOffset = that.element.focus().offset();
+ widgetUnits = that.element[that.dirs.innerWidth]();
if(!widgetUnits || !leftOffset){return;}
+ outerWidth = that.thumb[that.dirs.outerWidth]();
leftOffset = leftOffset[that.dirs.pos];
- widgetUnits = 100 / (widgetUnits - ((that.thumb[that.dirs.outerWidth]() || 2) / 2));
+ widgetUnits = 100 / widgetUnits;
setValueFromPos(e, o.animate);
$(document)
.on({
mouseup: remove,
mousemove: setValueFromPos
})
;
+ $(window).on('blur', removeWin);
e.stopPropagation();
}
};
var elementEvts = {
mousedown: add,
focus: function(e){
if(!o.disabled){
eventTimer.init('input', o.value);
eventTimer.init('change', o.value);
- that.element.addClass('ws-focus');
+ that.addRemoveClass('ws-focus', true);
+ that.updateMetrics();
}
hasFocus = true;
},
blur: function(e){
that.element.removeClass('ws-focus ws-active');
+ that.updateMetrics();
hasFocus = false;
eventTimer.init('input', o.value);
eventTimer.call('change', o.value);
},
keyup: function(){
- that.element.removeClass('ws-active');
+ that.addRemoveClass('ws-active');
eventTimer.call('input', o.value);
eventTimer.call('change', o.value);
},
keydown: function(e){
@@ -843,11 +897,11 @@
that.value(that.options.min, false, o.animate);
} else {
step = false;
}
if (step) {
- that.element.addClass('ws-active');
+ that.addRemoveClass('ws-active', true);
eventTimer.call('input', o.value);
e.preventDefault();
}
}
}
@@ -865,42 +919,92 @@
};
this.element.on(elementEvts);
this.thumb.on({
mousedown: add
});
+ $(function(){
+ webshims.ready('dom-support', function(){
+ that.element.onWSOff('updateshadowdom', function(){
+ that.updateMetrics();
+ });
+ });
+ if(!$.fn.onWSOff){
+ webshims._polyfill(['dom-support']);
+ }
+ });
},
+ posCenter: function(elem, outerWidth){
+ var temp;
+ if(this.options.calcCenter && (!this._init || this.element[0].offsetWidth)){
+ if(!elem){
+ elem = this.thumb;
+ }
+ if(!outerWidth){
+ outerWidth = elem[this.dirs.outerWidth]();
+ }
+ outerWidth = outerWidth / -2;
+ elem.css(this.dirs.marginLeft, outerWidth);
+
+ if(this.options.calcTrail && elem[0] == this.thumb[0]){
+ temp = this.element[this.dirs.innerHeight]();
+ elem.css(this.dirs.marginTop, (elem[this.dirs.outerHeight]() - temp) / -2);
+ this.range.css(this.dirs.marginTop, (this.range[this.dirs.outerHeight]() - temp) / -2 );
+ outerWidth *= -1;
+ this.trail
+ .css(this.dirs.left, outerWidth)
+ .css(this.dirs.right, outerWidth)
+ ;
+ }
+ }
+ },
updateMetrics: function(){
var width = this.element.innerWidth();
this.vertical = (width && this.element.innerHeight() - width > 10);
this.dirs = this.vertical ?
- {mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', width: 'height', outerWidth: 'outerHeight'} :
- {mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', width: 'width', outerWidth: 'outerWidth'}
+ {mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', right: 'bottom', width: 'height', innerWidth: 'innerHeight', innerHeight: 'innerWidth', outerWidth: 'outerHeight', outerHeight: 'outerWidth', marginTop: 'marginLeft', marginLeft: 'marginTop'} :
+ {mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', right: 'right', width: 'width', innerWidth: 'innerWidth', innerHeight: 'innerHeight', outerWidth: 'outerWidth', outerHeight: 'outerHeight', marginTop: 'marginTop', marginLeft: 'marginLeft'}
;
this.element
[this.vertical ? 'addClass' : 'removeClass']('vertical-range')
[this.vertical ? 'addClass' : 'removeClass']('horizontal-range')
;
+ this.posCenter();
}
};
$.fn.rangeUI = function(opts){
- opts = $.extend({readonly: false, disabled: false, tabindex: 0, min: 0, step: 1, max: 100, value: 50, input: $.noop, change: $.noop, _change: $.noop, showLabels: true, options: {}}, opts);
+ opts = $.extend({
+ readonly: false,
+ disabled: false,
+ tabindex: 0,
+ min: 0,
+ step: 1,
+ max: 100,
+ value: 50,
+ input: $.noop,
+ change: $.noop,
+ _change: $.noop,
+ showLabels: true,
+ options: {},
+ calcCenter: true,
+ calcTrail: true
+ }, opts);
return this.each(function(){
- $.webshims.objectCreate(rangeProto, {
+ webshims.objectCreate(rangeProto, {
element: {
value: $(this)
}
}, opts);
});
};
- jQuery.webshims.isReady('range-ui', true);
+ webshims.isReady('range-ui', true);
})(jQuery);
-jQuery.webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
+webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
"use strict";
var curCfg;
- var formcfg = $.webshims.formcfg;
+ var formcfg = webshims.formcfg;
var stopPropagation = function(e){
e.stopImmediatePropagation(e);
};
var createFormat = function(name){
@@ -914,11 +1018,11 @@
};
var splitInputs = {
date: {
_create: function(){
var obj = {
- splits: [$('<input type="text" class="yy" size="4" maxlength />')[0], $('<input type="text" class="mm" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" maxlength="2" size="2" />')[0]]
+ 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]]
};
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){
@@ -940,11 +1044,11 @@
}
},
month: {
_create: function(){
var obj = {
- splits: [$('<input type="text" class="yy" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]]
+ splits: [$('<input type="text" class="yy" inputmode="numeric" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]]
};
obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1]];
return obj;
},
sort: function(element){
@@ -960,10 +1064,27 @@
}
seperator[action](mm);
}
}
};
+
+ var steps = {
+ number: {
+ step: 1
+ },
+ time: {
+ step: 60
+ },
+ month: {
+ step: 1,
+ start: new Date()
+ },
+ date: {
+ step: 1,
+ start: new Date()
+ }
+ };
var labelWidth = (function(){
var getId = function(){
return webshims.getID(this);
};
return function(element, labels, noFocus){
@@ -984,11 +1105,12 @@
};
(function(){
var monthDigits = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
- formcfg.de = {
+
+ formcfg.de = $.extend(true, {
numberFormat: {
",": ".",
".": ","
},
timeSigns: ":. ",
@@ -1018,13 +1140,13 @@
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
}
- };
+ }, formcfg.de || {});
- formcfg.en = {
+ formcfg.en = $.extend(true, {
numberFormat: {
".": ".",
",": ","
},
numberSigns: '.',
@@ -1052,17 +1174,21 @@
"firstDay": 0,
"isRTL": false,
"showMonthAfterYear": false,
"yearSuffix": ""
}
- };
+ }, formcfg['en'] || {});
+ if(!formcfg['en-US']){
+ formcfg['en-US'] = formcfg['en'];
+ }
+ if(!formcfg['']){
+ formcfg[''] = formcfg['en-US'];
+ }
- formcfg['en-US'] = formcfg['en-US'] || formcfg['en'];
- formcfg[''] = formcfg[''] || formcfg['en-US'];
curCfg = formcfg[''];
- var createMonthKeys = function(langCfg){
+ 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;
@@ -1074,28 +1200,29 @@
langCfg.date.monthDigits = monthDigits;
langCfg.numberSigns += '-';
$.each(langCfg.date.monthNames, create);
$.each(langCfg.date.monthNamesShort, create);
}
+ if(!langCfg.colorSigns){
+ langCfg.colorSigns = '#abcdefABCDEF';
+ }
};
- createMonthKeys(curCfg);
+ processLangCFG(curCfg);
- $.webshims.ready('dom-extend', function(){
- $.webshims.activeLang({
- register: 'form-core',
- callback: function(){
- $.each(arguments, function(i, val){
- if(formcfg[val]){
- curCfg = formcfg[val];
- createMonthKeys(curCfg);
- $(document).triggerHandler('wslocalechange');
- return false;
- }
- });
- }
- });
+ $.webshims.activeLang({
+ register: 'form-core',
+ callback: function(){
+ $.each(arguments, function(i, val){
+ if(formcfg[val]){
+ curCfg = formcfg[val];
+ processLangCFG(curCfg);
+ $(document).triggerHandler('wslocalechange');
+ return false;
+ }
+ });
+ }
});
})();
@@ -1111,13 +1238,11 @@
return def;
}
return val * 1;
};
- var createOpts = ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value'];
-
var formatVal = {
number: function(val){
return (val+'').replace(/\,/g, '').replace(/\./, curCfg.numberFormat['.']);
},
time: function(val){
@@ -1151,10 +1276,20 @@
} 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){
@@ -1165,11 +1300,11 @@
},
month: function(val, opts){
var p = (!opts.splitInput) ? val.trim().split(/[\.\s-\/\\]+/) : val;
- if(p.length == 2){
+ if(p.length == 2 && p[0] && p[1]){
p[0] = curCfg.date.monthkeys[p[0]] || p[0];
p[1] = curCfg.date.monthkeys[p[1]] || p[1];
if(p[1].length == 2){
val = p[0]+'-'+p[1];
} else if(p[0].length == 2){
@@ -1195,31 +1330,29 @@
return (val.length == 3 && val[0] && val[1] && val[2]) ?
([addZero(val[obj.yy]), addZero(val[obj.mm]), addZero(val[obj.dd])]).join('-') :
''
;
- }
- };
-
- var steps = {
- number: {
- step: 1
},
- time: {
- step: 60
- },
- month: {
- step: 1,
- start: new Date()
- },
- date: {
- step: 1,
- start: new Date()
+ 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 ?
@@ -1260,225 +1393,97 @@
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){
+ return input.prop('value', val).is(':valid') && input.prop('value') == val;
}
};
}
return types[type];
};
})();
steps.range = steps.number;
-
- var spinBtnProto = {
+ var wsWidgetProto = {
_create: function(){
- var i;
+ var i, that, timedMirror;
var o = this.options;
- var helper = createHelper(o.type);
+ var createOpts = this.createOpts;
+
this.type = o.type;
this.orig = o.orig;
- this.elemHelper = $('<input type="'+ this.type+'" />');
- this.asNumber = helper.asNumber;
- this.asValue = helper.asValue;
+ this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"></span>').insertAfter(this.element);
+ this.options.containerElements.push(this.buttonWrapper[0]);
- this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"><span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span></span>')
- .insertAfter(this.element)
- ;
+ o.mirrorValidity = o.mirrorValidity && this.orig && Modernizr.formvalidation && !webshims.bugs.bustedValidity;
- if(o.splitInput){
+ if(o.splitInput && this._addSplitInputs){
this._addSplitInputs();
} else {
this.inputElements = this.element;
}
- this.options.containerElements.push(this.buttonWrapper[0]);
-
- if(typeof steps[this.type].start == 'object'){
+ if( steps[this.type] && typeof steps[this.type].start == 'object'){
steps[this.type].start = this.asNumber(steps[this.type].start);
}
-
-
for(i = 0; i < createOpts.length; i++){
- this[createOpts[i]](o[createOpts[i]]);
+ if(o[createOpts[i]] != null){
+ this[createOpts[i]](o[createOpts[i]], o[createOpts[i]]);
+ }
}
-
- this.element.data('wsspinner', this);
-
+ if(this.type == 'color'){
+ this.inputElements.prop('maxLength', 7);
+ }
this.addBindings();
+ $(this.element).data('wsWidget'+o.type, this);
- 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;
- },
- _addSplitInputs: function(){
- if(!this.inputElements){
- var create = splitInputs[this.type]._create();
- this.splits = create.splits;
- this.inputElements = $(create.elements).prependTo(this.element).filter('input');
- }
- },
- parseValue: function(){
- 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);
- },
- formatValue: function(val, noSplit){
- return formatVal[this.type](val, noSplit === false ? false : this.options);
- },
- 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);
- }
- },
- 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);
- setTimeout(function(){
- var data = webshims.data(element);
- if(data && data.shadowData){
- data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
- }
- }, 9);
- }
- },
- value: function(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){
+ 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);
+ };
- $.each(this.splits, function(i, elem){
- $.prop(elem, 'value', val[i]);
+ timedMirror();
+ $(this.orig).on('change input', function(e){
+ if(e.type == 'input'){
+ timedMirror();
+ } else {
+ timedMirror._wsexec();
+ }
});
- } else {
- this.element.prop('value', val);
}
-
- this._propertyChange('value');
},
- 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.type == 'time'){
- this.element.attr('list', $.attr(this.orig, 'list'));
+ 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;
+ }
}
- this.options.list = val;
- this._propertyChange('list');
},
- _propertyChange: $.noop,
- tabindex: function(val){
- this.options.tabindex = val;
- this.inputElements.prop('tabindex', this.options.tabindex);
- },
- title: function(val){
- this.options.title = val;
- this.element.prop('title', this.options.title);
- },
-
- min: function(val){
- this.elemHelper.prop('min', val);
- this.minAsNumber = this.asNumber(val);
- if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
- this._setStartInRange();
- }
- this.options.min = val;
- this._propertyChange('min');
- },
- max: function(val){
- this.elemHelper.prop('max', val);
- this.maxAsNumber = this.asNumber(val);
- if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
- this._setStartInRange();
- }
- this.options.max = val;
- this._propertyChange('max');
- },
- step: function(val){
- var defStep = steps[this.type];
- this.options.step = val;
- this.elemHelper.prop('step', retDefault(val, defStep.step));
- },
addBindings: function(){
var isFocused;
var that = this;
var o = this.options;
@@ -1526,10 +1531,13 @@
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);
}
@@ -1562,10 +1570,11 @@
}
)
;
setTimeout(function(){
if(that.popover){
+ that.popover.element.on('wspopoverhide', onBlur);
$('> *', that.popover.element)
.on({
'focusin': onFocus,
'focusout': onBlur
})
@@ -1642,11 +1651,11 @@
}
} 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();
@@ -1666,33 +1675,11 @@
preventBlur.prevent = true;
setTimeout(reset, 9);
};
})();
- ['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;
- }
- };
- });
-
-
this.buttonWrapper.on('mousedown', mouseDownInit);
this.setInput = function(value){
that.value(value);
eventTimer.call('input', value);
@@ -1704,964 +1691,419 @@
this.inputElements.on(elementEvts);
- 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() || $.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);
- }
-
-
- if(!o.splitInput){
- $(document).on('wslocalechange',function(){
- if(o.value){
- that.value(o.value);
- }
-
- if(placeholderFormat[that.type] && o.placeholder){
- that.placeholder(o.placeholder);
- }
+ 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;
+ }
+ };
});
- } else {
- $(document).onTrigger('wslocalechange',function(){
- that.reorderInputs();
- });
- }
-
- $('.step-up', this.buttonWrapper)
- .on({
- 'mousepressstart mousepressend': mousePress,
- 'mousedown mousepress': function(e){
- step.stepUp();
- }
- })
- ;
- $('.step-down', this.buttonWrapper)
- .on({
- 'mousepressstart mousepressend': mousePress,
- 'mousedown mousepress': function(e){
- step.stepDown();
- }
- })
- ;
- initChangeEvents();
- }
- };
-
- ['readonly', 'disabled'].forEach(function(name){
- spinBtnProto[name] = function(val){
- if(this.options[name] != val || !this._init){
- this.options[name] = !!val;
- if(name == 'readonly' && this.options.noInput){
- this.element
- .prop(name, true)
- .attr({'aria-readonly': this.options[name]})
- ;
- } else {
- this.element.prop(name, this.options[name]);
+ 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() || $.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[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+ $(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);
+ }
-
- $.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 disable = {
-
- };
-
- var getDateArray = function(date){
- var ret = [date.getFullYear(), addZero(date.getMonth() + 1), addZero(date.getDate())];
- ret.month = ret[0]+'-'+ret[1];
- ret.date = ret[0]+'-'+ret[1]+'-'+ret[2];
- return ret;
- };
- var today = getDateArray(new Date());
-
- var _setFocus = function(element, _noFocus){
- var setFocus, that;
- element = $(element || this.activeButton);
- this.activeButton.attr({tabindex: '-1', 'aria-selected': 'false'});
- this.activeButton = element.attr({tabindex: '0', 'aria-selected': 'true'});
- this.index = this.buttons.index(this.activeButton[0]);
-
- clearTimeout(this.timer);
-
- if(!this.popover.openedByFocus && !_noFocus){
- that = this;
- setFocus = function(noTrigger){
- clearTimeout(that.timer);
- that.timer = setTimeout(function(){
- if(element[0]){
- element[0].focus();
- if(noTrigger !== true && !element.is(':focus')){
- setFocus(true);
- }
+ if(placeholderFormat[that.type] && o.placeholder){
+ that.placeholder(o.placeholder);
+ }
+ };
+ } else {
+ localeChange = function(){
+ that.reorderInputs();
+ };
+ that.reorderInputs();
}
- }, that.popover.isVisible ? 99 : 360);
- };
- this.popover.activateElement(element);
- setFocus();
- }
-
- };
-
- var _initialFocus = function(){
- var sel;
- if(this.popover.navedInitFocus){
- sel = this.popover.navedInitFocus.sel || this.popover.navedInitFocus;
- if((!this.activeButton || !this.activeButton[0]) && this.buttons[sel]){
- this.activeButton = this.buttons[sel]();
- } else if(sel){
- this.activeButton = $(sel, this.element);
+ $(that.orig).onWSOff('wslocalechange', localeChange);
+ })();
}
- if(!this.activeButton[0] && this.popover.navedInitFocus.alt){
- this.activeButton = this.buttons[this.popover.navedInitFocus.alt]();
+ initChangeEvents();
+ },
+ value: function(val){
+ if(!this._init || val !== this.options.value){
+ this.element.val(this.formatValue(val));
+ this.options.value = val;
+ this._propertyChange('value');
+ this.mirrorValidity();
}
- }
-
- if(!this.activeButton || !this.activeButton[0]){
- this.activeButton = this.buttons.filter('.checked-value');
- }
-
- if(!this.activeButton[0]){
- this.activeButton = this.buttons.filter('.this-value');
- }
- if(!this.activeButton[0]){
- this.activeButton = this.buttons.eq(0);
- }
-
- this.setFocus(this.activeButton, this.opts.noFocus);
- };
-
-
- webshims.ListBox = function (element, popover, opts){
- this.element = $('ul', element);
- this.popover = popover;
- this.opts = opts || {};
- this.buttons = $('button:not(:disabled)', this.element);
-
-
- this.ons(this);
- this._initialFocus();
- };
-
- webshims.ListBox.prototype = {
- setFocus: _setFocus,
- _initialFocus: _initialFocus,
- prev: function(){
- var index = this.index - 1;
- if(index < 0){
- if(this.opts.prev){
- this.popover.navedInitFocus = 'last';
- this.popover.actionFn(this.opts.prev);
- this.popover.navedInitFocus = false;
- }
- } else {
- this.setFocus(this.buttons.eq(index));
+
+ },
+ required: function(val, boolVal){
+ this.inputElements.attr({'aria-required': ''+boolVal});
+ this.mirrorValidity();
+ },
+ parseValue: function(){
+ 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);
},
- next: function(){
- var index = this.index + 1;
- if(index >= this.buttons.length){
- if(this.opts.next){
- this.popover.navedInitFocus = 'first';
- this.popover.actionFn(this.opts.next);
- this.popover.navedInitFocus = false;
- }
+ 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.setFocus(this.buttons.eq(index));
+ this.element.prop('placeholder', placeholder);
}
},
- ons: function(that){
- this.element
- .on({
- 'keydown': function(e){
- var handled;
- var key = e.keyCode;
- if(e.ctrlKey){return;}
- if(key == 36 || key == 33){
- that.setFocus(that.buttons.eq(0));
- handled = true;
- } else if(key == 34 || key == 35){
- that.setFocus(that.buttons.eq(that.buttons.length - 1));
- handled = true;
- } else if(key == 38 || key == 37){
- that.prev();
- handled = true;
- } else if(key == 40 || key == 39){
- that.next();
- handled = true;
- }
- if(handled){
- return false;
- }
+ 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();
}
- })
- ;
- }
- };
-
- webshims.Grid = function (element, popover, opts){
- this.element = $('tbody', element);
- this.popover = popover;
- this.opts = opts || {};
- this.buttons = $('button:not(:disabled,.othermonth)', this.element);
-
- this.ons(this);
-
- this._initialFocus();
- if(this.popover.openedByFocus){
- this.popover.activeElement = this.activeButton;
- }
- };
-
-
-
- webshims.Grid.prototype = {
- setFocus: _setFocus,
- _initialFocus: _initialFocus,
-
- first: function(){
- this.setFocus(this.buttons.eq(0));
+ }, 9);
+
+ };
+
+ $(this.orig).onTrigger('listdatalistchange', updateList);
},
- last: function(){
- this.setFocus(this.buttons.eq(this.buttons.length - 1));
+ 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')];
},
- upPage: function(){
- $('.ws-picker-header > button:not(:disabled)', this.popover.element).trigger('click');
+ list: function(val){
+ if(this.type == 'number' || this.type == 'time'){
+ this.element.attr('list', $.attr(this.orig, 'list'));
+ }
+ this.options.list = val;
+ this._propertyChange('list');
},
- downPage: function(){
- this.activeButton.filter(':not([data-action="changeInput"])').trigger('click');
+ _propertyChange: $.noop,
+ tabindex: function(val){
+ this.options.tabindex = val;
+ this.inputElements.prop('tabindex', this.options.tabindex);
+ $('button', this.buttonWrapper).prop('tabindex', this.options.tabindex);
},
- ons: function(that){
- this.element
- .on({
- 'keydown': function(e){
- var handled;
- var key = e.keyCode;
-
- if(e.shiftKey){return;}
-
- if((e.ctrlKey && key == 40)){
- handled = 'downPage';
- } else if((e.ctrlKey && key == 38)){
- handled = 'upPage';
- } else if(key == 33 || (e.ctrlKey && key == 37)){
- handled = 'prevPage';
- } else if(key == 34 || (e.ctrlKey && key == 39)){
- handled = 'nextPage';
- } else if(e.keyCode == 36 || e.keyCode == 33){
- handled = 'first';
- } else if(e.keyCode == 35){
- handled = 'last';
- } else if(e.keyCode == 38){
- handled = 'up';
- } else if(e.keyCode == 37){
- handled = 'prev';
- } else if(e.keyCode == 40){
- handled = 'down';
- } else if(e.keyCode == 39){
- handled = 'next';
- }
- if(handled){
- that[handled]();
- return false;
- }
- }
- })
- ;
- }
- };
- $.each({
- prevPage: {get: 'last', action: 'prev'},
- nextPage: {get: 'first', action: 'next'}
- }, function(name, val){
- webshims.Grid.prototype[name] = function(){
- if(this.opts[val.action]){
- this.popover.navedInitFocus = {
- sel: 'button[data-id="'+ this.activeButton.attr('data-id') +'"]:not(:disabled,.othermonth)',
- alt: val.get
- };
- this.popover.actionFn(this.opts[val.action]);
- this.popover.navedInitFocus = false;
+ title: function(val){
+ if(!val && this.orig && $.attr(this.orig, 'title') == null){
+ val = null;
}
- };
- });
-
- $.each({
- up: {traverse: 'prevAll', get: 'last', action: 'prev', reverse: true},
- down: {traverse: 'nextAll', get: 'first', action: 'next'}
- }, function(name, val){
- webshims.Grid.prototype[name] = function(){
- var cellIndex = this.activeButton.closest('td').prop('cellIndex');
- var sel = 'td:nth-child('+(cellIndex + 1)+') button:not(:disabled,.othermonth)';
- var button = this.activeButton.closest('tr')[val.traverse]();
-
- if(val.reverse){
- button = $(button.get().reverse());
- }
- button = button.find(sel)[val.get]();
-
- if(!button[0]){
- if(this.opts[val.action]){
- this.popover.navedInitFocus = sel+':'+val.get;
- this.popover.actionFn(this.opts[val.action]);
- this.popover.navedInitFocus = false;
- }
+ this.options.title = val;
+ if(val == null){
+ this.inputElements.removeAttr('title');
} else {
- this.setFocus(button.eq(0));
+ this.inputElements.prop('title', this.options.title);
}
- };
- });
-
- $.each({
- prev: {traverse: 'prevAll',get: 'last', reverse: true},
- next: {traverse: 'nextAll', get: 'first'}
- }, function(name, val){
- webshims.Grid.prototype[name] = function(){
- var sel = 'button:not(:disabled,.othermonth)';
- var button = this.activeButton.closest('td')[val.traverse]('td');
- if(val.reverse){
- button = $(button.get().reverse());
- }
- button = button.find(sel)[val.get]();
- if(!button[0]){
- button = this.activeButton.closest('tr')[val.traverse]('tr');
- if(val.reverse){
- button = $(button.get().reverse());
- }
- button = button.find(sel)[val.get]();
- }
-
- if(!button[0]){
- if(this.opts[name]){
- this.popover.navedInitFocus = val.get;
- this.popover.actionFn(this.opts[name]);
- this.popover.navedInitFocus = false;
- }
- } else {
- this.setFocus(button.eq(0));
- }
- };
- });
-
- picker.getWeek = function(date){
- var onejan = new Date(date.getFullYear(),0,1);
- return Math.ceil((((date - onejan) / 86400000) + onejan.getDay()+1)/7);
- };
- picker.getYearList = function(value, data){
- var j, i, val, disabled, lis, prevDisabled, nextDisabled, classStr, classArray, start;
-
-
- var size = data.options.size;
- var max = data.options.max.split('-');
- var min = data.options.min.split('-');
- var currentValue = data.options.value.split('-');
- var xthCorrect = 0;
- var enabled = 0;
- var str = '';
- var rowNum = 0;
-
- if(data.options.useDecadeBase == 'max' && max[0]){
- xthCorrect = 11 - (max[0] % 12);
- } else if(data.options.useDecadeBase == 'min' && min[0]){
- xthCorrect = 11 - (min[0] % 12);
}
-
- value = value[0] * 1;
- start = value - ((value + xthCorrect) % (12 * size));
-
-
-
- for(j = 0; j < size; j++){
- if(j){
- start += 12;
- } else {
- prevDisabled = picker.isInRange([start-1], max, min) ? {'data-action': 'setYearList','value': start-1} : false;
- }
-
- str += '<div class="year-list picker-list ws-index-'+ j +'"><div class="ws-picker-header"><button disabled="disabled">'+ start +' – '+(start + 11)+'</button></div>';
- lis = [];
- for(i = 0; i < 12; i++){
- val = start + i ;
- classArray = [];
- if( !picker.isInRange([val], max, min) ){
- disabled = ' disabled=""';
- } else {
- disabled = '';
- enabled++;
- }
-
- if(val == today[0]){
- classArray.push('this-value');
- }
-
- if(currentValue[0] == val){
- classArray.push('checked-value');
- }
-
- classStr = classArray.length ? ' class="'+ (classArray.join(' ')) +'"' : '';
-
- if(i && !(i % 3)){
- rowNum++;
- lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
- }
- lis.push('<td class="ws-item-'+ i +'" role="presentation"><button data-id="year-'+ i +'" type="button"'+ disabled + classStr +' data-action="setMonthList" value="'+val+'" tabindex="-1" role="gridcell">'+val+'</button></td>');
- }
- if(j == size - 1){
- nextDisabled = picker.isInRange([val+1], max, min) ? {'data-action': 'setYearList','value': val+1} : false;
- }
- str += '<div class="picker-grid"><table role="grid" aria-label="'+ start +' – '+(start + 11)+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
- }
-
- return {
- enabled: enabled,
- main: str,
- next: nextDisabled,
- prev: prevDisabled,
- type: 'Grid'
- };
};
- picker.getMonthList = function(value, data){
-
- var j, i, name, val, disabled, lis, fullyDisabled, prevDisabled, nextDisabled, classStr, classArray;
- var o = data.options;
- var size = o.size;
- var max = o.max.split('-');
- var min = o.min.split('-');
- var currentValue = o.value.split('-');
- var enabled = 0;
- var rowNum = 0;
- var str = '';
-
- value = value[0] - Math.floor((size - 1) / 2);
- for(j = 0; j < size; j++){
- if(j){
- value++;
- } else {
- prevDisabled = picker.isInRange([value-1], max, min) ? {'data-action': 'setMonthList','value': value-1} : false;
- }
- if(j == size - 1){
- nextDisabled = picker.isInRange([value+1], max, min) ? {'data-action': 'setMonthList','value': value+1} : false;
- }
- lis = [];
-
- if( !picker.isInRange([value, '01'], max, min) && !picker.isInRange([value, '12'], max, min)){
- disabled = ' disabled=""';
- fullyDisabled = true;
- } else {
- fullyDisabled = false;
- disabled = '';
- }
-
- if(o.minView >= 1){
- disabled = ' disabled=""';
- }
-
- str += '<div class="month-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">';
-
- str += o.selectNav ?
- '<select data-action="setMonthList" class="year-select">'+ picker.createYearSelect(value, max, min).join('') +'</select>' :
- '<button data-action="setYearList"'+disabled+' value="'+ value +'" tabindex="-1">'+ value +'</button>';
- str += '</div>';
-
- for(i = 0; i < 12; i++){
- val = curCfg.date.monthkeys[i+1];
- name = (curCfg.date[o.monthNames] || curCfg.date.monthNames)[i];
- classArray = [];
- if(fullyDisabled || !picker.isInRange([value, val], max, min) ){
- disabled = ' disabled=""';
- } else {
- disabled = '';
- enabled++;
+ ['readonly', 'disabled'].forEach(function(name){
+ var isDisabled = name == 'disabled';
+ wsWidgetProto[name] = function(val, boolVal){
+ if(this.options[name] != boolVal || !this._init){
+ this.options[name] = !!boolVal;
+ this.inputElements.prop(name, this.options[name]);
+ this.buttonWrapper[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+ if(isDisabled){
+ $('button', this.buttonWrapper).prop('disabled', this.options[name]);
}
-
- if(value == today[0] && today[1] == val){
- classArray.push('this-value');
- }
-
- if(currentValue[0] == value && currentValue[1] == val){
- classArray.push('checked-value');
- }
-
- classStr = (classArray.length) ? ' class="'+ (classArray.join(' ')) +'"' : '';
- if(i && !(i % 3)){
- rowNum++;
- lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
- }
-
- lis.push('<td class="ws-item-'+ i +'" role="presentation"><button data-id="month-'+ i +'" type="button"'+ disabled + classStr +' data-action="'+ (data.type == 'month' ? 'changeInput' : 'setDayList' ) +'" value="'+value+'-'+val+'" tabindex="-1" role="gridcell" aria-label="'+ curCfg.date.monthNames[i] +'">'+name+'</button></td>');
-
}
-
- str += '<div class="picker-grid"><table role="grid" aria-label="'+value+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
- }
-
- return {
- enabled: enabled,
- main: str,
- prev: prevDisabled,
- next: nextDisabled,
- type: 'Grid'
};
- };
+ });
-
- picker.getDayList = function(value, data){
-
- var j, i, k, day, nDay, name, val, disabled, lis, prevDisabled, nextDisabled, addTr, week, rowNum;
-
- var lastMotnh, curMonth, otherMonth, dateArray, monthName, fullMonthName, buttonStr, date2, classArray;
- var o = data.options;
- var size = o.size;
- var max = o.max.split('-');
- var min = o.min.split('-');
- var currentValue = o.value.split('-');
- var monthNames = curCfg.date[o.monthNamesHead] || curCfg.date[o.monthNames] || curCfg.date.monthNames;
- var enabled = 0;
- var str = [];
- var date = new Date(value[0], value[1] - 1, 1);
-
- date.setMonth(date.getMonth() - Math.floor((size - 1) / 2));
-
- for(j = 0; j < size; j++){
- date.setDate(1);
- lastMotnh = date.getMonth();
- rowNum = 0;
- if(!j){
- date2 = new Date(date.getTime());
- date2.setDate(-1);
- dateArray = getDateArray(date2);
- prevDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray[0]+'-'+dateArray[1]} : false;
- }
+ var spinBtnProto = $.extend({}, wsWidgetProto, {
+ _create: function(){
+ var o = this.options;
+ var helper = createHelper(o.type);
- dateArray = getDateArray(date);
+ this.elemHelper = $('<input type="'+ o.type+'" />');
+ this.asNumber = helper.asNumber;
+ this.asValue = helper.asValue;
- str.push('<div class="day-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">');
- if( o.selectNav ){
- monthName = ['<select data-action="setDayList" class="month-select" tabindex="0">'+ picker.createMonthSelect(dateArray, max, min, monthNames).join('') +'</select>', '<select data-action="setDayList" class="year-select" tabindex="0">'+ picker.createYearSelect(dateArray[0], max, min, '-'+dateArray[1]).join('') +'</select>'];
- if(curCfg.date.showMonthAfterYear){
- monthName.reverse();
- }
- str.push( monthName.join(' ') );
- }
+ wsWidgetProto._create.apply(this, arguments);
+ this._init = false;
- fullMonthName = [curCfg.date.monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
- monthName = [monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
- if(curCfg.date.showMonthAfterYear){
- monthName.reverse();
- fullMonthName.reverse();
- }
+ this.buttonWrapper.html('<span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span>');
- if(!data.options.selectNav) {
- str.push(
- '<button data-action="setMonthList"'+ (o.minView >= 2 ? ' disabled="" ' : '') +' value="'+ dateArray.date +'" tabindex="-1">'+ monthName.join(' ') +'</button>'
- );
+ if(this.type == 'number'){
+ this.inputElements.attr('inputmode', 'numeric');
}
- str.push('</div><div class="picker-grid"><table role="grid" aria-label="'+ fullMonthName.join(' ') +'"><thead><tr>');
+ if(!o.min && typeof o.relMin == 'number'){
+ o.min = this.asValue(this.getRelNumber(o.relMin));
+ $.prop(this.orig, 'min', o.min);
+ }
- if(data.options.showWeek){
- str.push('<th class="week-header">'+ curCfg.date.weekHeader +'</th>');
+ if(!o.max && typeof o.relMax == 'number'){
+ o.max = this.asValue(this.getRelNumber(o.relMax));
+ $.prop(this.orig, 'max', o.max);
}
- for(k = curCfg.date.firstDay; k < curCfg.date.dayNamesShort.length; k++){
- str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+ 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.splits = create.splits;
+ this.inputElements = $(create.elements).prependTo(this.element).filter('input');
}
- k = curCfg.date.firstDay;
- while(k--){
- str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+ },
+
+ getRelNumber: function(rel){
+ var start = steps[this.type].start || 0;
+ if(rel){
+ start += rel;
}
- str.push('</tr></thead><tbody><tr class="ws-row-0">');
+ 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');
- if(data.options.showWeek) {
- week = picker.getWeek(date);
- str.push('<td class="week-cell">'+ week +'</td>');
+ },
+ reorderInputs: function(){
+ if(splitInputs[this.type]){
+ var element = this.element;
+ splitInputs[this.type].sort(element);
+ setTimeout(function(){
+ var data = webshims.data(element);
+ if(data && data.shadowData){
+ data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
+ }
+ }, 9);
}
+ },
+ value: function(val){
- for (i = 0; i < 99; i++) {
- addTr = (i && !(i % 7));
- curMonth = date.getMonth();
- otherMonth = lastMotnh != curMonth;
- day = date.getDay();
- classArray = [];
+ if(!this._init || this.options.value !== val){
+ this.valueAsNumber = this.asNumber(val);
+ this.options.value = val;
- if(addTr && otherMonth ){
- str.push('</tr>');
- break;
+ 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 = "";
}
- if(addTr){
- rowNum++;
- str.push('</tr><tr class="ws-row-'+ rowNum +'">');
- if(data.options.showWeek) {
- week++;
- str.push('<td class="week-cell">'+ week +'</td>');
- }
- }
- if(!i){
-
- if(day != curCfg.date.firstDay){
- nDay = day - curCfg.date.firstDay;
- if(nDay < 0){
- nDay += 7;
- }
- date.setDate(date.getDate() - nDay);
- day = date.getDay();
- curMonth = date.getMonth();
- otherMonth = lastMotnh != curMonth;
- }
- }
-
- dateArray = getDateArray(date);
- buttonStr = '<td role="presentation" class="day-'+ day +'"><button data-id="day-'+ date.getDate() +'" role="gridcell" data-action="changeInput" value="'+ (dateArray.join('-')) +'"';
-
- if(otherMonth){
- classArray.push('othermonth');
+ val = formatVal[this.type](val, this.options);
+ if(this.options.splitInput){
+ $.each(this.splits, function(i, elem){
+ $.prop(elem, 'value', val[i]);
+ });
} else {
- classArray.push('day-'+date.getDate());
+ this.element.prop('value', val);
}
-
- if(dateArray[0] == today[0] && today[1] == dateArray[1] && today[2] == dateArray[2]){
- classArray.push('this-value');
- }
-
- if(currentValue[0] == dateArray[0] && dateArray[1] == currentValue[1] && dateArray[2] == currentValue[2]){
- classArray.push('checked-value');
- }
-
- if(classArray.length){
- buttonStr += ' class="'+ classArray.join(' ') +'"';
- }
-
- if(!picker.isInRange(dateArray, max, min) || (data.options.disableDays && $.inArray(day, data.options.disableDays) != -1)){
- buttonStr += ' disabled=""';
- }
-
- str.push(buttonStr+' tabindex="-1">'+ date.getDate() +'</button></td>');
-
- date.setDate(date.getDate() + 1);
+ this._propertyChange('value');
+ this.mirrorValidity();
}
- str.push('</tbody></table></div></div>');
- if(j == size - 1){
- dateArray = getDateArray(date);
- dateArray[2] = 1;
- nextDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray.date} : false;
- }
+ },
+ step: function(val){
+ var defStep = steps[this.type];
+ this.options.step = val;
+ this.elemHelper.prop('step', retDefault(val, defStep.step));
+ this.mirrorValidity();
}
-
-
- return {
- enabled: 9,
- main: str.join(''),
- prev: prevDisabled,
- next: nextDisabled,
- type: 'Grid'
- };
- };
+ });
- picker.isInRange = function(values, max, min){
- var i;
- var ret = true;
- for(i = 0; i < values.length; i++){
-
- if(min[i] && min[i] > values[i]){
- ret = false;
- break;
- } else if( !(min[i] && min[i] == values[i]) ){
- break;
+ $.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();
}
- }
- if(ret){
- for(i = 0; i < values.length; i++){
-
- if((max[i] && max[i] < values[i])){
- ret = false;
- break;
- } else if( !(max[i] && max[i] == values[i]) ){
- break;
+ 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)
}
- }
- }
- return ret;
+ }, opts);
+ });
};
- picker.createMonthSelect = function(value, max, min, monthNames){
- if(!monthNames){
- monthNames = curCfg.date.monthNames;
+ $.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]);
+ });
}
-
- var selected;
- var i = 0;
- var options = [];
- var tempVal = value[1]-1;
- for(; i < monthNames.length; i++){
- selected = tempVal == i ? ' selected=""' : '';
- if(selected || picker.isInRange([value[0], i+1], max, min)){
- options.push('<option value="'+ value[0]+'-'+addZero(i+1) + '"'+selected+'>'+ monthNames[i] +'</option>');
- }
- }
- return options;
+ 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
+ });
- picker.createYearSelect = function(value, max, min, valueAdd){
-
- var temp;
- var goUp = true;
- var goDown = true;
- var options = ['<option selected="">'+ value + '</option>'];
- var i = 0;
- if(!valueAdd){
- valueAdd = '';
+ 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();
}
- while(i < 8 && (goUp || goDown)){
- i++;
- temp = value-i;
- if(goUp && picker.isInRange([temp], max, min)){
- options.unshift('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
- } else {
- goUp = false;
- }
- temp = value + i;
- if(goDown && picker.isInRange([temp], max, min)){
- options.push('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
- } else {
- goDown = false;
- }
- }
- return options;
};
-
- var actions = {
+
+ picker._actions = {
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();
- data.setChange(val);
}
};
- (function(){
- var retNames = function(name){
- return 'get'+name+'List';
- };
- var retSetNames = function(name){
- return 'set'+name+'List';
- };
- var stops = {
- date: 'Day',
- week: 'Day',
- month: 'Month'
- };
-
- $.each({'setYearList' : ['Year', 'Month', 'Day'], 'setMonthList': ['Month', 'Day'], 'setDayList': ['Day']}, function(setName, names){
- var getNames = names.map(retNames);
- var setNames = names.map(retSetNames);
- actions[setName] = function(val, popover, data, startAt){
- val = ''+val;
- var o = data.options;
- var values = val.split('-');
- if(!startAt){
- startAt = 0;
- }
- $.each(getNames, function(i, item){
- if(i >= startAt){
- var content = picker[item](values, data);
-
- if( values.length < 2 || content.enabled > 1 || stops[data.type] === names[i]){
- popover.element
- .attr({'data-currentview': setNames[i]})
- .addClass('ws-size-'+o.size)
- .data('pickercontent', {
- data: data,
- content: content,
- values: values
- })
- ;
- popover.bodyElement.html(content.main);
- if(content.prev){
- popover.prevElement
- .attr(content.prev)
- .prop({disabled: false})
- ;
- } else {
- popover.prevElement
- .removeAttr('data-action')
- .prop({disabled: true})
- ;
- }
- if(content.next){
- popover.nextElement
- .attr(content.next)
- .prop({disabled: false})
- ;
- } else {
- popover.nextElement
- .removeAttr('data-action')
- .prop({disabled: true})
- ;
- }
- if(webshims[content.type]){
- new webshims[content.type](popover.bodyElement.children(), popover, content);
- }
- popover.element.trigger('pickerchange');
- return false;
- }
- }
- });
- };
- });
- })();
picker.commonInit = function(data, popover){
- var actionfn = function(e){
- if(!$(this).is('.othermonth') || $(this).css('cursor') == 'pointer'){
- popover.actionFn({
- 'data-action': $.attr(this, 'data-action'),
- value: $(this).val() || $.attr(this, 'value')
- });
- }
- return false;
- };
- var id = new Date().getTime();
- var generateList = function(o, max, min){
- var options = [];
- var label = '';
- var labelId = '';
- o.options = data.getOptions() || {};
- $('div.ws-options', popover.contentElement).remove();
- $.each(o.options[0], function(val, label){
- var disabled = picker.isInRange(val.split('-'), o.maxS, o.minS) ?
- '' :
- ' disabled="" '
- ;
- options.push('<li role="presentation"><button value="'+ val +'" '+disabled+' data-action="changeInput" tabindex="-1" role="option">'+ (label || data.formatValue(val, false)) +'</button></li>');
- });
- if(options.length){
- id++;
- if(o.options[1]){
- labelId = 'datalist-'+id;
- label = '<h5 id="'+labelId+'">'+ o.options[1] +'</h5>';
- labelId = ' aria-labelledbyid="'+ labelId +'" ';
- }
- new webshims.ListBox($('<div class="ws-options">'+label+'<ul role="listbox" '+ labelId +'>'+ options.join('') +'</div>').insertAfter(popover.bodyElement)[0], popover, {noFocus: true});
- }
- };
- var updateContent = function(){
- if(popover.isDirty){
- var o = data.options;
- o.maxS = o.max.split('-');
- o.minS = o.min.split('-');
-
- $('button', popover.buttonRow).each(function(){
- var text;
- if($(this).is('.ws-empty')){
- text = curCfg.date.clear;
- if(!text){
- text = formcfg[''].date.clear || 'clear';
- webshims.warn("could not get clear text from form cfg");
- }
- } else if($(this).is('.ws-current')){
- text = (curCfg[data.type] || {}).currentText;
- if(!text){
- text = (formcfg[''][[data.type]] || {}).currentText || 'current';
- webshims.warn("could not get currentText from form cfg");
- }
- $.prop(this, 'disabled', !picker.isInRange(today[data.type].split('-'), o.maxS, o.minS));
- }
- if(text){
- $(this).text(text).attr({'aria-label': text});
- if(webshims.assumeARIA){
- $.attr(this, 'aria-label', text);
- }
- }
-
- });
- popover.nextElement.attr({'aria-label': curCfg.date.nextText});
- $('> span', popover.nextElement).html(curCfg.date.nextText);
- popover.prevElement.attr({'aria-label': curCfg.date.prevText});
- $('> span', popover.prevElement).html(curCfg.date.prevText);
-
- generateList(o, o.maxS, o.minS);
-
- }
- $('button.ws-empty', popover.buttonRow).prop('disabled', $.prop(data.orig, 'required'));
- popover.isDirty = false;
- };
+ var tabbable;
- popover.actionFn = function(obj){
- if(actions[obj['data-action']]){
- actions[obj['data-action']](obj.value, popover, data, 0);
- } else {
- webshims.warn('no action for '+ obj['data-action']);
- }
- };
-
- popover.contentElement.html('<button class="ws-prev" tabindex="0"><span></span></button> <button class="ws-next" tabindex="0"><span></span></button><div class="ws-picker-body"></div><div class="ws-button-row"><button type="button" class="ws-current" data-action="changeInput" value="'+today[data.type]+'" tabindex="0"></button> <button type="button" data-action="changeInput" value="" class="ws-empty" tabindex="0"></button></div>');
- popover.nextElement = $('button.ws-next', popover.contentElement);
- popover.prevElement = $('button.ws-prev', popover.contentElement);
- popover.bodyElement = $('div.ws-picker-body', popover.contentElement);
- popover.buttonRow = $('div.ws-button-row', popover.contentElement);
-
popover.isDirty = true;
- popover.contentElement
- .on('click', 'button[data-action]', actionfn)
- .on('change', 'select[data-action]', actionfn)
- ;
-
+ popover.element.on('updatepickercontent pickerchange', function(){
+ tabbable = false;
+ });
popover.contentElement.on({
keydown: function(e){
if(e.keyCode == 9){
- var tabbable = $('[tabindex="0"]:not(:disabled)', this).filter(':visible');
+ 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;
}
@@ -2675,22 +2117,15 @@
return false;
}
}
});
- $(data.options.orig).on('input', function(){
- var currentView;
- if(data.options.updateOnInput && popover.isVisible && data.options.value && (currentView = popover.element.attr('data-currentview'))){
- actions[currentView]( data.options.value , popover, data, 0);
- }
- });
-
data._propertyChange = (function(){
var timer;
var update = function(){
if(popover.isVisible){
- updateContent();
+ popover.element.triggerHandler('updatepickercontent');
}
};
return function(prop){
if(prop == 'value'){return;}
popover.isDirty = true;
@@ -2712,55 +2147,56 @@
popover.activeElement = element;
};
popover.element.on({
wspopoverbeforeshow: function(){
data.element.triggerHandler('wsupdatevalue');
- updateContent();
+ popover.element.triggerHandler('updatepickercontent');
}
});
- $(document).onTrigger('wslocalechange', data._propertyChange);
+
+ $(data.orig).on('remove', function(e){
+ if(!e.originalEvent){
+ $(document).off('wslocalechange', data._propertyChange);
+ }
+ });
};
+
picker._common = function(data){
var popover = webshims.objectCreate(webshims.wsPopover, {}, {prepareFor: data.element});
var opener = $('<button type="button" class="ws-popover-opener"><span /></button>').appendTo(data.buttonWrapper);
var options = data.options;
- var init = false;
+ 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(!init){
- picker.commonInit(data, popover);
- }
-
- if(!init || data.options.restartView) {
- actions.setYearList( options.defValue || options.value, popover, data, data.options.startView);
- } else {
- actions[popover.element.attr('data-currentview') || 'setYearList']( options.defValue || options.value, popover, data, 0);
- }
-
- init = true;
+ webshims.ready(type, showPickerContent);
popover.show(data.element);
}
};
options.containerElements.push(popover.element[0]);
- if(!options.startView){
- options.startView = 0;
+ if(data.type != 'color'){
+ if(!options.startView){
+ options.startView = 0;
+ }
+ 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;
+ }
}
- if(!options.minView){
- options.minView = 0;
- }
- if(options.startView < options.minView){
- options.minView = options.startView;
- 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({
@@ -2782,14 +2218,19 @@
;
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
- .attr({
- 'tabindex': options.labels.length ? 0 : '-1'
- })
.on({
mousedown: function(){
stopPropagation.apply(this, arguments);
popover.preventBlur();
},
@@ -2830,14 +2271,55 @@
popover.preventBlur();
}
});
})();
data.popover = popover;
+ data.opener = opener;
+ $(data.orig).on('remove', function(e){
+ if(!e.originalEvent){
+ opener.remove();
+ popover.element.remove();
+ }
+ });
+
+ loadPicker(data.type, 'WINDOWLOAD');
};
picker.month = picker._common;
- picker.date = picker.month;
+ picker.date = picker._common;
+ picker.color = function(data){
+ var ret = picker._common.apply(this, arguments);
+ var alpha = $(data.orig).data('alphacontrol');
+ var colorIndicator = data.opener
+ .prepend('<span class="ws-color-indicator-bg"><span class="ws-color-indicator" /></span>')
+ .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(){
@@ -2854,23 +2336,24 @@
'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){
+ 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);
+ shadowData.data[fnName](val, boolVal);
}
}
});
});
@@ -2897,10 +2380,11 @@
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;
@@ -2930,17 +2414,18 @@
}
data.element.outerWidth( $(data.orig).outerWidth() - correctWidth );
}
init = true;
- $.style( data.orig, 'display', 'none' );
+ $(data.orig).addClass('ws-important-hide');
};
- $(document).onTrigger('updateshadowdom', updateStyles);
+ 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 = {};
@@ -2991,11 +2476,11 @@
});
data.shim.options.containerElements.push(data.shim.element[0]);
labelWidth($(this).getShadowFocusElement(), labels);
- $.attr(this, 'required', $.attr(this, 'required'));
+
$(this).on('change', function(e){
if(!stopCircular){
data.shim.value($.prop(this, 'value'));
}
});
@@ -3050,22 +2535,17 @@
data.shim.element.addClass('has-input-buttons');
}
if(opts.calculateWidth){
sizeInput(data.shim);
+ } else {
+ $(this).css({display: 'none'});
}
- $(this).css({display: 'none'});
}
+
};
- if(!modernizrInputTypes.range || options.replaceUI){
- extendType('range', {
- _create: function(opts, set){
- return $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
- }
- });
- }
if(Modernizr.formvalidation){
['input', 'form'].forEach(function(name){
var desc = webshims.defineNodeNameProperty(name, 'checkValidity', {
prop: {
@@ -3078,27 +2558,36 @@
}
});
});
}
+ if(!modernizrInputTypes.range || options.replaceUI){
+ extendType('range', {
+ _create: function(opts, set){
+ var data = $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
+ return data;
+ }
+ });
+ }
- ['number', 'time', 'month', 'date'].forEach(function(name){
- if(!modernizrInputTypes[name] || options.replaceUI){
+ var isStupid = navigator.userAgent.indexOf('MSIE 10.0') != -1 && navigator.userAgent.indexOf('Touch') == -1;
+ ['number', 'time', 'month', 'date', 'color'].forEach(function(name){
+ if(!modernizrInputTypes[name] || options.replaceUI || (name == 'number' && isStupid)){
extendType(name, {
_create: function(opts, set){
-
if(opts.splitInput && !splitInputs[name]){
webshims.warn('splitInput not supported for '+ name);
opts.splitInput = false;
}
var markup = opts.splitInput ?
'<span class="ws-'+name+' ws-input" role="group"></span>' :
'<input class="ws-'+name+'" type="text" />';
- var data = $(markup) //role="spinbutton"???
- .insertAfter(opts.orig)
- .spinbtnUI(opts)
- .data('wsspinner')
- ;
+ 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;