plibonigo Ska/manilo; adaptu verkoliston post ĉiu sovo

jsc/rs/ui_srch.ts

@@ -452,7 +452,7 @@ export function verkoPeriodo() {
     const periodilo = DOM.e("#s_elektitaj_periodilo");
 
     function adaptuVerkliston(de,ghis) {
-        DOM.idoj("#sercho_verklisto div")?.forEach((e) => {
+        DOM.idoj("#sercho_verklisto")?.forEach((e) => {
             if (e.id != "vl_chiuj_") {
                 const jar = +(e?.getAttribute('data-jar')||0);
                 DOM.kaŝu(e, jar < de || jar > ghis); // ni kaŝas, se la argumento estas vera
@@ -464,28 +464,28 @@ export function verkoPeriodo() {
         const min = periodilo.getAttribute("data-min")||1887;
         const max = periodilo.getAttribute("data-max")||2050;
         const val = periodilo.getAttribute("data-val");
-        const values = val?.split('-').map((x)=>+x); // "min-max" kiel du-nombra listo
+        const valoroj = val?.split('-').map((x)=>+x); // "min-max" kiel du-nombra listo
 
         new Skal(periodilo, {
             range: true,
             min: +min,
             max: +max,
-            valoroj: values, 
+            valoroj: valoroj, 
             kreo: function() {
-                if (values?.length == 2) {
-                    const de = values[0];
-                    const ghis = values[1];
+                if (valoroj?.length == 2) {
+                    const de = valoroj[0];
+                    const ghis = valoroj[1];
                     DOM.al_t("#periodilo_manilo_1",""+de);
                     DOM.al_t("#periodilo_manilo_2",""+ghis);       
                     adaptuVerkliston(de,ghis);    
                 }
             },
-            movo: function(event, ui) {
+            postmovo: function(event: Event, ui: Skal) {
                 // aktualigu la montratan periodon
-                const de = ui.values[0];
-                const ghis = ui.values[1];
-                DOM.al_t("#periodilo_manilo_1",de);
-                DOM.al_t("#periodilo_manilo_2",ghis);       
+                const de = ui.valoroj[0].toFixed(0);
+                const ghis = ui.valoroj[1].toFixed(0);
+                //DOM.al_t("#periodilo_manilo_1",""+de);
+                //DOM.al_t("#periodilo_manilo_2",""+ghis);       
 
                 // aktualigu la videblon de verkoj
                 adaptuVerkliston(de,ghis);
@@ -504,7 +504,7 @@ function verkinformo() {
     const periodilo = DOM.e("#s_elektitaj_periodilo");
 
     if (periodilo instanceof HTMLElement) {
-        const periodo = Skal.skal(periodilo)?.opcioj["valoroj"].join(' - ');
+        const periodo = Skal.skal(periodilo)?.valoroj.map((v) => v.toFixed(0)).join(' - ');
         let info = ' ' + periodo;
 
         // titoloj; subpremu, se verkoj ankoraŭ ne ŝargitaj kaj do 

jsc/ui/skal.ts

@@ -7,7 +7,7 @@ import { UIElement } from './uielement';
 import { UIStil } from './uistil';
 
 export class Skal extends UIElement {
-    //valoroj: any;
+    public valoroj: Array<number>;
 
     /*
     public opcioj: {
@@ -49,6 +49,13 @@ export class Skal extends UIElement {
             };
             n++;
         });
+
+        this.valoroj = this.opcioj.valoroj;
+
+        // registrita ago
+        if (this.opcioj.kreo instanceof Function) {
+            this.opcioj.kreo();
+        }
     }
 
     komencuMovon(event) {
@@ -66,6 +73,11 @@ export class Skal extends UIElement {
             manilo.classList.remove("ui-state-active");
             manilo.onpointermove = null;
             manilo.releasePointerCapture(event.pointerId);
+
+            // registrita ago
+            if (this.opcioj.postmovo instanceof Function) {
+                this.opcioj.postmovo(event,this);
+            }
         }
     }
 
@@ -76,25 +88,33 @@ export class Skal extends UIElement {
         const manilo = event.currentTarget;
         if (manilo instanceof HTMLElement) {
             const mx = event.clientX - this.element.offsetLeft;
-            const val = this._valoro_x(mx);
+            const no = Array.from(this.element.children).indexOf(manilo);
+            const val = this._valoro_x(mx,no);
             const p = this._pozicio(val);
             manilo.textContent = val.toFixed(0); // momente ni supozas entjerojn kun paŝoj je 1
             const mp = this._plarĝo(manilo.offsetWidth);
             manilo.style.left = `${p - mp/2}%`;
             //console.debug(`mx: ${mx} val: ${val} proc: ${p}`);
+
+            // memoru la aktualan valoron
+            this.valoroj[no] = val;
         }
     }
 
     /**
      * Redonas la valoron respondan al la x-pozicio mezurita de maldekstro
+     * respektante minimuman kaj maksimuman limojn kaj evitante transŝovon
+     * de najbaraj maniloj
      */
-    _valoro_x(mx: number): number {
+    _valoro_x(mx: number, no: number): number {
         const larĝo = this.element.offsetWidth;
         const min = this.opcioj.min||0;
         const max = this.opcioj.max||100;
+        const vmin = no>0? this.valoroj[no-1] : min;
+        const vmax = no<this.valoroj.length-1? this.valoroj[no+1] : max;
         // KOREKTU: se ni vokas tro frue offsetWith / getBoundingClientRect().width redonas 0
         const val = min + mx/larĝo*(max-min);
-        return Math.min(Math.max(val,min),max);
+        return Math.min(Math.max(val,vmin),vmax);
     }
 
     /**

stl/redaktilo-revaj.css

@@ -924,6 +924,7 @@ ul.ui-menu {
     border: 1px solid var(--main-brd-clr);
     background-color: var(--main-bgr-clr);
     border-radius: 5px;
+    cursor: grab;
 }
 
 .periodilo {