eessppeelllloo/powerglitch
1
0
Fork 0
mirror of https://github.com/7PH/powerglitch.git synced 2026-06-16 12:34:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add an option to only copy non-default PowerGlitch options in playground

Browse Source
This commit is contained in:
7PH
2023-12-15 00:41:32 +01:00
committed by Benjamin Raymond
parent a0db161e9a
commit fb99793024
14 changed files with 102 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.yml
+30 -30
View File
@@ -1,35 +1,35 @@
env:
browser: true
es2021: true
browser: true
es2021: true
extends:
- eslint:recommended
- plugin:@typescript-eslint/recommended
- plugin:vue/vue3-recommended
- eslint:recommended
- plugin:@typescript-eslint/recommended
- plugin:vue/vue3-recommended
parserOptions:
ecmaVersion: latest
parser: '@typescript-eslint/parser'
sourceType: module
ecmaVersion: latest
parser: "@typescript-eslint/parser"
sourceType: module
plugins:
- vue
- '@typescript-eslint'
- vue
- "@typescript-eslint"
rules:
indent:
- error
- 4
- SwitchCase: 1
linebreak-style:
- error
- unix
quotes:
- error
- single
semi:
- error
- always
vue/html-indent:
- warn
- 4
vue/attribute-hyphenation:
- off
vue/v-on-event-hyphenation:
- off
indent:
- error
- 4
- SwitchCase: 1
linebreak-style:
- error
- unix
quotes:
- error
- single
semi:
- error
- always
vue/html-indent:
- warn
- 4
vue/attribute-hyphenation:
- off
vue/v-on-event-hyphenation:
- off
docs-src/src/components/ExportPanel.vue
+61 -8
View File
@@ -1,6 +1,9 @@
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash';
import { ref, computed } from 'vue';
import { useAppStore } from '@/stores/app';
import { PowerGlitch } from '../../../src';
import BooleanOption from './BooleanOption.vue';
const appStore = useAppStore();
@@ -13,6 +16,32 @@ const selectCode = () => {
document.getSelection().addRange(range);
};
const showAllOptions = ref(false);
function deleteSimilarRecursive(obj1, obj2) {
for (const key in obj1) {
if (typeof obj1[key] === 'object') {
deleteSimilarRecursive(obj1[key], obj2[key]);
if (Object.keys(obj1[key]).length === 0) {
delete obj1[key];
}
} else if (obj1[key] === obj2[key]) {
delete obj1[key];
}
}
}
const nonDefaultOptions = computed(() => {
const options = cloneDeep(appStore.powerGlitchOptions);
const { playMode } = options;
const defaultOptions = PowerGlitch.getDefaultOptions(playMode);
deleteSimilarRecursive(options, defaultOptions);
if (Object.keys(options).length <= 1) {
return null;
}
return options;
});
const replacer = (key, value) => {
if (key === 'iterations' && value === Infinity) {
return undefined;
@@ -26,12 +55,36 @@ const replacer = (key, value) => {
<template>
<div class="px-4">
<p>Copy the options object below in your app</p>
<pre
ref="preRef"
class="bg-white p-4 rounded shadow overflow-auto"
@click="selectCode"
v-text="JSON.stringify(appStore.powerGlitchOptions, replacer, 2)"
/>
<p class="mb-2">
Copy the options object below in your app
</p>
<template v-if="showAllOptions">
<pre
ref="preRef"
class="bg-white p-4 rounded shadow overflow-auto"
@click="selectCode"
v-text="JSON.stringify(appStore.powerGlitchOptions, replacer, 2)"
/>
</template>
<template v-else>
<pre
v-if="nonDefaultOptions === null"
class="bg-white p-4 rounded shadow overflow-auto"
>You are using the default options
You do not need to pass any options</pre>
<pre
v-else
ref="preRef"
class="bg-white p-4 rounded shadow overflow-auto"
@click="selectCode"
v-text="JSON.stringify(nonDefaultOptions, replacer, 2)"
/>
</template>
<div class="flex mt-4">
Show all options
<BooleanOption v-model="showAllOptions" />
</div>
</div>
</template>
docs-src/src/components/ImagePreview.vue
-1
View File
@@ -2,7 +2,6 @@
import { ref, watch, onMounted } from 'vue';
import { useAppStore } from '@/stores/app';
import { PowerGlitch } from '../../../src/index';
import defaultImage from '@/assets/default.png';
const appStore = useAppStore();
docs/api-docs/functions/mergeOptions.html
+1 -1
View File
@@ -33,7 +33,7 @@ objects (immutable) and will ignore arrays.</p>
</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/a6ad808/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/802ae76/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">
docs/api-docs/types/GlitchPartialOptions.html
+1 -1
View File
@@ -19,7 +19,7 @@
<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/a6ad808/src/index.ts#L514">index.ts:514</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L514">index.ts:514</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
+1 -1
View File
@@ -46,7 +46,7 @@
</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/a6ad808/src/index.ts#L524">index.ts:524</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L524">index.ts:524</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
+1 -1
View File
@@ -19,7 +19,7 @@
<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/a6ad808/src/index.ts#L519">index.ts:519</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L519">index.ts:519</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
+1 -1
View File
@@ -31,7 +31,7 @@
<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/a6ad808/src/index.ts#L155">index.ts:155</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/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">
docs/api-docs/types/PlayModes.html
+1 -1
View File
@@ -26,7 +26,7 @@
</ul>
</div><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L9">index.ts:9</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/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
+1 -1
View File
@@ -114,7 +114,7 @@ glitchTimeSpan.end should be greater than glitchTimeSpan.start. Otherwise, the g
<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/a6ad808/src/index.ts#L14">index.ts:14</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/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
+1 -1
View File
@@ -24,7 +24,7 @@
<li>
<h4>T</h4></li></ul></section><aside class="tsd-sources">
<ul>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/a6ad808/src/index.ts#L507">index.ts:507</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L507">index.ts:507</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/variables/PowerGlitch.html
+1 -1
View File
@@ -71,7 +71,7 @@
<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/a6ad808/src/index.ts#L577">index.ts:577</a></li></ul></aside></div>
<li>Defined in <a href="https://github.com/7PH/powerglitch/blob/802ae76/src/index.ts#L577">index.ts:577</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">
package-lock.json
Generated
+1
View File
@@ -30,6 +30,7 @@
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jsdom-testing-mocks": "^1.7.0",
"lodash": "^4.17.21",
"pinia": "^2.0.29",
"postcss": "^8.4.21",
"rollup": "^3.10.1",
package.json
+1
View File
@@ -43,6 +43,7 @@
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jsdom-testing-mocks": "^1.7.0",
"lodash": "^4.17.21",
"pinia": "^2.0.29",
"postcss": "^8.4.21",
"rollup": "^3.10.1",