agenda-libre-ruby/public/webshims/shims/form-datalist.js

298 lines
7.7 KiB
JavaScript
Raw Normal View History

webshims.register('form-datalist', function($, webshims, window, document, undefined, options){
"use strict";
var lazyLoad = function(name){
if(!name || typeof name != 'string'){
name = 'DOM';
}
if(!lazyLoad[name+'Loaded']){
lazyLoad[name+'Loaded'] = true;
webshims.ready(name, function(){
webshims.loader.loadList(['form-datalist-lazy']);
});
}
};
var noDatalistSupport = {
submit: 1,
button: 1,
reset: 1,
hidden: 1,
range: 1,
date: 1,
month: 1
};
if(webshims.modules["form-number-date-ui"].loaded){
$.extend(noDatalistSupport, {
number: 1,
time: 1
});
}
/*
* implement propType "element" currently only used for list-attribute (will be moved to dom-extend, if needed)
*/
webshims.propTypes.element = function(descs, name){
webshims.createPropDefault(descs, 'attr');
if(descs.prop){return;}
descs.prop = {
get: function(){
var elem = $.attr(this, name);
if(elem){
elem = document.getElementById(elem);
if(elem && descs.propNodeName && !$.nodeName(elem, descs.propNodeName)){
elem = null;
}
}
return elem || null;
},
writeable: false
};
};
/*
* Implements datalist element and list attribute
*/
(function(){
var formsCFG = webshims.cfg.forms;
var listSupport = webshims.support.datalist;
if(listSupport && !formsCFG.customDatalist){return;}
var initializeDatalist = function(){
var updateDatlistAndOptions = function(){
var id;
if(!$.data(this, 'datalistWidgetData') && (id = $.prop(this, 'id'))){
$('input[list="'+ id +'"], input[data-wslist="'+ id +'"]').eq(0).attr('list', id);
} else {
$(this).triggerHandler('updateDatalist');
}
};
var inputListProto = {
//override autocomplete
autocomplete: {
attr: {
get: function(){
var elem = this;
var data = $.data(elem, 'datalistWidget');
if(data){
return data._autocomplete;
}
return ('autocomplete' in elem) ? elem.autocomplete : elem.getAttribute('autocomplete');
},
set: function(value){
var elem = this;
var data = $.data(elem, 'datalistWidget');
if(data){
data._autocomplete = value;
if(value == 'off'){
data.hideList();
}
} else {
if('autocomplete' in elem){
elem.autocomplete = value;
} else {
elem.setAttribute('autocomplete', value);
}
}
}
}
}
};
if(listSupport){
//options only return options, if option-elements are rooted: but this makes this part of HTML5 less backwards compatible
if(!($('<datalist><select><option></option></select></datalist>').prop('options') || []).length ){
webshims.defineNodeNameProperty('datalist', 'options', {
prop: {
writeable: false,
get: function(){
var options = this.options || [];
if(!options.length){
var elem = this;
var select = $('select', elem);
if(select[0] && select[0].options && select[0].options.length){
options = select[0].options;
}
}
return options;
}
}
});
}
inputListProto.list = {
attr: {
get: function(){
var val = webshims.contentAttr(this, 'list');
if(val != null){
$.data(this, 'datalistListAttr', val);
if(!noDatalistSupport[$.prop(this, 'type')] && !noDatalistSupport[$.attr(this, 'type')]){
this.removeAttribute('list');
}
} else {
val = $.data(this, 'datalistListAttr');
}
return (val == null) ? undefined : val;
},
set: function(value){
var elem = this;
$.data(elem, 'datalistListAttr', value);
if (!noDatalistSupport[$.prop(this, 'type')] && !noDatalistSupport[$.attr(this, 'type')]) {
webshims.objectCreate(shadowListProto, undefined, {
input: elem,
id: value,
datalist: $.prop(elem, 'list')
});
elem.setAttribute('data-wslist', value);
} else {
elem.setAttribute('list', value);
}
$(elem).triggerHandler('listdatalistchange');
}
},
initAttr: true,
reflect: true,
propType: 'element',
propNodeName: 'datalist'
};
} else {
webshims.defineNodeNameProperties('input', {
list: {
attr: {
get: function(){
var val = webshims.contentAttr(this, 'list');
return (val == null) ? undefined : val;
},
set: function(value){
var elem = this;
webshims.contentAttr(elem, 'list', value);
webshims.objectCreate(options.shadowListProto, undefined, {input: elem, id: value, datalist: $.prop(elem, 'list')});
$(elem).triggerHandler('listdatalistchange');
}
},
initAttr: true,
reflect: true,
propType: 'element',
propNodeName: 'datalist'
}
});
}
webshims.defineNodeNameProperties('input', inputListProto);
webshims.addReady(function(context, contextElem){
contextElem
.filter('datalist > select, datalist, datalist > option, datalist > select > option')
.closest('datalist')
.each(updateDatlistAndOptions)
;
});
};
/*
* ShadowList
*/
var shadowListProto = {
_create: function(opts){
if(noDatalistSupport[$.prop(opts.input, 'type')] || noDatalistSupport[$.attr(opts.input, 'type')]){return;}
var datalist = opts.datalist;
var data = $.data(opts.input, 'datalistWidget');
var that = this;
if(datalist && data && data.datalist !== datalist){
data.datalist = datalist;
data.id = opts.id;
$(data.datalist)
.off('updateDatalist.datalistWidget')
.on('updateDatalist.datalistWidget', $.proxy(data, '_resetListCached'))
;
data._resetListCached();
return;
} else if(!datalist){
if(data){
data.destroy();
}
return;
} else if(data && data.datalist === datalist){
return;
}
this.datalist = datalist;
this.id = opts.id;
this.hasViewableData = true;
this._autocomplete = $.attr(opts.input, 'autocomplete');
$.data(opts.input, 'datalistWidget', this);
$.data(datalist, 'datalistWidgetData', this);
lazyLoad('WINDOWLOAD');
if(webshims.isReady('form-datalist-lazy')){
if(window.QUnit){
that._lazyCreate(opts);
} else {
setTimeout(function(){
that._lazyCreate(opts);
}, 9);
}
} else {
$(opts.input).one('focus', lazyLoad);
webshims.ready('form-datalist-lazy', function(){
if(!that._destroyed){
that._lazyCreate(opts);
}
});
}
},
destroy: function(e){
var input;
var autocomplete = $.attr(this.input, 'autocomplete');
$(this.input)
.off('.datalistWidget')
.removeData('datalistWidget')
;
this.shadowList.remove();
$(document).off('.datalist'+this.id);
$(window).off('.datalist'+this.id);
if(this.input.form && this.input.id){
$(this.input.form).off('submit.datalistWidget'+this.input.id);
}
this.input.removeAttribute('aria-haspopup');
if(autocomplete === undefined){
this.input.removeAttribute('autocomplete');
} else {
$(this.input).attr('autocomplete', autocomplete);
}
if(e && e.type == 'beforeunload'){
input = this.input;
setTimeout(function(){
$.attr(input, 'list', $.attr(input, 'list'));
}, 9);
}
this._destroyed = true;
}
};
webshims.loader.addModule('form-datalist-lazy', {
noAutoCallback: true,
options: $.extend(options, {shadowListProto: shadowListProto})
});
if(!options.list){
options.list = {};
}
//init datalist update
initializeDatalist();
})();
});