datalist-polyfill - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

bower.json

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

datalist-polyfill.js

 /*
 * datalist-polyfill.js - https://github.com/mfranzke/datalist-polyfill
 * @license Copyright(c) 2017 by Maximilian Franzke
-* Supported by Christian and Johannes - many thanks for that !
+* Supported by Christian, Johannes and Michael - many thanks for that !
 *//*
@@ -55,3 +55,8 @@ * A lightweight and library dependency free vanilla JavaScript datalist polyfill.
 		// identify whether a select multiple is feasible
-		var selectMultiple = true;
+		var selectMultiple = true,
+		// introduced speaking variables for the different keycodes
+			keyENTER = 13,
+			keyESC = 27,
+			keyUP = 38,
+			keyDOWN = 40;
 			
@@ -86,5 +91,5 @@ // differentiate for touch interactions, adapted by https://medium.com/@david.gilbertson/the-only-way-to-detect-touch-with-javascript-7791a3346685
 						// on an ESC key press within the input, let's break here and hide the select
-						if ( event.keyCode === 27 ) {
+						if ( event.keyCode === keyESC ) {
 							$dataListSelect.setAttributeNode( document.createAttribute( 'hidden' ) );
-							$dataListSelect.setAttribute( 'aria-hidden', true );
+							$dataListSelect.setAttribute( 'aria-hidden', 'true' );
 
@@ -154,6 +159,6 @@ return;
 						}
-						$dataListSelect.setAttribute( 'aria-hidden', !visible );
+						$dataListSelect.setAttribute( 'aria-hidden', (!visible).toString() );
 
 						// on arrow up or down keys, focus the select
-						if ( event.keyCode === 38 || event.keyCode === 40 ) {
+						if ( event.keyCode === keyUP || event.keyCode === keyDOWN ) {
 
@@ -192,10 +197,9 @@ $dataListSelect.focus();
 						var rects = $eventTarget.getClientRects(),
-							inputStyle = window.getComputedStyle( $eventTarget ),
 						// measurements
-							inputStyleMarginRight = parseFloat( inputStyle.marginRight ),
-							inputStyleMarginLeft = parseFloat( inputStyle.marginLeft );
-						
+							inputStyleMarginRight = parseFloat( inputStyles.getPropertyValue( 'margin-right' ) ),
+							inputStyleMarginLeft = parseFloat( inputStyles.getPropertyValue( 'margin-left' ) );
+
 						$dataListSelect = document.createElement( 'select' );
 						if ( selectMultiple ) {
-							$dataListSelect.setAttribute( 'multiple', true );
+							$dataListSelect.setAttribute( 'multiple', 'true' );
 						}
@@ -208,3 +212,3 @@
 						// WAI ARIA attributes
-						$dataListSelect.setAttribute( 'aria-hidden', true );
+						$dataListSelect.setAttribute( 'aria-hidden', 'true' );
 						$dataListSelect.setAttribute( 'aria-live', 'polite' );
@@ -214,3 +218,3 @@ $dataListSelect.setAttribute( 'role', 'listbox' );
 						// the select should get positioned underneath the input field ...
-						if ( inputStyles.direction === "rtl" ) {
+						if ( inputStyles.getPropertyValue( 'direction' ) === "rtl" ) {
 							$dataListSelect.style.marginRight = '-' + ( rects[0].width + inputStyleMarginLeft ) + 'px';
@@ -222,3 +226,3 @@ } else {
 						// set the polyfilling selects border-radius equally as the one by the polyfilled input
-						$dataListSelect.style.borderRadius = inputStyle.borderRadius;
+						$dataListSelect.style.borderRadius = inputStyles.getPropertyValue( 'border-radius' );
 
@@ -269,3 +273,3 @@ $dataListSelect.style.marginTop = rects[0].height + 'px';
 					}
-					$dataListSelect.setAttribute( 'aria-hidden', !visible );
+					$dataListSelect.setAttribute( 'aria-hidden', (!visible).toString() );
 					
@@ -303,6 +307,6 @@ // bind the keyup event on the related dalalists input
 					// ENTER and ESC
-					visible = ( eventType === 'keyup' && ( event.keyCode !== 13 && event.keyCode !== 27 ) );
+					visible = ( eventType === 'keyup' && ( event.keyCode !== keyENTER && event.keyCode !== keyESC ) );
 				
 				// change or mouseup event or ENTER key
-				if ( eventType === 'change' || eventType === 'mouseup' || ( eventType === 'keyup' && event.keyCode === 13 ) ) {
+				if ( eventType === 'change' || eventType === 'mouseup' || ( eventType === 'keyup' && event.keyCode === keyENTER ) ) {
 
@@ -337,3 +341,3 @@ var list = $datalist.id,
 				}
-				$select.setAttribute( 'aria-hidden', !visible );
+				$select.setAttribute( 'aria-hidden', (!visible).toString() );
 			}
@@ -340,0 +344,0 @@ };

datalist-polyfill.min.js

 /*
 * datalist-polyfill.js - https://github.com/mfranzke/datalist-polyfill
 * @license Copyright(c) 2017 by Maximilian Franzke
-* Supported by Christian and Johannes - many thanks for that !
+* Supported by Christian, Johannes and Michael - many thanks for that !
 */
