datalist-polyfill - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

bower.json

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

datalist-polyfill.js

@@ -97,3 +97,3 @@ /*
 
-						var $dataListOptions = $dataList.querySelectorAll( 'option[value]' ),
+						var $dataListOptions = $dataList.getElementsByTagName( 'option' ),
 							inputValue = $eventTarget.value,
@@ -128,4 +128,15 @@ newSelectValues = document.createDocumentFragment(),
 							    if ( optionValue !== '' && optionValue.toLowerCase().indexOf( inputValue.toLowerCase() ) !== -1 && opt.disabled === false ) {
-								    opt.innerText = optionValue;
 								    
+								    // manipulating the option inner text, that would get displayed
+								    var label = opt.label || opt.innerText.trim(),
+								    	labelValueSeperator = ' / ',
+								    	labelOptionPart = label.substr(0, optionValue.length + labelValueSeperator.length),
+								    	optionPart = optionValue + labelValueSeperator;
+
+								    if ( label !== optionValue && labelOptionPart !== optionPart ) {
+									    
+									    // the label should be either value / label in case of that they are different, or just the option elements value
+									    opt.label = ( label ) ? optionValue + labelValueSeperator + label : optionValue;
+								    }
+								    
 								    newSelectValues.appendChild( opt );
@@ -132,0 +143,0 @@

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 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 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()}if(""!==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);var v=0,b=a.options.length-1;if(e){if(-1===a.selectedIndex)switch(t.keyCode){case 38:a.selectedIndex=b;break;case 40:a.selectedIndex=0;break}}else a.selectedIndex=0;o.appendChild(s)}c?a.removeAttribute("hidden"):a.setAttributeNode(document.createAttribute("hidden")),a.setAttribute("aria-hidden",(!c).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 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 v=i.getClientRects(),b=parseFloat(n.getPropertyValue("margin-right")),g=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="-"+(v[0].width+g)+"px":c.style.marginLeft="-"+(v[0].width+b)+"px",c.style.borderRadius=n.getPropertyValue("border-radius"),c.style.marginTop=v[0].height+"px",c.style.minWidth=v[0].width+"px",!e){var y=document.createElement("option");y.innerText=m,y.disabled=!0,c.appendChild(y)}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",o),i.addEventListener("blur",a,!0);break;case"blur":i.removeEventListener("keyup",o),i.removeEventListener("blur",a,!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,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).toString())}};document.addEventListener("focus",a,!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 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)}}();

package.json

 {
   "name": "datalist-polyfill",
-  "version": "1.6.2",
+  "version": "1.7.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.42 kB of JavaScript - less than 2 kB gzipped
+*	Lightweight: 4.54 kB of JavaScript - less than 2 kB gzipped
 *	Fully flexible to change the datalist entries / `<option>`s
@@ -16,2 +16,3 @@ *	Supporting:
 	*	non-touch and touch interactions
+	*	different forms of `option` declarations
 *	Enables core keyboard controls like e.g. the up and down arrow keys, `ESC` and `ENTER`
@@ -66,2 +67,5 @@ *	Implements the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices/)
 
+### Version 1.7.0 - 2017/06/29
+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.". 
+
 ### Version 1.6.2 - 2017/06/28
@@ -68,0 +72,0 @@ Optimized the behavior to select the entries within the polyfilling `select[multiple]` on using the up and down arrow keys from the polyfilled `input[list]`.

No alert changes

Improved metrics

Total package byte prevSize

32382

increased by6.67%

Lines of code

321

increased by2.56%

Number of lines in readme file

132

increased by3.13%

No dependency changes