Removed old polyfills
This commit is contained in:
eldadfux
parent
a3d1a41033
commit
0ca741f1a0
|
|
@ -78,9 +78,6 @@ const configDep = {
|
|||
'public/scripts/dependencies/pell.js',
|
||||
'public/scripts/dependencies/prism.js',
|
||||
'public/scripts/dependencies/turndown.js',
|
||||
|
||||
'public/scripts/polyfills/date-input.js',
|
||||
'public/scripts/polyfills/datalist.js',
|
||||
],
|
||||
dest: './public/dist/scripts'
|
||||
};
|
||||
|
|
|
|||
11
public/dist/scripts/app-all.js
vendored
11
public/dist/scripts/app-all.js
vendored
File diff suppressed because one or more lines are too long
11
public/dist/scripts/app-dep.js
vendored
11
public/dist/scripts/app-dep.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,214 +0,0 @@
|
|||
// https://github.com/Fyrd/purejs-datalist-polyfill
|
||||
// license: MIT
|
||||
(function(document) {
|
||||
var IE_SELECT_ATTRIBUTE = 'data-datalist';
|
||||
var LIST_CLASS = 'datalist-polyfill';
|
||||
var ACTIVE_CLASS = 'datalist-polyfill__active';
|
||||
|
||||
var datalistSupported = !!(document.createElement('datalist') && window.HTMLDataListElement);
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
// Android does not have actual support
|
||||
var isAndroidBrowser = ua.match(/Android/) && !ua.match(/(Firefox|Chrome|Opera|OPR)/);
|
||||
if( datalistSupported && !isAndroidBrowser ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var inputs = document.querySelectorAll('input[list]');
|
||||
|
||||
var triggerEvent = function(elem, eventType) {
|
||||
var event;
|
||||
if (document.createEvent) {
|
||||
event = document.createEvent("HTMLEvents");
|
||||
event.initEvent(eventType, true, true);
|
||||
elem.dispatchEvent(event);
|
||||
} else {
|
||||
event = document.createEventObject();
|
||||
event.eventType = eventType;
|
||||
elem.fireEvent("on" + eventType, event);
|
||||
}
|
||||
};
|
||||
|
||||
for( var i = 0; i < inputs.length; i++ ) {
|
||||
var input = inputs[i];
|
||||
var listId = input.getAttribute('list');
|
||||
var datalist = document.getElementById(listId);
|
||||
if( !datalist ) {
|
||||
console.error('No datalist found for input: ' + listId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Only visible to <= IE9
|
||||
var childSelect = document.querySelector('select[' + IE_SELECT_ATTRIBUTE + '="' + listId + '"]');
|
||||
var parent = childSelect || datalist;
|
||||
var listItems = parent.getElementsByTagName('option');
|
||||
convert(input, datalist, listItems);
|
||||
if( childSelect ) {
|
||||
childSelect.parentNode.removeChild( childSelect );
|
||||
}
|
||||
}
|
||||
|
||||
function convert(input, datalist, listItems) {
|
||||
var fakeList = document.createElement('ul');
|
||||
var visibleItems = null;
|
||||
fakeList.id = listId;
|
||||
fakeList.className = LIST_CLASS;
|
||||
document.body.appendChild( fakeList );
|
||||
|
||||
var scrollValue = 0;
|
||||
|
||||
// Used to prevent reflow
|
||||
var tempItems = document.createDocumentFragment();
|
||||
|
||||
for( var i = 0; i < listItems.length; i++ ) {
|
||||
var item = listItems[i];
|
||||
var li = document.createElement('li');
|
||||
li.innerText = item.value;
|
||||
tempItems.appendChild( li );
|
||||
}
|
||||
fakeList.appendChild( tempItems );
|
||||
var fakeItems = fakeList.childNodes;
|
||||
var eachItem = function(callback) {
|
||||
for( var i = 0; i < fakeItems.length; i++ ) {
|
||||
callback(fakeItems[i]);
|
||||
}
|
||||
};
|
||||
var listen = function(elem, event, func) {
|
||||
if( elem.addEventListener ) {
|
||||
elem.addEventListener(event, func, false);
|
||||
} else {
|
||||
elem.attachEvent('on' + event, func);
|
||||
}
|
||||
};
|
||||
|
||||
datalist.parentNode.removeChild( datalist );
|
||||
|
||||
listen(input, 'focus', function() {
|
||||
// Reset scroll
|
||||
fakeList.scrollTop = 0;
|
||||
scrollValue = 0;
|
||||
});
|
||||
|
||||
listen(input, 'blur', function(evt) {
|
||||
// If this fires immediately, it prevents click-to-select from working
|
||||
setTimeout(function() {
|
||||
fakeList.style.display = 'none';
|
||||
eachItem( function(item) {
|
||||
// Note: removes all, not just ACTIVE_CLASS, but should be safe
|
||||
item.className = '';
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
var positionList = function() {
|
||||
fakeList.style.top = input.offsetTop + input.offsetHeight + 'px';
|
||||
fakeList.style.left = input.offsetLeft + 'px';
|
||||
fakeList.style.width = input.offsetWidth + 'px';
|
||||
};
|
||||
|
||||
var itemSelected = function(item) {
|
||||
input.value = item.innerText;
|
||||
triggerEvent(input, 'change');
|
||||
setTimeout(function() {
|
||||
fakeList.style.display = 'none';
|
||||
}, 100);
|
||||
};
|
||||
|
||||
var buildList = function(e) {
|
||||
// Build datalist
|
||||
fakeList.style.display = 'block';
|
||||
positionList();
|
||||
visibleItems = [];
|
||||
eachItem( function(item) {
|
||||
// Note: removes all, not just ACTIVE_CLASS, but should be safe
|
||||
var query = input.value.toLowerCase();
|
||||
var isFound = query.length && item.innerText.toLowerCase().indexOf( query ) > -1;
|
||||
if( isFound ) {
|
||||
visibleItems.push( item );
|
||||
}
|
||||
item.style.display = isFound ? 'block' : 'none';
|
||||
} );
|
||||
};
|
||||
|
||||
listen(input, 'keyup', buildList);
|
||||
listen(input, 'focus', buildList);
|
||||
|
||||
// Don't want to use :hover in CSS so doing this instead
|
||||
// really helps with arrow key navigation
|
||||
eachItem( function(item) {
|
||||
// Note: removes all, not just ACTIVE_CLASS, but should be safe
|
||||
listen(item, 'mouseover', function(evt) {
|
||||
eachItem( function(_item) {
|
||||
_item.className = item == _item ? ACTIVE_CLASS : '';
|
||||
});
|
||||
});
|
||||
listen(item, 'mouseout', function(evt) {
|
||||
item.className = '';
|
||||
});
|
||||
// Mousedown fires before native 'change' event is triggered
|
||||
// So we use this instead of click so only the new value is passed to 'change'
|
||||
listen(item, 'mousedown', function(evt) {
|
||||
itemSelected(item);
|
||||
});
|
||||
});
|
||||
|
||||
listen(window, 'resize', positionList);
|
||||
|
||||
listen(input, 'keydown', function(e) {
|
||||
var activeItem = fakeList.querySelector("." + ACTIVE_CLASS);
|
||||
if( !visibleItems.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var lastVisible = visibleItems[ visibleItems.length-1 ];
|
||||
var datalistItemsHeight = lastVisible.offsetTop + lastVisible.offsetHeight;
|
||||
|
||||
// up/down arrows
|
||||
var isUp = e.keyCode == 38;
|
||||
var isDown = e.keyCode == 40;
|
||||
if ( (isUp || isDown) ) {
|
||||
if( isDown && !activeItem ) {
|
||||
visibleItems[0].className = ACTIVE_CLASS;
|
||||
} else if (activeItem) {
|
||||
var prevVisible = null;
|
||||
var nextVisible = null;
|
||||
for( var i = 0; i < visibleItems.length; i++ ) {
|
||||
var visItem = visibleItems[i];
|
||||
if( visItem == activeItem ) {
|
||||
prevVisible = visibleItems[i-1];
|
||||
nextVisible = visibleItems[i+1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
activeItem.className = '';
|
||||
if ( isUp ) {
|
||||
if( prevVisible ) {
|
||||
prevVisible.className = ACTIVE_CLASS;
|
||||
if ( prevVisible.offsetTop < fakeList.scrollTop ) {
|
||||
fakeList.scrollTop -= prevVisible.offsetHeight;
|
||||
}
|
||||
} else {
|
||||
visibleItems[visibleItems.length - 1].className = ACTIVE_CLASS;
|
||||
}
|
||||
}
|
||||
if ( isDown ) {
|
||||
if( nextVisible ) {
|
||||
nextVisible.className = ACTIVE_CLASS;
|
||||
if( nextVisible.offsetTop + nextVisible.offsetHeight > fakeList.scrollTop + fakeList.offsetHeight ) {
|
||||
fakeList.scrollTop += nextVisible.offsetHeight;
|
||||
}
|
||||
} else {
|
||||
visibleItems[0].className = ACTIVE_CLASS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// return or tab key
|
||||
if ( activeItem && (e.keyCode == 13 || e.keyCode == 9) ){
|
||||
itemSelected(activeItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
}(document));
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue