Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#26 Make glitch(.) idempotent to allow successive glitch calls on the same query selector #27

Merged
merged 2 commits into from
May 30, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/powerglitch.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/api-docs/functions/mergeOptions.html
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ <h5><code class="tsd-tag ts-flagRest">Rest</code> <span class="tsd-signature-sym
</div></li></ul></div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L348">index.ts:348</a></li></ul></aside></li></ul></section></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L348">index.ts:348</a></li></ul></aside></li></ul></section></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/GlitchPartialOptions.html
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ <h1>Type alias GlitchPartialOptions</h1></div>
<div class="tsd-comment tsd-typography"><p>Options given to the glitch method</p>
</div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L514">index.ts:514</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L515">index.ts:515</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/GlitchResult.html
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@ <h5>stop<wbr/>Glitch<span class="tsd-signature-symbol">: </span><span class="tsd
</div>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L524">index.ts:524</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L525">index.ts:525</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/GlitchableElement.html
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ <h1>Type alias GlitchableElement</h1></div>
<div class="tsd-comment tsd-typography"><p>Specifies what to glitch. Query selector, html element, list of html elements or NodeList.</p>
</div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L519">index.ts:519</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L520">index.ts:520</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/LayerDefinition.html
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ <h5>timing<span class="tsd-signature-symbol">: </span><span class="tsd-signature
<h3>See</h3><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters">https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters</a></p>
</div></li></ul></div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L155">index.ts:155</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L155">index.ts:155</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/PlayModes.html
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ <h3>Remarks</h3><ul>
</ul>
</div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L9">index.ts:9</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L9">index.ts:9</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/PowerGlitchOptions.html
Original file line number Diff line number Diff line change
@@ -114,7 +114,7 @@ <h5>pulse<span class="tsd-signature-symbol">: </span><span class="tsd-signature-
<div class="tsd-comment tsd-typography"><p>Pulse layer adds a pulsing effect to the glitch.</p>
</div></li></ul></div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L14">index.ts:14</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L14">index.ts:14</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/types/RecursivePartial.html
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ <h4>Type Parameters</h4>
<li>
<h4>T</h4></li></ul></section><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L507">index.ts:507</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L508">index.ts:508</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
2 changes: 1 addition & 1 deletion docs/api-docs/variables/PowerGlitch.html
Original file line number Diff line number Diff line change
@@ -71,7 +71,7 @@ <h4 class="tsd-parameters-title">Parameters</h4>
<h5>playMode: <a href="../types/PlayModes.html" class="tsd-signature-type" data-tsd-kind="Type alias">PlayModes</a><span class="tsd-signature-symbol"> = &#39;always&#39;</span></h5></li></ul></div>
<h4 class="tsd-returns-title">Returns <a href="../types/PowerGlitchOptions.html" class="tsd-signature-type" data-tsd-kind="Type alias">PowerGlitchOptions</a></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L577">index.ts:577</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a41bf28/src/index.ts#L589">index.ts:589</a></li></ul></aside></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/powerglitch/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PowerGlitch - Glitch anything on the web</title>
<script type="module" crossorigin src="/powerglitch/assets/index-2d680928.js"></script>
<script type="module" crossorigin src="/powerglitch/assets/index-a2d2f84a.js"></script>
<link rel="stylesheet" href="/powerglitch/assets/index-6aa122cd.css">
</head>
<body>
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "powerglitch",
"version": "2.3.2",
"version": "2.3.3",
"type": "module",
"main": "./lib/src/index.js",
"types": "./lib/src/index.d.ts",
12 changes: 11 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -448,6 +448,7 @@ const glitchElement = (element: HTMLElement, layers: LayerDefinition[], options:

// Base layer
const baseLayer = glitched.cloneNode(true) as HTMLElement;
baseLayer.dataset.islayer = 'true';
// Stack this layer
baseLayer.style.gridArea = '1/1/-1/-1';
baseLayer.style.userSelect = 'none';
@@ -564,7 +565,16 @@ const glitch = (elOrSelector: GlitchableElement = '.powerglitch', userOptions: G
const layers = generateLayers(options);

// Animate each div element
const entries = elements.map(element => glitchElement(element, layers, options));
const entries = elements
/**
* When calling glitch(..) multiple times on the same element using query selector, glitch layers will also match the selector.
* Only the root-layer (base element) should be glitched, so we ensure we filter out non-root glitch layers.
*/
.filter(element => !element.dataset.islayer)
// Each element is glitched using the same layer definition.
.map((element) =>
glitchElement(element, layers, options)
);

// Return list of containers and glitch control functions
return {
Loading