Domstyle

README.md

@@ -12,3 +12,25 @@ Vaadin 7.2.0+ is required for Switch 2.0.0.
 
 Use Switch 1.0.1 for Vaadin 6.
 
+Styles
+============
+
+This addon has various styles. A couple of image based styles and a style which is based on DOM elements.
+
+## Dom Style
+
+To activate the dom style you need to use the style name "dom":
+
+~~~
+Switch switch = new Switch();
+Switch.addStyleName(Switch.DOM_STYLE);
+~~~  
+
+This style has support fort the valo theme. To use the switch-valo add on theme, you need to include the sass file of this addon into your styles.scss file:
+
+~~~
+/* import the switch addon valo theme */
+@import "VAADIN/addons/switch/css/switch-valo.scss";
+~~~
+
+The `switch-valo.scss` provides a **mixin** which can be used to consistently create other sizes of the switch widget if needed.

pom.xml

@@ -5,7 +5,7 @@
 	<groupId>org.vaadin.teemu</groupId>
 	<artifactId>switch-root</artifactId>
 	<packaging>pom</packaging>
-	<version>2.0.3</version>
+	<version>2.0.4-SNAPSHOT</version>
 	<name>Switch Add-on Root Project</name>
 
 	<modules>

switch-demo/pom.xml

@@ -5,12 +5,12 @@
 	<groupId>org.vaadin.teemu</groupId>
 	<artifactId>switch-demo</artifactId>
 	<packaging>war</packaging>
-	<version>2.0.3</version>
+	<version>2.0.4-SNAPSHOT</version>
 	<name>Switch Add-on Demo</name>
 
 	<properties>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-		<vaadin.version>7.2.0</vaadin.version>
+		<vaadin.version>7.7.10</vaadin.version>
 		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
 	</properties>
 
@@ -86,6 +86,18 @@
 			<version>3.0.1</version>
 			<scope>provided</scope>
 		</dependency>
+        <dependency>
+            <groupId>com.vaadin.external.gwt</groupId>
+            <artifactId>gwt-codeserver</artifactId>
+            <version>2.7.0.vaadin5</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-client-compiler</artifactId>
+            <version>${vaadin.version}</version>
+            <scope>test</scope>
+        </dependency>
 	</dependencies>
 
 	<build>

switch-demo/src/main/java/org/vaadin/teemu/switchui/demo/SwitchComponentDemo.java

