CodeCarvings Piczard V1.2 Help
PopupPictureTrimmer - Client-side events
Send Feedback
Piczard Fundamentals - Web > PictureTrimmer > PopupPictureTrimmer > PopupPictureTrimmer - Client-side events

Glossary Item Box

CONTENTS

  1. The ControlLoad event handler
  2. The UserStateChanged event handler
  3. The BeforePopupOpen event handler
  4. The AfterPopupOpen event handler
  5. The BeforePopupClose event handler
  6. The AfterPopupClose event handler

Please see:

  • The Example A.323 - "Web - PictureTrimmer / PopupPictureTrimmer - Client side events"
  • The Example A.405 - "Customize Piczard / Enrich the PopupPictureTrimmer window"

 

 

1. The ControlLoad event handler

The ControlLoad client-side event is raised when the control GUI loads (or unloads) an image.
Tipically this happens when the webpage is loaded and the PictureTrimmer UI is initialized.

The event is also raised when an image is loaded or un-loaded on the client side (by using the control.load method or the control.unloadImage method). Please see the Example A.307 "Web - PictureTrimmer / Client side load, unload and save images"

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientControlLoadFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientControlLoadFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args (currently unused)
ControlLoad client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function PopupPictureTrimmer1_onControlLoad(sender, args)
   {
       
alert("Control loaded (image loaded=" + sender.get_imageLoaded() + ").");
   }

   
//]]>
</script>

<
ccPiczard:PopupPictureTrimmer ID="PopupPictureTrimmer1" runat="server"
   
OnClientControlLoadFunction="PopupPictureTrimmer1_onControlLoad" />

 

 

2. The UserStateChanged event handler

The UserStateChanged client-side event is raised when the state of the PictureTrimmer controls has changed.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientUserStateChangedFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientUserStateChangedFunction property must contain only the name of a javascript function.

If from within the event hander function you need to get the control UserState:

  1. If the popup window is closed, then you have to use the method get_userState
  2. If the popup window is opened, then you have to use the method get_popup_userState

Please see the example below.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args (currently unused)
UserStateChanged client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   function PopupPictureTrimmer1_onUserStateChanged(sender, args)
   {
       
// Checks if the popup is open
       var
popupOpen = sender.ui.get_popup_isOpen();

       
// Get the new userState
       var userState;
       if (!popupOpen)
       {
           
// Popup closed -> use the current userState
           userState = sender.get_userState();
       }
       else
       {
           // Popup open -> use the current temporary POPUP userState
           userState = sender.get_popup_userState();
       }

       var str = "";

       // Get the Value
       var value = userState.value;

       // Get the ImageSelection
       var imageSelection = value.imageSelection;

       // Get the ImageTransformation
       var imageTransformation = imageSelection.transformation
       str += "Resize factor:" + imageTransformation.resizeFactor + "%\r\n";
       str += "Rotation angle:" + imageTransformation.rotationAngle + "°\r\n";
       str += "Flip horizontal:" + (imageTransformation.flipH ? "yes" : "no") + "\r\n";
       str += "Flip vertical:" + (imageTransformation.flipV ? "yes" : "no") + "\r\n";

       // Get the ImageCrop
       var imageCrop = imageSelection.crop
       str += "Rectangle:" + (imageCrop.rectangle != null ? ("{x=" + imageCrop.rectangle.x + ",y=" + imageCrop.rectangle.y + ",width=" + imageCrop.rectangle.width + ",height=" + imageCrop.rectangle.height + "}") : "auto") + "\r\n";

       // Get the ImageAdjustments Filter
       var imageAdjustments = value.imageAdjustments;
       str += "Brightness:" + imageAdjustments.brightness + "\r\n";
       str += "Contrast:" + imageAdjustments.contrast + "\r\n";
       str += "Hue:" + imageAdjustments.hue + "°\r\n";
       str += "Saturation:" + imageAdjustments.saturation + "\r\n";

       // Get the UIParams
       var uiParams = userState.uiParams;
       str += "Zoom factor:" + (uiParams.zoomFactor != null ? uiParams.zoomFactor + "%" : "auto") + "\r\n";
       str += "Picture scroll horizontal:" + (uiParams.pictureScrollH != null ? uiParams.pictureScrollH : "auto") + "\r\n";
       str += "Picture scroll vertical:" + (uiParams.pictureScrollV != null ? uiParams.pictureScrollV : "auto") + "\r\n";
       str += "Command panel scroll vertical:" + uiParams.commandPanelScrollV + "\r\n";

       // Display the current state
       alert(str);
   }

   //]]>
</script>

<
ccPiczard:PopupPictureTrimmer runat="server" ID="PopupPictureTrimmer1"
   
OnClientUserStateChangedFunction="PopupPictureTrimmer1_onUserStateChanged" />

Please see also the Example A.304 - "Web - PictureTrimmer / UserState & PictureTrimmer Value"

 

 

3. The BeforePopupOpen event handler

