New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
datalist-polyfill
Advanced tools
datalist-polyfill - npm Package Compare versions
Comparing version 1.14.4 to 1.15.0
| { | ||
| "name": "datalist-polyfill", | ||
| "description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.", | ||
| "version": "1.14.4", | ||
| "version": "1.15.0", | ||
| "homepage": "https://github.com/mfranzke/datalist-polyfill", | ||
@@ -6,0 +6,0 @@ "authors": [{ |
@@ -9,2 +9,6 @@ # Changelog | ||
| ## [1.15.0] - 2018-06-22 | ||
| ### Changed | ||
| - Mainly simplified the code. | ||
| ## [1.14.4] - 2018-06-21 | ||
@@ -11,0 +15,0 @@ ### Fixed |
@@ -7,3 +7,3 @@ /* | ||
| /* | ||
| * A lightweight and library dependency free vanilla JavaScript datalist polyfill. | ||
| * A minimal and dependency-free vanilla JavaScript datalist polyfill. | ||
| * Tests for native support of an inputs elements datalist functionality. | ||
@@ -16,8 +16,4 @@ * Elsewhere the functionality gets emulated by a select element. | ||
| // feature detection | ||
| var nativedatalist = ('list' in document.createElement('input')) && | ||
| !!( document.createElement('datalist') && window.HTMLDataListElement ); | ||
| // in case of that the feature doesn't exist, emulate it's functionality | ||
| if (nativedatalist) { | ||
| // feature detection - let's break here, if it's even already supported | ||
| if ('list' in document.createElement('input') && !!( document.createElement('datalist') && window.HTMLDataListElement)) { | ||
| return false; | ||
@@ -29,5 +25,3 @@ } | ||
| (function(constructor) { | ||
| if (constructor && | ||
| constructor.prototype && | ||
| constructor.prototype.list === undefined) { | ||
| if (constructor && constructor.prototype && constructor.prototype.list === undefined) { | ||
| Object.defineProperty(constructor.prototype, 'list', { | ||
@@ -47,5 +41,3 @@ get: function() { | ||
| (function(constructor) { | ||
| if (constructor && | ||
| constructor.prototype && | ||
| constructor.prototype.options === undefined) { | ||
| if (constructor && constructor.prototype && constructor.prototype.options === undefined) { | ||
| Object.defineProperty(constructor.prototype, 'options', { | ||
@@ -124,66 +116,60 @@ get: function() { | ||
| var eventTarget = event.target, | ||
| eventTargetTagName = eventTarget.tagName.toLowerCase(); | ||
| eventTargetTagName = eventTarget.tagName.toLowerCase(), | ||
| dataList = eventTarget.list; | ||
| // check for whether the events target was an input datalist | ||
| if (eventTargetTagName && eventTargetTagName === 'input' && eventTarget.getAttribute('list')) { | ||
| // check for whether the events target was an input datalist and still check for an existing instance | ||
| if (eventTargetTagName && eventTargetTagName === 'input' && dataList !== null) { | ||
| var list = eventTarget.getAttribute('list'), | ||
| dataList = document.getElementById(list); | ||
| var dataListSelect = dataList.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(eventTarget, dataList); | ||
| // still check for an existing instance | ||
| if (dataList !== null) { | ||
| if (dataListSelect !== undefined) { | ||
| var dataListSelect = dataList.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(eventTarget, dataList); | ||
| var visible = false; | ||
| // still check for an existing instance | ||
| if (dataListSelect !== undefined) { | ||
| // on an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select | ||
| if (event.keyCode !== keyESC && event.keyCode !== keyENTER) { | ||
| var visible = false; | ||
| var inputValue = eventTarget.value, | ||
| keyOpen = (event.keyCode === keyUP || event.keyCode === keyDOWN); | ||
| // on an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select | ||
| if (event.keyCode !== keyESC && event.keyCode !== keyENTER) { | ||
| // if the input contains a value, than ... | ||
| if (inputValue !== '' || keyOpen) { | ||
| var inputValue = eventTarget.value, | ||
| keyOpen = (event.keyCode === keyUP || event.keyCode === keyDOWN); | ||
| // prepare the options | ||
| if (prepOptions(dataList, eventTarget)) { | ||
| visible = true; | ||
| } | ||
| // if the input contains a value, than ... | ||
| if (inputValue !== '' || keyOpen) { | ||
| var dataListSelectOptionsLength = dataListSelect.options.length, | ||
| firstEntry = 0, | ||
| lastEntry = dataListSelectOptionsLength - 1; | ||
| // prepare the options | ||
| if (prepOptions(dataList, eventTarget)) { | ||
| visible = true; | ||
| } | ||
| if (touched) { | ||
| // preselect best fitting index | ||
| dataListSelect.selectedIndex = firstEntry; | ||
| var dataListSelectOptionsLength = dataListSelect.options.length, | ||
| firstEntry = 0, | ||
| lastEntry = dataListSelectOptionsLength - 1; | ||
| } else if (dataListSelect.selectedIndex === -1) { | ||
| if (touched) { | ||
| // preselect best fitting index | ||
| dataListSelect.selectedIndex = firstEntry; | ||
| } else if (dataListSelect.selectedIndex === -1) { | ||
| switch (event.keyCode) { | ||
| case keyUP: | ||
| dataListSelect.selectedIndex = lastEntry; | ||
| break; | ||
| case keyDOWN: | ||
| dataListSelect.selectedIndex = firstEntry; | ||
| break; | ||
| } | ||
| switch (event.keyCode) { | ||
| case keyUP: | ||
| dataListSelect.selectedIndex = lastEntry; | ||
| break; | ||
| case keyDOWN: | ||
| dataListSelect.selectedIndex = firstEntry; | ||
| break; | ||
| } | ||
| } | ||
| // on arrow up or down keys, focus the select | ||
| if (keyOpen) { | ||
| // on arrow up or down keys, focus the select | ||
| if (keyOpen) { | ||
| dataListSelect.focus(); | ||
| } | ||
| dataListSelect.focus(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // toggle the visibility of the datalist select according to previous checks | ||
| toggleVisibility(dataListSelect, visible); | ||
| } | ||
| // toggle the visibility of the datalist select according to previous checks | ||
| toggleVisibility(dataListSelect, visible); | ||
| } | ||
@@ -201,10 +187,9 @@ } | ||
| var dataListSelect = dataList.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(input, dataList), | ||
| dataListOptions = dataList.querySelectorAll('option:not([disabled]):not(.message)'), | ||
| dataListOptions = dataList.querySelectorAll('option:not(:disabled)'), | ||
| inputValue = input.value, | ||
| newSelectValues = document.createDocumentFragment(), | ||
| disabledValues = document.createDocumentFragment(), | ||
| multipleEmails = (input.type === 'email' && input.multiple); | ||
| disabledValues = document.createDocumentFragment(); | ||
| // in case of type=email and multiple attribute, we would need to split the inputs value into pieces | ||
| if (multipleEmails) { | ||
| if (input.type === 'email' && input.multiple) { | ||
| var multipleEntries = inputValue.split(','), | ||
@@ -279,50 +264,45 @@ relevantIndex = multipleEntries.length - 1; | ||
| var eventTarget = event.target, | ||
| eventTargetTagName = eventTarget.tagName.toLowerCase(); | ||
| eventTargetTagName = eventTarget.tagName.toLowerCase(), | ||
| dataList = eventTarget.list; | ||
| // check for whether the events target was an input datalist and whether it's of one of the supported input types defined above | ||
| if (eventTargetTagName && eventTargetTagName === 'input' && eventTarget.getAttribute('list')) { | ||
| // check for whether the events target was an input datalist and whether it's of one of the supported input types defined above and still check for an existing instance | ||
| if (eventTargetTagName && eventTargetTagName === 'input' && dataList !== null) { | ||
| var eventType = event.type, | ||
| list = eventTarget.getAttribute('list'), | ||
| dataList = document.getElementById(list); | ||
| // still check for an existing instance | ||
| if (dataList !== null) { | ||
| // creating the select if there's no instance so far (e.g. because of that it hasn't been handled or it has been dynamically inserted) | ||
| var dataListSelect = dataList.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(eventTarget, dataList), | ||
| // either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions | ||
| visible = (dataListSelect && dataListSelect.querySelector('option:not(:disabled)') && ((eventType === 'focusin' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect))); | ||
| dataListSelect = dataList.getElementsByClassName(classNamePolyfillingSelect)[0] || setUpPolyfillingSelect(eventTarget, dataList), | ||
| // either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions | ||
| visible = (dataListSelect && dataListSelect.querySelector('option:not(:disabled)') && ((eventType === 'focusin' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect))); | ||
| // test for whether this input has already been enhanced by the polyfill | ||
| if (!new RegExp(' ' + classNameInput + ' ').test(' ' + eventTarget.className + ' ')) { | ||
| // we'd like to prevent autocomplete on the input datalist field | ||
| eventTarget.setAttribute('autocomplete', 'off'); | ||
| // test for whether this input has already been enhanced by the polyfill | ||
| if (!new RegExp(' ' + classNameInput + ' ').test(' ' + eventTarget.className + ' ')) { | ||
| // we'd like to prevent autocomplete on the input datalist field | ||
| eventTarget.setAttribute('autocomplete', 'off'); | ||
| // WAI ARIA attributes | ||
| eventTarget.setAttribute('role', 'textbox'); | ||
| eventTarget.setAttribute('aria-haspopup', 'true'); | ||
| eventTarget.setAttribute('aria-autocomplete', 'list'); | ||
| eventTarget.setAttribute('aria-owns', list); | ||
| // WAI ARIA attributes | ||
| eventTarget.setAttribute('role', 'textbox'); | ||
| eventTarget.setAttribute('aria-haspopup', 'true'); | ||
| eventTarget.setAttribute('aria-autocomplete', 'list'); | ||
| eventTarget.setAttribute('aria-owns', eventTarget.getAttribute('list')); | ||
| // bind the keyup event on the related datalists input | ||
| switch (eventType) { | ||
| case 'focusin': | ||
| eventTarget.addEventListener('keyup', inputInputList); | ||
| // bind the keyup event on the related datalists input | ||
| switch (eventType) { | ||
| case 'focusin': | ||
| eventTarget.addEventListener('keyup', inputInputList); | ||
| eventTarget.addEventListener('focusout', changesInputList, true); | ||
| break; | ||
| case 'blur': | ||
| eventTarget.removeEventListener('keyup', inputInputList); | ||
| eventTarget.addEventListener('focusout', changesInputList, true); | ||
| break; | ||
| case 'blur': | ||
| eventTarget.removeEventListener('keyup', inputInputList); | ||
| eventTarget.removeEventListener('focusout', changesInputList, true); | ||
| break; | ||
| } | ||
| // add class for identifying that this input is even already being polyfilled | ||
| eventTarget.className += ' ' + classNameInput; | ||
| eventTarget.removeEventListener('focusout', changesInputList, true); | ||
| break; | ||
| } | ||
| // toggle the visibility of the datalist select according to previous checks | ||
| toggleVisibility(dataListSelect, visible); | ||
| // add class for identifying that this input is even already being polyfilled | ||
| eventTarget.className += ' ' + classNameInput; | ||
| } | ||
| // toggle the visibility of the datalist select according to previous checks | ||
| toggleVisibility(dataListSelect, visible); | ||
| } | ||
@@ -333,6 +313,4 @@ }; | ||
| var setUpPolyfillingSelect = function(input, dataList) { | ||
| var inputType = input.type; | ||
| if (supportedTypes.indexOf(input.type) > -1) { | ||
| if (supportedTypes.indexOf(inputType) > -1) { | ||
| // still check for an existing instance | ||
@@ -438,13 +416,9 @@ if (dataList !== null) { | ||
| if (inputList !== null && typeof( selectValue ) !== 'undefined' && selectValue.length > 0 && selectValue !== message) { | ||
| var inputListValue = inputList.value, | ||
| lastSeperator, | ||
| multipleEmails = (inputList.type === 'email' && inputList.multiple), | ||
| var lastSeperator, | ||
| evt; | ||
| // in case of type=email and multiple attribute, we need to set up the resulting inputs value differently | ||
| if (multipleEmails && (lastSeperator = inputListValue.lastIndexOf(',') ) > -1) { | ||
| inputList.value = inputListValue.slice(0, lastSeperator) + ',' + selectValue; | ||
| } else { | ||
| inputList.value = (inputList.type === 'email' && inputList.multiple && (lastSeperator = inputList.value.lastIndexOf(',') ) > -1) ? | ||
| inputList.value.slice(0, lastSeperator) + ',' + selectValue : | ||
| inputList.value = selectValue; | ||
| } | ||
@@ -477,6 +451,2 @@ // create and dispatch the input event; divided for IE9 usage | ||
| var toggleVisibility = function(dataListSelect, visible) { | ||
| if (visible === undefined) { | ||
| visible = (dataListSelect && dataListSelect.querySelector('option:not(:disabled)')); | ||
| } | ||
| if (visible) { | ||
@@ -483,0 +453,0 @@ dataListSelect.removeAttribute('hidden'); |
@@ -6,2 +6,2 @@ /* | ||
| */ | ||
| !function(){"use strict";if("list"in document.createElement("input")&&!(!document.createElement("datalist")||!window.HTMLDataListElement))return!1;!function(e){e&&e.prototype&&void 0===e.prototype.list&&Object.defineProperty(e.prototype,"list",{get:function(){if("object"==typeof this&&this instanceof e){var t=this.getAttribute("list");return document.getElementById(t)}return null}})}(window.HTMLInputElement),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){if("object"==typeof this&&this instanceof e)return this.getElementsByTagName("option")}})}(window.HTMLElement);var e=!1,t=13,i=27,n=38,r=40,o=" / ",a=["text","email","number","search","tel","url"],l="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var n=0;n<e[i].addedNodes.length;++n)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){var r=document.querySelector('[list="'+t.id+'"]');if(""!==r.value){var o=t;g(o.getElementsByClassName("polyfilling")[0],c(o,r))}}});var p=function(t){var i=t.target,n=i.tagName.toLowerCase();if(n&&"input"===n&&i.getAttribute("list")){var r=i.getAttribute("list"),o=document.getElementById(r);if(null!==o){var a=o.getElementsByClassName("polyfilling")[0]||m(i,o);if(void 0!==a){var l=!1;if(27!==t.keyCode&&13!==t.keyCode){var s=i.value,u=38===t.keyCode||40===t.keyCode;if(""!==s||u){c(o,i)&&(l=!0);var d=a.options.length,p=0,f=d-1;if(e)a.selectedIndex=0;else if(-1===a.selectedIndex)switch(t.keyCode){case 38:a.selectedIndex=f;break;case 40:a.selectedIndex=0;break}u&&a.focus()}}g(a,l)}}}},c=function(t,i){void 0!==d&&d.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||m(i,t),r=t.querySelectorAll("option:not([disabled]):not(.message)"),o=i.value,a=document.createDocumentFragment(),l=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=o.split(","),u=s.length-1;o=s[u].trim()}Array.prototype.slice.call(r).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(o.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),n=e.text,r=n.substr(0,t.length+" / ".length),s=t+" / ";n&&!i&&n!==t&&r!==s?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),a.appendChild(e)}else l.appendChild(e)}),n.appendChild(a);var p=n.options.length;return n.size=p>10?10:p,n.multiple=!e&&p<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(l),void 0!==d&&d.observe(t,{childList:!0}),p},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var n=e.type,r=t.getAttribute("list"),o=document.getElementById(r);if(null!==o){var a=o.getElementsByClassName("polyfilling")[0]||m(t,o),l=a&&a.querySelector("option:not(:disabled)")&&("focusin"===n&&""!==t.value||e.relatedTarget&&e.relatedTarget===a);if(!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",r),n){case"focusin":t.addEventListener("keyup",p),t.addEventListener("focusout",f,!0);break;case"blur":t.removeEventListener("keyup",p),t.removeEventListener("focusout",f,!0);break}t.className+=" polyfilled"}g(a,l)}}},m=function(t,i){var n=t.type;if(a.indexOf(n)>-1&&null!==i){var r=i.title,o=t.getClientRects(),l=window.getComputedStyle(t),s=parseFloat(l.getPropertyValue("margin-right")),u=parseFloat(l.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",g(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===l.getPropertyValue("display")?d.style.marginTop="-"+l.getPropertyValue("margin-bottom"):("rtl"===l.getPropertyValue("direction")?d.style.marginRight="-"+(o[0].width+u)+"px":d.style.marginLeft="-"+(o[0].width+s)+"px",d.style.marginTop=parseInt(o[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=l.getPropertyValue("border-radius"),d.style.minWidth=o[0].width+"px",e){var p=document.createElement("option");p.innerText=r,p.disabled=!0,p.setAttribute("class","message"),d.appendChild(p)}return i.appendChild(d),e?d.addEventListener("change",v):d.addEventListener("click",v),d.addEventListener("blur",v),d.addEventListener("keyup",v),d}},v=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var n="select"===i?t:t.parentNode,r=n.parentNode,o=r.title,a=e.type,l="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"click"===a||"keyup"===a&&13===e.keyCode){var s=r.id,u=document.querySelector('input[list="'+s+'"]'),d=n.value;if(null!==u&&void 0!==d&&d.length>0&&d!==o){var p=u.value,c,f="email"===u.type&&u.multiple,m;f&&(c=p.lastIndexOf(","))>-1?u.value=p.slice(0,c)+","+d:u.value=d,"function"==typeof Event?m=new Event("input",{bubbles:!0}):(m=document.createEvent("Event"),m.initEvent("input",!0,!1)),u.dispatchEvent(m),u.focus(),l=!1}}g(n,l)}},g=function(e,t){void 0===t&&(t=e&&e.querySelector("option:not(:disabled)")),t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focusin",f,!0)}(); | ||
| !function(){"use strict";if("list"in document.createElement("input")&&document.createElement("datalist")&&window.HTMLDataListElement)return!1;!function(e){e&&e.prototype&&void 0===e.prototype.list&&Object.defineProperty(e.prototype,"list",{get:function(){if("object"==typeof this&&this instanceof e){var t=this.getAttribute("list");return document.getElementById(t)}return null}})}(window.HTMLInputElement),function(e){e&&e.prototype&&void 0===e.prototype.options&&Object.defineProperty(e.prototype,"options",{get:function(){if("object"==typeof this&&this instanceof e)return this.getElementsByTagName("option")}})}(window.HTMLElement);var e=!1,t=13,i=27,n=38,r=40,o=" / ",a=["text","email","number","search","tel","url"],l="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var n=0;n<e[i].addedNodes.length;++n)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){var r=document.querySelector('[list="'+t.id+'"]');if(""!==r.value){var o=t;y(o.getElementsByClassName("polyfilling")[0],c(o,r))}}});var p=function(t){var i=t.target,n=i.tagName.toLowerCase(),r=i.list;if(n&&"input"===n&&null!==r){var o=r.getElementsByClassName("polyfilling")[0]||v(i,r);if(void 0!==o){var a=!1;if(27!==t.keyCode&&13!==t.keyCode){var l=i.value,s=38===t.keyCode||40===t.keyCode;if(""!==l||s){c(r,i)&&(a=!0);var u=o.options.length,d=0,p=u-1;if(e)o.selectedIndex=0;else if(-1===o.selectedIndex)switch(t.keyCode){case 38:o.selectedIndex=p;break;case 40:o.selectedIndex=0;break}s&&o.focus()}}y(o,a)}}},c=function(t,i){void 0!==d&&d.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||v(i,t),r=t.querySelectorAll("option:not(:disabled)"),o=i.value,a=document.createDocumentFragment(),l=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=o.split(","),u=s.length-1;o=s[u].trim()}Array.prototype.slice.call(r).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(o.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),n=e.text,r=n.substr(0,t.length+" / ".length),s=t+" / ";n&&!i&&n!==t&&r!==s?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),a.appendChild(e)}else l.appendChild(e)}),n.appendChild(a);var p=n.options.length;return n.size=p>10?10:p,n.multiple=!e&&p<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(l),void 0!==d&&d.observe(t,{childList:!0}),p},f=function(e){var t=e.target,i=t.tagName.toLowerCase(),n=t.list;if(i&&"input"===i&&null!==n){var r=e.type,o=n.getElementsByClassName("polyfilling")[0]||v(t,n),a=o&&o.querySelector("option:not(:disabled)")&&("focusin"===r&&""!==t.value||e.relatedTarget&&e.relatedTarget===o);if(!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",t.getAttribute("list")),r){case"focusin":t.addEventListener("keyup",p),t.addEventListener("focusout",f,!0);break;case"blur":t.removeEventListener("keyup",p),t.removeEventListener("focusout",f,!0);break}t.className+=" polyfilled"}y(o,a)}},v=function(t,i){if(a.indexOf(t.type)>-1&&null!==i){var n=i.title,r=t.getClientRects(),o=window.getComputedStyle(t),l=parseFloat(o.getPropertyValue("margin-right")),s=parseFloat(o.getPropertyValue("margin-left")),u=document.createElement("select");if(u.setAttribute("class","polyfilling"),u.style.position="absolute",y(u,!1),u.setAttribute("aria-live","polite"),u.setAttribute("role","listbox"),e||u.setAttribute("aria-multiselectable","false"),"block"===o.getPropertyValue("display")?u.style.marginTop="-"+o.getPropertyValue("margin-bottom"):("rtl"===o.getPropertyValue("direction")?u.style.marginRight="-"+(r[0].width+s)+"px":u.style.marginLeft="-"+(r[0].width+l)+"px",u.style.marginTop=parseInt(r[0].height+(t.offsetTop-i.offsetTop),10)+"px"),u.style.borderRadius=o.getPropertyValue("border-radius"),u.style.minWidth=r[0].width+"px",e){var d=document.createElement("option");d.innerText=n,d.disabled=!0,d.setAttribute("class","message"),u.appendChild(d)}return i.appendChild(u),e?u.addEventListener("change",m):u.addEventListener("click",m),u.addEventListener("blur",m),u.addEventListener("keyup",m),u}},m=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var n="select"===i?t:t.parentNode,r=n.parentNode,o=r.title,a=e.type,l="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"click"===a||"keyup"===a&&13===e.keyCode){var s=r.id,u=document.querySelector('input[list="'+s+'"]'),d=n.value;if(null!==u&&void 0!==d&&d.length>0&&d!==o){var p,c;u.value="email"===u.type&&u.multiple&&(p=u.value.lastIndexOf(","))>-1?u.value.slice(0,p)+","+d:u.value=d,"function"==typeof Event?c=new Event("input",{bubbles:!0}):(c=document.createEvent("Event"),c.initEvent("input",!0,!1)),u.dispatchEvent(c),u.focus(),l=!1}}y(n,l)}},y=function(e,t){t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focusin",f,!0)}(); |
| { | ||
| "name": "datalist-polyfill", | ||
| "version": "1.14.4", | ||
| "version": "1.15.0", | ||
| "description": "A lightweight and dependency-free vanilla JavaScript datalist polyfill.", | ||
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js", |
@@ -43,3 +43,3 @@ [npm]: https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM" | ||
| ## Core concepts | ||
| The plugin was designed with the following concepts kept in mind: | ||
| The polyfill was designed with the following concepts kept in mind: | ||
@@ -77,3 +77,3 @@ * dependency-free | ||
| ### Microsoft Internet Explorer | ||
| #### Internet Explorer 10- | ||
| #### Internet Explorer 9 | ||
| You'll need the declaration for the standard `hidden` attribute, that you might already have included in case you're using [`normalize.css`](https://github.com/necolas/normalize.css/). Otherwise just adapt it from there: | ||
@@ -91,4 +91,3 @@ ```css | ||
| #### Internet Explorer 9 | ||
| In case you'd like to support IE9, you'll need to add a nesting `select` element wrapped by a conditional comment into the `datalist` element. | ||
| And you need to add a nesting `select` element wrapped by a conditional comment into the `datalist` element. | ||
| Please have a look at the [demo page](https://mfranzke.github.io/datalist-polyfill/demo.html) accordingly, the code is being mentioned within the `Internet Explorer 9 support` section. | ||
@@ -95,0 +94,0 @@ |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-1.9%
52800
- Lines of code
- decreased by-5.84%
387
- Number of lines in readme file
- decreased by-0.79%
126
No dependency changes