photo.lzx

<!-- Copyright 2001-2008, 2010 Laszlo Systems, Inc.  All Rights Reserved. -->
<library>

    <class name="photo" width="77" height="77" visible="${!tls.waitforload}">
        <attribute name="defaultplacement" value="interior"/>
        <attribute name="text" value="title" type="text"/>   

        <attribute name="clipfactor" value="0" setter="this.setClipFactor( clipfactor )"/>


        <attribute name="loaded" value="false"/>
        <attribute name="aspect" value="1"/>

        <attribute name="_wmult" value="0"/>
        <attribute name="_hmult" value="0"/>
        <attribute name="_iwmult" value="0"/>
        <attribute name="_ihmult" value="0"/>
        <attribute name="_diwmult" value="0"/>
        <attribute name="_dihmult" value="0"/>

        <attribute name="_mdtime"/>
        <attribute name="_ddcxp"/>
        <attribute name="_ddcyp"/>


        <attribute name="intwidth" value="${ this._wmult * this.width }"/>
        <attribute name="intheight" value="${ this._hmult * this.height }"/>

        <attribute name="border" value="2"/>
        
         <handler name="ondata" args="d"> 
            if ( !d ) return;
            var dp = this.datapath;
            // var txt = dp.xpathQuery('@title');
            this.txt.setAttribute('text', dp.xpathQuery('@title') );
            //this.setAttribute('text',txt);
            this.setImage(this.getImageURL('t'));
        
        </handler>
      
        <method name="getImageURL" args="suffix">
            
                var id=datapath.p.getAttr("id");
                var suf = (suffix != '') ? "_"+suffix: "";

            // Connect to the server OR load the image from a local path            
            if (gGlobals.SHOULDCONNECT) {
                // build URL to image
                var server=datapath.p.getAttr("server");
                var secret=datapath.p.getAttr("secret");
                var s="http://static.flickr.com/"+server+"/"+id+"_"+secret + suf + ".jpg";
                // Debug.write(s); 
                return s;
            } else {               
                // Load images from local disk
                // need to fix offline images because of "medium" images have no "_suffix"
                var s = "data/offline/photos/photo_" + id + suf + ".jpg";
                return s;
            }
            
            
        </method>
        
        <method name="setImage" args="s">
             //Debug.write("set source s=",s);
             // TODO: [mc 7-31-2006] Reversing these two lines causes IE image loading bugs - see lps/includes/lfc/test/resourceload.lzx.  Fix here for now. 
             this.intparent.setAttribute('visible', false);
             this.intparent.interior.setSource(s);
        </method>
   
        <attribute name="_lastw" value="null"/>
        <handler name="onwidth" method="updateX"/>
        <method name="updateX" args="force">
            
            if ( !this.isinited ) return;
            if ( height != width ) this.setAttribute('height', width );
            if ( _lastw == width && force != true ) {
                return;
            } 
            this._lastw = width;
            var wm = _wmult + clipfactor * ( _diwmult );
            var iwidth = wm * ( this.width - 2*this.border );
            var ix = this.width/2 - iwidth/2;

            var ipwidth = iwidth + clipfactor * ( width - iwidth - 2*border);
            var ipx = this.width/2 - ipwidth/2;
            intparent.setAttribute('x', ipx);
            intparent.setAttribute('width', ipwidth);
            borderbg.setAttribute('x', ipx  - this.border );
            borderbg.setAttribute('width', ipwidth  + 2*this.border );
            intparent.interior.setAttribute('x', ix - ipx );
            intparent.interior.setAttribute('width', iwidth );
            shadow.setAttribute('x', border + ipx );
            shadow.setAttribute('width', ipwidth + this.border );
            
        </method>

        <attribute name="_lasth" value="null"/>
        <handler name="onheight" method="updateY"/>
        <method name="updateY" args="force">
            
            if ( !this.isinited ) return;
            if ( width != height ) this.setAttribute('width', height );
            if ( _lasth == height && force != true ) {
                return;
            } 
            this._lasth = height;
            var hm = _hmult + clipfactor * ( _dihmult );
            var iheight = hm * ( this.height - 2*this.border );
            var iy = this.height/2 - iheight/2;

            var ipheight = iheight + clipfactor * ( height - iheight - 2*border);
            var ipy = this.height/2 - ipheight/2;

            intparent.setAttribute('y', ipy);
            intparent.setAttribute('height', ipheight );
            borderbg.setAttribute('y', ipy  - this.border );
            borderbg.setAttribute('height', ipheight  + 2*this.border );
            intparent.interior.setAttribute('height', iheight );
            intparent.interior.setAttribute('y', iy - ipy );
            shadow.setAttribute('y', border + ipy );
            shadow.setAttribute('height', ipheight + this.border );
            
        </method>

        <handler name="onload" reference="intparent.interior">
            var irw = intparent.interior.resourcewidth;
            var irh = intparent.interior.resourceheight;
            if ( irw > irh ){
                this.setAttribute( "_wmult" , 1 );
                this.setAttribute( "_hmult" , irh/ irw );
                this.setAttribute( "_iwmult" , irw/irh);
                this.setAttribute( "_ihmult" , 1);
            } else {
                this.setAttribute( "_wmult" , irw/ irh );
                this.setAttribute( "_hmult" , 1 );
                this.setAttribute( "_iwmult" , 1);
                this.setAttribute( "_ihmult" , irh/irw);
            }
            this.setAttribute( "_diwmult" , _iwmult - _wmult );
            this.setAttribute( "_dihmult" , _ihmult - _hmult );
            this.updateX( true );
            this.updateY( true );
            this.setAttribute( "loaded", true );
            intparent.interior.setAttribute("opacity", 0);
            if(tls.waitforload != true){
                this.intparent.setAttribute('visible', true);
            }
            intparent.interior.animate('opacity', 1, 200);
            this.txt.adjustDimensions();
        </handler>

        
        <!-- use this event to figure out if the view just got clicked 
             (and not dragged -->
        <attribute name="onplainclick" value="null"/>
        
        <!-- shadow -->
        <view name="shadow" bgcolor="black" opacity=".5"/>
             
        <!-- border -->
        <view name="borderbg" bgcolor="white"/>
        
        <!-- interior -->
        <view name="intparent" clip="true" x="$once{ this.classroot.border }" y="$once{ this.classroot.border }">
            <view name="interior" bgcolor="0xd9d9d9" stretches="both">
                <state applied="${this.classroot.doesdrag}">
                    <handler name="onmousedown">
                        this.classroot.onmousedown.sendEvent();
                    </handler>
                    <handler name="onmouseup">
                        this.classroot.onmouseup.sendEvent();
                    </handler>
                </state>
            </view>
        </view>
        <handler name="onmousedown">
            if ( this.doesdrag ) this.startDragCheck();
        </handler>
        <handler name="onmouseup">
            if ( this.draginitiator ){
                this.stopDrag();
            } else {
                this.ddcdel.unregisterAll();
                if ( this.onplainclick ) this.onplainclick.sendEvent( this );
            }
        </handler>
        
        <!-- title -->
        <text text="" width="100" fgcolor="0x1b1191" fontsize="10" y="${classroot.height + 3}" name="txt" visible="false"><!-- Setting this initially to false
              seems to fix a visual issue where these would cluster on the
              upper left of the page in DHTML. -->
            <handler name="ontext">
                this.adjustDimensions();
            </handler>
            <handler name="onvisible">
                this.adjustDimensions();
            </handler>
            <method name="adjustDimensions">
               this.setAttribute('width', classroot.width + 20);
               var tw = Math.min(this.getTextWidth(),width);
               var tx = (classroot.width - tw)/2;
               this.setAttribute('x', tx);
             </method>
             <method name="makeVisible">
                
             </method>
        </text>

        <attribute name="doesdrag" value="false"/>
        
        <handler name="onwidth">
           if ( this['txt'] ) {
                if ( this.txt.visible ) this.txt.adjustDimensions();
           }
        </handler>

        <method name="startDragCheck">
            //info('startDragCheck');
            this._mdtime = LzTimeKernel.getTimer();
            this.ddcdel.register( lz.Idle, "onidle" );
            this._ddcxp = this.getMouse( "x" );
            this._ddcyp = this.getMouse( "y" );
        </method>

        <attribute name="draginitiator" value="false"/>

        <attribute name="ddcdel" value="$once{ new LzDelegate( this, 'doDragCheck' ) }"/>

        <method name="doDragCheck" args="ignore">
            
            var dx = this.getMouse( "x" ) - this._ddcxp;
            var dy =  this.getMouse( "y" ) - this._ddcyp;
            if ( ( LzTimeKernel.getTimer() - this._mdtime > mousedownBeforeDrag ) ||
                 ( 5 < ( Math.abs( dx ) + Math.abs( dy ) ) ) ){
                this.startDrag(dx, dy );
            }
            
        </method>

        <attribute name="mousedownBeforeDrag" value="300"/>
        <method name="startDrag" args="dx,dy">
            this.ddcdel.unregisterAll();
            this.setAttribute ( "draginitiator" , true );
        </method>

        <method name="stopDrag">
            this.setAttribute ( "draginitiator" , false );
        </method>

        <method name="setClipFactor" args="cf">
            this.clipfactor = cf;
            this.updateX( true );
            this.updateY( true );
        </method>

     
    </class>

</library>

Cross References

Classes