The BeforePopupOpen client-side event is raised before the popup window is opened.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientBeforePopupOpenFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientBeforePopupOpenFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args - An object providing access to the following properties:
    • windowWidth - Gets or sets the width of the popup window (pixels)
    • windowHeight - Gets or sets the height of the popup window (pixels)
    • reservedWindowHeight - Gets or sets the height of the popup window reserved for additional custom UI elements (pixels); the default value is 0
    • additionalTopElements - Gets or sets an array of DOM elements to be added on the top of the popup window
    • additionalBottomElements - Gets or sets an array of DOM elements to be added on the bottom of the popup window
    • lightBoxCssClass - Gets or sets the css class of the popup (please see the Example A.403 - "Customize Piczard / Customize layout")
    • freezeOtherPictureTrimmerControls - Gets or sets a value indicating whether to freeze other PictureTrimmer controls (default=true)
    • goOn - If you set this value to false then the popup will NOT open.
BeforePopupOpen client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function PopupPictureTrimmer1_onBeforePopupOpen(sender, args)
   {
       
alert("Before popup open (window size=" + args.windowWidth + "x" + args.windowHeight +  ").");
   }

   
//]]>
</script>

<
ccPiczard:PopupPictureTrimmer ID="PopupPictureTrimmer1" runat="server"
   
OnClientBeforePopupOpenFunction="PopupPictureTrimmer1_onBeforePopupOpen" />

 

 

4. The AfterPopupOpen event handler

The AfterPopupOpen client-side event is raised after the popup window is opened.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientAfterPopupOpenFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientAfterPopupOpenFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args - An object providing access to the following properties:
    • popupWindow - The Popup window HTML DOM element.
AfterPopupOpen client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function PopupPictureTrimmer1_onAfterPopupOpen(sender, args)
   {
       
alert("After popup open.");
   }

   
//]]>
</script>

<
ccPiczard:PopupPictureTrimmer ID="PopupPictureTrimmer1" runat="server"
   
OnClientAfterPopupOpenFunction="PopupPictureTrimmer1_onAfterPopupOpen" />

 

 

5. The BeforePopupClose event handler

The BeforePopupClose client-side event is raised before the popup window is closed.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientBeforePopupCloseFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientBeforePopupCloseFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args - An object providing access to the following properties:
    • saveChanges - Gets or sets a value indicating whether to save the changes or not (if the user clicked the "Save" button then the value of this property is true, otherwise false)
    • previousUserState - Gets the previous userState (before popup opens)
    • newUserState - Gets or sets the new userState
    • resetUIParams - If you set this value to false, then the uiParameters will NOT be reset. In this case the next time the popup is opened the previous uiParams are applied (default value = true)
    • performPostback - Gets or sets a value indicating whether to perform a page postback
    • goOn - If you set this value to false then the popup will NOT close.
BeforePopupClose client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function getCropCoordinatesText(userState)
   {
       
// Get the Value
       
var value = userState.value;

       
// Get the ImageSelection
       
var imageSelection = value.imageSelection;

       
// Get the ImageCrop
       
var imageCrop = imageSelection.crop
       
return imageCrop.rectangle != null ? ("{x=" + imageCrop.rectangle.x + ",y=" + imageCrop.rectangle.y + ",width=" + imageCrop.rectangle.width + ",height=" + imageCrop.rectangle.height + "}") : "auto";
   }

   
function PopupPictureTrimmer1_onBeforePopupClose(sender, args)
   {
       
if (!args.saveChanges)
       {
           
if (!window.confirm("Are you sure you want to cancel ?"))
           {
               
// Do not close the popup window
               
args.goOn = false;
           }
       }
       
else
       {
           
// Display some messages...
           
alert("Previous crop coordinates = " + getCropCoordinatesText(args.previousUserState));
           alert(
"New crop coordinates = " + getCropCoordinatesText(args.newUserState));
       }
   }

   
//]]>
</script>

<
ccPiczard:PopupPictureTrimmer ID="PopupPictureTrimmer1" runat="server"
   
OnClientBeforePopupCloseFunction="PopupPictureTrimmer1_onBeforePopupClose" />

 

 

6. The AfterPopupClose event handler

The AfterPopupClose client-side event is raised before the popup window is closed.

In order to use this client-side event handler you have to write a named javascript function.
Then you have to set the property OnClientAfterPopupCloseFunction of the PictureTrimmer control to the name of the javascript function.

The OnClientAfterPopupCloseFunction property must contain only the name of a javascript function.

Two parameters are passed to the javascript function:

  1. sender - A reference to the client-side PictureTrimmer object that has raised the event
  2. args - An object providing access to the following properties:
    • saveChanges - Gets a value indicating whether the changes has been saved (please note that - differently from OnClientBeforePopupCloseFunction - this property is read-only).
    • performPostback - Gets or sets a value indicating whether to perform a page postback.
AfterPopupClose client-side event handler example Copy Code
<script type="text/javascript">
   
//<![CDATA[

   
function PopupPictureTrimmer1_onAfterPopupClose(sender, args)
   {
       
alert("After popup close - Save changes=" + args.saveChanges);
   }

   
//]]>
</script>

<
ccPiczard:PopupPictureTrimmer ID="PopupPictureTrimmer1" runat="server"
   
OnClientAfterPopupCloseFunction="PopupPictureTrimmer1_onAfterPopupClose" />

 

©2013 Sergio Turolla. All Rights Reserved.