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

code #25436
This commit is contained in:
Francesco Mangiacrapa 2023-07-25 17:13:19 +02:00
parent 710a070f2e
commit f4623bd7f3
5 changed files with 43 additions and 18 deletions

View File

@ -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

11
pom.xml
View File

@ -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>

View File

@ -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' />

View File

@ -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");
}

View File

@ -5,7 +5,7 @@
font-size: 10pt;
cursor: pointer;
}}
}
.switch-button-label.off {
color: #adadad;
@ -52,3 +52,25 @@
-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;}
}