datalist-polyfill - npm Package Compare versions

Comparing version 1.14.0 to 1.14.1

bower.json

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

CHANGELOG.md

@@ -9,2 +9,16 @@ # Changelog
 
+## [1.14.1] - 2018-06-20
+### Added
+- Hiding the polyfilling select on pressing ENTER, which is equal to the behaviour on typing ESC.
+- Added more badges to the readme. I'm loving badges.
+
+### Changed
+- Made some necessary changes to enhance the current demo page by the minimum amount of relevant HTML tags that should be included within every page (and even also added the IE related meta tag due to backwards compatibility).
+
+### Removed
+- Removed some sample code out of the readme page due to the new NPM websites layout.
+
+### Fixed
+- The determination of option elements within the polyfilling select has incorrectly even also included `:disabled` elements.
+
 ## [1.14.0] - 2018-06-12
@@ -11,0 +25,0 @@ ### Added

datalist-polyfill.js

@@ -136,47 +136,48 @@ /*
 
-          // on an ESC key press within the input, let's break here and hide the datalist select
-          if (event.keyCode === keyESC) {
-            toggleVisibility(dataListSelect, false);
+          var visible = false;
 
-            return;
-          }
+          // on an ESC or ENTER key press within the input, let's break here and afterwards hide the datalist select
+          if (event.keyCode !== keyESC && event.keyCode !== keyENTER) {
 
-          var inputValue = eventTarget.value,
-            keyOpen = (event.keyCode === keyUP || event.keyCode === keyDOWN);
+            var inputValue = eventTarget.value,
+              keyOpen = (event.keyCode === keyUP || event.keyCode === keyDOWN);
 
-          // if the input contains a value, than ...
-          if (inputValue !== '' || keyOpen) {
+            // if the input contains a value, than ...
+            if (inputValue !== '' || keyOpen) {
 
-            prepOptions(dataList, eventTarget);
+              prepOptions(dataList, eventTarget);
 
-            var dataListSelectOptionsLength = dataListSelect.options.length,
-              firstEntry = 0,
-              lastEntry = dataListSelectOptionsLength - 1;
+              var dataListSelectOptionsLength = dataListSelect.options.length,
+                firstEntry = 0,
+                lastEntry = dataListSelectOptionsLength - 1;
 
-            if (touched) {
-              // preselect best fitting index
-              dataListSelect.selectedIndex = firstEntry;
+              if (touched) {
+                // preselect best fitting index
+                dataListSelect.selectedIndex = firstEntry;
 
-            } else if (dataListSelect.selectedIndex === -1) {
+              } else if (dataListSelect.selectedIndex === -1) {
 
-              switch (event.keyCode) {
-                case keyUP:
-                  dataListSelect.selectedIndex = lastEntry;
-                  break;
-                case keyDOWN:
-                  dataListSelect.selectedIndex = firstEntry;
-                  break;
+                switch (event.keyCode) {
+                  case keyUP:
+                    dataListSelect.selectedIndex = lastEntry;
+                    break;
+                  case keyDOWN:
+                    dataListSelect.selectedIndex = firstEntry;
+                    break;
+                }
               }
-            }
 
-          }
+              visible = true;
 
-          // toggle the visibility of the datalist select according to previous checks
-          toggleVisibility(dataListSelect);
+              // on arrow up or down keys, focus the select
+              if (keyOpen) {
 
-          // on arrow up or down keys, focus the select
-          if (keyOpen) {
+                dataListSelect.focus();
+              }
 
-            dataListSelect.focus();
+            }
           }
+
+          // toggle the visibility of the datalist select according to previous checks
+          toggleVisibility(dataListSelect, visible);
         }
@@ -284,3 +285,3 @@ }
           // either have the select set to the state to get displayed in case of that it would have been focused or because it's the target on the inputs blur - and check for general existance of any option as suggestions
-          visible = (((eventType === 'focus' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect)) && dataListSelect && dataListSelect.options && dataListSelect.options.length);
+          visible = (((eventType === 'focus' && eventTarget.value !== '') || (event.relatedTarget && event.relatedTarget === dataListSelect)) && dataListSelect && dataListSelect.querySelector('option:not(:disabled)'));
 
@@ -467,3 +468,3 @@ // test for whether this input has already been enhanced by the polyfill
     if (visible === undefined) {
-     visible = (dataListSelect && dataListSelect.options && dataListSelect.options.length);
+     visible = (dataListSelect && dataListSelect.querySelector('option:not(:disabled)'));
     }
@@ -470,0 +471,0 @@

datalist-polyfill.min.js

@@ -6,2 +6,2 @@ /*
 */
