Slider-input web component (#1109)

* feat: slider-input web component

* feat: slider-input web component - Brush size

* feat: slider-input - statesGrowthRate

* feat: slider-input - units editor

* feat: slider-input - dissalow invalid numbers

* chore: pump version to v1.99.05

* chore: pump version to v1.99.05

---------

Co-authored-by: Azgaar <azgaar.fmg@yandex.com>

modules/dynamic/editors/cultures-editor.js

@@ -51,24 +51,9 @@ function insertEditorHtml() {
       <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
       <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
       <div id="culturesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="culturesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="culturesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="culturesBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -718,7 +703,7 @@ function selectCultureOnMapClick() {
 }
 
 function dragCultureBrush() {
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -759,7 +744,7 @@ function changeCultureForSelection(selection) {
 function moveCultureBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +culturesManuallyBrush.value;
+  const radius = +culturesBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 

modules/dynamic/editors/religions-editor.js

@@ -26,7 +26,7 @@ function insertEditorHtml() {
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
       <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
       <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
-      <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by religion form" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
       <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
       <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
       <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
@@ -66,25 +66,9 @@ function insertEditorHtml() {
 
       <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
       <div id="religionsManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
-          <input
-            id="religionsManuallyBrush"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 7em"
-          />
-          <input
-            id="religionsManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="religionsBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -183,7 +167,7 @@ function religionsEditorAddLines() {
         <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
           ${getTypeOptions(r.type)}
         </select>
-        <input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
         <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
@@ -215,7 +199,7 @@ function religionsEditorAddLines() {
       <select data-tip="Religion type" class="religionType" style="width: 5em">
         ${getTypeOptions(r.type)}
       </select>
-      <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
+      <input data-tip="Religion form" class="religionForm" style="width: 6em"
         value="${r.form}" autocorrect="off" spellcheck="false" />
       <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
       <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
@@ -696,7 +680,7 @@ function selectReligionOnMapClick() {
 }
 
 function dragReligionBrush() {
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -736,7 +720,7 @@ function changeReligionForSelection(selection) {
 function moveReligionBrush() {
   showMainTip();
   const [x, y] = d3.mouse(this);
-  const radius = +byId("religionsManuallyBrushNumber").value;
+  const radius = +byId("religionsBrush").value;
   moveCircle(x, y, radius);
 }
 

modules/dynamic/editors/states-editor.js

@@ -24,7 +24,7 @@ function insertEditorHtml() {
     <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
       <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div>
       <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
       <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
       <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
@@ -55,60 +55,25 @@ function insertEditorHtml() {
       <div id="statesRegenerateButtons" style="display: none">
         <button id="statesRegenerateBack" data-tip="Hide the regeneration menu" class="icon-cog-alt"></button>
         <button id="statesRandomize" data-tip="Randomize states Expansion value and re-calculate states and provinces" class="icon-shuffle"></button>
-        <span data-tip="Additional growth rate. Defines how many lands will stay neutral">
-          <label class="italic">Growth rate:</label>
-          <input
-            id="statesNeutral"
-            type="range"
-            min=".1"
-            max="3"
-            step=".05"
-            value="1"
-            style="width: 12em"
-          />
-          <input
-            id="statesNeutralNumber"
-            type="number"
-            min=".1"
-            max="3"
-            step=".05"
-            value="1"
-            style="width: 4em"
-          />
-        </span>
+        <div data-tip="Additional growth rate. Defines how many land cells remain neutral" style="display: inline-block">
+          <slider-input id="statesGrowthRate" min=".1" max="3" step=".05" value="1">Growth rate:</slider-input>
+        </div>
         <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
-        <span data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect">
+        <div data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect" style="display: inline-block">
           <input id="statesAutoChange" class="checkbox" type="checkbox" />
           <label for="statesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-        </span>
-        <span data-tip="Allow system to change state labels when states data is change">
+        </div>
+        <div data-tip="Allow system to change state labels when states data is change" style="display: inline-block">
           <input id="adjustLabels" class="checkbox" type="checkbox" />
           <label for="adjustLabels" class="checkbox-label"><i>auto-change labels</i></label>
-        </span>
+        </div>
       </div>
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
-          >Brush size:
-          <input
-            id="statesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
-            type="range"
-            min="5"
-            max="99"
-            value="15"
-            style="width: 5em"
-          />
-          <input
-            id="statesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
-            type="number"
-            min="5"
-            max="99"
-            value="15"
-          /> </label
-        ><br />
+        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
+          <slider-input id="statesBrush" min="5" max="100" value="15">Brush size:</slider-input>
+        </div>
         <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -135,8 +100,7 @@ function addListeners() {
   byId("statesRegenerateBack").on("click", exitRegenerationMenu);
   byId("statesRecalculate").on("click", () => recalculateStates(true));
   byId("statesRandomize").on("click", randomizeStatesExpansion);
-  byId("statesNeutral").on("input", changeStatesGrowthRate);
-  byId("statesNeutralNumber").on("change", changeStatesGrowthRate);
+  byId("statesGrowthRate").on("input", () => recalculateStates(false));
   byId("statesManually").on("click", enterStatesManualAssignent);
   byId("statesManuallyApply").on("click", applyStatesManualAssignent);
   byId("statesManuallyCancel").on("click", () => exitStatesManualAssignment(false));
@@ -228,10 +192,10 @@ function statesEditorAddLines() {
         <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
           s.name
         }" readonly />
-        <svg class="coaIcon placeholder hide"></svg>
+        <svg class="coaIcon placeholder"></svg>
         <input class="stateForm placeholder" value="none" />
-        <span class="icon-star-empty placeholder hide"></span>
-        <input class="stateCapital placeholder hide" />
+        <span class="icon-star-empty placeholder"></span>
+        <input class="stateCapital placeholder" />
         <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
         <span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
@@ -267,14 +231,14 @@ function statesEditorAddLines() {
     >
       <fill-box fill="${s.color}"></fill-box>
       <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
-      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
         s.i
       }"></use></svg>
       <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
         s.formName
       }" readonly />
-      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
-      <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
       <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
         s.culture
       )}</select>
@@ -728,7 +692,7 @@ function showStatesChart() {
     .sum(d => d.area)
     .sort((a, b) => b.value - a.value);
 
-  const size = 150 + 200 * uiSizeOutput.value;
+  const size = 150 + 200 * uiSize.value;
   const margin = {top: 0, right: -50, bottom: 0, left: -50};
   const w = size - margin.left - margin.right;
   const h = size - margin.top - margin.bottom;
@@ -885,14 +849,6 @@ function recalculateStates(must) {
   refreshStatesEditor();
 }
 
-function changeStatesGrowthRate() {
-  const growthRate = +this.value;
-  byId("statesNeutral").value = growthRate;
-  byId("statesNeutralNumber").value = growthRate;
-  tip("Growth rate: " + growthRate);
-  recalculateStates(false);
-}
-
 function randomizeStatesExpansion() {
   pack.states.forEach(s => {
     if (!s.i || s.removed) return;
@@ -959,7 +915,7 @@ function selectStateOnMapClick() {
 }
 
 function dragStateBrush() {
-  const r = +statesManuallyBrush.value;
+  const r = +statesBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -1002,7 +958,7 @@ function changeStateForSelection(selection) {
 function moveStateBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +statesManuallyBrush.value;
+  const radius = +statesBrush.value;
   moveCircle(point[0], point[1], radius);
 }