dojox/image/MagnifierLite.js

  • Provides:

    • dojox.image.MagnifierLite

  • Requires:

    • dijit._Widget in common in project dijit

  • dojox.image.MagnifierLite

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
    • summary
      Adds magnification on a portion of an image element
    • description
      An unobtrusive way to add an unstyled overlay
above the srcNode image element. The overlay/glass is a
scaled version of the src image (so larger images sized down
are clearer).

The logic behind requiring the src image to be large is
"it's going to be downloaded, anyway" so this method avoids
having to make thumbnails and 2 http requests among other things.

  • dojox.image.MagnifierLite.glassSize

    • type
      Int
    • summary
      the width and height of the bounding box

  • dojox.image.MagnifierLite.scale

    • type
      Decimal
    • summary
      the multiplier of the Mangification.

  • dojox.image.MagnifierLite.postCreate

    • type
      Function
    • source: [view]
        this.inherited(arguments);

        
        // images are hard to make into workable templates, so just add outer overlay
        // and skip using dijit._Templated
        this._adjustScale();
        this._createGlass();

        
        this.connect(this.domNode,"onmouseenter","_showGlass");
        this.connect(this.glassNode,"onmousemove","_placeGlass");
        this.connect(this.img,"onmouseout","_hideGlass");


        // when position of domNode changes, _adjustScale needs to run.
        // window.resize isn't it always, FIXME:
        this.connect(window,"onresize","_adjustScale");
    • summary
  • dojox.image.MagnifierLite._createGlass
       
    • type
      Function
    • source: [view] 
                    
      

                      var node = this.glassNode = dojo.create('div', {
         style:{
          height: this.glassSize + "px",
          width: this.glassSize + "px"
         },
         className:"glassNode"
        }, dojo.body());

        
        this.surfaceNode = node.appendChild(dojo.create('div'));


        this.img = dojo.place(dojo.clone(this.domNode), node);
        // float the image around inside the .glassNode
        dojo.style(this.img, {
         position: "relative",
         top: 0, left: 0,
         width: this._zoomSize.w + "px",
         height: this._zoomSize.h + "px"
        });
                    
      
                    
    • summary
      make img and glassNode elements as children of the body
  • dojox.image.MagnifierLite._adjustScale
       
    • type
      Function
    • source: [view] 
                    
      

                      this.offset = dojo.coords(this.domNode, true);
        this._imageSize = { w: this.offset.w, h:this.offset.h };
        this._zoomSize = {
         w: this._imageSize.w * this.scale,
         h: this._imageSize.h * this.scale
        };
                    
      
                    
    • summary
      update the calculations should this.scale change
  • dojox.image.MagnifierLite._showGlass
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      this._placeGlass(e);
        dojo.style(this.glassNode, {
         visibility: "visible",
         display:""
        });
                    
      
                    
    • summary
      show the overlay
  • dojox.image.MagnifierLite._hideGlass
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      dojo.style(this.glassNode, {
         visibility: "hidden",
         display:"none"
        });
                    
      
                    
    • summary
      hide the overlay
  • dojox.image.MagnifierLite._placeGlass
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      this._setImage(e);
        var sub = Math.floor(this.glassSize / 2);
        dojo.style(this.glassNode,{
         top: Math.floor(e.pageY - sub) + "px",
         left:Math.floor(e.pageX - sub) + "px"
        });
                    
      
                    
    • summary
      position the overlay centered under the cursor
  • dojox.image.MagnifierLite._setImage
       
    • type
      Function
    • parameters: 
      • e: (typeof )
    • source: [view] 
                    
      

                      var xOff = (e.pageX - this.offset.l) / this.offset.w,
         yOff = (e.pageY - this.offset.t) / this.offset.h,
         x = (this._zoomSize.w * xOff * -1) + (this.glassSize * xOff),
         y = (this._zoomSize.h * yOff * -1) + (this.glassSize * yOff);


        dojo.style(this.img, {
         top: y + "px",
         left: x + "px"
        });
                    
      
                    
    • summary
      set the image's offset in the clipping window relative to the mouse position
  • dojox.image.MagnifierLite.destroy
       
    • type
      Function
    • parameters: 
      • finalize: (typeof )
    • source: [view] 
                    
      

                      dojo.destroy(this.glassNode);
        this.inherited(arguments);
                    
      
                    
    • summary
  • dojox.image.MagnifierLite.glassNode
       
    • summary
  • dojox.image.MagnifierLite.surfaceNode
       
    • summary
  • dojox.image.MagnifierLite.img
       
    • summary
  • dojox.image.MagnifierLite.offset
       
    • summary
  • dojox.image.MagnifierLite._imageSize
       
    • summary
  • dojox.image.MagnifierLite._zoomSize
       
    • summary
  • dojox.image
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary