datalist-polyfill - npm Package Compare versions

Comparing version 1.11.0 to 1.11.1

bower.json

 {
     "name": "datalist-polyfill",
 	"description": "An extremely lightweight and library-dependency-free vanilla JavaScript datalist polyfill.",
-    "version": "1.11.0",
+    "version": "1.11.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, Johannes and Michael - many thanks for that !
+* Supported by Christian, Johannes, @ailintom, @Kravimir, Michael and @hryamzik - many thanks for that !
 *//*
@@ -258,6 +258,12 @@ * A lightweight and library dependency free vanilla JavaScript datalist polyfill.
 						// the select should get positioned underneath the input field ...
-						if ( inputStyles.getPropertyValue( 'direction' ) === 'rtl' ) {
-							$dataListSelect.style.marginRight = '-' + ( rects[0].width + inputStyleMarginLeft ) + 'px';
+						if ( inputStyles.getPropertyValue( 'display' ) === 'block' ) {
+							$dataListSelect.style.marginTop = '-' + inputStyles.getPropertyValue( 'margin-bottom' );
 						} else {
-							$dataListSelect.style.marginLeft = '-' + ( rects[0].width + inputStyleMarginRight ) + 'px';
+							if ( inputStyles.getPropertyValue( 'direction' ) === 'rtl' ) {
+								$dataListSelect.style.marginRight = '-' + ( rects[0].width + inputStyleMarginLeft ) + 'px';
+							} else {
+								$dataListSelect.style.marginLeft = '-' + ( rects[0].width + inputStyleMarginRight ) + 'px';
+							}
+
+							$dataListSelect.style.marginTop = rects[0].height + 'px';
 						}
@@ -267,4 +273,2 @@
 						$dataListSelect.style.borderRadius = inputStyles.getPropertyValue( 'border-radius' );
-
-						$dataListSelect.style.marginTop = rects[0].height + 'px';
 						$dataListSelect.style.minWidth = rects[0].width + 'px';
@@ -271,0 +275,0 @@

datalist-polyfill.min.js

 /*
 * datalist-polyfill.js - https://github.com/mfranzke/datalist-polyfill
 * @license Copyright(c) 2017 by Maximilian Franzke
-* Supported by Christian, Johannes and Michael - many thanks for that !
+* Supported by Christian, Johannes, @ailintom, @Kravimir, Michael and @hryamzik - 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=!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.getElementsByClassName("polyfilling")[0];if(void 0!==o){if(27===t.keyCode)return o.setAttributeNode(document.createAttribute("hidden")),void o.setAttribute("aria-hidden","true");var l=a.querySelectorAll("option:not([disabled]):not(.message)"),d=i.value,s=document.createDocumentFragment(),u=document.createDocumentFragment(),c=!1,p="email"===i.type&&i.multiple,m=38===t.keyCode||40===t.keyCode;if(p){var b=d.split(","),g=b.length-1;d=b[g].trim()}if(""!==d||m){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(d.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),s.appendChild(e),c=!0}else u.appendChild(e)}),o.appendChild(s);var f=o.options.length,v=0,y=f-1;if(o.size=f>10?10:f,o.multiple=!e&&f<2,e)o.selectedIndex=0;else if(-1===o.selectedIndex)switch(t.keyCode){case 38:o.selectedIndex=y;break;case 40:o.selectedIndex=0;break}(a.getElementsByClassName("ie9_fix")[0]||a).appendChild(u)}c?o.removeAttribute("hidden"):o.setAttributeNode(document.createAttribute("hidden")),o.setAttribute("aria-hidden",(!c).toString()),m&&o.focus()}}}},l=function(t){var i=t.target,r=i.tagName.toLowerCase(),n=i.type,s=window.getComputedStyle(i);if(r&&"input"===r&&i.getAttribute("list")&&a.indexOf(n)>-1){var u=t.type,c=i.getAttribute("list"),p=document.getElementById(c);if(null!==p){var m=p.getElementsByClassName("polyfilling")[0],b="focus"===u&&""!==t.target.value||t.relatedTarget&&t.relatedTarget===m,g=p.title;if(void 0===m){var f=i.getClientRects(),v=parseFloat(s.getPropertyValue("margin-right")),y=parseFloat(s.getPropertyValue("margin-left"));if(m=document.createElement("select"),m.setAttribute("class","polyfilling"),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"===s.getPropertyValue("direction")?m.style.marginRight="-"+(f[0].width+y)+"px":m.style.marginLeft="-"+(f[0].width+v)+"px",m.style.borderRadius=s.getPropertyValue("border-radius"),m.style.marginTop=f[0].height+"px",m.style.minWidth=f[0].width+"px",e){var h=document.createElement("option");h.innerText=g,h.disabled=!0,h.setAttribute("class","message"),m.appendChild(h)}p.appendChild(m),e?m.addEventListener("change",d):m.addEventListener("click",d),m.addEventListener("blur",d),m.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",c)}switch(b?m.removeAttribute("hidden"):m.setAttributeNode(document.createAttribute("hidden")),m.setAttribute("aria-hidden",(!b).toString()),u){case"focus":i.addEventListener("keyup",o),i.addEventListener("focusOut",l,!0);break;case"blur":i.removeEventListener("keyup",o),i.removeEventListener("focusOut",l,!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,l="keyup"===o&&13!==e.keyCode&&27!==e.keyCode;if("change"===o||"click"===o||"keyup"===o&&13===e.keyCode){var d=n.id,s=document.querySelector('input[list="'+d+'"]'),u=r.value;if(null!==s&&void 0!==u&&u.length>0&&u!==a){var c=s.value,p;"email"===s.type&&s.multiple&&(p=c.lastIndexOf(","))>-1?s.value=c.slice(0,p)+","+u:s.value=u,l=!1}}l?r.removeAttribute("hidden"):r.setAttributeNode(document.createAttribute("hidden")),r.setAttribute("aria-hidden",(!l).toString())}};document.addEventListener("focus",l,!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.getElementsByClassName("polyfilling")[0];if(void 0!==o){if(27===t.keyCode)return o.setAttributeNode(document.createAttribute("hidden")),void o.setAttribute("aria-hidden","true");var l=a.querySelectorAll("option:not([disabled]):not(.message)"),s=i.value,d=document.createDocumentFragment(),u=document.createDocumentFragment(),c=!1,p="email"===i.type&&i.multiple,m=38===t.keyCode||40===t.keyCode;if(p){var b=s.split(","),g=b.length-1;s=b[g].trim()}if(""!==s||m){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(s.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),d.appendChild(e),c=!0}else u.appendChild(e)}),o.appendChild(d);var y=o.options.length,f=0,v=y-1;if(o.size=y>10?10:y,o.multiple=!e&&y<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.getElementsByClassName("ie9_fix")[0]||a).appendChild(u)}c?o.removeAttribute("hidden"):o.setAttributeNode(document.createAttribute("hidden")),o.setAttribute("aria-hidden",(!c).toString()),m&&o.focus()}}}},l=function(t){var i=t.target,r=i.tagName.toLowerCase(),n=i.type,d=window.getComputedStyle(i);if(r&&"input"===r&&i.getAttribute("list")&&a.indexOf(n)>-1){var u=t.type,c=i.getAttribute("list"),p=document.getElementById(c);if(null!==p){var m=p.getElementsByClassName("polyfilling")[0],b="focus"===u&&""!==t.target.value||t.relatedTarget&&t.relatedTarget===m,g=p.title;if(void 0===m){var y=i.getClientRects(),f=parseFloat(d.getPropertyValue("margin-right")),v=parseFloat(d.getPropertyValue("margin-left"));if(m=document.createElement("select"),m.setAttribute("class","polyfilling"),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"),"block"===d.getPropertyValue("display")?m.style.marginTop="-"+d.getPropertyValue("margin-bottom"):("rtl"===d.getPropertyValue("direction")?m.style.marginRight="-"+(y[0].width+v)+"px":m.style.marginLeft="-"+(y[0].width+f)+"px",m.style.marginTop=y[0].height+"px"),m.style.borderRadius=d.getPropertyValue("border-radius"),m.style.minWidth=y[0].width+"px",e){var h=document.createElement("option");h.innerText=g,h.disabled=!0,h.setAttribute("class","message"),m.appendChild(h)}p.appendChild(m),e?m.addEventListener("change",s):m.addEventListener("click",s),m.addEventListener("blur",s),m.addEventListener("keyup",s),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()),u){case"focus":i.addEventListener("keyup",o),i.addEventListener("focusOut",l,!0);break;case"blur":i.removeEventListener("keyup",o),i.removeEventListener("focusOut",l,!0);break}}}},s=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,l="keyup"===o&&13!==e.keyCode&&27!==e.keyCode;if("change"===o||"click"===o||"keyup"===o&&13===e.keyCode){var s=n.id,d=document.querySelector('input[list="'+s+'"]'),u=r.value;if(null!==d&&void 0!==u&&u.length>0&&u!==a){var c=d.value,p;"email"===d.type&&d.multiple&&(p=c.lastIndexOf(","))>-1?d.value=c.slice(0,p)+","+u:d.value=u,l=!1}}l?r.removeAttribute("hidden"):r.setAttributeNode(document.createAttribute("hidden")),r.setAttribute("aria-hidden",(!l).toString())}};document.addEventListener("focus",l,!0)}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "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: 5.048 kB of JavaScript, around 2.2 kB gzipped
+*	Lightweight: 5.3 kB of JavaScript, around 2.2 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
@@ -98,12 +98,15 @@ *	Supporting:
 
-### Version 1.11.0- 2017/09/26
+### Version 1.11.1 - 2017/11/24
+@hryamzik thankfully mentioned by #GH-7 that the polyfilling `select` gets positioned incorrectly in case of the `input[list]` element being styled as a block-level element.
+
+### Version 1.11.0 - 2017/09/26
 I'm very thankful for @ailintom mentioning the missing IE9 support with #GH-2, which is still relevant (at least and maybe foremost) for the Windows Vista users. Additionally @Kravimir thankfully brought to my attention, that IE9 handles the `option` subelements quite restricted - so I've added a section regarding IE9 support to the demo page with the additional two lines of HTML, that you'll need to add in case you also need / want to still support IE9 in your projects, as well as changed the JavaScript code to even also support IE9.
 
-### Version 1.10.3- 2017/10/07
+### Version 1.10.3 - 2017/10/07
 Added a comment regarding IE9 - and some simple code styling.
 
-### Version 1.10.2- 2017/09/26
+### Version 1.10.2 - 2017/09/26
 Simple corrections.
 
-### Version 1.10.1- 2017/09/25
+### Version 1.10.1 - 2017/09/25
 Simple bugfix, that came up through the latest implementation on the up and down arrow keys.
@@ -110,0 +113,0 @@

No alert changes

Improved metrics

Total package byte prevSize

43001

increased by1.33%

Lines of code

342

increased by1.18%

Number of lines in readme file

191

increased by1.6%

No dependency changes