datalist-polyfill - npm Package Compare versions

Comparing version 1.8.1 to 1.9.0

bower.json

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

datalist-polyfill.js

@@ -55,3 +55,3 @@ /*
 		// identify whether a select multiple is feasible
-		var selectMultiple = true,
+		var touched = false,
 		
@@ -68,3 +68,3 @@ // introduced speaking variables for the different keycodes
 		window.addEventListener( 'touchstart' , function onFirstTouch() {
-			selectMultiple = false;
+			touched = true;
 			
@@ -102,3 +102,3 @@ window.removeEventListener( 'touchstart', onFirstTouch );
 
-						var $dataListOptions = $dataList.getElementsByTagName( 'option' ),
+						var $dataListOptions = $dataList.querySelectorAll( 'option:not([disabled].message)' ),
 							inputValue = $eventTarget.value,
@@ -164,6 +164,10 @@ newSelectValues = document.createDocumentFragment(),
 
-							var firstEntry = 0,
-								lastEntry = $dataListSelect.options.length - 1;
+							var dataListSelectOptionsLength = $dataListSelect.options.length,
+								firstEntry = 0,
+								lastEntry = dataListSelectOptionsLength - 1;
 							
-							if ( !selectMultiple ) {
+							$dataListSelect.size = ( dataListSelectOptionsLength > 10 ) ? 10 : dataListSelectOptionsLength;
+							$dataListSelect.multiple = ( !touched && dataListSelectOptionsLength < 2 );
+							
+							if ( touched ) {
 								// preselect best fitting index
@@ -237,9 +241,6 @@ $dataListSelect.selectedIndex = firstEntry;
 						$dataListSelect = document.createElement( 'select' );
-						if ( selectMultiple ) {
-							$dataListSelect.setAttribute( 'multiple', 'true' );
-						}
 						
 						// set general styling related definitions
 						$dataListSelect.setAttributeNode( document.createAttribute( 'hidden' ) );
-						$dataListSelect.style.position = "absolute";
+						$dataListSelect.style.position = 'absolute';
 
@@ -250,5 +251,8 @@ // WAI ARIA attributes
 						$dataListSelect.setAttribute( 'role', 'listbox' );
+						if ( !touched ) {
+							$dataListSelect.setAttribute( 'aria-multiselectable', 'false' );
+						}
 
 						// the select should get positioned underneath the input field ...
-						if ( inputStyles.getPropertyValue( 'direction' ) === "rtl" ) {
+						if ( inputStyles.getPropertyValue( 'direction' ) === 'rtl' ) {
 							$dataListSelect.style.marginRight = '-' + ( rects[0].width + inputStyleMarginLeft ) + 'px';
@@ -265,5 +269,5 @@ } else {
 
-						if ( !selectMultiple ) {
+						if ( touched ) {
 							var $message = document.createElement('option');
-							
+
 							// ... and it's first entry should contain the localized message to select an entry
@@ -273,2 +277,4 @@ $message.innerText = message;
 							$message.disabled = true;
+							// ... and assign a dividable class to it
+							$message.classList.add( 'message' );
 							// ... and finally insert it into the select
@@ -283,3 +289,3 @@ $dataListSelect.appendChild( $message );
 						
-						if ( !selectMultiple ) {
+						if ( touched ) {
 							$dataListSelect.addEventListener( 'change', changeDataListSelect );
@@ -286,0 +292,0 @@ } else {

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,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,r=" / ",n=i.substr(0,t.length+" / ".length),a=t+" / ";i&&i!==t&&n!==a?(e.innerText=t+" / "+i,e.setAttribute("data-label",e.getAttribute("label")),e.removeAttribute("label")):e.innerText.trim()||(e.innerText=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)}}();
+!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=!1,t=13,i=27,r=38,n=40,a=["text","email","number","search","tel","url"];window.addEventListener("touchstart",function t(){e=!0,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.querySelectorAll("option:not([disabled].message)"),l=i.value,u=document.createDocumentFragment(),s=document.createDocumentFragment(),c=!1;if("email"===i.type&&i.multiple){var p=l.split(","),m=p.length-1;l=p[m].trim()}if(""!==l){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(l.toLowerCase())&&!1===e.disabled){var i=e.label,r=" / ",n=i.substr(0,t.length+" / ".length),a=t+" / ";i&&i!==t&&n!==a?(e.innerText=t+" / "+i,e.setAttribute("data-label",e.getAttribute("label")),e.removeAttribute("label")):e.innerText.trim()||(e.innerText=t),u.appendChild(e),c=!0}else s.appendChild(e)}),o.appendChild(u);var b=o.options.length,g=0,v=b-1;if(o.size=b>10?10:b,o.multiple=!e&&b<2,e)o.selectedIndex=0;else if(-1===o.selectedIndex)switch(t.keyCode){case 38:o.selectedIndex=v;break;case 40:o.selectedIndex=0;break}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,u=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(u.getPropertyValue("margin-right")),y=parseFloat(u.getPropertyValue("margin-left"));if(m=document.createElement("select"),m.setAttributeNode(document.createAttribute("hidden")),m.style.position="absolute",m.setAttribute("aria-hidden","true"),m.setAttribute("aria-live","polite"),m.setAttribute("role","listbox"),e||m.setAttribute("aria-multiselectable","false"),"rtl"===u.getPropertyValue("direction")?m.style.marginRight="-"+(v[0].width+y)+"px":m.style.marginLeft="-"+(v[0].width+f)+"px",m.style.borderRadius=u.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,h.classList.add("message"),m.appendChild(h)}p.appendChild(m),e?m.addEventListener("change",l):m.addEventListener("mouseup",l),m.addEventListener("blur",l),m.addEventListener("keyup",l),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}}}},l=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 l=n.id,u=document.querySelector('input[list="'+l+'"]'),s=r.value;if(null!==u&&s.length>0&&s!==a){var c=u.value,p;"email"===u.type&&u.multiple&&(p=c.lastIndexOf(","))>-1?u.value=c.slice(0,p)+","+s:u.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.8.1",
+  "version": "1.9.0",
   "description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

README.md

@@ -8,3 +8,3 @@ # datalist-polyfill
 ## Features
-*	Lightweight: 4.7 kB of JavaScript, around 1.75 kB gzipped
+*	Lightweight: 4.8 kB of JavaScript, around 1.82 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
@@ -61,3 +61,3 @@ *	Supporting:
 	*	As I wanted to mainly focus on native elements in the most low level / simple way instead of visually emulating a list and than afterwards regain all of the functionality via a lot of JavaScript logic, I've ended up with this element, that even also knows how to play nicely with nested `<option>` elements.
-	*	I've previously decided against using the `multiple` attribute, as I wanted to kind of strictly fulfill the form follows function concept - but a nice and fruitful discussion with Michael let me think that through again and change my mind (and attitude) on that, as this is most likely even already what you're up to regarding appearance. But it still does result in - surprise - the possibility for multiple selections, which I'm still thinking about whether I need to fix this or keep it as an easter egg ...
+	*	I even also tried its `multiple` attribute, as this is most likely even already what you're up to regarding appearance, but it does violate the form follows function concept and results in - surprise - the possibility for multiple selections, which isn't always `<datalist>` elements kind of thing ... Than the `size` attribute came to my attention, which much better fits the requirements and behaves as designed quite perfectly.
 
@@ -69,2 +69,5 @@ ## Credits
 
+### Version 1.9.0 - 2017/06/20
+Regarding the changes out of release version 1.6.0 to emulate the expected UI quite nicely, I was still struggling with using that hacky solution (`multiple` attribute) and even also of how to prevent multiple selections on the polyfilling select. Actually the attribute `size` came to my attention, which much better fits the requirements and behaves as designed quite perfectly. Chapeau!
+
 ### Version 1.8.1 - 2017/07/18
@@ -71,0 +74,0 @@ Bugfix regarding the handling of the label values.

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

37351

increased by2.12%

Lines of code

333

increased by1.52%

Number of lines in readme file

143

increased by2.14%

No dependency changes