Page Components JavaScript DHTML





  
  
  Dynamic image test
    
   
  
  
  
  
    
    /**
     * A little manager that allows us to swap the image dynamically
     *
     */
    var CropImageManager = {
      /**
       * Holds the current Cropper.Img object
       * @var obj
       */
      curCrop: null,
      
      /**
       * Initialises the cropImageManager
       *
       * @access public
       * @return void
       */
      init: function() {
        this.attachCropper();
      },
      
      /**
       * Handles the changing of the select to change the image, the option value
       * is a pipe seperated list of imgSrc|width|height
       * 
       * @access public
       * @param obj event
       * @return void
       */
      onChange: function( e ) {
        var vals = $F( Event.element( e ) ).split('|');
        this.setImage( vals[0], vals[1], vals[2] ); 
      },
      
      /**
       * Sets the image within the element & attaches/resets the image cropper
       *
       * @access private
       * @param string Source path of new image
       * @param int Width of new image in pixels
       * @param int Height of new image in pixels
       * @return void
       */
      setImage: function( imgSrc, w, h ) {
        $( 'testImage' ).src = imgSrc;
        $( 'testImage' ).width = w;
        $( 'testImage' ).height = h;
        this.attachCropper();
      },
      
      /** 
       * Attaches/resets the image cropper
       *
       * @access private
       * @return void
       */
      attachCropper: function() {
        if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'testImage', { onEndCrop: onEndCrop } );
        else this.curCrop.reset();
      },
      
      /**
       * Removes the cropper
       *
       * @access public
       * @return void
       */
      removeCropper: function() {
        if( this.curCrop != null ) {
          this.curCrop.remove();
        }
      },
      
      /**
       * Resets the cropper, either re-setting or re-applying
       *
       * @access public
       * @return void
       */
      resetCropper: function() {
        this.attachCropper();
      }
    };
    
    
    // setup the callback function
    function onEndCrop( coords, dimensions ) {
      $( 'x1' ).value = coords.x1;
      $( 'y1' ).value = coords.y1;
      $( 'x2' ).value = coords.x2;
      $( 'y2' ).value = coords.y2;
      $( 'width' ).value = dimensions.width;
      $( 'height' ).value = dimensions.height;
    }
    
    // basic example
    Event.observe( 
      window, 
      'load', 
      function() { 
        CropImageManager.init();
        Event.observe( $('removeCropper'), 'click', CropImageManager.removeCropper.bindAsEventListener( CropImageManager ), false );
        Event.observe( $('resetCropper'), 'click', CropImageManager.resetCropper.bindAsEventListener( CropImageManager ), false );
        Event.observe( $('imageChoice'), 'change', CropImageManager.onChange.bindAsEventListener( CropImageManager ), false );
      }
    );     
    
    
    /*
    if( typeof(dump) != 'function' ) {
      Debug.init(true, '/');
      
      function dump( msg ) {
        Debug.raise( msg );
      };
    } else dump( '---------------------------------------\n' );
    */
    
  
  
  
    label { 
      clear: left;
      margin-left: 50px;
      float: left;
      width: 5em;
    }
    
    html, body { 
      margin: 0;
    }
    
    #testWrap {
      margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
    }
  


  

Dynamic image test


  


    Test of dynamically changing images or removing & re-applying the cropper
  


  
  
    
  

  
  


    image:
    
      Castle
      Flower
    
  


  
  


    
    
  


  
  
  


    x1:
    
  


  


    y1:
    
  


  


    x2:
    
  


  


    y2:
    
  


  


    width:
    
  


  


    height
    
  

  
  


           
       
jsCropperUI-1.2.0.zip( 189 k)