@@ -48,6 +48,7 @@ protected void init(VaadinRequest request) {
         content.addComponent(createDemoPanel(null));
         content.addComponent(createDemoPanel("compact"));
         content.addComponent(createDemoPanel("holodeck"));
+        content.addComponent(createDemoPanel(Switch.DOM_STYLE));
     }
 
     private Label createDescription() {
@@ -133,6 +134,7 @@ private Switch createSwitch(String caption, String style,
         return switchComponent;
     }
 
+    @Override
     public void valueChange(ValueChangeEvent event) {
         if (event.getProperty() == checkBox) {
             for (Switch s : allSwitches) {

switch-demo/src/main/resources/org/vaadin/teemu/switchui/demo/SwitchDemoWidgetset.gwt.xml

@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
 <module>
-    <inherits name="com.vaadin.DefaultWidgetSet" />
+
     <inherits name="org.vaadin.teemu.switchui.SwitchComponentWidgetset" />
-</module>
+
+    <inherits name="com.vaadin.DefaultWidgetSet" />
+
+    <!-- super dev mode config -->
+    <set-configuration-property name="devModeRedirectEnabled" value="true" />
+</module>

switch/pom.xml

@@ -5,12 +5,12 @@
 	<groupId>org.vaadin.teemu</groupId>
 	<artifactId>switch</artifactId>
 	<packaging>jar</packaging>
-	<version>2.0.3</version>
+	<version>2.0.4-SNAPSHOT</version>
 	<name>Switch</name>
 
 	<properties>
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-		<vaadin.version>7.2.0</vaadin.version>
+		<vaadin.version>7.7.10</vaadin.version>
 		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
 
 		<!-- ZIP Manifest fields -->
@@ -19,7 +19,7 @@
 		<Implementation-Title>Switch</Implementation-Title>
 		<Implementation-Vendor>${project.organization.name}</Implementation-Vendor>
 		<Vaadin-License-Title>Apache License 2.0</Vaadin-License-Title>
-		<Vaadin-Addon>${artifactId}-${project.version}.jar</Vaadin-Addon>
+		<Vaadin-Addon>${project.artifactId}-${project.version}.jar</Vaadin-Addon>
 	</properties>
 
 	<organization>

switch/src/main/java/org/vaadin/teemu/switchui/Switch.java

@@ -8,13 +8,15 @@
 /**
  * Switch is basically a decorated CheckBox. Server-side API has all the same
  * functionality and added support for enabling and disabling animation.
- * 
+ *
  * @see com.vaadin.ui.CheckBox
  * @author Teemu Pöntelin | Vaadin Ltd. | https://vaadin.com/teemu
  */
 @SuppressWarnings("serial")
 public class Switch extends CheckBox {
 
+    public static final String DOM_STYLE = "dom";
+
     public Switch() {
         super();
     }

switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchConnector.java

@@ -117,6 +117,8 @@ public void onStateChanged(StateChangeEvent stateChangeEvent) {
 
         getWidget().setValue(getState().checked);
         getWidget().setAnimationEnabled(getState().animated);
+        boolean isDomStyle = getState().styles.contains(Switch.DOM_STYLE);
+        getWidget().setDomStyleEnabled(isDomStyle);
 
         getWidget().immediate = getState().immediate;
     }

switch/src/main/java/org/vaadin/teemu/switchui/client/SwitchWidget.java

@@ -42,7 +42,7 @@
 
 /**
  * SwitchWidget is the client-side implementation of the Switch component.
- * 
+ *
  * @author Teemu Pöntelin | Vaadin Ltd. | http://vaadin.com/teemu
  */
 public class SwitchWidget extends FocusWidget implements HasValue<Boolean>,
@@ -70,6 +70,11 @@ public class SwitchWidget extends FocusWidget implements HasValue<Boolean>,
     private int tabIndex;
     private List<HandlerRegistration> handlers;
 
+    // --- dom style related fields
+    private boolean domStyleEnabled = false;
+    private boolean styleInitialized = false;
+    private Element onPlate, knob, offPlate;
+
     public SwitchWidget() {
         setElement(Document.get().createDivElement());
         setStyleName(CLASSNAME);
@@ -83,10 +88,29 @@ public SwitchWidget() {
         updateStyleName();
     }
 
+    private void initDomStyle() {
+        if(isDomStyleEnabled() && ! styleInitialized){
+
+            onPlate = Document.get().createDivElement();
+            knob = Document.get().createDivElement();
+            offPlate = Document.get().createDivElement();
+
+            onPlate.setClassName(CLASSNAME + "-" + "on-plate");
+            knob.setClassName(CLASSNAME + "-" + "knob");
+            offPlate.setClassName(CLASSNAME + "-" + "off-plate");
+
+            slider.appendChild(onPlate);
+            slider.appendChild(offPlate);
+            slider.appendChild(knob);
+
+            styleInitialized = true;
+        }
+    }
+
     private int getUnvisiblePartWidth() {
         if (unvisiblePartWidth < 0) {
-            int width = this.getElement().getClientWidth();
-            int sliderWidth = this.slider.getClientWidth();
+            int width = this.getElement().getOffsetWidth();
+            int sliderWidth = this.slider.getOffsetWidth();
             if (sliderWidth - width > 0) {
                 unvisiblePartWidth = sliderWidth - width;
             }
@@ -227,13 +251,15 @@ private void updateStyleName() {
         }
     }
 
+    @Override
     public void onKeyUp(KeyUpEvent event) {
         if (event.getNativeKeyCode() == 32) {
             // 32 = space bar
             setValue(!value, true);
         }
     }
 
+    @Override
     public void onMouseDown(MouseDownEvent event) {
         handleMouseDown(event.getScreenX());
         event.preventDefault();
@@ -245,6 +271,7 @@ private void handleMouseDown(int clientX) {
         dragInfo.setDragStartOffsetLeft(slider.getOffsetLeft());
     }
 
+    @Override
     public void onMouseUp(MouseUpEvent event) {
         handleMouseUp(event.getNativeEvent());
     }
@@ -266,6 +293,7 @@ private void handleMouseUp(NativeEvent event) {
         dragInfo.setDragging(false); // not dragging anymore
     }
 
+    @Override
     public void onMouseMove(MouseMoveEvent event) {
         handleMouseMove(event.getScreenX());
     }
@@ -297,40 +325,57 @@ private void handleMouseMove(int clientX) {
         }
     }
 
+    @Override
     public void onFocus(FocusEvent event) {
         addStyleDependentName("focus");
     }
 
+    @Override
     public void onBlur(BlurEvent event) {
         removeStyleDependentName("focus");
     }
 
+    @Override
     public boolean isAnimationEnabled() {
         return animated;
     }
 
+    @Override
     public void setAnimationEnabled(boolean enable) {
         animated = enable;
     }
 
+    @Override
     public void onTouchCancel(TouchCancelEvent event) {
         handleMouseUp(event.getNativeEvent());
     }
 
+    @Override
     public void onTouchMove(TouchMoveEvent event) {
         Touch touch = event.getTouches().get(0).cast();
         handleMouseMove(touch.getPageX());
         event.preventDefault();
     }
 
+    @Override
     public void onTouchEnd(TouchEndEvent event) {
         handleMouseUp(event.getNativeEvent());
     }
 
+    @Override
     public void onTouchStart(TouchStartEvent event) {
         Touch touch = event.getTouches().get(0).cast();
         handleMouseDown(touch.getPageX());
         event.preventDefault();
     }
 
+    public void setDomStyleEnabled(boolean enabled) {
+        domStyleEnabled = enabled;
+        initDomStyle();
+    }
+
+    public boolean isDomStyleEnabled(){
+        return domStyleEnabled;
+    }
+
 }

switch/src/main/resources/VAADIN/addons/switch/css/switch-valo.scss

@@ -0,0 +1,64 @@
+
+
+//------------------------------------------------------------------
+// parameters:
+// 
+//   $border-width: must match the value as set in $v-border
+//   $widget-height: height of the widget including borders
+//   $widget-width: width of the widget including borders
+//   $widget-border-width: 
+//------------------------------------------------------------------
+@mixin switch-dom-style($border-width: 1px, $widget-height: round($v-unit-size / 2), $widget-width: $v-unit-size, $widget-border-width: 1px) {
+
+    $widget-border-radius: round($widget-height / 2);
+
+    $knob-border-width: $border-width;
+    $slider-height: $widget-height - 2 * $widget-border-width;
+    $knob-inner-height: $slider-height - 2 * $knob-border-width;
+
+    $knob-border-width: $border-width;
+    $slider-width: round($widget-width - 2 * $widget-border-width - $slider-height / 2) * 2;
+    $knob-border-radius: round($knob-height / 2);
+    $knob-left: round(($slider-width - $slider-height) / 2);
+
+    .v-switch-dom {
+        height: $widget-height;
+        width: $widget-width;
+        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
+        border-radius: $v-border-radius;
+        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $background-color: $v-background-color, $gradient: $v-gradient));
+
+        .v-switch-slider {
+            height: $slider-height; 
+            width: $slider-width;
+            background: none;
+        }
+
+        .v-switch-on-plate, .v-switch-off-plate {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            height: inherit;
+            width: round($slider-width / 2);
+            background-color: $v-focus-color;
+        }
+
+        .v-switch-off-plate {
+            left: round($slider-width / 2);
+            background-color: $v-textfield-background-color;
+        }
+
+        .v-switch-knob {
+            position: absolute;
+            top: 0px;
+            left: $knob-left;
+            height: $slider-height;
+            width: $slider-height;
+            background-color: $v-background-color;
+            border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);
+            border-radius: $knob-border-radius;
+        }
+    }
+}
+
+@include switch-dom-style();