1247     <xsl:text>        updates[new_index] = defaultval;

  1248 </xsl:text>

  1310     <xsl:text>        this.lastapply = indexes.map(() =&gt; undefined);

  1311 </xsl:text>

  1312     <xsl:text>        this.inhibit = indexes.map(() =&gt; undefined);

  1313 </xsl:text>

  1314     <xsl:text>        this.pending = indexes.map(() =&gt; undefined);

  1315 </xsl:text>

  1316     <xsl:text>        this.bound_unhinibit = this.unhinibit.bind(this);

  1317 </xsl:text>

  1330     <xsl:text>                /* flush updates pending because of inhibition */

  1331 </xsl:text>

  1332     <xsl:text>                let inhibition = this.inhibit[index];

  1333 </xsl:text>

  1334     <xsl:text>                if(inhibition != undefined){

  1335 </xsl:text>

  1336     <xsl:text>                    clearTimeout(inhibition);

  1337 </xsl:text>

  1338     <xsl:text>                    this.lastapply[index] = undefined;

  1339 </xsl:text>

  1340     <xsl:text>                    this.unhinibit(index);

  1341 </xsl:text>

  1342     <xsl:text>                }

  1343 </xsl:text>

  1498     <xsl:text>    _apply_hmi_value(index, new_val) {

  1499 </xsl:text>

  1500     <xsl:text>        let realindex = this.get_variable_index(index);

  1501 </xsl:text>

  1502     <xsl:text>        if(realindex == undefined) return undefined;

  1503 </xsl:text>

  1504     <xsl:text>        new_val = this.clip_min_max(index, new_val);

  1505 </xsl:text>

  1506     <xsl:text>        return apply_hmi_value(realindex, new_val);

  1507 </xsl:text>

  1508     <xsl:text>    }

  1509 </xsl:text>

  1510     <xsl:text>

  1511 </xsl:text>

  1512     <xsl:text>    unhinibit(index){

  1513 </xsl:text>

  1514     <xsl:text>        this.inhibit[index] = undefined;

  1515 </xsl:text>

  1516     <xsl:text>        let new_val = this.pending[index];

  1517 </xsl:text>

  1518     <xsl:text>        this.pending[index] = undefined;

  1519 </xsl:text>

  1520     <xsl:text>        return this.apply_hmi_value(index, new_val);

  1521 </xsl:text>

  1522     <xsl:text>    }

  1523 </xsl:text>

  1524     <xsl:text>

  1525 </xsl:text>

  5584   <xsl:template mode="widget_class" match="widget[@type='ScrollBar']">

  5585     <xsl:text>class ScrollBarWidget extends Widget{

  5586 </xsl:text>

  5587     <xsl:text>    frequency = 10;

  5588 </xsl:text>

  5589     <xsl:text>    position = undefined;

  5590 </xsl:text>

  5591     <xsl:text>    range = undefined;

  5592 </xsl:text>

  5593     <xsl:text>    size = undefined;

  5594 </xsl:text>

  5595     <xsl:text>    mincursize = 0.1;

  5596 </xsl:text>

  5597     <xsl:text>

  5598 </xsl:text>

  5599     <xsl:text>    dispatch(value,oldval, index) {

  5600 </xsl:text>

  5601     <xsl:text>        switch(index) {

  5602 </xsl:text>

  5603     <xsl:text>            case 0:

  5604 </xsl:text>

  5605     <xsl:text>                if (Math.round(this.position) != value)

  5606 </xsl:text>

  5607     <xsl:text>                    this.position = value;

  5608 </xsl:text>

  5609     <xsl:text>                break;

  5610 </xsl:text>

  5611     <xsl:text>            case 1:

  5612 </xsl:text>

  5613     <xsl:text>                this.range = value;

  5614 </xsl:text>

  5615     <xsl:text>                break;

  5616 </xsl:text>

  5617     <xsl:text>            case 2:

  5618 </xsl:text>

  5619     <xsl:text>                this.size = value;

  5620 </xsl:text>

  5621     <xsl:text>                break;

  5622 </xsl:text>

  5623     <xsl:text>        }

  5624 </xsl:text>

  5625     <xsl:text>

  5626 </xsl:text>

  5627     <xsl:text>        this.request_animate();

  5628 </xsl:text>

  5629     <xsl:text>    }

  5630 </xsl:text>

  5631     <xsl:text>

  5632 </xsl:text>

  5633     <xsl:text>    get_ratios() {

  5634 </xsl:text>

  5635     <xsl:text>        let range = this.range;

  5636 </xsl:text>

  5637     <xsl:text>        let size = Math.max(this.range * this.mincursize, Math.min(this.size, range));

  5638 </xsl:text>

  5639     <xsl:text>        let maxh = this.range_elt.height.baseVal.value;

  5640 </xsl:text>

  5641     <xsl:text>        let pixels = (range - size) * maxh;

  5642 </xsl:text>

  5643     <xsl:text>        let units = range*range;

  5644 </xsl:text>

  5645     <xsl:text>        return [size, maxh, range, pixels, units];

  5646 </xsl:text>

  5647     <xsl:text>    }

  5648 </xsl:text>

  5649     <xsl:text>

  5650 </xsl:text>

  5651     <xsl:text>    animate(){

  5652 </xsl:text>

  5653     <xsl:text>        if(this.position == undefined || this.range == undefined || this.size == undefined)

  5654 </xsl:text>

  5655     <xsl:text>            return;

  5656 </xsl:text>

  5657     <xsl:text>        let [size, maxh, range, pixels, units] = this.get_ratios();

  5658 </xsl:text>

  5659     <xsl:text>

  5660 </xsl:text>

  5661     <xsl:text>        let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range) * pixels / units);

  5662 </xsl:text>

  5663     <xsl:text>        let new_height = Math.round(maxh * size/range);

  5664 </xsl:text>

  5665     <xsl:text>

  5666 </xsl:text>

  5667     <xsl:text>        this.cursor_elt.y.baseVal.value = new_y;

  5668 </xsl:text>

  5669     <xsl:text>        this.cursor_elt.height.baseVal.value = new_height;

  5670 </xsl:text>

  5671     <xsl:text>    }

  5672 </xsl:text>

  5673     <xsl:text>

  5674 </xsl:text>

  5675     <xsl:text>    init_mandatory() {

  5676 </xsl:text>

  5677     <xsl:text>        this.cursor_elt.onpointerdown = () =&gt; this.on_cursor_down();

  5678 </xsl:text>

  5679     <xsl:text>

  5680 </xsl:text>

  5681     <xsl:text>        this.bound_drag = this.drag.bind(this);

  5682 </xsl:text>

  5683     <xsl:text>        this.bound_drop = this.drop.bind(this);

  5684 </xsl:text>

  5685     <xsl:text>    }

  5686 </xsl:text>

  5687     <xsl:text>

  5688 </xsl:text>

  5689     <xsl:text>    apply_position(position){

  5690 </xsl:text>

  5691     <xsl:text>        this.position = Math.max(Math.min(position, this.range), 0);

  5692 </xsl:text>

  5693     <xsl:text>        this.apply_hmi_value(0, Math.round(this.position));

  5694 </xsl:text>

  5695     <xsl:text>    }

  5696 </xsl:text>

  5697     <xsl:text>

  5698 </xsl:text>

  5699     <xsl:text>    on_page_click(is_up){

  5700 </xsl:text>

  5701     <xsl:text>        this.apply_position(is_up ? this.position-this.size

  5702 </xsl:text>

  5703     <xsl:text>                                  : this.position+this.size);

  5704 </xsl:text>

  5705     <xsl:text>    }

  5706 </xsl:text>

  5707     <xsl:text>

  5708 </xsl:text>

  5709     <xsl:text>    on_cursor_down(e){

  5710 </xsl:text>

  5711     <xsl:text>        // get scrollbar -&gt; root transform

  5712 </xsl:text>

  5713     <xsl:text>        let ctm = this.range_elt.getCTM();

  5714 </xsl:text>

  5715     <xsl:text>        // relative motion -&gt; discard translation

  5716 </xsl:text>

  5717     <xsl:text>        ctm.e = 0;

  5718 </xsl:text>

  5719     <xsl:text>        ctm.f = 0;

  5720 </xsl:text>

  5721     <xsl:text>        // root -&gt; scrollbar transform

  5722 </xsl:text>

  5723     <xsl:text>        this.invctm = ctm.inverse();

  5724 </xsl:text>

  5725     <xsl:text>        svg_root.addEventListener("pointerup", this.bound_drop, true);

  5726 </xsl:text>

  5727     <xsl:text>        svg_root.addEventListener("pointermove", this.bound_drag, true);

  5728 </xsl:text>

  5729     <xsl:text>    }

  5730 </xsl:text>

  5731     <xsl:text>

  5732 </xsl:text>

  5733     <xsl:text>    drop(e) {

  5734 </xsl:text>

  5735     <xsl:text>        svg_root.removeEventListener("pointerup", this.bound_drop, true);

  5736 </xsl:text>

  5737     <xsl:text>        svg_root.removeEventListener("pointermove", this.bound_drag, true);

  5738 </xsl:text>

  5739     <xsl:text>    }

  5740 </xsl:text>

  5741     <xsl:text>

  5742 </xsl:text>

  5743     <xsl:text>    drag(e) {

  5744 </xsl:text>

  5745     <xsl:text>        let [size, maxh, range, pixels, units] = this.get_ratios();

  5746 </xsl:text>

  5747     <xsl:text>        if(pixels == 0) return;

  5748 </xsl:text>

  5749     <xsl:text>        let point = new DOMPoint(e.movementX, e.movementY);

  5750 </xsl:text>

  5751     <xsl:text>        let movement = point.matrixTransform(this.invctm).y;

  5752 </xsl:text>

  5753     <xsl:text>        this.apply_position(this.position + movement * units / pixels);

  5754 </xsl:text>

  5755     <xsl:text>    }

  5756 </xsl:text>

  5757     <xsl:text>}

  5758 </xsl:text>

  5759   </xsl:template>

  5760   <xsl:template mode="widget_defs" match="widget[@type='ScrollBar']">

  5761     <xsl:param name="hmi_element"/>

  5762     <xsl:call-template name="defs_by_labels">

  5763       <xsl:with-param name="hmi_element" select="$hmi_element"/>

  5764       <xsl:with-param name="labels">

  5765         <xsl:text>cursor range</xsl:text>

  5766       </xsl:with-param>

  5767     </xsl:call-template>

  5768     <xsl:variable name="pagebuttons">

  5769       <xsl:call-template name="defs_by_labels">

  5770         <xsl:with-param name="hmi_element" select="$hmi_element"/>

  5771         <xsl:with-param name="labels">

  5772           <xsl:text>pageup pagedown</xsl:text>

  5773         </xsl:with-param>

  5774         <xsl:with-param name="mandatory" select="'no'"/>

  5775       </xsl:call-template>

  5776     </xsl:variable>

  5777     <xsl:variable name="have_pagebuttons" select="string-length($pagebuttons)&gt;0"/>

  5778     <xsl:value-of select="$pagebuttons"/>

  5779     <xsl:text>    init: function() {

  5780 </xsl:text>

  5781     <xsl:text>        this.init_mandatory();

  5782 </xsl:text>

  5783     <xsl:if test="$have_pagebuttons">

  5784       <xsl:text>        this.pageup_elt.onclick = () =&gt; this.on_page_click(true);

  5785 </xsl:text>

  5786       <xsl:text>        this.pagedown_elt.onclick = () =&gt; this.on_page_click(false);

  5787 </xsl:text>

  5788     </xsl:if>

  5789     <xsl:text>    },

  5790 </xsl:text>

  5791   </xsl:template>