Merge pull request #5 from 7PH/dev/hover-effect

#4: Add playMode to support hover-triggered and hover-only effects

.eslintrc.yml

@@ -16,6 +16,7 @@ rules:
     indent:
         - error
         - 4
+        - SwitchCase: 1
     linebreak-style:
         - error
         - unix

README.md

@@ -1,6 +1,6 @@
 <img src="./assets/intro.gif">
 
-PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.8kb minified and gzipped and 4kb minified.<br>
+PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights less than 2kb minified and gzipped.<br>
 
 Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/playground) 😊
 

docs-src/src/components/ImagePreview.vue

@@ -16,7 +16,7 @@ const rebuild = () => {
 
 // Rebuild when mounted or options changed
 onMounted(rebuild);
-watch(rebuild);
+watch(appStore.powerGlitchOptions, rebuild);
 </script>
 
 <template>

docs-src/src/components/OptionPanel.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue';
+import { PowerGlitch } from '../../../src/index.ts';
 import { useAppStore } from '@/stores/app';
 import ToggleGroupOption from '@/components/ToggleGroupOption.vue';
 import StringOption from '@/components/StringOption.vue';
@@ -8,10 +9,33 @@ import BooleanOption from '@/components/BooleanOption.vue';
 import NumberOption from '@/components/NumberOption.vue';
 
 const appStore = useAppStore();
+
+const setFullDefaults = (playMode) => {
+    const defaults = PowerGlitch.getDefaultOptions(playMode);
+    appStore.powerGlitchOptions.playMode = playMode;
+    appStore.powerGlitchOptions.timing = defaults.timing;
+    appStore.powerGlitchOptions.glitchTimeSpan = defaults.glitchTimeSpan;
+    appStore.powerGlitchOptions.shake = defaults.shake;
+    appStore.powerGlitchOptions.slice = defaults.slice;
+};
 </script>
 
 <template>
     <div class="px-4">
+        <div class="font-bold mt-6 mb-2 pl-2">
+            Recommended defaults
+        </div>
+        <div class="ml-4 flex flex-wrap justify-center gap-2">
+            <button @click="setFullDefaults('always')">
+                Infinite
+            </button>
+            <button @click="setFullDefaults('hover-triggered')">
+                Once on hover
+            </button>
+            <button @click="setFullDefaults('hover-only')">
+                Always on hover
+            </button>
+        </div>
         <div class="font-bold mt-6 mb-2 pl-2">
             Global
         </div>
@@ -20,6 +44,12 @@ const appStore = useAppStore();
             class="mt-1"
             :title="'Image'"
         />
+        <SelectOption
+            v-model="appStore.powerGlitchOptions.playMode"
+            class="mt-1"
+            :title="'Activate'"
+            :values="['always', 'hover-triggered', 'hover-only']"
+        />
         <StringOption
             v-model="appStore.powerGlitchOptions.backgroundColor"
             class="mt-1"
@@ -81,7 +111,7 @@ const appStore = useAppStore();
         <ToggleGroupOption
             v-model="appStore.powerGlitchOptions.glitchTimeSpan"
             :title="'Enabled'"
-            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().glitchTimeSpan : false"
+            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions(appStore.powerGlitchOptions.playMode).glitchTimeSpan : false"
         />
         <template v-if="appStore.powerGlitchOptions.glitchTimeSpan">
             <NumberOption
@@ -110,7 +140,7 @@ const appStore = useAppStore();
         <ToggleGroupOption
             v-model="appStore.powerGlitchOptions.shake"
             :title="'Enabled'"
-            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().shake : false"
+            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions(appStore.powerGlitchOptions.playMode).shake : false"
         />
         <template v-if="appStore.powerGlitchOptions.shake">
             <NumberOption
@@ -147,7 +177,7 @@ const appStore = useAppStore();
         <ToggleGroupOption
             v-model="appStore.powerGlitchOptions.slice"
             :title="'Enabled'"
-            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions().slice : false"
+            :getDefaultValue="v => v ? PowerGlitch.getDefaultOptions(appStore.powerGlitchOptions.playMode).slice : false"
         />
         <template v-if="appStore.powerGlitchOptions.slice">
             <NumberOption

docs-src/src/stores/app.js

@@ -10,7 +10,7 @@ export const useAppStore = defineStore('main', {
          * Default options for Power Glitch
          */
         powerGlitchOptions: {
-            ...PowerGlitch.getDefaultOptions(),
+            ...PowerGlitch.getDefaultOptions('always'),
             imageUrl: defaultImage,
         },
     }),

docs-src/src/views/HomeView.vue

@@ -102,7 +102,7 @@ onMounted(() => {
             ❓ Introduction
         </h1>
         <p class="mt-4">
-            PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around <b>1.8kb</b> minified and gzipped and <b>4kb</b> minified.<br>
+            PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights less than <b>2kb</b> minified and gzipped.<br>
             <br>
             What are you waiting for? 
             <RouterLink

docs-src/src/views/PlaygroundView.vue

@@ -11,7 +11,7 @@ onMounted(() => {
     PowerGlitch.glitch(
         logoGlitch.value,
         {
-            ...PowerGlitch.getDefaultOptions(),
+            ...PowerGlitch.getDefaultOptions('always'),
             imageUrl: logo,
         }
     );

docs-src/src/views/UsageView.vue

@@ -169,6 +169,7 @@ PowerGlitch.glitch(
     'div.glitch',
     {
         imageUrl: 'https://.../image.png',
+        playMode: 'always',
         backgroundColor: 'transparent',
         hideOverflow: true,
         timing: {