vscrollbar.lzx

<library>
     <include href="/base/basebuttonrepeater.lzx"/>

    <resource name="ScrollButton_rsc">
        <frame src="images/scrollbar/scrollbtn_up.swf"/>
        <frame src="images/scrollbar/scrollbtn_mo.swf"/>
        <frame src="images/scrollbar/scrollbtn_dn.swf"/>
    </resource>
    <resource name="ScrollArrowUp_rsc" src="images/scrollbar/scroll_uparrow.swf"/>
    <resource name="ScrollArrowDown_rsc" src="images/scrollbar/scroll_downarrow.swf"/>

    <resource name="YThumbTop_rsc" src="images/scrollbar/scrollthumb_y_top.swf"/>
    <resource name="YThumbMiddle_rsc" src="images/scrollbar/scrollthumb_y_mid.swf"/>
    <resource name="YThumbBottom_rsc" src="images/scrollbar/scrollthumb_y_bot.swf"/>
    <resource name="YThumbGripper_rsc" src="images/scrollbar/thumb_y_gripper.swf"/>


   <resource name="YScrollTrack_rsc" src="images/scrollbar/y_scrolltrack.swf"/>

<class name="basevscrollbar">
    <attribute name="targetview" when="always"/>
    <attribute name="stepsize" value="10"/>
    <handler name="oninit">
        this.initcomplete = true;
        this.onheight.sendEvent();
    </handler>
    <handler name="onheight" reference="this.targetview">
        if (this.initcomplete) {
          this.thumb.updateHeight();
        }
    </handler>
    <handler name="onheight">
    
       if (this['initcomplete']) {
            // should hide thumb if the target view is smaller than the scrollbar
            // Calendar does not need this feature, so it is unimplemented
            if (this.height - this.targetview.height >= 0) return;

            this.thumb.updateHeight();    // need to do before thumb.updateY

            visheight = this.targetview.y + this.targetview.height;
            if (visheight < this.height) {
                // if the target view is offset because of the shift in height
                // update the scroll position of the target view
                var newy = this.height - this.targetview.height;
                this.targetview.setAttribute('y', newy);
            }  else {
                this.thumb.updateY();
            }
        }
    
    </handler>

    <!-- set the targetView position                                    -->
    <!-- change: change in position, note: positive number scrolls down -->
    <method name="setPosRelative" args="change">
    
        var newPos = this.targetview.y-change;
        if (newPos > 0) newPos=0;

        maxscroll = Math.max(this.targetview.height-this.height,0);
        if (newPos < -maxscroll) newPos = -maxscroll;
        this.targetview.setAttribute('y', newPos);
    
    </method>
     <!-- step(1) to move ahead, step(-1) to move back -->
    <method name="step" args="n">
        //Debug.write("step("+n+")");
        this.setPosRelative(n*stepsize);
    </method>

    <!-- page(1) to page ahead, page(-1) to back back -->
    <method name="page" args="n">
        //Debug.write("page("+n+")");
        this.setPosRelative(n*this.height);
    </method>
</class>

<script>
    
Math.limit = function(value, min, max) {
    if (value > max)
        return max;

    if (value < min)
        return min;

    return value;

}
    
</script>




<class name="vscrollbar" extends="basevscrollbar">
    <attribute name="bgcolor" value="0x595959"/>
    <attribute name="width" value="14"/>
    <!-- up arrow -->
    <view name="toparrow">
        <basebuttonrepeater x="1" y="1" resource="ScrollButton_rsc">
            <handler name="onmousedown">
                classroot.step(-1);
            </handler>
            <handler name="onmousestilldown">
                classroot.step(-1);
            </handler>
        </basebuttonrepeater>
        <view x="4" y="3" resource="ScrollArrowUp_rsc"/>
    </view>

    <view name="scrolltrack" clickable="true">
        <view x="1" name="top" clickable="true" resource="YScrollTrack_rsc" stretches="height">
            <!-- top of the scroll track -->
            <attribute name="height" value="parent.height" when="always"/>
            <attribute name="width" value="parent.width" when="always"/>
            <handler name="onmousedown">
            
                if (this.parent.getMouse( 'y' ) < parent.thumb.y) {
                    classroot.page(-1);
                } else {
                    classroot.page(1);
                }
            
            </handler>
        </view>

         <view x="1" name="thumb" id="th" onmousedown="thumbdrag.apply();" onmouseup="thumbdrag.remove()">
            <attribute name="inthumbdrag" value="false"/>
            <handler name="oninit">
                classroot.thumb = this;
            </handler>

             <handler name="ony" reference="classroot.targetview">
                // when the y position of the target view changes then update
                //  the thumb position, unless the thumb causes the change
                 if (!this.inthumbdrag) {
                    this.updateY();
                 }
             </handler>

             <method name="updateY">
               if (classroot.targetview) {
                   var newY = Math.floor((-classroot.targetview.y/classroot.targetview.height)
                                         *parent.height);
                   this.setAttribute('y', newY);
               }
             </method>

             <method name="updateHeight">
               if (classroot.targetview) {
                   var newHeight = Math.floor((classroot.height/classroot.targetview.height)
                        *parent.height);
                   this.setAttribute('height', newHeight);
               }
             </method>

             <state name="thumbdrag">
                 <attribute name="ydoffset" value="this.getMouse( 'y' )" when="once"/>
                 <attribute name="y" value="${this.thumbControl(this.immediateparent.getMouse( 'y' ))}"/>
                 <method name="thumbControl" args="ymouse">
                     // thumbControl method becomes a method of 'thumb'
                     // when the state is applied
                     this.inthumbdrag = true;
                     var target = classroot.targetview;
                     var thumb = this;
                     var targetpos = 0;
                     if (target.height > thumb.classroot.height) {
                         pos = -(thumb.y /
                                 (thumb.parent.height-thumb.height)) *
                                 (target.height - thumb.classroot.height );
                      }
                     //Debug.write("thumbControl pos:"+pos);
                     target.setAttribute('y', pos);

                     thumbpos = Math.limit(ymouse - this.ydoffset,
                            0, this.immediateparent.height-this.height);

                     this.inthumbdrag = false;

                     return thumbpos;
                 </method>
             </state>


            <view resource="YThumbTop_rsc"/>
            <view resource="YThumbMiddle_rsc" stretches="both"/>
            <view resource="YThumbBottom_rsc"/>
            <stableborderlayout axis="y"/>

             <!-- note: stableborderlayout only acts on the first three views -->
             <view resource="YThumbGripper_rsc" y="4" height="${Math.min(102, parent.height-8)}" clip="true" valign="middle"/>


        </view>

        <!-- bottom of the scroll track -->
        <!--view x="1" name="bottom" clickable="true" width="parent.width-2"
             resource="YScrollTrack_rsc" stretches="height">
            <attribute name="y" value="parent.thumb.y+parent.thumb.height" when="always"/>
            <attribute name="height" value= "parent.height - parent.thumb.y" when="always"/>
            <attribute name="width" value="parent.width" when="always"/>
            <handler name="onmousedown">
                classroot.page(1);
            </handler>
        </view-->
    </view>

    <!-- down arrow -->
    <view name="bottomarrow" height="13">
        <basebuttonrepeater x="1" resource="ScrollButton_rsc">
            <handler name="onmousedown">
                classroot.step(1);
            </handler>
            <handler name="onmousestilldown">
                classroot.step(1);
            </handler>
        </basebuttonrepeater>
        <view x="4" y="3" resource="ScrollArrowDown_rsc"/>
    </view>

    <stableborderlayout axis="y"/>

</class>


</library>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2008 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
<!-- @LZX_VERSION@                                                         -->