package com.itmill.toolkit.terminal.gwt.client.ui;\r
\r
+import com.google.gwt.user.client.Command;\r
import com.google.gwt.user.client.DOM;\r
+import com.google.gwt.user.client.DeferredCommand;\r
import com.google.gwt.user.client.Element;\r
import com.google.gwt.user.client.Event;\r
import com.google.gwt.user.client.Timer;\r
import com.itmill.toolkit.terminal.gwt.client.UIDL;\r
\r
public class ISlider extends Widget implements Paintable {\r
- \r
+\r
public static final String CLASSNAME = "i-slider";\r
- \r
+\r
ApplicationConnection client;\r
- \r
+\r
String id;\r
- \r
+\r
private boolean immediate;\r
private boolean disabled;\r
private boolean readonly;\r
- \r
+\r
private int handleSize;\r
private double min;\r
private double max;\r
private boolean vertical;\r
private int size = -1;\r
private boolean arrows;\r
- \r
+\r
/* DOM element for slider's base */\r
private Element base;\r
- \r
+\r
/* DOM element for slider's handle */\r
private Element handle;\r
- \r
+\r
/* DOM element for decrement arrow */\r
private Element smaller;\r
- \r
+\r
/* DOM element for increment arrow */\r
private Element bigger;\r
- \r
+\r
/* Temporary dragging/animation variables */\r
private boolean dragging = false;\r
private Timer anim;\r
- \r
+\r
public ISlider() {\r
super();\r
- \r
+\r
setElement(DOM.createDiv());\r
base = DOM.createDiv();\r
handle = DOM.createDiv();\r
smaller = DOM.createDiv();\r
bigger = DOM.createDiv();\r
- \r
+\r
setStyleName(CLASSNAME);\r
- DOM.setElementProperty(base, "className", CLASSNAME+"-base");\r
- DOM.setElementProperty(handle, "className", CLASSNAME+"-handle");\r
- DOM.setElementProperty(smaller, "className", CLASSNAME+"-smaller");\r
- DOM.setElementProperty(bigger, "className", CLASSNAME+"-bigger");\r
- \r
+ DOM.setElementProperty(base, "className", CLASSNAME + "-base");\r
+ DOM.setElementProperty(handle, "className", CLASSNAME + "-handle");\r
+ DOM.setElementProperty(smaller, "className", CLASSNAME + "-smaller");\r
+ DOM.setElementProperty(bigger, "className", CLASSNAME + "-bigger");\r
+\r
DOM.appendChild(getElement(), bigger);\r
DOM.appendChild(getElement(), smaller);\r
DOM.appendChild(getElement(), base);\r
DOM.appendChild(base, handle);\r
- \r
+\r
// Hide initially\r
DOM.setStyleAttribute(smaller, "display", "none");\r
DOM.setStyleAttribute(bigger, "display", "none");\r
DOM.setStyleAttribute(handle, "visibility", "hidden");\r
- \r
+\r
DOM.sinkEvents(base, Event.ONMOUSEDOWN);\r
DOM.sinkEvents(handle, Event.MOUSEEVENTS);\r
DOM.sinkEvents(smaller, Event.ONMOUSEDOWN | Event.ONMOUSEUP);\r
}\r
\r
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {\r
- \r
+\r
this.client = client;\r
this.id = uidl.getId();\r
- \r
+\r
// Ensure correct implementation (handle own caption)\r
if (client.updateComponent(this, uidl, false))\r
return;\r
- \r
+\r
immediate = uidl.getBooleanAttribute("immediate");\r
disabled = uidl.getBooleanAttribute("disabled");\r
readonly = uidl.getBooleanAttribute("readonly");\r
- \r
+\r
vertical = uidl.hasAttribute("vertical");\r
arrows = uidl.hasAttribute("arrows");\r
- \r
- if(arrows) {\r
+\r
+ if (arrows) {\r
DOM.setStyleAttribute(smaller, "display", "block");\r
DOM.setStyleAttribute(bigger, "display", "block");\r
- if(vertical) {\r
- int arrowSize = Integer.parseInt(DOM.getElementProperty(smaller, "offsetWidth"));\r
- DOM.setStyleAttribute(bigger, "marginLeft", arrowSize+"px");\r
- DOM.setStyleAttribute(bigger, "marginRight", arrowSize+"px");\r
+ if (vertical) {\r
+ int arrowSize = Integer.parseInt(DOM.getElementProperty(\r
+ smaller, "offsetWidth"));\r
+ DOM.setStyleAttribute(bigger, "marginLeft", arrowSize + "px");\r
+ DOM.setStyleAttribute(bigger, "marginRight", arrowSize + "px");\r
}\r
}\r
- \r
- if(vertical)\r
- addStyleName(CLASSNAME+"-vertical");\r
+\r
+ if (vertical)\r
+ addStyleName(CLASSNAME + "-vertical");\r
else\r
- removeStyleName(CLASSNAME+"-vertical");\r
- \r
+ removeStyleName(CLASSNAME + "-vertical");\r
+\r
min = uidl.getDoubleAttribute("min");\r
max = uidl.getDoubleAttribute("max");\r
resolution = uidl.getIntAttribute("resolution");\r
value = new Double(uidl.getDoubleVariable("value"));\r
- \r
+\r
handleSize = uidl.getIntAttribute("hsize");\r
- \r
- if(uidl.hasAttribute("size"))\r
+\r
+ if (uidl.hasAttribute("size"))\r
size = uidl.getIntAttribute("size");\r
- \r
+\r
buildBase();\r
- \r
- if(!vertical) {\r
+\r
+ if (!vertical) {\r
// Draw handle with a delay to allow base to gain maximum width\r
+ // TODO implement with onLoad or DeferredCommand ??\r
Timer delay = new Timer() {\r
public void run() {\r
buildHandle();\r
}\r
\r
private void buildBase() {\r
- if(vertical) {\r
+ if (vertical) {\r
// TODO\r
} else {\r
- if(size > -1)\r
+ if (size > -1)\r
DOM.setStyleAttribute(getElement(), "width", size + "px");\r
else {\r
Element p = DOM.getParent(getElement());\r
- if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
+ if (Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
DOM.setStyleAttribute(getElement(), "width", "auto");\r
else {\r
- // Set minimum of 50px width and adjust after all \r
+ // Set minimum of 50px width and adjust after all\r
// components have (supposedly) been drawn completely.\r
DOM.setStyleAttribute(getElement(), "width", "50px");\r
- Timer adjust = new Timer() {\r
- public void run() {\r
+ DeferredCommand.addCommand(new Command() {\r
+ public void execute() {\r
Element p = DOM.getParent(getElement());\r
- if(Integer.parseInt(DOM.getElementProperty(p, "offsetWidth")) > 50)\r
- DOM.setStyleAttribute(getElement(), "width", "auto");\r
+ if (Integer.parseInt(DOM.getElementProperty(p,\r
+ "offsetWidth")) > 50)\r
+ DOM.setStyleAttribute(getElement(), "width",\r
+ "auto");\r
}\r
- };\r
- adjust.schedule(0); // Defer execution\r
+ });\r
}\r
}\r
}\r
// Allow absolute positioning of handle\r
DOM.setStyleAttribute(base, "position", "relative");\r
- \r
+\r
// TODO attach listeners for focusing and arrow keys\r
}\r
- \r
+\r
private void buildHandle() {\r
// Allow absolute positioning\r
DOM.setStyleAttribute(handle, "position", "absolute");\r
- \r
- if(vertical) {\r
+\r
+ if (vertical) {\r
// TODO\r
} else {\r
- int t = Integer.parseInt(DOM.getElementProperty(base, "offsetHeight")) - Integer.parseInt(DOM.getElementProperty(handle, "offsetHeight"));\r
- DOM.setStyleAttribute(handle, "top", (t/2)+"px");\r
+ int t = Integer.parseInt(DOM.getElementProperty(base,\r
+ "offsetHeight"))\r
+ - Integer.parseInt(DOM.getElementProperty(handle,\r
+ "offsetHeight"));\r
+ DOM.setStyleAttribute(handle, "top", (t / 2) + "px");\r
DOM.setStyleAttribute(handle, "left", "0px");\r
- int w = (int) (Double.parseDouble(DOM.getElementProperty(base, "offsetWidth")) / 100 * handleSize);\r
- if(handleSize == -1) {\r
- int baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
- double range = (max - min) * (resolution+1) * 3;\r
+ int w = (int) (Double.parseDouble(DOM.getElementProperty(base,\r
+ "offsetWidth")) / 100 * handleSize);\r
+ if (handleSize == -1) {\r
+ int baseW = Integer.parseInt(DOM.getElementProperty(base,\r
+ "offsetWidth"));\r
+ double range = (max - min) * (resolution + 1) * 3;\r
w = (int) (baseW - range);\r
}\r
- if(w < 3)\r
+ if (w < 3)\r
w = 3;\r
- DOM.setStyleAttribute(handle, "width", w+"px");\r
+ DOM.setStyleAttribute(handle, "width", w + "px");\r
}\r
- \r
+\r
DOM.setStyleAttribute(handle, "visibility", "visible");\r
- \r
+\r
}\r
- \r
+\r
private void setValue(Double value, boolean animate, boolean updateToServer) {\r
- if(vertical) {\r
+ if (vertical) {\r
// TODO\r
} else {\r
- int handleWidth = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth"));\r
- int baseWidth = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
+ int handleWidth = Integer.parseInt(DOM.getElementProperty(handle,\r
+ "offsetWidth"));\r
+ int baseWidth = Integer.parseInt(DOM.getElementProperty(base,\r
+ "offsetWidth"));\r
int range = baseWidth - handleWidth;\r
double v = value.doubleValue();\r
double valueRange = max - min;\r
double p = 0;\r
- if(valueRange != 0)\r
+ if (valueRange != 0)\r
p = range * ((v - min) / valueRange);\r
- if(p < 0)\r
+ if (p < 0)\r
p = 0;\r
final double pos = p;\r
- \r
- \r
+\r
String styleLeft = DOM.getStyleAttribute(handle, "left");\r
- int left = Integer.parseInt(styleLeft.substring(0, styleLeft.length()-2));\r
+ int left = Integer.parseInt(styleLeft.substring(0, styleLeft\r
+ .length() - 2));\r
\r
- if((int)(Math.round(pos)) != left && animate) {\r
- if(anim != null)\r
+ if ((int) (Math.round(pos)) != left && animate) {\r
+ if (anim != null)\r
anim.cancel();\r
anim = new Timer() {\r
private int left;\r
private int goal = (int) Math.round(pos);\r
private int dir = 0;\r
+\r
public void run() {\r
- String styleLeft = DOM.getStyleAttribute(handle, "left");\r
- left = Integer.parseInt(styleLeft.substring(0, styleLeft.length()-2));\r
- \r
+ String styleLeft = DOM\r
+ .getStyleAttribute(handle, "left");\r
+ left = Integer.parseInt(styleLeft.substring(0,\r
+ styleLeft.length() - 2));\r
+\r
// Determine direction\r
- if(dir == 0)\r
- dir = (goal-left)/Math.abs(goal-left);\r
- \r
- if((dir > 0 && left >= goal) || (dir < 0 && left <= goal)) {\r
+ if (dir == 0)\r
+ dir = (goal - left) / Math.abs(goal - left);\r
+\r
+ if ((dir > 0 && left >= goal)\r
+ || (dir < 0 && left <= goal)) {\r
this.cancel();\r
return;\r
}\r
int increment = (goal - left) / 2;\r
- DOM.setStyleAttribute(handle, "left", (left+increment)+"px");\r
+ DOM.setStyleAttribute(handle, "left",\r
+ (left + increment) + "px");\r
}\r
};\r
anim.scheduleRepeating(50);\r
- } else DOM.setStyleAttribute(handle, "left", pos+"px");\r
- //DOM.setAttribute(handle, "title", ""+v);\r
+ } else\r
+ DOM.setStyleAttribute(handle, "left", pos + "px");\r
+ // DOM.setAttribute(handle, "title", ""+v);\r
}\r
- \r
- if(value.doubleValue() < min)\r
+\r
+ if (value.doubleValue() < min)\r
value = new Double(min);\r
- else if(value.doubleValue() > max)\r
+ else if (value.doubleValue() > max)\r
value = new Double(max);\r
- \r
+\r
this.value = value;\r
- \r
- if(updateToServer)\r
+\r
+ if (updateToServer)\r
client.updateVariable(id, "value", value.doubleValue(), immediate);\r
}\r
\r
public void onBrowserEvent(Event event) {\r
- if(disabled || readonly)\r
+ if (disabled || readonly)\r
return;\r
Element targ = DOM.eventGetTarget(event);\r
- if(dragging || DOM.compare(targ, handle)) {\r
+ if (dragging || DOM.compare(targ, handle)) {\r
processHandleEvent(event);\r
- \r
- } else if(DOM.compare(targ, smaller)) {\r
+\r
+ } else if (DOM.compare(targ, smaller)) {\r
// Decrease value by resolution\r
- if(DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
- setValue(new Double(value.doubleValue()-Math.pow(10, -resolution)), false, true);\r
- if(anim != null)\r
+ if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
+ setValue(new Double(value.doubleValue()\r
+ - Math.pow(10, -resolution)), false, true);\r
+ if (anim != null)\r
anim.cancel();\r
anim = new Timer() {\r
public void run() {\r
- if(value.doubleValue()-Math.pow(10, -resolution) > min)\r
- setValue(new Double(value.doubleValue()-Math.pow(10, -resolution)), false, true);\r
+ if (value.doubleValue() - Math.pow(10, -resolution) > min)\r
+ setValue(new Double(value.doubleValue()\r
+ - Math.pow(10, -resolution)), false, true);\r
}\r
};\r
anim.scheduleRepeating(100);\r
DOM.eventCancelBubble(event, true);\r
- } else if(DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
+ } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
anim.cancel();\r
}\r
- \r
- } else if(DOM.compare(targ, bigger)) {\r
+\r
+ } else if (DOM.compare(targ, bigger)) {\r
// Increase value by resolution\r
- if(DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
- setValue(new Double(value.doubleValue()+Math.pow(10, -resolution)), false, true);\r
- if(anim != null)\r
+ if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
+ setValue(new Double(value.doubleValue()\r
+ + Math.pow(10, -resolution)), false, true);\r
+ if (anim != null)\r
anim.cancel();\r
anim = new Timer() {\r
public void run() {\r
- if(value.doubleValue()-Math.pow(10, -resolution) < max)\r
- setValue(new Double(value.doubleValue()+Math.pow(10, -resolution)), false, true);\r
+ if (value.doubleValue() - Math.pow(10, -resolution) < max)\r
+ setValue(new Double(value.doubleValue()\r
+ + Math.pow(10, -resolution)), false, true);\r
}\r
};\r
anim.scheduleRepeating(100);\r
DOM.eventCancelBubble(event, true);\r
- } else if(DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
+ } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) {\r
anim.cancel();\r
}\r
- \r
+\r
} else\r
processBaseEvent(event);\r
}\r
- \r
+\r
private void processHandleEvent(Event event) {\r
switch (DOM.eventGetType(event)) {\r
case Event.ONMOUSEDOWN:\r
- if(!disabled && !readonly) {\r
- if(anim != null)\r
+ if (!disabled && !readonly) {\r
+ if (anim != null)\r
anim.cancel();\r
dragging = true;\r
DOM.setCapture(handle);\r
break;\r
}\r
}\r
- \r
+\r
private void processBaseEvent(Event event) {\r
- if(DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
- if(!disabled && !readonly && !dragging) {\r
+ if (DOM.eventGetType(event) == Event.ONMOUSEDOWN) {\r
+ if (!disabled && !readonly && !dragging) {\r
setValueByEvent(event, true, true);\r
DOM.eventCancelBubble(event, true);\r
}\r
}\r
}\r
- \r
+\r
private void setValueByEvent(Event event, boolean animate, boolean roundup) {\r
int x = DOM.eventGetClientX(event);\r
- //int y = DOM.eventGetClientY(event);\r
+ // int y = DOM.eventGetClientY(event);\r
double v = min; // Fallback to min\r
- if(vertical) {\r
+ if (vertical) {\r
// TODO\r
} else {\r
- double handleW = Integer.parseInt(DOM.getElementProperty(handle, "offsetWidth"));\r
- double baseX = DOM.getAbsoluteLeft(base) + handleW/2;\r
- double baseW = Integer.parseInt(DOM.getElementProperty(base, "offsetWidth"));\r
- v = ((x-baseX)/(baseW-handleW)) * (max-min) + min;\r
+ double handleW = Integer.parseInt(DOM.getElementProperty(handle,\r
+ "offsetWidth"));\r
+ double baseX = DOM.getAbsoluteLeft(base) + handleW / 2;\r
+ double baseW = Integer.parseInt(DOM.getElementProperty(base,\r
+ "offsetWidth"));\r
+ v = ((x - baseX) / (baseW - handleW)) * (max - min) + min;\r
}\r
- \r
- if(v < min)\r
+\r
+ if (v < min)\r
v = min;\r
- else if(v > max)\r
+ else if (v > max)\r
v = max;\r
- \r
- if(roundup) {\r
- if(resolution > 0) {\r
- v = (int)(v * (double)Math.pow(10, resolution));\r
- v = v / (double)Math.pow(10, resolution);\r
+\r
+ if (roundup) {\r
+ if (resolution > 0) {\r
+ v = (int) (v * (double) Math.pow(10, resolution));\r
+ v = v / (double) Math.pow(10, resolution);\r
} else\r
v = Math.round(v);\r
}\r
- \r
+\r
setValue(new Double(v), animate, roundup);\r
}\r
\r