-!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;window.addEventListener("touchstart",function t(){e=!1,window.removeEventListener("touchstart",t)});var t=function(t){var i=t.target,r=i.tagName.toLowerCase();if(r&&"input"===r&&i.getAttribute("list")){var n=i.getAttribute("list"),o=document.getElementById(n);if(null!==o){var a=o.getElementsByTagName("select")[0];if(void 0!==a){if(27===t.keyCode)return a.setAttributeNode(document.createAttribute("hidden")),void a.setAttribute("aria-hidden",!0);var d=o.querySelectorAll("option[value]"),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()}""!==u&&(Array.prototype.slice.call(d).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;""!==t&&-1!==t.toLowerCase().indexOf(u.toLowerCase())&&!1===e.disabled?(e.innerText=t,l.appendChild(e),c=!0):s.appendChild(e)}),a.appendChild(l),e||(a.selectedIndex=0),o.appendChild(s)),c?a.removeAttribute("hidden"):a.setAttributeNode(document.createAttribute("hidden")),a.setAttribute("aria-hidden",!c),38!==t.keyCode&&40!==t.keyCode||a.focus()}}}},i=function(n){var o=n.target,a=o.tagName.toLowerCase(),d=window.getComputedStyle(o);if(a&&"input"===a&&o.getAttribute("list")){var u=n.type,l=o.getAttribute("list"),s=document.getElementById(l);if(null!==s){var c=s.getElementsByTagName("select")[0],p="focus"===u&&""!==n.target.value||n.relatedTarget&&n.relatedTarget===c,m=s.title;if(void 0===c){var v=o.getClientRects(),b=window.getComputedStyle(o),f=parseFloat(b.marginRight),y=parseFloat(b.marginLeft);if(c=document.createElement("select"),e&&c.setAttribute("multiple",!0),c.setAttributeNode(document.createAttribute("hidden")),c.style.position="absolute",c.setAttribute("aria-hidden",!0),c.setAttribute("aria-live","polite"),c.setAttribute("role","listbox"),"rtl"===d.direction?c.style.marginRight="-"+(v[0].width+y)+"px":c.style.marginLeft="-"+(v[0].width+f)+"px",c.style.borderRadius=b.borderRadius,c.style.marginTop=v[0].height+"px",c.style.minWidth=v[0].width+"px",!e){var g=document.createElement("option");g.innerText=m,g.disabled=!0,c.appendChild(g)}s.appendChild(c),e?c.addEventListener("mouseup",r):c.addEventListener("change",r),c.addEventListener("blur",r),c.addEventListener("keyup",r),o.setAttribute("autocomplete","off"),o.setAttribute("role","textbox"),o.setAttribute("aria-haspopup","true"),o.setAttribute("aria-autocomplete","list"),o.setAttribute("aria-owns",l)}switch(p?c.removeAttribute("hidden"):c.setAttributeNode(document.createAttribute("hidden")),c.setAttribute("aria-hidden",!p),u){case"focus":o.addEventListener("keyup",t),o.addEventListener("blur",i,!0);break;case"blur":o.removeEventListener("keyup",t),o.removeEventListener("blur",i,!0);break}}}},r=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,o=n.title,a=e.type,d="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"mouseup"===a||"keyup"===a&&13===e.keyCode){var u=n.id,l=document.querySelector('input[list="'+u+'"]'),s=r.value;if(null!==l&&s.length>0&&s!==o){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)}};document.addEventListener("focus",i,!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;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"),o=document.getElementById(n);if(null!==o){var a=o.getElementsByTagName("select")[0];if(void 0!==a){if(27===t.keyCode)return a.setAttributeNode(document.createAttribute("hidden")),void a.setAttribute("aria-hidden","true");var u=o.querySelectorAll("option[value]"),d=i.value,l=document.createDocumentFragment(),s=document.createDocumentFragment(),p=!1;if("email"===i.type&&i.multiple){var c=d.split(","),m=c.length-1;d=c[m].trim()}""!==d&&(Array.prototype.slice.call(u).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;""!==t&&-1!==t.toLowerCase().indexOf(d.toLowerCase())&&!1===e.disabled?(e.innerText=t,l.appendChild(e),p=!0):s.appendChild(e)}),a.appendChild(l),e||(a.selectedIndex=0),o.appendChild(s)),p?a.removeAttribute("hidden"):a.setAttributeNode(document.createAttribute("hidden")),a.setAttribute("aria-hidden",(!p).toString()),38!==t.keyCode&&40!==t.keyCode||a.focus()}}}},a=function(t){var i=t.target,r=i.tagName.toLowerCase(),n=window.getComputedStyle(i);if(r&&"input"===r&&i.getAttribute("list")){var d=t.type,l=i.getAttribute("list"),s=document.getElementById(l);if(null!==s){var p=s.getElementsByTagName("select")[0],c="focus"===d&&""!==t.target.value||t.relatedTarget&&t.relatedTarget===p,m=s.title;if(void 0===p){var v=i.getClientRects(),b=parseFloat(n.getPropertyValue("margin-right")),g=parseFloat(n.getPropertyValue("margin-left"));if(p=document.createElement("select"),e&&p.setAttribute("multiple","true"),p.setAttributeNode(document.createAttribute("hidden")),p.style.position="absolute",p.setAttribute("aria-hidden","true"),p.setAttribute("aria-live","polite"),p.setAttribute("role","listbox"),"rtl"===n.getPropertyValue("direction")?p.style.marginRight="-"+(v[0].width+g)+"px":p.style.marginLeft="-"+(v[0].width+b)+"px",p.style.borderRadius=n.getPropertyValue("border-radius"),p.style.marginTop=v[0].height+"px",p.style.minWidth=v[0].width+"px",!e){var y=document.createElement("option");y.innerText=m,y.disabled=!0,p.appendChild(y)}s.appendChild(p),e?p.addEventListener("mouseup",u):p.addEventListener("change",u),p.addEventListener("blur",u),p.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",l)}switch(c?p.removeAttribute("hidden"):p.setAttributeNode(document.createAttribute("hidden")),p.setAttribute("aria-hidden",(!c).toString()),d){case"focus":i.addEventListener("keyup",o),i.addEventListener("blur",a,!0);break;case"blur":i.removeEventListener("keyup",o),i.removeEventListener("blur",a,!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,o=n.title,a=e.type,u="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"mouseup"===a||"keyup"===a&&13===e.keyCode){var d=n.id,l=document.querySelector('input[list="'+d+'"]'),s=r.value;if(null!==l&&s.length>0&&s!==o){var p=l.value,c;"email"===l.type&&l.multiple&&(c=p.lastIndexOf(","))>-1?l.value=p.slice(0,c)+","+s:l.value=s,u=!1}}u?r.removeAttribute("hidden"):r.setAttributeNode(document.createAttribute("hidden")),r.setAttribute("aria-hidden",(!u).toString())}};document.addEventListener("focus",a,!0)}}();

package.json

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

README.md

@@ -64,2 +64,5 @@ # datalist-polyfill
 
+### Version 1.6.1 - 2017/06/16
+Introduced speaking variables for the different keycodes. And implemented some feedback by flow. As well as additional code simplifications.
+
 ### Version 1.6.0 - 2017/06/16
@@ -66,0 +69,0 @@ This is so far the biggest and greatest update ! Depending of the feedback by Michael the visual appearance has changed and will better emulate the expected layout as in other browsers (on non-touch interactions). That for the script is creating the polyfilling select as a multiple-selection type, which emulates the expected „form“ better. And better positioning as well as styling the polyfilling select according to the input field, like e.g. even also set the polyfilling selects border-radius equally as the one by the polyfilled input.

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

29634

increased by1.87%

Lines of code

302

increased by1.34%

Number of lines in readme file

125

increased by2.46%

No dependency changes