From 1c47f781e66c50cdbb10b337c48383e122b5d014 Mon Sep 17 00:00:00 2001 From: Rafael Date: Fri, 18 Nov 2022 21:40:50 +0100 Subject: [PATCH 1/3] add touchRipple action with example --- kitchen-sink/svelte/pages/Ripple.svelte | 49 ++++++++++++++++++++++++ kitchen-sink/svelte/routes.js | 3 ++ src/svelte/konsta-svelte.d.ts | 3 +- src/svelte/konsta-svelte.js | 2 + src/svelte/shared/touch-ripple-action.js | 20 ++++++++++ 5 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 kitchen-sink/svelte/pages/Ripple.svelte create mode 100644 src/svelte/shared/touch-ripple-action.js diff --git a/kitchen-sink/svelte/pages/Ripple.svelte b/kitchen-sink/svelte/pages/Ripple.svelte new file mode 100644 index 00000000..18ca5696 --- /dev/null +++ b/kitchen-sink/svelte/pages/Ripple.svelte @@ -0,0 +1,49 @@ + + + + + + {#if !isPreview} + history.back()} /> + {/if} + + + + Example on a card +
+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam illum + quam incidunt fugit! Voluptatum, harum. Voluptatem dolorem ex debitis + assumenda sed tempore vitae accusantium dolorum, fugit ea earum aliquid + placeat, deleniti eligendi ratione molestiae laudantium corrupti eaque + voluptatum eum iusto cumque obcaecati voluptatibus! Debitis suscipit, ut + alias non, numquam accusamus dignissimos ipsum accusantium aspernatur + dolor nemo esse quae officia quasi nostrum qui rerum ad ab assumenda iure + sed, voluptatibus minima omnis ex. Ex iusto molestiae, error maiores nisi + totam architecto saepe illum, beatae dicta eligendi explicabo magnam porro + temporibus unde numquam earum possimus nobis molestias fugit! Eligendi + dignissimos rerum iste? + +
+ + + diff --git a/kitchen-sink/svelte/routes.js b/kitchen-sink/svelte/routes.js index daa394bb..54007154 100644 --- a/kitchen-sink/svelte/routes.js +++ b/kitchen-sink/svelte/routes.js @@ -1,3 +1,4 @@ +/* eslint-disable prettier/prettier */ import ActionSheet from './pages/ActionSheet.svelte'; import Badge from './pages/Badge.svelte'; import Breadcrumbs from './pages/Breadcrumbs.svelte'; @@ -20,6 +21,7 @@ import Preloader from './pages/Preloader.svelte'; import Progressbar from './pages/Progressbar.svelte'; import Radio from './pages/Radio.svelte'; import RangeSlider from './pages/RangeSlider.svelte'; +import Ripple from './pages/Ripple.svelte'; import SegmentedControl from './pages/SegmentedControl.svelte'; import SheetModal from './pages/SheetModal.svelte'; import Stepper from './pages/Stepper.svelte'; @@ -52,6 +54,7 @@ const pages = { Progressbar, Radio, RangeSlider, + Ripple, SegmentedControl, SheetModal, Stepper, diff --git a/src/svelte/konsta-svelte.d.ts b/src/svelte/konsta-svelte.d.ts index 23f2f1a3..c58de365 100644 --- a/src/svelte/konsta-svelte.d.ts +++ b/src/svelte/konsta-svelte.d.ts @@ -32,6 +32,7 @@ declare class KonstaProvider extends SvelteComponentTyped< declare const useTheme: ( cb?: (newValue: 'material' | 'ios') => void ) => 'material' | 'ios'; +declare const touchRipple: (node: HTMLElement)=>void; // EXPORT_COMPONENTS -export { useTheme, KonstaProvider }; +export { useTheme, touchRipple, KonstaProvider }; diff --git a/src/svelte/konsta-svelte.js b/src/svelte/konsta-svelte.js index 5b627fe3..05bae999 100644 --- a/src/svelte/konsta-svelte.js +++ b/src/svelte/konsta-svelte.js @@ -50,11 +50,13 @@ import Toolbar from './components/Toolbar.svelte'; // eslint-disable-next-line import KonstaProvider from './shared/KonstaProvider.svelte'; import { useTheme } from './shared/use-theme.js'; +import { touchRipple } from './shared/touch-ripple-action'; export { // utils KonstaProvider, useTheme, + touchRipple, // components App, Actions, diff --git a/src/svelte/shared/touch-ripple-action.js b/src/svelte/shared/touch-ripple-action.js new file mode 100644 index 00000000..41543957 --- /dev/null +++ b/src/svelte/shared/touch-ripple-action.js @@ -0,0 +1,20 @@ +import { useTouchRipple } from './use-touch-ripple.js'; + +/** + * Svelte action to apply a ripple effect to a component. + * WARNING: Changes the position to relative and overflow to hidden, set styles to false to disable. + * + * @param {HTMLElement} node + * @param {boolean} styles + * @returns void + */ +export function touchRipple(node, styles = true) { + if (!node) return; + if (styles) { + node.style.position = 'relative'; + node.style.overflow = 'hidden'; + } + const el = { current: node }; + + useTouchRipple(el, true); +} From 9b4cf608497dbc484b109e58a9aed74408a6064e Mon Sep 17 00:00:00 2001 From: Rafael Date: Fri, 18 Nov 2022 21:44:21 +0100 Subject: [PATCH 2/3] fix types and + add unapplied styles example --- kitchen-sink/svelte/pages/Ripple.svelte | 17 +++++++++++++++++ src/svelte/konsta-svelte.d.ts | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/kitchen-sink/svelte/pages/Ripple.svelte b/kitchen-sink/svelte/pages/Ripple.svelte index 18ca5696..5f7bb603 100644 --- a/kitchen-sink/svelte/pages/Ripple.svelte +++ b/kitchen-sink/svelte/pages/Ripple.svelte @@ -40,6 +40,23 @@ dignissimos rerum iste? + + With unapplied styles +
+ + Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam illum + quam incidunt fugit! Voluptatum, harum. Voluptatem dolorem ex debitis + assumenda sed tempore vitae accusantium dolorum, fugit ea earum aliquid + placeat, deleniti eligendi ratione molestiae laudantium corrupti eaque + voluptatum eum iusto cumque obcaecati voluptatibus! Debitis suscipit, ut + alias non, numquam accusamus dignissimos ipsum accusantium aspernatur + dolor nemo esse quae officia quasi nostrum qui rerum ad ab assumenda iure + sed, voluptatibus minima omnis ex. Ex iusto molestiae, error maiores nisi + totam architecto saepe illum, beatae dicta eligendi explicabo magnam porro + temporibus unde numquam earum possimus nobis molestias fugit! Eligendi + dignissimos rerum iste? + +