datalist-polyfill - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

bower.json

 {
     "name": "datalist-polyfill",
 	"description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "homepage": "https://github.com/mfranzke/datalist-polyfill",
@@ -6,0 +6,0 @@ "authors": [{

datalist-polyfill.js

@@ -56,2 +56,3 @@ /*
 		var selectMultiple = true,
+		
 		// introduced speaking variables for the different keycodes
@@ -61,4 +62,6 @@ keyENTER = 13,
 			keyUP = 38,
-			keyDOWN = 40;
+			keyDOWN = 40,
 			
+			supportedTypes = [ 'text', 'email', 'number', 'search', 'tel', 'url' ];
+			
 		// differentiate for touch interactions, adapted by https://medium.com/@david.gilbertson/the-only-way-to-detect-touch-with-javascript-7791a3346685
@@ -201,6 +204,7 @@ window.addEventListener( 'touchstart' , function onFirstTouch() {
 				eventTargetTagName = $eventTarget.tagName.toLowerCase(),
+				inputType = $eventTarget.type,
 				inputStyles = window.getComputedStyle( $eventTarget );
 
-			// 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 whether it's of one of the supported input types defined above
+			if ( eventTargetTagName && eventTargetTagName === 'input' && $eventTarget.getAttribute('list') && supportedTypes.indexOf( inputType ) > -1 ) {
 
@@ -207,0 +211,0 @@ var eventType = event.type,

datalist-polyfill.min.js

@@ -6,2 +6,2 @@ /*
 */
-!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){!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=!0,t=13,i=27,r=38,n=40;window.addEventListener("touchstart",function t(){e=!1,window.removeEventListener("touchstart",t)});var a=function(t){var i=t.target,r=i.tagName.toLowerCase();if(r&&"input"===r&&i.getAttribute("list")){var n=i.getAttribute("list"),a=document.getElementById(n);if(null!==a){var o=a.getElementsByTagName("select")[0];if(void 0!==o){if(27===t.keyCode)return o.setAttributeNode(document.createAttribute("hidden")),void o.setAttribute("aria-hidden","true");var d=a.getElementsByTagName("option"),u=i.value,l=document.createDocumentFragment(),s=document.createDocumentFragment(),c=!1;if("email"===i.type&&i.multiple){var p=u.split(","),m=p.length-1;u=p[m].trim()}if(""!==u){Array.prototype.slice.call(d).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(u.toLowerCase())&&!1===e.disabled){var i=e.label||e.innerText.trim(),r=" / ",n=i.substr(0,t.length+" / ".length),a=t+" / ";i!==t&&n!==a&&(e.label=i?t+" / "+i:t),l.appendChild(e),c=!0}else s.appendChild(e)}),o.appendChild(l);var b=0,g=o.options.length-1;if(e){if(-1===o.selectedIndex)switch(t.keyCode){case 38:o.selectedIndex=g;break;case 40:o.selectedIndex=0;break}}else o.selectedIndex=0;a.appendChild(s)}c?o.removeAttribute("hidden"):o.setAttributeNode(document.createAttribute("hidden")),o.setAttribute("aria-hidden",(!c).toString()),38!==t.keyCode&&40!==t.keyCode||o.focus()}}}},o=function(t){var i=t.target,r=i.tagName.toLowerCase(),n=window.getComputedStyle(i);if(r&&"input"===r&&i.getAttribute("list")){var u=t.type,l=i.getAttribute("list"),s=document.getElementById(l);if(null!==s){var c=s.getElementsByTagName("select")[0],p="focus"===u&&""!==t.target.value||t.relatedTarget&&t.relatedTarget===c,m=s.title;if(void 0===c){var b=i.getClientRects(),g=parseFloat(n.getPropertyValue("margin-right")),v=parseFloat(n.getPropertyValue("margin-left"));if(c=document.createElement("select"),e&&c.setAttribute("multiple","true"),c.setAttributeNode(document.createAttribute("hidden")),c.style.position="absolute",c.setAttribute("aria-hidden","true"),c.setAttribute("aria-live","polite"),c.setAttribute("role","listbox"),"rtl"===n.getPropertyValue("direction")?c.style.marginRight="-"+(b[0].width+v)+"px":c.style.marginLeft="-"+(b[0].width+g)+"px",c.style.borderRadius=n.getPropertyValue("border-radius"),c.style.marginTop=b[0].height+"px",c.style.minWidth=b[0].width+"px",!e){var f=document.createElement("option");f.innerText=m,f.disabled=!0,c.appendChild(f)}s.appendChild(c),e?c.addEventListener("mouseup",d):c.addEventListener("change",d),c.addEventListener("blur",d),c.addEventListener("keyup",d),i.setAttribute("autocomplete","off"),i.setAttribute("role","textbox"),i.setAttribute("aria-haspopup","true"),i.setAttribute("aria-autocomplete","list"),i.setAttribute("aria-owns",l)}switch(p?c.removeAttribute("hidden"):c.setAttributeNode(document.createAttribute("hidden")),c.setAttribute("aria-hidden",(!p).toString()),u){case"focus":i.addEventListener("keyup",a),i.addEventListener("blur",o,!0);break;case"blur":i.removeEventListener("keyup",a),i.removeEventListener("blur",o,!0);break}}}},d=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var r="select"===i?t:t.parentNode,n=r.parentNode,a=n.title,o=e.type,d="keyup"===o&&13!==e.keyCode&&27!==e.keyCode;if("change"===o||"mouseup"===o||"keyup"===o&&13===e.keyCode){var u=n.id,l=document.querySelector('input[list="'+u+'"]'),s=r.value;if(null!==l&&s.length>0&&s!==a){var c=l.value,p;"email"===l.type&&l.multiple&&(p=c.lastIndexOf(","))>-1?l.value=c.slice(0,p)+","+s:l.value=s,d=!1}}d?r.removeAttribute("hidden"):r.setAttributeNode(document.createAttribute("hidden")),r.setAttribute("aria-hidden",(!d).toString())}};document.addEventListener("focus",o,!0)}}();
+!function(){"use strict";if(!("list"in document.createElement("input"))||(!document.createElement("datalist")||!window.HTMLDataListElement)){!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=!0,t=13,i=27,r=38,n=40,a=["text","email","number","search","tel","url"];window.addEventListener("touchstart",function t(){e=!1,window.removeEventListener("touchstart",t)});var o=function(t){var i=t.target,r=i.tagName.toLowerCase();if(r&&"input"===r&&i.getAttribute("list")){var n=i.getAttribute("list"),a=document.getElementById(n);if(null!==a){var o=a.getElementsByTagName("select")[0];if(void 0!==o){if(27===t.keyCode)return o.setAttributeNode(document.createAttribute("hidden")),void o.setAttribute("aria-hidden","true");var d=a.getElementsByTagName("option"),u=i.value,l=document.createDocumentFragment(),s=document.createDocumentFragment(),c=!1;if("email"===i.type&&i.multiple){var p=u.split(","),m=p.length-1;u=p[m].trim()}if(""!==u){Array.prototype.slice.call(d).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(u.toLowerCase())&&!1===e.disabled){var i=e.label||e.innerText.trim(),r=" / ",n=i.substr(0,t.length+" / ".length),a=t+" / ";i!==t&&n!==a&&(e.label=i?t+" / "+i:t),l.appendChild(e),c=!0}else s.appendChild(e)}),o.appendChild(l);var b=0,g=o.options.length-1;if(e){if(-1===o.selectedIndex)switch(t.keyCode){case 38:o.selectedIndex=g;break;case 40:o.selectedIndex=0;break}}else o.selectedIndex=0;a.appendChild(s)}c?o.removeAttribute("hidden"):o.setAttributeNode(document.createAttribute("hidden")),o.setAttribute("aria-hidden",(!c).toString()),38!==t.keyCode&&40!==t.keyCode||o.focus()}}}},d=function(t){var i=t.target,r=i.tagName.toLowerCase(),n=i.type,l=window.getComputedStyle(i);if(r&&"input"===r&&i.getAttribute("list")&&a.indexOf(n)>-1){var s=t.type,c=i.getAttribute("list"),p=document.getElementById(c);if(null!==p){var m=p.getElementsByTagName("select")[0],b="focus"===s&&""!==t.target.value||t.relatedTarget&&t.relatedTarget===m,g=p.title;if(void 0===m){var v=i.getClientRects(),f=parseFloat(l.getPropertyValue("margin-right")),y=parseFloat(l.getPropertyValue("margin-left"));if(m=document.createElement("select"),e&&m.setAttribute("multiple","true"),m.setAttributeNode(document.createAttribute("hidden")),m.style.position="absolute",m.setAttribute("aria-hidden","true"),m.setAttribute("aria-live","polite"),m.setAttribute("role","listbox"),"rtl"===l.getPropertyValue("direction")?m.style.marginRight="-"+(v[0].width+y)+"px":m.style.marginLeft="-"+(v[0].width+f)+"px",m.style.borderRadius=l.getPropertyValue("border-radius"),m.style.marginTop=v[0].height+"px",m.style.minWidth=v[0].width+"px",!e){var h=document.createElement("option");h.innerText=g,h.disabled=!0,m.appendChild(h)}p.appendChild(m),e?m.addEventListener("mouseup",u):m.addEventListener("change",u),m.addEventListener("blur",u),m.addEventListener("keyup",u),i.setAttribute("autocomplete","off"),i.setAttribute("role","textbox"),i.setAttribute("aria-haspopup","true"),i.setAttribute("aria-autocomplete","list"),i.setAttribute("aria-owns",c)}switch(b?m.removeAttribute("hidden"):m.setAttributeNode(document.createAttribute("hidden")),m.setAttribute("aria-hidden",(!b).toString()),s){case"focus":i.addEventListener("keyup",o),i.addEventListener("blur",d,!0);break;case"blur":i.removeEventListener("keyup",o),i.removeEventListener("blur",d,!0);break}}}},u=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var r="select"===i?t:t.parentNode,n=r.parentNode,a=n.title,o=e.type,d="keyup"===o&&13!==e.keyCode&&27!==e.keyCode;if("change"===o||"mouseup"===o||"keyup"===o&&13===e.keyCode){var u=n.id,l=document.querySelector('input[list="'+u+'"]'),s=r.value;if(null!==l&&s.length>0&&s!==a){var c=l.value,p;"email"===l.type&&l.multiple&&(p=c.lastIndexOf(","))>-1?l.value=c.slice(0,p)+","+s:l.value=s,d=!1}}d?r.removeAttribute("hidden"):r.setAttributeNode(document.createAttribute("hidden")),r.setAttribute("aria-hidden",(!d).toString())}};document.addEventListener("focus",d,!0)}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

