Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

datalist-polyfill

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

datalist-polyfill - npm Package Compare versions

Comparing version 1.14.2 to 1.14.3

2

bower.json
{
"name": "datalist-polyfill",
"description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
"version": "1.14.2",
"version": "1.14.3",
"homepage": "https://github.com/mfranzke/datalist-polyfill",

@@ -6,0 +6,0 @@ "authors": [{

7

CHANGELOG.md

@@ -9,2 +9,9 @@ # Changelog

## [1.14.3] - 2018-06-20
### Changed
- Changed the order in a comparsion as this simplifies the response.
### Fixed
- Sadly another small bug slipped through today, it's about an incorrect variable being used.
## [1.14.2] - 2018-06-20

@@ -11,0 +18,0 @@ ### Fixed

4

datalist-polyfill.js

@@ -110,3 +110,3 @@ /*

// prepare the options and toggle the visiblity afterwards
toggleVisibility(dataList.getElementsByClassName(classNamePolyfillingSelect)[0], prepOptions(dataList, eventTarget));
toggleVisibility(dataList.getElementsByClassName(classNamePolyfillingSelect)[0], prepOptions(dataList, input));
}

@@ -288,3 +288,3 @@ }

// 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 = (((eventType === 'focus' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect)) && dataListSelect && dataListSelect.querySelector('option:not(:disabled)'));
visible = (dataListSelect && dataListSelect.querySelector('option:not(:disabled)') && ((eventType === 'focus' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect)));

@@ -291,0 +291,0 @@ // test for whether this input has already been enhanced by the polyfill

2

datalist-polyfill.min.js

@@ -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,o=38,l=40,n=" / ",r=["text","email","number","search","tel","url"],a="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 o=0;o<e[i].addedNodes.length;++o)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){if(""!==document.querySelector('[list="'+t.id+'"]').value){var l=t;console.log("toggleVisibility","MutationObserver"),v(l.getElementsByClassName("polyfilling")[0],p(l,eventTarget))}}});var c=function(t){var i=t.target,o=i.tagName.toLowerCase();if(o&&"input"===o&&i.getAttribute("list")){var l=i.getAttribute("list"),n=document.getElementById(l);if(null!==n){var r=n.getElementsByClassName("polyfilling")[0]||y(i,n);if(void 0!==r){var a=!1;if(27!==t.keyCode&&13!==t.keyCode){var s=i.value,u=38===t.keyCode||40===t.keyCode;if(console.log("keyOpen:",u),""!==s||u){p(n,i)&&(a=!0);var d=r.options.length,c=0,g=d-1;if(e)r.selectedIndex=0;else if(-1===r.selectedIndex)switch(t.keyCode){case 38:r.selectedIndex=g;break;case 40:r.selectedIndex=0;break}u&&r.focus()}}else console.log("toggleVisibility","ESC or ENTER");console.log("toggleVisibility","inputInputList"),v(r,a)}}}},p=function(t,i){void 0!==d&&d.disconnect();var o=t.getElementsByClassName("polyfilling")[0]||y(i,t),l=t.querySelectorAll("option:not([disabled]):not(.message)"),n=i.value,r=document.createDocumentFragment(),a=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=n.split(","),u=s.length-1;n=s[u].trim()}Array.prototype.slice.call(l).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(n.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),o=e.text,l=o.substr(0,t.length+" / ".length),s=t+" / ";o&&!i&&o!==t&&l!==s?e.innerText=t+" / "+o:e.text||(e.innerText=i||t),r.appendChild(e)}else a.appendChild(e)}),o.appendChild(r);var c=o.options.length;return o.size=c>10?10:c,o.multiple=!e&&c<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(a),void 0!==d&&d.observe(t,{childList:!0}),c},g=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var o=e.type,l=t.getAttribute("list"),n=document.getElementById(l);if(null!==n){var r=n.getElementsByClassName("polyfilling")[0]||y(t,n),a=("focus"===o&&""!==t.value||e.relatedTarget&&e.relatedTarget===r)&&r&&r.querySelector("option:not(:disabled)");if(console.log("eventTarget.value: ",t.value),console.log("event.relatedTarget: ",e.relatedTarget),console.log("dataListSelect: ",r),console.log("dataListSelect.querySelector(option:not(:disabled)).length :",r.querySelector("option:not(:disabled)")),!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",l),o){case"focus":t.addEventListener("keyup",c),t.addEventListener("focusout",g,!0);break;case"blur":t.removeEventListener("keyup",c),t.removeEventListener("focusout",g,!0);break}t.className+=" polyfilled"}console.log("toggleVisibility","changesInputList"),v(r,a)}}},y=function(t,i){var o=t.type;if(r.indexOf(o)>-1&&null!==i){var l=i.title,n=t.getClientRects(),a=window.getComputedStyle(t),s=parseFloat(a.getPropertyValue("margin-right")),u=parseFloat(a.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",console.log("toggleVisibility","setupPolyfillingSelect"),v(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===a.getPropertyValue("display")?d.style.marginTop="-"+a.getPropertyValue("margin-bottom"):("rtl"===a.getPropertyValue("direction")?d.style.marginRight="-"+(n[0].width+u)+"px":d.style.marginLeft="-"+(n[0].width+s)+"px",d.style.marginTop=parseInt(n[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=a.getPropertyValue("border-radius"),d.style.minWidth=n[0].width+"px",e){var c=document.createElement("option");c.innerText=l,c.disabled=!0,c.setAttribute("class","message"),d.appendChild(c)}return i.appendChild(d),e?d.addEventListener("change",f):d.addEventListener("click",f),d.addEventListener("blur",f),d.addEventListener("keyup",f),d}},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var o="select"===i?t:t.parentNode,l=o.parentNode,n=l.title,r=e.type,a="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"click"===r||"keyup"===r&&13===e.keyCode){var s=l.id,u=document.querySelector('input[list="'+s+'"]'),d=o.value;if(null!==u&&void 0!==d&&d.length>0&&d!==n){var c=u.value,p,g="email"===u.type&&u.multiple,y;g&&(p=c.lastIndexOf(","))>-1?u.value=c.slice(0,p)+","+d:u.value=d,"function"==typeof Event?y=new Event("input",{bubbles:!0}):(y=document.createEvent("Event"),y.initEvent("input",!0,!1)),u.dispatchEvent(y),u.focus(),a=!1}}console.log("toggleVisibility","changeDataListSelect"),v(o,a)}},v=function(e,t){console.log("toggleVisibility",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("focus",g,!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;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)")&&("focus"===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"focus":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("focus",f,!0)}();

2

package.json
{
"name": "datalist-polyfill",
"version": "1.14.2",
"version": "1.14.3",
"description": "A lightweight and dependency-free vanilla JavaScript datalist polyfill.",

@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

3

README.md

@@ -122,4 +122,3 @@ [npm]: https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM"

## Outro
Personally I even also do like the "keep it simple" approach provided within the W3C specs even already:
<https://www.w3.org/TR/html5/forms.html#the-datalist-element>
Personally I even also do like the "keep it simple" approach provided within the [W3C specs](https://www.w3.org/TR/html5/forms.html#the-datalist-element) even already.

@@ -126,0 +125,0 @@ But on the other hand this leads to an additional visible field, but doesn't emulate the (hopefully, fingers crossed) upcoming x-browser implementation and leaves unnecessary syntax for all of the clients that wouldn't even need it (anymore).

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc