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.1.1 to 1.1.2

2

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

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

28

datalist-polyfill.js

@@ -24,6 +24,7 @@ /*

var $eventTarget = event.target;
var $eventTarget = event.target,
eventTargetTagName = $eventTarget.tagName;
// check for whether the events target was an input datalist
if ( $eventTarget.matches( 'input[list]' ) ) {
if ( eventTargetTagName && eventTargetTagName.toLowerCase() === 'input' && $eventTarget.getAttribute('list') ) {

@@ -109,6 +110,7 @@ var list = $eventTarget.getAttribute( 'list' ),

var $eventTarget = event.target;
var $eventTarget = event.target,
eventTargetTagName = $eventTarget.tagName;
// check for whether the events target was an input datalist
if ( $eventTarget.matches( 'input[list]' ) ) {
if ( eventTargetTagName && eventTargetTagName.toLowerCase() === 'input' && $eventTarget.getAttribute('list') ) {

@@ -195,6 +197,7 @@ var eventType = event.type,

var $eventTarget = event.target,
eventTargetTagName = $eventTarget.tagName,
message = $eventTarget.parentNode.title;
// check for whether the events target was a select
if ( $eventTarget.matches( 'select' ) ) {
if ( eventTargetTagName && eventTargetTagName.toLowerCase() === 'select' ) {

@@ -228,18 +231,3 @@ var eventType = event.type,

// matches() polyfill - just in case ...
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
}
})();

2

datalist-polyfill.min.js

@@ -6,2 +6,2 @@ /*

*/
!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){var e=function(e){var t=e.target;if(t.matches("input[list]")){var i=t.getAttribute("list"),r=document.getElementById(i);if(null!==r){var a=r.getElementsByTagName("select")[0];if(void 0!==a){if(27===e.keyCode)return a.classList.remove("visible"),void a.setAttribute("aria-hidden",!0);var n=r.querySelectorAll("option[value]"),l=t.value,o=document.createDocumentFragment(),s=document.createDocumentFragment(),u=!1;""!==l&&(Array.prototype.slice.call(n).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;""!==t&&-1!==t.toLowerCase().indexOf(l.toLowerCase())&&!1===e.disabled?(e.innerText=t,o.appendChild(e),u=!0):s.appendChild(e)}),a.appendChild(o),a.selectedIndex=0,r.appendChild(s)),a.classList.toggle("visible",u),a.setAttribute("aria-hidden",!u),38!==e.keyCode&&40!==e.keyCode||a.focus()}}}},t=function(r){var a=r.target;if(a.matches("input[list]")){var n=r.type,l=a.getAttribute("list"),o=document.getElementById(l);if(null!==o){var s=o.getElementsByTagName("select")[0],u="focus"===n&&""!==r.target.value||r.relatedTarget&&r.relatedTarget===s,d=o.title;if(void 0===s){var c=a.getClientRects(),p=document.createElement("option");s=document.createElement("select"),s.setAttribute("aria-hidden",!0),s.setAttribute("aria-live","polite"),s.setAttribute("role","listbox"),s.style.marginLeft="-"+c[0].width+"px",s.style.marginTop=c[0].height+"px",s.style.minWidth=c[0].width+"px",p.innerText=d,p.disabled=!0,s.appendChild(p),o.appendChild(s),s.addEventListener("change",i),s.addEventListener("blur",i),s.addEventListener("keyup",i),a.setAttribute("autocomplete","off"),a.setAttribute("role","textbox"),a.setAttribute("aria-haspopup","true"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-owns",l)}switch(s.classList.toggle("visible",u),s.setAttribute("aria-hidden",!u),n){case"focus":a.addEventListener("keyup",e),a.addEventListener("blur",t,!0);break;case"blur":a.removeEventListener("keyup",e),a.removeEventListener("blur",t,!0);break}}}},i=function(e){var t=e.target,i=t.parentNode.title;if(t.matches("select")){var r=e.type,a="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"keyup"===r&&13===e.keyCode){var n=t.parentNode.id,l=document.querySelector('input[list="'+n+'"]'),o=t.value;null!==l&&o.length>0&&o!==i&&(l.value=o)}t.classList.toggle("visible",a),t.setAttribute("aria-hidden",!a)}};document.addEventListener("focus",t,!0),Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),i=t.length;--i>=0&&t.item(i)!==this;);return i>-1})}}();
!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){var e=function(e){var t=e.target,i=t.tagName;if(i&&"input"===i.toLowerCase()&&t.getAttribute("list")){var a=t.getAttribute("list"),r=document.getElementById(a);if(null!==r){var n=r.getElementsByTagName("select")[0];if(void 0!==n){if(27===e.keyCode)return n.classList.remove("visible"),void n.setAttribute("aria-hidden",!0);var l=r.querySelectorAll("option[value]"),s=t.value,o=document.createDocumentFragment(),d=document.createDocumentFragment(),u=!1;""!==s&&(Array.prototype.slice.call(l).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;""!==t&&-1!==t.toLowerCase().indexOf(s.toLowerCase())&&!1===e.disabled?(e.innerText=t,o.appendChild(e),u=!0):d.appendChild(e)}),n.appendChild(o),n.selectedIndex=0,r.appendChild(d)),n.classList.toggle("visible",u),n.setAttribute("aria-hidden",!u),38!==e.keyCode&&40!==e.keyCode||n.focus()}}}},t=function(a){var r=a.target,n=r.tagName;if(n&&"input"===n.toLowerCase()&&r.getAttribute("list")){var l=a.type,s=r.getAttribute("list"),o=document.getElementById(s);if(null!==o){var d=o.getElementsByTagName("select")[0],u="focus"===l&&""!==a.target.value||a.relatedTarget&&a.relatedTarget===d,c=o.title;if(void 0===d){var p=r.getClientRects(),v=document.createElement("option");d=document.createElement("select"),d.setAttribute("aria-hidden",!0),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),d.style.marginLeft="-"+p[0].width+"px",d.style.marginTop=p[0].height+"px",d.style.minWidth=p[0].width+"px",v.innerText=c,v.disabled=!0,d.appendChild(v),o.appendChild(d),d.addEventListener("change",i),d.addEventListener("blur",i),d.addEventListener("keyup",i),r.setAttribute("autocomplete","off"),r.setAttribute("role","textbox"),r.setAttribute("aria-haspopup","true"),r.setAttribute("aria-autocomplete","list"),r.setAttribute("aria-owns",s)}switch(d.classList.toggle("visible",u),d.setAttribute("aria-hidden",!u),l){case"focus":r.addEventListener("keyup",e),r.addEventListener("blur",t,!0);break;case"blur":r.removeEventListener("keyup",e),r.removeEventListener("blur",t,!0);break}}}},i=function(e){var t=e.target,i=t.tagName,a=t.parentNode.title;if(i&&"select"===i.toLowerCase()){var r=e.type,n="keyup"===r&&13!==e.keyCode&&27!==e.keyCode;if("change"===r||"keyup"===r&&13===e.keyCode){var l=t.parentNode.id,s=document.querySelector('input[list="'+l+'"]'),o=t.value;null!==s&&o.length>0&&o!==a&&(s.value=o)}t.classList.toggle("visible",n),t.setAttribute("aria-hidden",!n)}};document.addEventListener("focus",t,!0)}}();

16

package.json
{
"name": "datalist-polyfill",
"version": "1.1.1",
"version": "1.1.2",
"description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",

@@ -15,3 +15,15 @@ "main": "datalist-polyfill.js",

"license": "MIT",
"readmeFilename": "README.md"
"readmeFilename": "README.md",
"keywords": [
"datalist",
"autosuggest",
"autosuggester",
"suggest",
"suggester",
"select"
],
"bugs": {
"url": "https://github.com/mfranzke/datalist-polyfill/issues"
},
"homepage": "https://github.com/mfranzke/datalist-polyfill"
}

23

README.md
# datalist-polyfill
This is a minimal and library dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality, that will bring joy and happiness into our lives :-)
Tested in Safari, for which it's mainly meant for, as all of the others are already supporting it - quite - well: <http://caniuse.com/#feat=datalist>
Tested in Safari, for which it's mainly meant for, as nearly all of the others are already supporting it - quite - well: <http://caniuse.com/#feat=datalist>
No dependencies, written in plain JavaScript. Released under the MIT License: <http://www.opensource.org/licenses/mit-license.php>
## Features
* Lightweight: 3.04 kB of JavaScript - less than 1.3 kB gzipped
* Fully flexible to change the data / `<option>`s
* Lightweight: 2.78 kB of JavaScript - less than 1.15 kB gzipped
* Fully flexible to change the datalist entries / `<option>`s
* Enables core keyboard controls like e.g. the up and down arrow keys, ESC and ENTER

@@ -16,10 +16,12 @@ * Implements the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices/)

* library dependency-free
* DOM agnostic by event delegation
* code accessibility / readability: because this is what developers even also should take care about regarding themselves
* library dependency-free
* Supporting DOM changes by event delegation
* code accessibility / readability: because this is what we as developers should even also take care about
[![Dependency Status](https://gemnasium.com/badges/github.com/mfranzke/datalist-polyfill.svg)](https://gemnasium.com/github.com/mfranzke/datalist-polyfill)
## Installation
Just integrate both the CSS and JavaScript file into your code - et voilà.
You may optionally load via NPM or Bower-
You may optionally load via NPM or Bower:

@@ -35,5 +37,5 @@ $ npm install datalist-polyfill

### dynamic HTML (or DHTML, if you like to be a little bit nostalgic)
In case that you'd like to dynamically add or modify / build your HTML code, you're even also fine with this polyfill, as it's built with event delegation that makes your UI work with a glance - no function to call after DOM manipulation or something similar.
In case that you'd like to dynamically add or modify / create your HTML code, you're even also good to go with this polyfill, as it's based on event delegation that makes your UI work with a glance - no function to call after DOM manipulation or something similar.
### Changes to the available options
### Changes to the available `option`s
If you'd like to make a change to the integrated list of `<option>` elements, feel free to either remove or add them right away - the list would get generated on the fly after the user typed in something into the input field, so I've even also got you covered on this.

@@ -58,2 +60,5 @@

### Version 1.1.2 - 2017/05/14
Further simplified the code, so that we could even skip the .matches() polyfill. Yeah. And documentation updates.
### Version 1.1.1 - 2017/05/10

@@ -60,0 +65,0 @@ fixed another simple bug that lead to an incorrect index being selected - let's skip this, as it's not even the standard behaviour

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