README.md

@@ -8,5 +8,7 @@ # datalist-polyfill
 ## Features
-*	Lightweight: 4.54 kB of JavaScript - less than 2 kB gzipped
+*	Lightweight: 4.61 kB of JavaScript - less than 1.73 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
 *	Supporting:
+	*	the relevant input field types: `text`, `email`, `number`, `search`, `tel` and `url` ...
+	*	... while leaving the others like color or date related, as those would most likely need another polyfill to „work“ correctly or have a meaningful UI
 	*	`input[type=email]` elements multiple attribute
@@ -66,2 +68,5 @@ *	properties `.options` for `datalist` elements and `.list` for `input` elements
 
+### Version 1.8.0 - 2017/07/14
+Restricted the polyfill to only work with relevant input types; we’d like to exclude the ones that even already need another polyfill to „work“ correctly or have a meaningful UI, like e.g. color or date-related ones, as those polyfills should handle the support of the datalist themselves depending on their own functionality.
+
 ### Version 1.7.0 - 2017/06/29
@@ -68,0 +73,0 @@ As mentioned by @aFarkas [within his review](https://github.com/h5bp/html5please/issues/18), `option` elements could be of some different formats. This release especially follows [the spec](https://www.w3.org/TR/html5/forms.html#the-datalist-element) regarding the aspect that "Each suggestion has a value and a label.".

New alerts

License Policy Violation

License

This 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

License

This 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

35415

increased by9.37%

Lines of code

323

increased by0.62%

Number of lines in readme file

137

increased by3.79%

No dependency changes