From a314c8e0e9d4db9f5d3983b4f44e823c86d3959a Mon Sep 17 00:00:00 2001 From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:42:24 -0300 Subject: [PATCH] feat!: add support for shadow DOM styling Close #41 --- pom.xml | 2 +- .../vaadin/addons/carousel/Carousel.java | 7 +- .../paper-slider/fc-l2t-paper-slider.js | 34 ++++++++++ .../frontend/paper-slider/l2t-paper-slider.js | 3 - .../addons/carousel/CarouselDemoView.java | 1 + .../addons/carousel/CustomThemeDemo.java | 64 +++++++++++++++++++ .../frontend/carousel-demo-styles.css | 3 + 7 files changed, 107 insertions(+), 7 deletions(-) create mode 100644 src/main/resources/META-INF/resources/frontend/paper-slider/fc-l2t-paper-slider.js create mode 100644 src/test/java/com/flowingcode/vaadin/addons/carousel/CustomThemeDemo.java create mode 100644 src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css diff --git a/pom.xml b/pom.xml index d253ccc..30ea403 100644 --- a/pom.xml +++ b/pom.xml @@ -4,7 +4,7 @@ com.flowingcode.addons.carousel carousel-addon - 2.1.5-SNAPSHOT + 3.0.0-SNAPSHOT Carousel Addon Integration of @xpertsea/paper-slider for Vaadin 14+ diff --git a/src/main/java/com/flowingcode/vaadin/addons/carousel/Carousel.java b/src/main/java/com/flowingcode/vaadin/addons/carousel/Carousel.java index 577c5ed..a112105 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/carousel/Carousel.java +++ b/src/main/java/com/flowingcode/vaadin/addons/carousel/Carousel.java @@ -25,6 +25,7 @@ import com.vaadin.flow.component.DomEvent; import com.vaadin.flow.component.EventData; import com.vaadin.flow.component.HasSize; +import com.vaadin.flow.component.HasTheme; import com.vaadin.flow.component.Tag; import com.vaadin.flow.component.dependency.JsModule; import com.vaadin.flow.component.dependency.NpmPackage; @@ -36,10 +37,10 @@ * parameters, such as duration of transition, start position, maximum height and disabling swipe. */ @SuppressWarnings("serial") -@Tag("l2t-paper-slider") +@Tag("fc-l2t-paper-slider") @NpmPackage(value = "@polymer/iron-a11y-keys-behavior", version = "3.0.1") -@JsModule("./paper-slider/l2t-paper-slider.js") -public class Carousel extends Component implements HasSize { +@JsModule("./paper-slider/fc-l2t-paper-slider.js") +public class Carousel extends Component implements HasSize, HasTheme { private static final String HIDE_NAV = "hideNav"; private static final String DISABLE_SWIPE = "disableSwipe"; diff --git a/src/main/resources/META-INF/resources/frontend/paper-slider/fc-l2t-paper-slider.js b/src/main/resources/META-INF/resources/frontend/paper-slider/fc-l2t-paper-slider.js new file mode 100644 index 0000000..badd866 --- /dev/null +++ b/src/main/resources/META-INF/resources/frontend/paper-slider/fc-l2t-paper-slider.js @@ -0,0 +1,34 @@ +/*- + * #%L + * Granite Alert + * %% + * Copyright (C) 2024 Flowing Code + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * #L% + */ +import {html} from '@polymer/polymer/lib/utils/html-tag.js'; + +import './l2t-paper-slider.js'; + +import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +class FCL2TPaperSlider extends ThemableMixin(customElements.get('l2t-paper-slider')) { + static get is() { return 'fc-l2t-paper-slider'; } + + static get template() { + return html`${super.template}`; + } +}; + +customElements.define(FCL2TPaperSlider.is, FCL2TPaperSlider); \ No newline at end of file diff --git a/src/main/resources/META-INF/resources/frontend/paper-slider/l2t-paper-slider.js b/src/main/resources/META-INF/resources/frontend/paper-slider/l2t-paper-slider.js index 7b5a0b9..0d6b39c 100644 --- a/src/main/resources/META-INF/resources/frontend/paper-slider/l2t-paper-slider.js +++ b/src/main/resources/META-INF/resources/frontend/paper-slider/l2t-paper-slider.js @@ -86,7 +86,6 @@ Polymer$0({ display: box; display: -webkit-box; white-space: nowrap; - @apply --paper-slider-styles; } .slider__slides { @@ -115,7 +114,6 @@ Polymer$0({ left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); - @apply --paper-slider-dot-container-styles; } *[hidden] { @@ -131,7 +129,6 @@ Polymer$0({ background: var(--paper-slide-dot, rgba(255, 255, 255, .5)); border-radius: 8px; cursor: pointer; - @apply --paper-slide-dot-styles; } .slider__dot:focus { diff --git a/src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java index c242c87..e5c82ac 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java +++ b/src/test/java/com/flowingcode/vaadin/addons/carousel/CarouselDemoView.java @@ -37,6 +37,7 @@ public CarouselDemoView() { addDemo(ListenerDemo.class); addDemo(AutoProgressDemo.class); addDemo(SlideButtonsDemo.class); + addDemo(CustomThemeDemo.class); setSizeFull(); } diff --git a/src/test/java/com/flowingcode/vaadin/addons/carousel/CustomThemeDemo.java b/src/test/java/com/flowingcode/vaadin/addons/carousel/CustomThemeDemo.java new file mode 100644 index 0000000..288c8d3 --- /dev/null +++ b/src/test/java/com/flowingcode/vaadin/addons/carousel/CustomThemeDemo.java @@ -0,0 +1,64 @@ +/*- + * #%L + * Carousel Addon + * %% + * Copyright (C) 2018 - 2024 Flowing Code + * %% + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * #L% + */ +package com.flowingcode.vaadin.addons.carousel; + +import com.flowingcode.vaadin.addons.demo.DemoSource; +import com.vaadin.flow.component.dependency.CssImport; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.router.PageTitle; +import com.vaadin.flow.router.Route; + +@PageTitle("Styling") +@DemoSource +@DemoSource("src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css") +@Route(value = "carousel/custom-theme", layout = CarouselDemoView.class) +@SuppressWarnings("serial") +@CssImport(value = "./carousel-demo-styles.css", themeFor = "fc-l2t-paper-slider") +public class CustomThemeDemo extends VerticalLayout { + + public CustomThemeDemo() { + Slide s1 = + new Slide( + CarouselDemoView.createSlideContent( + "Slide 1", + "https://www.flowingcode.com/wp-content/uploads/2018/04/birthday-3021071_640.jpg")); + Slide s2 = + new Slide( + CarouselDemoView.createSlideContent( + "Slide 2", + "https://2.bp.blogspot.com/-nvtIfgN8duc/XKUQh9VEyFI/AAAAAAAABT8/mE7P45E2uqwWlkKimAmes7fT2rdW9UDWwCEwYBhgL/s320/anniversary_1.jpg")); + Slide s3 = + new Slide( + CarouselDemoView.createSlideContent( + "Slide 3", + "https://www.flowingcode.com/wp-content/uploads/2020/04/photo4blog-300x300.jpg")); + Slide s4 = + new Slide( + CarouselDemoView.createSlideContent( + "Slide 4", + "https://www.flowingcode.com/wp-content/uploads/2021/03/happy_birthday_2.jpg")); + + Carousel c = new Carousel(s1, s2, s3, s4); + c.setSizeFull(); + c.setThemeName("custom-theme"); + + add(c); + } +} diff --git a/src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css b/src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css new file mode 100644 index 0000000..521ef52 --- /dev/null +++ b/src/test/resources/META-INF/resources/frontend/carousel-demo-styles.css @@ -0,0 +1,3 @@ +:host([theme~="custom-theme"]) .slider__dots > span { + background: purple; +} \ No newline at end of file