diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml deleted file mode 100644 index 1438b64..0000000 --- a/.github/workflows/main.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Build Docs - -on: - push: - branches: - - main - -jobs: - build_vue: - runs-on: ubuntu-latest - name: Build Docs - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: 18 - cache: yarn - - run: yarn install --frozen-lockfile - - - name: Build - run: yarn build && yarn build:docs - - - name: Deploy - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: docs/.island/dist diff --git a/package.json b/package.json index 6b19535..f4858d1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-peel", "description": "react-peel is a react library to create realistic peeling effects. No dependencies.", - "version": "0.1.2", + "version": "0.1.3", "type": "module", "scripts": { "dev": "vite", diff --git a/src/index.tsx b/src/index.tsx index f2b651b..b7bb557 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import { useRef, useEffect, forwardRef } from "react"; +import { forwardRef, useEffect, useRef } from "react"; import PeelLib, { PeelCorners } from "./peel"; import { HtmlDivProps, PeelOptions, Props, TCoords } from "./types"; @@ -89,7 +89,7 @@ function Peel( initialize(); return () => { - peelRef.current && peelRef.current.removeEvents(); + peelRef.current && peelRef.current.clear(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [options]); diff --git a/src/main.tsx b/src/main.tsx index 0a0ccef..ddd7a28 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import ReactDOM from "react-dom/client"; -import { useRef, useEffect } from "react"; import { PeelBack, PeelBottom, PeelTop, PeelWrapper } from "."; // eslint-disable-next-line react-refresh/only-export-components diff --git a/src/peel.js b/src/peel.js index 3619831..0af04f0 100644 --- a/src/peel.js +++ b/src/peel.js @@ -137,8 +137,8 @@ export default function () { // Event Helpers - function addEvent(el, type, fn) { - el.addEventListener(type, fn); + function addEvent(el, type, fn, opt) { + el.addEventListener(type, fn, opt); } function removeEvent(el, type, fn) { @@ -442,10 +442,40 @@ export default function () { } this.addEvent(el, "mousedown", dragStart.bind(this, false)); - this.addEvent(el, "touchstart", dragStart.bind(this, true)); + this.addEvent( + el, + "touchstart", + dragStart.bind(this, true), + checkPassiveEventSupport() + ? { + passive: true, + } + : false + ); this.dragEventsSetup = true; }; + /** + * Check passive event listener browser compatibility. + * @public + */ + + function checkPassiveEventSupport() { + let supportsPassive = false; + try { + const options = Object.defineProperty({}, "passive", { + get: function () { + supportsPassive = true; + return null; + }, + }); + window.addEventListener("test", null, options); + } catch (err) { + console.warn("Passive event listener not support"); + } + return supportsPassive; + } + /** * Remove all event handlers previously added to the instance. * @public @@ -457,6 +487,27 @@ export default function () { this.events = []; }; + /** + * Remove global svg elements. + * @public + */ + Peel.prototype.removeGlobalSvgElements = function () { + var globalSvgElements = document.getElementsByClassName( + prefix("svg-clip-element") + ); + + [...globalSvgElements].forEach((e) => e.remove()); + }; + + /** + * Clear everything. + * @public + */ + Peel.prototype.clear = function () { + this.removeEvents(); + this.removeGlobalSvgElements(); + }; + /** * Sets the peel effect to a point in time along a previously * specified path. Will throw an error if no path exists. @@ -562,8 +613,8 @@ export default function () { * @param {Function} fn The handler function. * @private */ - Peel.prototype.addEvent = function (el, type, fn) { - addEvent(el, type, fn); + Peel.prototype.addEvent = function (el, type, fn, opt) { + addEvent(el, type, fn, opt); this.events.push({ el: el, type: type, @@ -1278,6 +1329,22 @@ export default function () { setTransform(this.el, "translate(0px,0px)"); } + // /** + // * Sets up the global SVG element and its nested defs object to use for new + // * clip paths. + // * @returns {SVGElement} + // * @public + // */ + // SVGClip.getGlobalSvgElement = function () { + // if (!this.defs) { + // this.svg = createSVGElement("svg", null, { + // class: prefix("svg-clip-element"), + // }); + // this.defs = createSVGElement("defs", this.svg); + // } + // return this.defs; + // }; + /** * Sets up the global SVG element and its nested defs object to use for new * clip paths.