removed the `gwtquery` dependency. Replaced it with Javascript and CSS

code #25436

CHANGELOG.md

@@ -4,6 +4,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v1.3.0-SNAPSHOT] - 2023-07-25
+
+- Moved to gwt 2.10.0
+- Removed the `gwtquery` dependency [#25436]
+
 ## [v1.2.0] - 2022-10-28
 
 - [#24053] Fixing issue 

pom.xml

@@ -5,14 +5,14 @@
 	<parent>
 		<artifactId>maven-parent</artifactId>
 		<groupId>org.gcube.tools</groupId>
-		<version>1.1.0</version>
+		<version>1.2.0</version>
 		<relativePath />
 	</parent>
 
 	<groupId>org.gcube.portlets.widgets</groupId>
 	<artifactId>switch-button-widget</artifactId>
 	<packaging>jar</packaging>
-	<version>1.2.0</version>
+	<version>1.3.0-SNAPSHOT</version>
 	<name>gCube  Switch Button Widget</name>
 	<description>
 		gCube Switch Button Widget is a GWT Widget that can be used as a Checbox with a iOS sliding effect.
@@ -24,7 +24,7 @@
 	</scm>
 	<properties>
 		<!-- Convenience property to set the GWT version -->
-		<gwtVersion>2.8.2</gwtVersion>
+		<gwtVersion>2.10.0</gwtVersion>
 		<distroDirectory>distro</distroDirectory>
 		<maven.compiler.source>1.8</maven.compiler.source>
 		<maven.compiler.target>1.8</maven.compiler.target>
@@ -63,11 +63,6 @@
 			<groupId>org.gcube.portlets.user</groupId>
 			<artifactId>gcube-widgets</artifactId>
 		</dependency>
-		<dependency>
-			<groupId>com.googlecode.gwtquery</groupId>
-			<artifactId>gwtquery</artifactId>
-			<version>1.5-beta1</version>
-		</dependency>
 	</dependencies>
 	<build>
 		<resources>

src/main/java/org/gcube/portlets/widgets/switchbutton/SwitchButton.gwt.xml

@@ -5,8 +5,7 @@
 
 	<!-- Other module inherits -->
 	<!-- inherits gCube Widgets Library -->
-	<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
-	<inherits name='com.google.gwt.query.Query' />
+	<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' /> -->
 	<stylesheet src='switchbutton.css' />
 	<!-- Specify the paths for translatable code -->
 	<source path='client' />

src/main/java/org/gcube/portlets/widgets/switchbutton/client/SwitchButton.java

@@ -1,18 +1,15 @@
 package org.gcube.portlets.widgets.switchbutton.client;
 
-import static com.google.gwt.query.client.GQuery.$;
-
 import org.gcube.portlets.user.gcubewidgets.client.elements.Div;
 import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
 
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
 import com.google.gwt.event.logical.shared.ValueChangeHandler;
 import com.google.gwt.event.shared.HandlerRegistration;
-import com.google.gwt.query.client.css.CSS;
-import com.google.gwt.query.client.css.Length;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.DOM;
@@ -41,7 +38,8 @@ public class SwitchButton extends Composite implements HasName, HasValue<Boolean
 		name = DOM.createUniqueId();
 		initWidget(uiBinder.createAndBindUi(this));		
 		value = false;
-		$(switcherButton).css(CSS.LEFT.with(Length.px(-1)));
+		//$(switcherButton).css(CSS.LEFT.with(Length.px(-1)));
+		switcherButton.getElement().getStyle().setLeft(-1, Unit.PX);
 		ensureDomEventHandlers();
 	}
 
@@ -84,12 +82,18 @@ public class SwitchButton extends Composite implements HasName, HasValue<Boolean
 			return;
 		}
 		this.value = value;
+		GWT.log("old is: "+oldValue + ", new value is: "+value);
 		if (!value) {
-			$(switcherButton).animate("left: -1", 250);		
+			GWT.log("value is: "+value);
+			//$(switcherButton).animate("left: -1", 250);
+			switcherButton.getElement().removeClassName("switch-button-button_to_left");
+			switcherButton.getElement().addClassName("switch-button-button_to_right");
 			labelOff.setStyleName("switch-button-label on");
 			labelOn.setStyleName("switch-button-label off");
 		} else {
-			$(switcherButton).animate("left: 12", 250);
+			//$(switcherButton).animate("left: 12", 250);
+			switcherButton.getElement().removeClassName("switch-button-button_to_right");
+			switcherButton.getElement().addClassName("switch-button-button_to_left");
 			labelOff.setStyleName("switch-button-label off");
 			labelOn.setStyleName("switch-button-label on");
 		}

src/main/java/org/gcube/portlets/widgets/switchbutton/public/switchbutton.css

@@ -5,7 +5,7 @@
 
     font-size: 10pt;
     cursor: pointer;
-}}
+}
 
 .switch-button-label.off {
     color: #adadad;
@@ -51,4 +51,26 @@
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
+}
+
+.switch-button-button_to_left {
+	animation-delay: 250ms;
+	animation: my_left_move;
+	animation-fill-mode: forwards;
+}
+
+.switch-button-button_to_right {
+	animation-delay: 250ms;
+	animation: my_right_move;
+	animation-fill-mode: forwards;
+}
+
+@keyframes my_left_move {
+  from {left: 12px;}
+  to {left: -1px;}
+}
+
+@keyframes my_right_move {
+  from {left: -1px;}
+  to {left: 12px;}
 }