-!function(){"use strict";if("list"in document.createElement("input")&&!(!document.createElement("datalist")||!window.HTMLDataListElement))return!1;!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,n=38,o=40,r=" / ",a=["text","email","number","search","tel","url"],l="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var n=0;n<e[i].addedNodes.length;++n)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){var o=document.querySelector('[list="'+t.id+'"]');if(""!==o.value){var r=t;c(r,o),g(r.getElementsByClassName("polyfilling")[0])}}});var p=function(t){var i=t.target,n=i.tagName.toLowerCase();if(n&&"input"===n&&i.getAttribute("list")){var o=i.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(i,r);if(void 0!==a){if(27===t.keyCode)return void g(a,!1);var l=i.value,s=38===t.keyCode||40===t.keyCode;if(""!==l||s){c(r,i);var u=a.options.length,d=0,p=u-1;if(e)a.selectedIndex=0;else if(-1===a.selectedIndex)switch(t.keyCode){case 38:a.selectedIndex=p;break;case 40:a.selectedIndex=0;break}}g(a),s&&a.focus()}}}},c=function(t,i){void 0!==d&&d.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||m(i,t),o=t.querySelectorAll("option:not([disabled]):not(.message)"),r=i.value,a=document.createDocumentFragment(),l=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=r.split(","),u=s.length-1;r=s[u].trim()}Array.prototype.slice.call(o).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(r.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),n=e.text,o=n.substr(0,t.length+" / ".length),s=t+" / ";n&&!i&&n!==t&&o!==s?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),a.appendChild(e)}else l.appendChild(e)}),n.appendChild(a);var p=n.options.length;n.size=p>10?10:p,n.multiple=!e&&p<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(l),void 0!==d&&d.observe(t,{childList:!0})},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var n=e.type,o=t.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(t,r),l=("focus"===n&&""!==t.value||e.relatedTarget&&e.relatedTarget===a)&&a&&a.options&&a.options.length;if(!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",o),n){case"focus":t.addEventListener("keyup",p),t.addEventListener("focusout",f,!0);break;case"blur":t.removeEventListener("keyup",p),t.removeEventListener("focusout",f,!0);break}t.className+=" polyfilled"}g(a,l)}}},m=function(t,i){var n=t.type;if(a.indexOf(n)>-1&&null!==i){var o=i.title,r=t.getClientRects(),l=window.getComputedStyle(t),s=parseFloat(l.getPropertyValue("margin-right")),u=parseFloat(l.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",g(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===l.getPropertyValue("display")?d.style.marginTop="-"+l.getPropertyValue("margin-bottom"):("rtl"===l.getPropertyValue("direction")?d.style.marginRight="-"+(r[0].width+u)+"px":d.style.marginLeft="-"+(r[0].width+s)+"px",d.style.marginTop=parseInt(r[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=l.getPropertyValue("border-radius"),d.style.minWidth=r[0].width+"px",e){var p=document.createElement("option");p.innerText=o,p.disabled=!0,p.setAttribute("class","message"),d.appendChild(p)}return i.appendChild(d),e?d.addEventListener("change",v):d.addEventListener("click",v),d.addEventListener("blur",v),d.addEventListener("keyup",v),d}},v=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var n="select"===i?t:t.parentNode,o=n.parentNode,r=o.title,a=e.type,l="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"click"===a||"keyup"===a&&13===e.keyCode){var s=o.id,u=document.querySelector('input[list="'+s+'"]'),d=n.value;if(null!==u&&void 0!==d&&d.length>0&&d!==r){var p=u.value,c,f="email"===u.type&&u.multiple,m;f&&(c=p.lastIndexOf(","))>-1?u.value=p.slice(0,c)+","+d:u.value=d,"function"==typeof Event?m=new Event("input",{bubbles:!0}):(m=document.createEvent("Event"),m.initEvent("input",!0,!1)),u.dispatchEvent(m),u.focus(),l=!1}}g(n,l)}},g=function(e,t){void 0===t&&(t=e&&e.options&&e.options.length),t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focus",f,!0)}();
+!function(){"use strict";if("list"in document.createElement("input")&&!(!document.createElement("datalist")||!window.HTMLDataListElement))return!1;!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,n=38,o=40,r=" / ",a=["text","email","number","search","tel","url"],l="polyfilled",s="polyfilling";window.addEventListener("touchstart",function t(){e=!0,window.removeEventListener("touchstart",t)});var u=window.MutationObserver||window.WebKitMutationObserver;if(void 0!==u)var d=new u(function(e){for(var t=!1,i=0;i<e.length;++i)for(var n=0;n<e[i].addedNodes.length;++n)"datalist"===e[i].target.tagName.toLowerCase()&&(t=e[i].target);if(t){var o=document.querySelector('[list="'+t.id+'"]');if(""!==o.value){var r=t;c(r,o),g(r.getElementsByClassName("polyfilling")[0])}}});var p=function(t){var i=t.target,n=i.tagName.toLowerCase();if(n&&"input"===n&&i.getAttribute("list")){var o=i.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(i,r);if(void 0!==a){var l=!1;if(27!==t.keyCode&&13!==t.keyCode){var s=i.value,u=38===t.keyCode||40===t.keyCode;if(""!==s||u){c(r,i);var d=a.options.length,p=0,f=d-1;if(e)a.selectedIndex=0;else if(-1===a.selectedIndex)switch(t.keyCode){case 38:a.selectedIndex=f;break;case 40:a.selectedIndex=0;break}l=!0,u&&a.focus()}}g(a,l)}}}},c=function(t,i){void 0!==d&&d.disconnect();var n=t.getElementsByClassName("polyfilling")[0]||m(i,t),o=t.querySelectorAll("option:not([disabled]):not(.message)"),r=i.value,a=document.createDocumentFragment(),l=document.createDocumentFragment();if("email"===i.type&&i.multiple){var s=r.split(","),u=s.length-1;r=s[u].trim()}Array.prototype.slice.call(o).sort(function(e,t){return e.value.localeCompare(t.value)}).forEach(function(e){var t=e.value;if(""!==t&&-1!==t.toLowerCase().indexOf(r.toLowerCase())&&!1===e.disabled){var i=e.getAttribute("label"),n=e.text,o=n.substr(0,t.length+" / ".length),s=t+" / ";n&&!i&&n!==t&&o!==s?e.innerText=t+" / "+n:e.text||(e.innerText=i||t),a.appendChild(e)}else l.appendChild(e)}),n.appendChild(a);var p=n.options.length;n.size=p>10?10:p,n.multiple=!e&&p<2,(t.getElementsByClassName("ie9_fix")[0]||t).appendChild(l),void 0!==d&&d.observe(t,{childList:!0})},f=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&"input"===i&&t.getAttribute("list")){var n=e.type,o=t.getAttribute("list"),r=document.getElementById(o);if(null!==r){var a=r.getElementsByClassName("polyfilling")[0]||m(t,r),l=("focus"===n&&""!==t.value||e.relatedTarget&&e.relatedTarget===a)&&a&&a.querySelector("option:not(:disabled)");if(!new RegExp(" polyfilled ").test(" "+t.className+" ")){switch(t.setAttribute("autocomplete","off"),t.setAttribute("role","textbox"),t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-owns",o),n){case"focus":t.addEventListener("keyup",p),t.addEventListener("focusout",f,!0);break;case"blur":t.removeEventListener("keyup",p),t.removeEventListener("focusout",f,!0);break}t.className+=" polyfilled"}g(a,l)}}},m=function(t,i){var n=t.type;if(a.indexOf(n)>-1&&null!==i){var o=i.title,r=t.getClientRects(),l=window.getComputedStyle(t),s=parseFloat(l.getPropertyValue("margin-right")),u=parseFloat(l.getPropertyValue("margin-left")),d=document.createElement("select");if(d.setAttribute("class","polyfilling"),d.style.position="absolute",g(d,!1),d.setAttribute("aria-live","polite"),d.setAttribute("role","listbox"),e||d.setAttribute("aria-multiselectable","false"),"block"===l.getPropertyValue("display")?d.style.marginTop="-"+l.getPropertyValue("margin-bottom"):("rtl"===l.getPropertyValue("direction")?d.style.marginRight="-"+(r[0].width+u)+"px":d.style.marginLeft="-"+(r[0].width+s)+"px",d.style.marginTop=parseInt(r[0].height+(t.offsetTop-i.offsetTop),10)+"px"),d.style.borderRadius=l.getPropertyValue("border-radius"),d.style.minWidth=r[0].width+"px",e){var p=document.createElement("option");p.innerText=o,p.disabled=!0,p.setAttribute("class","message"),d.appendChild(p)}return i.appendChild(d),e?d.addEventListener("change",v):d.addEventListener("click",v),d.addEventListener("blur",v),d.addEventListener("keyup",v),d}},v=function(e){var t=e.target,i=t.tagName.toLowerCase();if(i&&("select"===i||"option"===i)){var n="select"===i?t:t.parentNode,o=n.parentNode,r=o.title,a=e.type,l="keyup"===a&&13!==e.keyCode&&27!==e.keyCode;if("change"===a||"click"===a||"keyup"===a&&13===e.keyCode){var s=o.id,u=document.querySelector('input[list="'+s+'"]'),d=n.value;if(null!==u&&void 0!==d&&d.length>0&&d!==r){var p=u.value,c,f="email"===u.type&&u.multiple,m;f&&(c=p.lastIndexOf(","))>-1?u.value=p.slice(0,c)+","+d:u.value=d,"function"==typeof Event?m=new Event("input",{bubbles:!0}):(m=document.createEvent("Event"),m.initEvent("input",!0,!1)),u.dispatchEvent(m),u.focus(),l=!1}}g(n,l)}},g=function(e,t){void 0===t&&(t=e&&e.querySelector("option:not(:disabled)")),t?e.removeAttribute("hidden"):e.setAttributeNode(document.createAttribute("hidden")),e.setAttribute("aria-hidden",(!t).toString())};document.addEventListener("focus",f,!0)}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "description": "A lightweight and dependency-free vanilla JavaScript datalist polyfill.",
@@ -5,0 +5,0 @@ "main": "datalist-polyfill.js",

README.md

@@ -0,16 +1,27 @@
+[npm]: https://npmjs.com/package/datalist-polyfill "datalist polyfill – on NPM"
+[jsdelivr]: https://www.jsdelivr.com/package/npm/datalist-polyfill "datalist polyfill – on jsDelivr"
+[david-dm]: https://david-dm.org/mfranzke/datalist-polyfill "datalist polyfill – on david-dm"
+[mit]: https://opensource.org/licenses/mit-license.php
+[npm-badge]: https://img.shields.io/npm/v/datalist-polyfill.svg "npm version"
+[downl-badge]: https://img.shields.io/npm/dt/datalist-polyfill.svg "Count of total downloads – NPM"
+[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/datalist-polyfill/badge "Count of total downloads – jsDelivr"
+[dependency-badge]: https://david-dm.org/mfranzke/datalist-polyfill/status.svg "Count of dependencies"
+[license-badge]: https://img.shields.io/npm/l/datalist-polyfill.svg "license badge"
+
+
 # datalist-polyfill
 
+[![datalist-polyfill on Npmjs][npm-badge]][npm]
+[![Total downloads ~ Npmjs][downl-badge]][npm]
+[![jsDelivr CDN downloads][jsdelivr-badge]][jsdelivr]
+[![dependencies Status][dependency-badge]][david-dm]
 
-[![npm](https://img.shields.io/npm/v/datalist-polyfill.svg)](https://www.npmjs.com/package/datalist-polyfill)
-[![dependencies Status](https://david-dm.org/mfranzke/datalist-polyfill/status.svg)](https://david-dm.org/mfranzke/datalist-polyfill)
-[![](https://data.jsdelivr.com/v1/package/npm/datalist-polyfill/badge)](https://www.jsdelivr.com/package/npm/datalist-polyfill)
-
 This is a minimal and dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality, that will bring joy and happiness into our lives :-)
 
 * Mainly built for Safari, as nearly all of the other browsers support it quite well: <https://caniuse.com/#feat=datalist>
-* Released under the MIT License: <https://opensource.org/licenses/mit-license.php>
+* Released under the [![MIT license][license-badge]][mit]
 * Made in Germany. And supported by so many great people from all over this planet - see "Credits" accordingly.
 
 ## Features
-*	Lightweight: 5.94 kB of minified JavaScript, around 2.59 kB gzipped
+*	Lightweight: 5.96 kB of minified JavaScript, around 2.58 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
@@ -69,3 +80,4 @@ *	Supporting:
 /**
- * Add the correct display in IE 10-.
+ * Add the correct
+ * display in IE 10-
  */
@@ -80,15 +92,3 @@
 In case you'd like to support IE9, you'll need to add a nesting `select` element wrapped by a conditional comment into the `datalist` element.
-```html
-<datalist id="animallist_ie" title="Choose a suggestion">
-	<!--[if IE 9]><select disabled style="display:none" class="ie9_fix"><![endif]-->
-		<option value="Cat">
-		<option value="Cow">
-		<option value="Dog">
-		<option value="Horse">
-		<option value="Lion">
-		<option value="Pig" disabled>
-		<option value="Zebra">
-	<!--[if IE 9]></select><![endif]-->
-</datalist>
-```
+Please have a look at the [demo page](https://mfranzke.github.io/datalist-polyfill/demo.html) accordingly, the code is being mentioned within the `Internet Explorer 9 support` section.
 
@@ -95,0 +95,0 @@ ## Demo

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

53078

increased by2.75%

No dependency changes