Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
datalist-polyfill
Advanced tools
datalist-polyfill - npm Package Compare versions
Comparing version 1.24.1 to 1.24.2
| { | ||
| "name": "datalist-polyfill", | ||
| "description": "Minimal and dependency-free vanilla JS datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.", | ||
| "version": "1.24.1", | ||
| "version": "1.24.2", | ||
| "homepage": "https://github.com/mfranzke/datalist-polyfill", | ||
@@ -6,0 +6,0 @@ "authors": [ |
@@ -14,2 +14,16 @@ # Changelog | ||
| ## [1.24.2] - 2020-03-19 | ||
| ### Added | ||
| - improvement(prettier): run prettier when committing files | ||
| - a minzipped size badge | ||
| ### Changed | ||
| - Updated webdriverio dependency | ||
| - improvement(prettier): prettified and optimized the file | ||
| - Formatting and code & content optimizations | ||
| - xo: added further rules for IE9 & IE10 compatibility | ||
| ## [1.24.1] - 2020-03-15 | ||
@@ -16,0 +30,0 @@ |
@@ -23,3 +23,2 @@ /* | ||
| Boolean(dcmnt.createElement('datalist') && window.HTMLDataListElement), | ||
| // IE & EDGE browser detection via UserAgent | ||
@@ -29,3 +28,3 @@ // TODO: obviously ugly. But sadly necessary until Microsoft enhances the UX within EDGE (compare to https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9573654/) | ||
| // And adapted out of https://gist.github.com/gaboratorium/25f08b76eb82b1e7b91b01a0448f8b1d : | ||
| isGteIE10 = Boolean(ua.match(/MSIE\s1[0-1]./) || ua.match(/rv:11./)), | ||
| isGteIE10 = Boolean(ua.match(/MSIE\s1[01]./) || ua.match(/rv:11./)), | ||
| isEDGE = Boolean(ua.indexOf('Edge/') !== -1); | ||
@@ -81,6 +80,8 @@ | ||
| // Check if any of the mutated nodes was a datalist | ||
| if (mutation.target instanceof HTMLElement && | ||
| mutation.target.tagName.toLowerCase() === "datalist" && | ||
| mutation.addedNodes.length > 1) { | ||
| datalistNeedsAnUpdate = mutation.target; | ||
| if ( | ||
| mutation.target instanceof HTMLElement && | ||
| mutation.target.tagName.toLowerCase() === 'datalist' && | ||
| mutation.addedNodes.length > 1 | ||
| ) { | ||
| datalistNeedsAnUpdate = mutation.target; | ||
| } | ||
@@ -181,3 +182,3 @@ }); | ||
| Array.prototype.slice.call(datalist.options, 0).forEach(function(option) { | ||
| // We're using .getAttribute instead of .dataset here for IE10 | ||
| // We're using .getAttribute instead of .dataset here for IE10- | ||
| var dataOriginalvalue = option.getAttribute('data-originalvalue'), | ||
@@ -188,3 +189,3 @@ originalValue = dataOriginalvalue || option.value; | ||
| if (!dataOriginalvalue) { | ||
| // We're using .setAttribute instead of .dataset here for IE10 | ||
| // We're using .setAttribute instead of .dataset here for IE10- | ||
| option.setAttribute('data-originalvalue', originalValue); | ||
@@ -198,3 +199,3 @@ } | ||
| /* as mentioned in the discussion within #GH-63: | ||
| /* As mentioned in the discussion within #GH-63: | ||
| Check for whether the current option is a valid suggestion and replace its value by | ||
@@ -232,3 +233,3 @@ - the current input string, as IE10+ and EDGE don't do substring, but only prefix matching (#GH-36, #GH-39) | ||
| // We're using .getAttribute instead of .dataset here for IE10 | ||
| // We're using .getAttribute instead of .dataset here for IE10- | ||
| if (option && option.getAttribute('data-originalvalue')) { | ||
@@ -241,4 +242,4 @@ setInputValue(input, option.getAttribute('data-originalvalue')); | ||
| var isValidSuggestion = function(option, inputValue) { | ||
| var optVal = option.value.toLowerCase(), | ||
| inptVal = inputValue.toLowerCase(), | ||
| var optValue = option.value.toLowerCase(), | ||
| inptValue = inputValue.toLowerCase(), | ||
| label = option.getAttribute('label'), | ||
@@ -253,5 +254,5 @@ text = option.text.toLowerCase(); | ||
| option.disabled === false && | ||
| ((optVal !== '' && optVal.indexOf(inptVal) !== -1) || | ||
| (label && label.toLowerCase().indexOf(inptVal) !== -1) || | ||
| (text !== '' && text.indexOf(inptVal) !== -1)) | ||
| ((optValue !== '' && optValue.indexOf(inptValue) !== -1) || | ||
| (label && label.toLowerCase().indexOf(inptValue) !== -1) || | ||
| (text !== '' && text.indexOf(inptValue) !== -1)) | ||
| ); | ||
@@ -350,3 +351,3 @@ }; | ||
| input.getAttribute('multiple') !== null | ||
| ? input.value.substring(input.value.lastIndexOf(',') + 1) | ||
| ? input.value.slice(Math.max(0, input.value.lastIndexOf(',') + 1)) | ||
| : input.value; | ||
@@ -415,3 +416,3 @@ }; | ||
| if (isValidSuggestion(opt, inputValue)) { | ||
| var textOptionPart = text.substr( | ||
| var textOptionPart = text.slice( | ||
| 0, | ||
@@ -429,6 +430,6 @@ optionValue.length + textValueSeperator.length | ||
| ) { | ||
| opt.innerText = optionValue + textValueSeperator + text; | ||
| opt.textContent = optionValue + textValueSeperator + text; | ||
| } else if (!opt.text) { | ||
| // Manipulating the option inner text, that would get displayed | ||
| opt.innerText = label || optionValue; | ||
| opt.textContent = label || optionValue; | ||
| } | ||
@@ -533,3 +534,3 @@ | ||
| // ... and it's first entry should contain the localized message to select an entry | ||
| messageElement.innerText = datalist.title; | ||
| messageElement.textContent = datalist.title; | ||
| // ... and disable this option, as it shouldn't get selected by the user | ||
@@ -576,3 +577,3 @@ messageElement.disabled = true; | ||
| if (event.key === 'Backspace') { | ||
| input.value = input.value.substr(0, input.value.length - 1); | ||
| input.value = input.value.slice(0, -1); | ||
@@ -604,3 +605,4 @@ // Dispatch the input event on the related input[list] | ||
| eventType === 'keydown' && | ||
| (event.keyCode !== keyENTER && event.keyCode !== keyESC); | ||
| event.keyCode !== keyENTER && | ||
| event.keyCode !== keyESC; | ||
@@ -607,0 +609,0 @@ // On change, click or after pressing ENTER or TAB key, input the selects value into the input on a change within the list |
@@ -6,2 +6,334 @@ /* | ||
| */ | ||
| !function(){"use strict";var e=window.document,t=window.navigator.userAgent,i="list"in e.createElement("input")&&Boolean(e.createElement("datalist")&&window.HTMLDataListElement),n=Boolean(t.match(/MSIE\s1[0-1]./)||t.match(/rv:11./)),a=Boolean(-1!==t.indexOf("Edge/"));if(i&&!n&&!a)return!1;Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector);var r=!1,o=["text","email","number","search","tel","url"];window.addEventListener("touchstart",(function e(){r=!0,window.removeEventListener("touchstart",e)}));var l,s=window.MutationObserver||window.WebKitMutationObserver;void 0!==s&&(l=new s((function(t){var i=!1;if(t.forEach((function(e){e.target instanceof HTMLElement&&"datalist"===e.target.tagName.toLowerCase()&&e.addedNodes.length>1&&(i=e.target)})),i){var n=e.querySelector('input[list="'+i.id+'"]');""!==f(n)&&A(b(i,n).length,i.getElementsByClassName("polyfilling")[0])}})));var u=function(e){var t=e.target,i=t.list,o=38===e.keyCode||40===e.keyCode;if("input"===t.tagName.toLowerCase()&&null!==i)if(n||a)""===f(t)||o||13===e.keyCode||27===e.keyCode||!n&&"text"!==t.type||(d(t,i),t.focus());else{var l=!1,s=i.getElementsByClassName("polyfilling")[0]||h(t,i);if(27!==e.keyCode&&13!==e.keyCode&&(""!==f(t)||o)&&void 0!==s){b(i,t).length>0&&(l=!0);var u=s.options.length-1;r?s.selectedIndex=0:o&&"number"!==t.getAttribute("type")&&(s.selectedIndex=38===e.keyCode?u:0,s.focus())}A(l,s)}},d=function(e,t){var i=f(e);Array.prototype.slice.call(t.options,0).forEach((function(e){var t=e.getAttribute("data-originalvalue"),n=t||e.value;t||e.setAttribute("data-originalvalue",n),e.label||e.text||(e.label=n),e.value=c(e,i)?i+"###[P0LYFlLLed]###"+n.toLowerCase():n}))},p=function(e){var t=e.target,i=t.list;if(t.matches("input[list]")&&t.matches(".polyfilled")&&i){var n=i.querySelector('option[value="'+f(t).replace(/\\([\s\S])|(")/g,"\\$1$2")+'"]');n&&n.getAttribute("data-originalvalue")&&g(t,n.getAttribute("data-originalvalue"))}},c=function(e,t){var i=e.value.toLowerCase(),n=t.toLowerCase(),a=e.getAttribute("label"),r=e.text.toLowerCase();return Boolean(!1===e.disabled&&(""!==i&&-1!==i.indexOf(n)||a&&-1!==a.toLowerCase().indexOf(n)||""!==r&&-1!==r.indexOf(n)))},v=function(e){if(e.target.matches("input[list]")){var t=e.target,i=t.list;if("input"===t.tagName.toLowerCase()&&null!==i){if(t.matches(".polyfilled")||y(t,e.type),a&&"focusin"===e.type){var r=t.list.options[0];r.value=r.value}if(!n&&!a){var o=i.getElementsByClassName("polyfilling")[0]||h(t,i),l=o&&o.querySelector("option:not(:disabled)")&&("focusin"===e.type&&""!==f(t)||e.relatedTarget&&e.relatedTarget===o);A(l,o)}}}},y=function(e,t){e.setAttribute("autocomplete","off"),e.setAttribute("role","textbox"),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-autocomplete","list"),e.setAttribute("aria-owns",e.getAttribute("list")),"focusin"===t?(e.addEventListener("keyup",u),e.addEventListener("focusout",v,!0),(n||a&&"text"===e.type)&&e.addEventListener("input",p)):"blur"===t&&(e.removeEventListener("keyup",u),e.removeEventListener("focusout",v,!0),(n||a&&"text"===e.type)&&e.removeEventListener("input",p)),e.className+=" polyfilled"},f=function(e){return"email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")?e.value.substring(e.value.lastIndexOf(",")+1):e.value},g=function(e,t){var i;e.value="email"===e.getAttribute("type")&&null!==e.getAttribute("multiple")&&(i=e.value.lastIndexOf(","))>-1?e.value.slice(0,i)+","+t:t};if(e.addEventListener("focusin",v,!0),!n&&!a){var m,b=function(t,i){void 0!==l&&l.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||h(i,t),a=f(i),o=e.createDocumentFragment(),s=e.createDocumentFragment();Array.prototype.slice.call(t.querySelectorAll("option:not(:disabled)")).sort((function(e,t){var n=e.value,a=t.value;return"url"===i.getAttribute("type")&&(n=n.replace(/(^\w+:|^)\/\//,""),a=a.replace(/(^\w+:|^)\/\//,"")),n.localeCompare(a)})).forEach((function(e){var t=e.value,i=e.getAttribute("label"),n=e.text;if(c(e,a)){var r=n.substr(0,t.length+" / ".length);n&&!i&&n!==t&&r!==t+" / "?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),o.appendChild(e)}else s.appendChild(e)})),n.appendChild(o);var u=n.options.length;return n.size=u>10?10:u,n.multiple=!r&&u<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(s),void 0!==l&&l.observe(t,{childList:!0}),n.options},h=function(t,i){if(!(t.getAttribute("type")&&-1===o.indexOf(t.getAttribute("type"))||null===i)){var n=t.getClientRects(),a=window.getComputedStyle(t),l=e.createElement("select");if(l.setAttribute("class","polyfilling"),l.style.position="absolute",A(!1,l),l.setAttribute("tabindex","-1"),l.setAttribute("aria-live","polite"),l.setAttribute("role","listbox"),r||l.setAttribute("aria-multiselectable","false"),"block"===a.getPropertyValue("display"))l.style.marginTop="-"+a.getPropertyValue("margin-bottom");else{var s="rtl"===a.getPropertyValue("direction")?"right":"left";l.style.setProperty("margin-"+s,"-"+(n[0].width+parseFloat(a.getPropertyValue("margin-"+s)))+"px"),l.style.marginTop=parseInt(n[0].height+(t.offsetTop-i.offsetTop),10)+"px"}if(l.style.borderRadius=a.getPropertyValue("border-radius"),l.style.minWidth=n[0].width+"px",r){var u=e.createElement("option");u.innerText=i.title,u.disabled=!0,u.setAttribute("class","message"),l.appendChild(u)}return i.appendChild(l),r?l.addEventListener("change",w):l.addEventListener("click",w),l.addEventListener("blur",w),l.addEventListener("keydown",w),l.addEventListener("keypress",E),l}},E=function(t){var i=t.target,n=i.parentNode,a=e.querySelector('input[list="'+n.id+'"]');"select"===i.tagName.toLowerCase()&&null!==a&&(!t.key||"Backspace"!==t.key&&1!==t.key.length||(a.focus(),"Backspace"===t.key?(a.value=a.value.substr(0,a.value.length-1),C(a)):a.value+=t.key,b(n,a)))},w=function(t){var i=t.currentTarget,n=i.parentNode,a=e.querySelector('input[list="'+n.id+'"]');if("select"===i.tagName.toLowerCase()&&null!==a){var r=t.type,o="keydown"===r&&13!==t.keyCode&&27!==t.keyCode;("change"===r||"click"===r||"keydown"===r&&(13===t.keyCode||"Tab"===t.key))&&i.value.length>0&&i.value!==n.title?(g(a,i.value),C(a),"Tab"!==t.key&&a.focus(),13===t.keyCode&&t.preventDefault(),o=!1):"keydown"===r&&27===t.keyCode&&a.focus(),A(o,i)}},C=function(t){var i;"function"==typeof Event?i=new Event("input",{bubbles:!0}):(i=e.createEvent("Event")).initEvent("input",!0,!1),t.dispatchEvent(i)},A=function(t,i){t?i.removeAttribute("hidden"):i.setAttributeNode(e.createAttribute("hidden")),i.setAttribute("aria-hidden",(!t).toString())};(m=window.HTMLInputElement)&&m.prototype&&void 0===m.prototype.list&&Object.defineProperty(m.prototype,"list",{get:function(){var t=e.getElementById(this.getAttribute("list"));return"object"==typeof this&&this instanceof m&&t&&t.matches("datalist")?t:null}}),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){return"object"==typeof this&&this instanceof e?this.getElementsByTagName("option"):null}})}(window.HTMLElement)}}(); | ||
| !(function() { | ||
| 'use strict'; | ||
| var e = window.document, | ||
| t = window.navigator.userAgent, | ||
| i = | ||
| 'list' in e.createElement('input') && | ||
| Boolean(e.createElement('datalist') && window.HTMLDataListElement), | ||
| n = Boolean(t.match(/MSIE\s1[01]./) || t.match(/rv:11./)), | ||
| a = Boolean(-1 !== t.indexOf('Edge/')); | ||
| if (i && !n && !a) return !1; | ||
| Element.prototype.matches || | ||
| (Element.prototype.matches = Element.prototype.msMatchesSelector); | ||
| var o = !1, | ||
| r = ['text', 'email', 'number', 'search', 'tel', 'url']; | ||
| window.addEventListener('touchstart', function e() { | ||
| (o = !0), window.removeEventListener('touchstart', e); | ||
| }); | ||
| var l, | ||
| s = window.MutationObserver || window.WebKitMutationObserver; | ||
| void 0 !== s && | ||
| (l = new s(function(t) { | ||
| var i = !1; | ||
| if ( | ||
| (t.forEach(function(e) { | ||
| e.target instanceof HTMLElement && | ||
| 'datalist' === e.target.tagName.toLowerCase() && | ||
| e.addedNodes.length > 1 && | ||
| (i = e.target); | ||
| }), | ||
| i) | ||
| ) { | ||
| var n = e.querySelector('input[list="' + i.id + '"]'); | ||
| '' !== f(n) && | ||
| A(b(i, n).length, i.getElementsByClassName('polyfilling')[0]); | ||
| } | ||
| })); | ||
| var u = function(e) { | ||
| var t = e.target, | ||
| i = t.list, | ||
| r = 38 === e.keyCode || 40 === e.keyCode; | ||
| if ('input' === t.tagName.toLowerCase() && null !== i) | ||
| if (n || a) | ||
| '' === f(t) || | ||
| r || | ||
| 13 === e.keyCode || | ||
| 27 === e.keyCode || | ||
| (!n && 'text' !== t.type) || | ||
| (d(t, i), t.focus()); | ||
| else { | ||
| var l = !1, | ||
| s = i.getElementsByClassName('polyfilling')[0] || h(t, i); | ||
| if ( | ||
| 27 !== e.keyCode && | ||
| 13 !== e.keyCode && | ||
| ('' !== f(t) || r) && | ||
| void 0 !== s | ||
| ) { | ||
| b(i, t).length > 0 && (l = !0); | ||
| var u = s.options.length - 1; | ||
| o | ||
| ? (s.selectedIndex = 0) | ||
| : r && | ||
| 'number' !== t.getAttribute('type') && | ||
| ((s.selectedIndex = 38 === e.keyCode ? u : 0), s.focus()); | ||
| } | ||
| A(l, s); | ||
| } | ||
| }, | ||
| d = function(e, t) { | ||
| var i = f(e); | ||
| Array.prototype.slice.call(t.options, 0).forEach(function(e) { | ||
| var t = e.getAttribute('data-originalvalue'), | ||
| n = t || e.value; | ||
| t || e.setAttribute('data-originalvalue', n), | ||
| e.label || e.text || (e.label = n), | ||
| (e.value = c(e, i) ? i + '###[P0LYFlLLed]###' + n.toLowerCase() : n); | ||
| }); | ||
| }, | ||
| p = function(e) { | ||
| var t = e.target, | ||
| i = t.list; | ||
| if (t.matches('input[list]') && t.matches('.polyfilled') && i) { | ||
| var n = i.querySelector( | ||
| 'option[value="' + f(t).replace(/\\([\s\S])|(")/g, '\\$1$2') + '"]' | ||
| ); | ||
| n && | ||
| n.getAttribute('data-originalvalue') && | ||
| g(t, n.getAttribute('data-originalvalue')); | ||
| } | ||
| }, | ||
| c = function(e, t) { | ||
| var i = e.value.toLowerCase(), | ||
| n = t.toLowerCase(), | ||
| a = e.getAttribute('label'), | ||
| o = e.text.toLowerCase(); | ||
| return Boolean( | ||
| !1 === e.disabled && | ||
| (('' !== i && -1 !== i.indexOf(n)) || | ||
| (a && -1 !== a.toLowerCase().indexOf(n)) || | ||
| ('' !== o && -1 !== o.indexOf(n))) | ||
| ); | ||
| }, | ||
| v = function(e) { | ||
| if (e.target.matches('input[list]')) { | ||
| var t = e.target, | ||
| i = t.list; | ||
| if ('input' === t.tagName.toLowerCase() && null !== i) { | ||
| if ( | ||
| (t.matches('.polyfilled') || y(t, e.type), | ||
| a && 'focusin' === e.type) | ||
| ) { | ||
| var o = t.list.options[0]; | ||
| o.value = o.value; | ||
| } | ||
| if (!n && !a) { | ||
| var r = i.getElementsByClassName('polyfilling')[0] || h(t, i), | ||
| l = | ||
| r && | ||
| r.querySelector('option:not(:disabled)') && | ||
| (('focusin' === e.type && '' !== f(t)) || | ||
| (e.relatedTarget && e.relatedTarget === r)); | ||
| A(l, r); | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| y = function(e, t) { | ||
| e.setAttribute('autocomplete', 'off'), | ||
| e.setAttribute('role', 'textbox'), | ||
| e.setAttribute('aria-haspopup', 'true'), | ||
| e.setAttribute('aria-autocomplete', 'list'), | ||
| e.setAttribute('aria-owns', e.getAttribute('list')), | ||
| 'focusin' === t | ||
| ? (e.addEventListener('keyup', u), | ||
| e.addEventListener('focusout', v, !0), | ||
| (n || (a && 'text' === e.type)) && e.addEventListener('input', p)) | ||
| : 'blur' === t && | ||
| (e.removeEventListener('keyup', u), | ||
| e.removeEventListener('focusout', v, !0), | ||
| (n || (a && 'text' === e.type)) && | ||
| e.removeEventListener('input', p)), | ||
| (e.className += ' polyfilled'); | ||
| }, | ||
| f = function(e) { | ||
| return 'email' === e.getAttribute('type') && | ||
| null !== e.getAttribute('multiple') | ||
| ? e.value.slice(Math.max(0, e.value.lastIndexOf(',') + 1)) | ||
| : e.value; | ||
| }, | ||
| g = function(e, t) { | ||
| var i; | ||
| e.value = | ||
| 'email' === e.getAttribute('type') && | ||
| null !== e.getAttribute('multiple') && | ||
| (i = e.value.lastIndexOf(',')) > -1 | ||
| ? e.value.slice(0, i) + ',' + t | ||
| : t; | ||
| }; | ||
| if ((e.addEventListener('focusin', v, !0), !n && !a)) { | ||
| var m, | ||
| b = function(t, i) { | ||
| void 0 !== l && l.disconnect(); | ||
| var n = t.getElementsByClassName('polyfilling')[0] || h(i, t), | ||
| a = f(i), | ||
| r = e.createDocumentFragment(), | ||
| s = e.createDocumentFragment(); | ||
| Array.prototype.slice | ||
| .call(t.querySelectorAll('option:not(:disabled)')) | ||
| .sort(function(e, t) { | ||
| var n = e.value, | ||
| a = t.value; | ||
| return ( | ||
| 'url' === i.getAttribute('type') && | ||
| ((n = n.replace(/(^\w+:|^)\/\//, '')), | ||
| (a = a.replace(/(^\w+:|^)\/\//, ''))), | ||
| n.localeCompare(a) | ||
| ); | ||
| }) | ||
| .forEach(function(e) { | ||
| var t = e.value, | ||
| i = e.getAttribute('label'), | ||
| n = e.text; | ||
| if (c(e, a)) { | ||
| var o = n.slice(0, t.length + ' / '.length); | ||
| n && !i && n !== t && o !== t + ' / ' | ||
| ? (e.textContent = t + ' / ' + n) | ||
| : e.text || (e.textContent = i || t), | ||
| r.appendChild(e); | ||
| } else s.appendChild(e); | ||
| }), | ||
| n.appendChild(r); | ||
| var u = n.options.length; | ||
| return ( | ||
| (n.size = u > 10 ? 10 : u), | ||
| (n.multiple = !o && u < 2), | ||
| (t.getElementsByClassName('ie9_fix')[0] || t).appendChild(s), | ||
| void 0 !== l && l.observe(t, { childList: !0 }), | ||
| n.options | ||
| ); | ||
| }, | ||
| h = function(t, i) { | ||
| if ( | ||
| !( | ||
| (t.getAttribute('type') && | ||
| -1 === r.indexOf(t.getAttribute('type'))) || | ||
| null === i | ||
| ) | ||
| ) { | ||
| var n = t.getClientRects(), | ||
| a = window.getComputedStyle(t), | ||
| l = e.createElement('select'); | ||
| if ( | ||
| (l.setAttribute('class', 'polyfilling'), | ||
| (l.style.position = 'absolute'), | ||
| A(!1, l), | ||
| l.setAttribute('tabindex', '-1'), | ||
| l.setAttribute('aria-live', 'polite'), | ||
| l.setAttribute('role', 'listbox'), | ||
| o || l.setAttribute('aria-multiselectable', 'false'), | ||
| 'block' === a.getPropertyValue('display')) | ||
| ) | ||
| l.style.marginTop = '-' + a.getPropertyValue('margin-bottom'); | ||
| else { | ||
| var s = | ||
| 'rtl' === a.getPropertyValue('direction') ? 'right' : 'left'; | ||
| l.style.setProperty( | ||
| 'margin-' + s, | ||
| '-' + | ||
| (n[0].width + parseFloat(a.getPropertyValue('margin-' + s))) + | ||
| 'px' | ||
| ), | ||
| (l.style.marginTop = | ||
| parseInt(n[0].height + (t.offsetTop - i.offsetTop), 10) + 'px'); | ||
| } | ||
| if ( | ||
| ((l.style.borderRadius = a.getPropertyValue('border-radius')), | ||
| (l.style.minWidth = n[0].width + 'px'), | ||
| o) | ||
| ) { | ||
| var u = e.createElement('option'); | ||
| (u.textContent = i.title), | ||
| (u.disabled = !0), | ||
| u.setAttribute('class', 'message'), | ||
| l.appendChild(u); | ||
| } | ||
| return ( | ||
| i.appendChild(l), | ||
| o | ||
| ? l.addEventListener('change', w) | ||
| : l.addEventListener('click', w), | ||
| l.addEventListener('blur', w), | ||
| l.addEventListener('keydown', w), | ||
| l.addEventListener('keypress', E), | ||
| l | ||
| ); | ||
| } | ||
| }, | ||
| E = function(t) { | ||
| var i = t.target, | ||
| n = i.parentNode, | ||
| a = e.querySelector('input[list="' + n.id + '"]'); | ||
| 'select' === i.tagName.toLowerCase() && | ||
| null !== a && | ||
| (!t.key || | ||
| ('Backspace' !== t.key && 1 !== t.key.length) || | ||
| (a.focus(), | ||
| 'Backspace' === t.key | ||
| ? ((a.value = a.value.slice(0, -1)), C(a)) | ||
| : (a.value += t.key), | ||
| b(n, a))); | ||
| }, | ||
| w = function(t) { | ||
| var i = t.currentTarget, | ||
| n = i.parentNode, | ||
| a = e.querySelector('input[list="' + n.id + '"]'); | ||
| if ('select' === i.tagName.toLowerCase() && null !== a) { | ||
| var o = t.type, | ||
| r = 'keydown' === o && 13 !== t.keyCode && 27 !== t.keyCode; | ||
| ('change' === o || | ||
| 'click' === o || | ||
| ('keydown' === o && (13 === t.keyCode || 'Tab' === t.key))) && | ||
| i.value.length > 0 && | ||
| i.value !== n.title | ||
| ? (g(a, i.value), | ||
| C(a), | ||
| 'Tab' !== t.key && a.focus(), | ||
| 13 === t.keyCode && t.preventDefault(), | ||
| (r = !1)) | ||
| : 'keydown' === o && 27 === t.keyCode && a.focus(), | ||
| A(r, i); | ||
| } | ||
| }, | ||
| C = function(t) { | ||
| var i; | ||
| 'function' == typeof Event | ||
| ? (i = new Event('input', { bubbles: !0 })) | ||
| : (i = e.createEvent('Event')).initEvent('input', !0, !1), | ||
| t.dispatchEvent(i); | ||
| }, | ||
| A = function(t, i) { | ||
| t | ||
| ? i.removeAttribute('hidden') | ||
| : i.setAttributeNode(e.createAttribute('hidden')), | ||
| i.setAttribute('aria-hidden', (!t).toString()); | ||
| }; | ||
| (m = window.HTMLInputElement) && | ||
| m.prototype && | ||
| void 0 === m.prototype.list && | ||
| Object.defineProperty(m.prototype, 'list', { | ||
| get: function() { | ||
| var t = e.getElementById(this.getAttribute('list')); | ||
| return 'object' == typeof this && | ||
| this instanceof m && | ||
| t && | ||
| t.matches('datalist') | ||
| ? t | ||
| : null; | ||
| } | ||
| }), | ||
| (function(e) { | ||
| e && | ||
| e.prototype && | ||
| void 0 === e.prototype.options && | ||
| Object.defineProperty(e.prototype, 'options', { | ||
| get: function() { | ||
| return 'object' == typeof this && this instanceof e | ||
| ? this.getElementsByTagName('option') | ||
| : null; | ||
| } | ||
| }); | ||
| })(window.HTMLElement); | ||
| } | ||
| })(); |
| { | ||
| "name": "datalist-polyfill", | ||
| "version": "1.24.1", | ||
| "version": "1.24.2", | ||
| "description": "A minimal and dependency-free vanilla JavaScript datalist polyfill. Supports all standard's functionality as well as mimics other browsers behavior.", | ||
@@ -35,3 +35,3 @@ "main": "datalist-polyfill.js", | ||
| "@commitlint/config-conventional": "^8.3.4", | ||
| "@wdio/cli": "^5.21.0", | ||
| "@wdio/cli": "^5.22.0", | ||
| "@wdio/dot-reporter": "^5.18.6", | ||
@@ -43,2 +43,3 @@ "@wdio/local-runner": "^5.21.0", | ||
| "prettier": "^1.19.1", | ||
| "pretty-quick": "^2.0.1", | ||
| "webdriverio": "^5.21.0", | ||
@@ -55,5 +56,12 @@ "xo": "^0.28.0" | ||
| "one-var": 0, | ||
| "no-use-before-define": 0 | ||
| "no-use-before-define": 0, | ||
| "unicorn/prefer-includes": 0, | ||
| "unicorn/prefer-dataset": 0 | ||
| } | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "pretty-quick --staged" | ||
| } | ||
| } | ||
| } |
| # datalist-polyfill | ||
| [](https://opensource.org/licenses/mit-license.php) | ||
| [](https://npmjs.com/package/datalist-polyfill 'datalist polyfill – on NPM') | ||
| [](https://bundlephobia.com/result?p=datalist-polyfill) | ||
| [](https://npmjs.com/package/datalist-polyfill 'datalist polyfill – on NPM') | ||
| [](https://www.jsdelivr.com/package/npm/datalist-polyfill 'datalist polyfill – on jsDelivr') | ||
| [](https://app.codacy.com/app/mfranzke/datalist-polyfill?utm_source=github.com&utm_medium=referral&utm_content=mfranzke/datalist-polyfill&utm_campaign=badger) | ||
| [](https://npmjs.com/package/datalist-polyfill 'datalist polyfill – on NPM') | ||
| [](https://greenkeeper.io/) | ||
| [](https://david-dm.org/mfranzke/datalist-polyfill 'datalist polyfill – on david-dm') | ||
| [](https://github.com/prettier/prettier) | ||
| [](https://github.com/xojs/xo) | ||
| [](https://app.codacy.com/app/mfranzke/datalist-polyfill?utm_source=github.com&utm_medium=referral&utm_content=mfranzke/datalist-polyfill&utm_campaign=badger) | ||
| [](https://greenkeeper.io/) | ||
| [](https://conventionalcommits.org) | ||
@@ -20,8 +22,9 @@ **Update:** Safari now supports the `datalist` element at least basically, as [announced earlier this year with the latest release of Safari both for iOS and MacOS X](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes#3130314). Yeah !!! Exciting news! | ||
| - mitigating the [different levels of support](https://caniuse.com/#feat=datalist) both by Safari and IE9+ as well as Edge | ||
| - released under the MIT license | ||
| - made in Germany. And supported by so many great people from all over this planet - see "Credits" accordingly. | ||
| - Released under the MIT license | ||
| - Made in Germany. And supported by so many great people from all over this planet - see "Credits" accordingly. | ||
| - Compatible down to Microsoft Internet Explorer 9 | ||
| ## Features | ||
| - Lightweight: 7.1 kB of minified JavaScript, around 2.6 kB gzipped | ||
| - Lightweight (see the badge above) | ||
| - Fully flexible to change the datalist entries / `<option>`s | ||
@@ -28,0 +31,0 @@ - Supporting: |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.34%
71117
- Lines of code
- increased by53%
970
- Number of lines in readme file
- increased by1.35%
226
Worsened metrics
- Dev dependency count
- increased by9.09%
12
No dependency changes