/*
* Copyright 2009 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.museum.client.defaultmuseum;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.museum.client.common.AbstractIssue;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
* DOM.eventGetClientX/Y incorrect with HTML margin/borders Firefox 2/Safari 3.
*/
public class Issue1932 extends AbstractIssue {
/**
* A set of options used to set the page margins and borders.
*/
private class ControlPanel extends Composite {
private final Grid grid = new Grid(2, 3);
private final TextBox borderBox = new TextBox();
private final TextBox marginBox = new TextBox();
public ControlPanel() {
initWidget(grid);
// Add an option to set the margin
marginBox.setText("10px");
grid.setHTML(0, 0, "<b>Margin:</b>");
grid.setWidget(0, 1, marginBox);
grid.setWidget(0, 2, new Button("Set", new ClickHandler() {
public void onClick(ClickEvent event) {
updateMargin();
}
}));
// Add an option to set the border
borderBox.setText("5px solid #DDDDDD");
grid.setHTML(1, 0, "<b>Border:</b>");
grid.setWidget(1, 1, borderBox);
grid.setWidget(1, 2, new Button("Set", new ClickHandler() {
public void onClick(ClickEvent event) {
updateBorder();
}
}));
}
/**
* Update the border on the HTML element.
*/
public void updateBorder() {
htmlElement.getStyle().setProperty("border", borderBox.getText());
}
/**
* Update the margin on the HTML element.
*/
public void updateMargin() {
htmlElement.getStyle().setProperty("margin", marginBox.getText());
}
}
/**
* The HTML element of the page.
*/
private Element htmlElement = null;
@Override
public Widget createIssue() {
// Setup the page size and cursor
htmlElement = DOM.getParent(RootPanel.getBodyElement());
// Create a crosshair to show the current position
final SimplePanel positioner = new SimplePanel();
positioner.setPixelSize(30, 30);
positioner.getElement().getStyle().setProperty("borderLeft",
"1px solid red");
positioner.getElement().getStyle().setProperty("borderTop", "1px solid red");
positioner.getElement().getStyle().setProperty("cursor", "crosshair");
// Create an area to echo position information.
final HTML echo = new HTML();
// Create a target box to test inside
final Label sandbox = new Label();
sandbox.sinkEvents(Event.ONMOUSEMOVE);
sandbox.setPixelSize(300, 300);
sandbox.getElement().getStyle().setProperty("border", "3px solid blue");
sandbox.getElement().getStyle().setProperty("cursor", "crosshair");
// Keep the crosshair under the cursor
Event.addNativePreviewHandler(new NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent event) {
// Ignore events outside of the sandbox
NativeEvent nativeEvent = event.getNativeEvent();
Element target = Element.as(nativeEvent.getEventTarget());
if (!sandbox.getElement().isOrHasChild(target)
&& !positioner.getElement().isOrHasChild(target)) {
positioner.removeFromParent();
return;
}
switch (Event.as(nativeEvent).getTypeInt()) {
case Event.ONMOUSEMOVE:
int absX = nativeEvent.getClientX() + Window.getScrollLeft();
int absY = nativeEvent.getClientY() + Window.getScrollTop();
RootPanel.get().add(positioner, absX, absY);
echo.setHTML("event.clientX: " + nativeEvent.getClientX() + "<br>"
+ "event.clientY: " + nativeEvent.getClientY() + "<br>"
+ "absolute left: " + positioner.getAbsoluteLeft() + "<br>"
+ "absolute top: " + positioner.getAbsoluteTop());
break;
}
}
});
// Combine the control panel and return
VerticalPanel vPanel = new VerticalPanel();
vPanel.add(new ControlPanel());
vPanel.add(echo);
vPanel.add(sandbox);
return vPanel;
}
@Override
public String getInstructions() {
return "Move the cursor inside the blue box below and verify that the "
+ "point of the red positioner lines up directly beneath the center of "
+ "the cursor (crosshair). Also confirm that event.clientX/Y == absolute "
+ "left/top. The buttons may not work on Safari 2 because Safari 2 has "
+ "issues when you attempt to modify the HTML element programatically.";
}
@Override
public String getSummary() {
return "DOM.eventGetClientX/Y incorrect with HTML margin/border in Firefox "
+ "2 and Safari 2";
}
@Override
public boolean hasCSS() {
return true;
}
}