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

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

Author: 7PH

dist/powerglitch.min.js

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

docs-src/src/components/ImagePreview.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/components/OptionPanel.vue

@@ -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/stores/app.js

@@ -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-src/src/views/HomeView.vue

@@ -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/GlitchPartialOptions.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/GlitchResult.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/GlitchableElement.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/LayerDefinition.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">