Change Setter UI in Upa URL demo page

Author: rmisev

demo/index.html

@@ -19,8 +19,10 @@ <h1>Upa URL demo</h1>
     <input id="base" class="field" value="https://example.org/">
 
     <div class="label">
-      <select id="setter"><option value="">—</option></select>
-      <label for="setter-inp">setter:</label>
+      <input type="checkbox" id="use-setter">
+      <label for="use-setter">set</label>
+      <select id="setter"></select>
+      <label for="setter-inp">to:</label>
     </div>
     <input id="setter-inp" class="field" value="">
   </form>

demo/url-demo.js

@@ -18,7 +18,7 @@ function getUrl() {
     ? new Module.URL(elemUrl.value, elemBase.value)
     : new Module.URL(elemUrl.value);
   // apply setter
-  if (elemSetter.value.length !== 0)
+  if (elemUseSetter.checked)
     url[elemSetter.value] = elemSetterInp.value;
   return url;
 }
@@ -48,19 +48,22 @@ function onInpChange() {
 }
 
 function onSetterChange() {
-  elemSetterInp.disabled = elemSetter.value.length === 0;
+  elemSetter.disabled = !elemUseSetter.checked;
+  elemSetterInp.disabled = !elemUseSetter.checked;
   onInpChange();
 }
 
 // Input elements
 const elemUrl = document.getElementById("url");
 const elemBase = document.getElementById("base");
+const elemUseSetter = document.getElementById("use-setter");
 const elemSetter = document.getElementById("setter");
 const elemSetterInp = document.getElementById("setter-inp");
 
 // After text change
 elemUrl.addEventListener("input", onInpChange);
 elemBase.addEventListener("input", onInpChange);
+elemUseSetter.addEventListener("change", onSetterChange);
 elemSetter.addEventListener("change", onSetterChange);
 elemSetterInp.addEventListener("input", onInpChange);