In Part I we moved a dragable element around in the client window. Often the element has a handle that is to be used to move it. Or the handle might be intended for resizing.
Of course, we have to find the handle within the element we wish to move or resize. Using the IE Developer Tool (or Firebug for Firefox) is essential to getting inside the DOM/HTML and readily locating any element you need. Click the select button in the IE Developer Tool window (1). Then click on the spot you are interested in (3). The element is outlined and highlighted in the tool window (2).
|
1 |
panel = browser.div(:id, 'popup_3') |
gives a reference to the panel in the screen shot above.
|
1 |
handle = panel.link(:text, 'Drag Handle') |
connects us to the handle element (3).
Once the handle is found, use the same process as described in Part I to find the center point of the handle.
If the handle is a resize handle, moving it doesn’t move the parent window but just moves its side or corner, expanding or contracting it as specified.
The fun is in the validation. Does the resized panel have the dimensions we expect?
Before moving the handle we calculate the size of the panel just as in Part I.
|
1 2 |
before_width = panel.ole_object.getBoundingClientRect.right.to_i - panel_client_x before_height = panel.ole_object.getBoundingClientRect.bottom.to_i - panel_client_y |
We calculate the expected new dimensions by adding the x and y deltas ( here 75, -50, which will move the handle up and to the right)
|
1 2 3 |
delta_x = 75; delta_y = -50 expected_x = before_width + delta_x expected_y = before_height + delta_y |
Then do the move (as in Part I) using the center point of the resize handle.
Get the new coordinates of the panel and calculate the new size.
|
1 2 |
after_width = panel.ole_object.getBoundingClientRect.right.to_i - panel_client_x after_height = panel.ole_object.getBoundingClientRect.bottom.to_i - panel_client_y |
The size should be close to the expected (within +- 2-4 pixels, screen locations are tricky so it’s best to give a tolerance factor in your validations).
Reasons for being further off include hitting minimum or maximum dimensions defined in the DOM, the scroll characteristics of the containing elements, and etc.
Many thanks to Stuart Rackham ( http://www.methods.co.nz/popup/popup.html ) for his DOM Popup Kit and demo page.
