package ro.nextreports.server.web.dashboard.display;
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.head.OnLoadHeaderItem;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.panel.GenericPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.apache.wicket.request.resource.ResourceReference;
import ro.nextreports.engine.exporter.util.DisplayData;
import ro.nextreports.server.web.NextServerApplication;
import ro.nextreports.server.web.dashboard.chart.ChartHTML5Panel;
public class DisplayHTML5Panel extends GenericPanel<DisplayData> {
private static final long serialVersionUID = 1L;
private final ResourceReference NEXT_JS = new JavaScriptResourceReference(ChartHTML5Panel.class, NextServerApplication.NEXT_CHARTS_JS);
private boolean zoom = false;
public DisplayHTML5Panel(String id, String width, String height, IModel<DisplayData> model) {
super(id, model);
WebMarkupContainer container = new WebMarkupContainer("displayCanvas");
container.setOutputMarkupId(true);
container.add(new AttributeAppender("width", width));
container.add(new AttributeAppender("height", height));
zoom = "100%".equals(width) || "100%".equals(height);
add(container);
}
@Override
public void renderHead(IHeaderResponse response) {
response.render(OnLoadHeaderItem.forScript(getResizeEndDefinition()));
response.render(OnLoadHeaderItem.forScript(getResizeJavaScript()));
// must call display onLoad instead of onDomReady to appear it in iframe
// $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet
response.render(OnLoadHeaderItem.forScript(getDisplayCall()));
//include js file
response.render(JavaScriptHeaderItem.forReference(NEXT_JS));
//<script> tag
//response.renderJavaScript(getJavaScript(), null);
}
private String getDisplayCall() {
boolean useParentWidth = zoom ? false : true;
DisplayData data = getModel().getObject();
StringBuilder sb = new StringBuilder();
sb.append("nextWidget(\"display\",").
append(data.toJson()).append(",\"").
append(get("displayCanvas").getMarkupId()).
append("\",").append(zoom).
append(",").append(useParentWidth).
append(");");
return sb.toString();
}
// http://stackoverflow.com/questions/2996431/detect-when-a-window-is-resized-using-javascript
public String getResizeEndDefinition() {
StringBuilder sb = new StringBuilder();
sb.append("$(window).resize(function() {").
append("if(this.resizeTO) clearTimeout(this.resizeTO);").
append("this.resizeTO = setTimeout(function() {").
append("$(this).trigger('resizeEnd');").
append("}, 500);").
append("});");
return sb.toString();
}
// we want a redraw after browser resize
// display call will be made only when resize event finished!
private String getResizeJavaScript() {
StringBuilder sb = new StringBuilder();
sb.append("$(window).bind(\'resizeEnd\',function(){");
sb.append(getDisplayCall());
sb.append("});");
return sb.toString();
}
}