Skip to content

Commit

Permalink
feat!: add support for shadow DOM styling
Browse files Browse the repository at this point in the history
Close #41
  • Loading branch information
javier-godoy committed Apr 30, 2024
1 parent 9016d55 commit e883775
Showing 7 changed files with 107 additions and 7 deletions.
2 changes: 1 addition & 1 deletion pom.xml
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@

<groupId>com.flowingcode.addons.carousel</groupId>
<artifactId>carousel-addon</artifactId>
<version>2.1.5-SNAPSHOT</version>
<version>3.0.0-SNAPSHOT</version>
<name>Carousel Addon</name>
<description>Integration of @xpertsea/paper-slider for Vaadin 14+</description>

Original file line number Diff line number Diff line change
@@ -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";
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*-
* #%L
* Carousel Addon
* %%
* 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);
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@ public CarouselDemoView() {
addDemo(ListenerDemo.class);
addDemo(AutoProgressDemo.class);
addDemo(SlideButtonsDemo.class);
addDemo(CustomThemeDemo.class);
setSizeFull();
}

Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host([theme~="custom-theme"]) .slider__dots > span {
background: purple;
}

0 comments on commit e883775

Please sign in to comment.