Merge pull request #11 from 7PH/dev/grid-stacking

Use grid display to better stack elements (Fixes <p> stacking) & Fix text bold artefact

docs-src/src/components/ImagePreview.vue

@@ -12,7 +12,6 @@ const rebuild = () => {
     if (! container.value) {
         return;
     }
-    console.log('rebuilding');
     PowerGlitch.glitch(container.value, appStore.powerGlitchOptions);
 };
 

docs-src/src/components/OptionPanel.vue

@@ -54,8 +54,8 @@ const appStore = useAppStore();
             v-model="appStore.powerGlitchOptions.timing.duration"
             class="mt-1"
             :title="'Loop duration (ms)'"
-            :min="500"
-            :max="10000"
+            :min="150"
+            :max="4000"
             :step="100"
         />
         <ToggleGroupOption

docs-src/src/stores/app.js

@@ -9,6 +9,7 @@ export const useAppStore = defineStore('main', {
         const htmlElements = {
             'image': `<img src="${defaultImage}" />`,
             'button': '<button>a button 🤷‍♀️</button>',
+            'paragraph': '<p>Power Glitch 🌎</p>',
         };
 
         return {
@@ -37,7 +38,7 @@ export const useAppStore = defineStore('main', {
 
             const htmlElementKey = {
                 'always': 'image',
-                'hover': 'image',
+                'hover': 'paragraph',
                 'click': 'button',
             }[playMode];
             this.powerGlitchOptions.html = this.htmlElements[htmlElementKey];

docs-src/src/views/HomeView.vue

@@ -54,7 +54,7 @@ onMounted(() => {
         html: `<img src="${logo}" />`,
         playMode: 'hover',
         timing: {
-            duration: 1500,
+            duration: 2500,
         },
         glitchTimeSpan: {
             start: 0,
@@ -101,7 +101,7 @@ onMounted(() => {
     });
     PowerGlitch.glitch(glitchExample10.value, {
         html: `
-            <div class="border border-2 rounded shadow">
+            <div class="border border-2 border-gray-400 px-2 py-1 rounded-xl">
                 <p>
                     Power <b>Glitch</b> 🌎
                 </p>

docs/api-docs/types/GlitchPartialOptions.html

@@ -17,7 +17,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/6c2e339/src/index.ts#L463">index.ts:463</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/src/index.ts#L480">index.ts:480</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">

docs/api-docs/types/GlitchResult.html

@@ -44,7 +44,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/6c2e339/src/index.ts#L473">index.ts:473</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/src/index.ts#L490">index.ts:490</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">

docs/api-docs/types/GlitchableElement.html

@@ -17,7 +17,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/6c2e339/src/index.ts#L468">index.ts:468</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/src/index.ts#L485">index.ts:485</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">

docs/api-docs/types/LayerDefinition.html

@@ -29,7 +29,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/6c2e339/src/index.ts#L130">index.ts:130</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/src/index.ts#L126">index.ts:126</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">

docs/api-docs/types/PlayModes.html

@@ -24,7 +24,7 @@ <h3>Remarks</h3><ul>
 </ul>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/6c2e339/src/index.ts#L10">index.ts:10</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/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">

docs/api-docs/types/PowerGlitchOptions.html

@@ -21,8 +21,7 @@ <h4>Type declaration</h4>
 <ul class="tsd-parameters">
 <li class="tsd-parameter">
 <h5><code class="tsd-tag ts-flagOptional">Optional</code> html<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span></h5>
-<div class="tsd-comment tsd-typography"><p>Html to glitch. If not provided, will use the elements themselves.
-If provided, all elements should have an <code>innerHTML</code> property.</p>
+<div class="tsd-comment tsd-typography"><p>Html to glitch. If not provided, will use the elements themselves. If provided, all elements should have an <code>innerHTML</code> property.</p>
 </div></li>
 <li class="tsd-parameter">
 <h5>play<wbr/>Mode<span class="tsd-signature-symbol">: </span><a href="PlayModes.html" class="tsd-signature-type" data-tsd-kind="Type alias">PlayModes</a></h5>
@@ -51,19 +50,22 @@ <h5><code class="tsd-tag ts-flagOptional">Optional</code> easing<span class="tsd
 </div></li></ul></li>
 <li class="tsd-parameter">
 <h5>glitch<wbr/>Time<wbr/>Span<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>start<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>end<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></h5>
-<div class="tsd-comment tsd-typography"><p>Specify if the animation should always glitch uniformly (if false) or if it should glitch at a given time.
-If start and end are set, the animation will glitch between those two times, and the peak glitch will be at the middle.
+<div class="tsd-comment tsd-typography"><p>Specify if the animation should always glitch uniformly (if false) or if it should glitch at a given time.</p>
+
+<h3>Remarks</h3><p>If start and end are set, the animation will glitch between those two times, and the peak glitch will be at the middle.
 glitchTimeSpan.end should be greater than glitchTimeSpan.start. Otherwise, the glitch will not happen.</p>
 </div></li>
 <li class="tsd-parameter">
 <h5>shake<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">false</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">{ </span>velocity<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>amplitudeX<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>amplitudeY<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></h5>
-<div class="tsd-comment tsd-typography"><p>Whether the base layer should shake. If not set to false, the base layer will shake in the given amplitude.
-The shake animation respects the glitch time span constraint, if set.</p>
+<div class="tsd-comment tsd-typography"><p>Whether the base layer should shake. If not set to false, the base layer will shake in the given amplitude.</p>
+
+<h3>Remarks</h3><p>The shake animation respects the glitch time span constraint, if set.</p>
 </div></li>
 <li class="tsd-parameter">
 <h5>slice<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>count<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>velocity<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>minHeight<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>maxHeight<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">; </span>hueRotate<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> }</span></h5>
-<div class="tsd-comment tsd-typography"><p>Slice layers are the base animation to give the glitch effect. They clip a part of the element and move it somewhere else.
-The slice animation respects the glitch time span constraint, if set.</p>
+<div class="tsd-comment tsd-typography"><p>Slice layers are the base animation to give the glitch effect. They clip a part of the element and move it somewhere else.</p>
+
+<h3>Remarks</h3><p>The slice animation respects the glitch time span constraint, if set.</p>
 </div>
 <ul class="tsd-parameters">
 <li class="tsd-parameter">
@@ -87,7 +89,7 @@ <h5>hue<wbr/>Rotate<span class="tsd-signature-symbol">: </span><span class="tsd-
 <div class="tsd-comment tsd-typography"><p>Whether the hue should rotate for the given slice.</p>
 </div></li></ul></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/6c2e339/src/index.ts#L15">index.ts:15</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/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">

docs/api-docs/types/RecursivePartial.html

@@ -21,7 +21,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/6c2e339/src/index.ts#L456">index.ts:456</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a1a318a/src/index.ts#L473">index.ts:473</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">