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

Enfore & fix eslint styling across library & doc website

Browse Source
This commit is contained in:
7PH
2022-07-31 22:34:42 +02:00
parent 94feeb04b9
commit 08bd392dd7
16 changed files with 286 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.yml
+8 -1
View File
@@ -3,8 +3,8 @@ env:
es2021: true
extends:
- eslint:recommended
- plugin:vue/vue3-essential
- plugin:@typescript-eslint/recommended
- plugin:vue/vue3-recommended
parserOptions:
ecmaVersion: latest
parser: '@typescript-eslint/parser'
@@ -25,3 +25,10 @@ rules:
semi:
- error
- always
vue/html-indent:
- warn
- 4
vue/attribute-hyphenation:
- off
vue/v-on-event-hyphenation:
- off
docs-src/src/App.vue
+1 -1
View File
@@ -1,3 +1,3 @@
<template>
<RouterView class="h-full w-full"></RouterView>
<RouterView class="h-full w-full" />
</template>
docs-src/src/components/BooleanOption.vue
+6 -7
View File
@@ -1,9 +1,4 @@
<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
defineProps({
modelValue: {
type: Boolean,
@@ -29,8 +24,12 @@ defineEmits(['update:modelValue']);
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value === 'true')"
>
<option value="true">Yes</option>
<option value="false">No</option>
<option value="true">
Yes
</option>
<option value="false">
No
</option>
</select>
</div>
</div>
docs-src/src/components/ImagePreview.vue
+4 -1
View File
@@ -21,7 +21,10 @@ watch(rebuild);
<template>
<div>
<div ref="container" class="glitch"></div>
<div
ref="container"
class="glitch"
/>
</div>
</template>
docs-src/src/components/NumberOption.vue
+5 -10
View File
@@ -1,9 +1,4 @@
<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
defineProps({
modelValue: {
type: Number,
@@ -42,20 +37,20 @@ defineEmits(['update:modelValue']);
<div class="col-span-8 flex gap-4 overflow-x-hidden">
<input
class="w-20"
:value="modelValue * factor"
@change="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
type="number"
:value="modelValue * factor"
:min="min * factor"
:max="max * factor"
/>
@change="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
>
<input
:value="modelValue * factor"
@input="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
type="range"
:min="min * factor"
:max="max * factor"
:step="step * factor"
/>
@input="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
>
</div>
</div>
</template>
docs-src/src/components/OptionPanel.vue
+37 -26
View File
@@ -19,17 +19,19 @@ onMounted(() => {
...PowerGlitch.getDefaultOptions(),
imageUrl: logo,
}
)
);
});
</script>
<template>
<div class="px-4">
<div class="font-bold text-xl mb-4 flex">
<div class="grow flex gap-2">
<div ref="logoGlitch" style="width: 30px; height: 30px;"></div> PowerGlitch
<div
ref="logoGlitch"
style="width: 30px; height: 30px;"
/> PowerGlitch
</div>
<div>
<a
@@ -42,22 +44,26 @@ onMounted(() => {
</div>
</div>
<div class="font-bold mt-6 mb-2 pl-2">Global</div>
<div class="font-bold mt-6 mb-2 pl-2">
Global
</div>
<StringOption
class="mt-1"
v-model="appStore.powerGlitchOptions.imageUrl"
class="mt-1"
:title="'Image'"
/>
<StringOption
class="mt-1"
v-model="appStore.powerGlitchOptions.backgroundColor"
class="mt-1"
:title="'Background color'"
/>
<div class="font-bold mt-6 mb-2 pl-2">Timing</div>
<div class="font-bold mt-6 mb-2 pl-2">
Timing
</div>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.timing.duration"
class="mt-1"
:title="'Loop duration (ms)'"
:min="500"
:max="10000"
@@ -66,14 +72,14 @@ onMounted(() => {
<ToggleGroupOption
class="mt-1"
:modelValue="appStore.powerGlitchOptions.timing.iterations === Infinity"
@update:modelValue="iterations => appStore.powerGlitchOptions.timing.iterations = iterations"
:title="'Repeat indefinitely'"
:getDefaultValue="v => v ? Infinity : 1"
@update:modelValue="iterations => appStore.powerGlitchOptions.timing.iterations = iterations"
/>
<template v-if="appStore.powerGlitchOptions.timing.iterations < Infinity">
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.timing.iterations"
class="mt-1"
:title="'Repeat count'"
:min="1"
:max="60"
@@ -83,20 +89,22 @@ onMounted(() => {
<ToggleGroupOption
class="mt-1"
:modelValue="!! appStore.powerGlitchOptions.timing.easing"
@update:modelValue="easing => appStore.powerGlitchOptions.timing.easing = easing"
:title="'Smooth transition'"
:getDefaultValue="v => v ? 'ease-in-out' : undefined"
@update:modelValue="easing => appStore.powerGlitchOptions.timing.easing = easing"
/>
<template v-if="!! appStore.powerGlitchOptions.timing.easing">
<SelectOption
class="mt-1"
v-model="appStore.powerGlitchOptions.timing.easing"
class="mt-1"
:title="'Easing'"
:values="['ease-in-out', 'ease-in', 'ease-out', 'linear']"
/>
</template>
<div class="font-bold mt-6 mb-2 pl-2">Restrict glitch time span</div>
<div class="font-bold mt-6 mb-2 pl-2">
Restrict glitch time span
</div>
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.glitchTimeSpan"
:title="'Enabled'"
@@ -104,8 +112,8 @@ onMounted(() => {
/>
<template v-if="appStore.powerGlitchOptions.glitchTimeSpan">
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.glitchTimeSpan.start"
class="mt-1"
:title="'Start time (%)'"
:min="0.00"
:max="1.00"
@@ -113,8 +121,8 @@ onMounted(() => {
:factor="100"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.glitchTimeSpan.end"
class="mt-1"
:title="'End time (%)'"
:min="0.00"
:max="1.00"
@@ -123,7 +131,9 @@ onMounted(() => {
/>
</template>
<div class="font-bold mt-6 mb-2 pl-2">Shake</div>
<div class="font-bold mt-6 mb-2 pl-2">
Shake
</div>
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.shake"
:title="'Enabled'"
@@ -131,16 +141,16 @@ onMounted(() => {
/>
<template v-if="appStore.powerGlitchOptions.shake">
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.shake.velocity"
class="mt-1"
:title="'Velocity (steps/s)'"
:min="1"
:max="60"
:step="1"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.shake.amplitudeX"
class="mt-1"
:title="'X amplitude (%)'"
:min="0.00"
:max="2.00"
@@ -148,8 +158,8 @@ onMounted(() => {
:factor="100"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.shake.amplitudeY"
class="mt-1"
:title="'Y amplitude (%)'"
:min="0.00"
:max="2.00"
@@ -158,7 +168,9 @@ onMounted(() => {
/>
</template>
<div class="font-bold mt-6 mb-2 pl-2">Slice</div>
<div class="font-bold mt-6 mb-2 pl-2">
Slice
</div>
<ToggleGroupOption
v-model="appStore.powerGlitchOptions.slice"
:title="'Enabled'"
@@ -166,24 +178,24 @@ onMounted(() => {
/>
<template v-if="appStore.powerGlitchOptions.slice">
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.slice.count"
class="mt-1"
:title="'Count (slice/step)'"
:min="1"
:max="60"
:step="1"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.slice.velocity"
class="mt-1"
:title="'Velocity (steps/s)'"
:min="1"
:max="60"
:step="1"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.slice.minHeight"
class="mt-1"
:title="'Min slice height (%)'"
:min="0.01"
:max="1.00"
@@ -191,8 +203,8 @@ onMounted(() => {
:factor="100"
/>
<NumberOption
class="mt-1"
v-model="appStore.powerGlitchOptions.slice.maxHeight"
class="mt-1"
:title="'Max slice height (%)'"
:min="0.01"
:max="1.00"
@@ -200,11 +212,10 @@ onMounted(() => {
:factor="100"
/>
<BooleanOption
class="mt-1"
v-model="appStore.powerGlitchOptions.slice.hueRotate"
class="mt-1"
:title="'Hue rotate'"
/>
</template>
</div>
</template>
docs-src/src/components/SelectOption.vue
+7 -6
View File
@@ -1,9 +1,4 @@
<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
defineProps({
modelValue: {
type: String,
@@ -33,7 +28,13 @@ defineEmits(['update:modelValue']);
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<option v-for="value in values" :key="value" :value="value">{{ value }}</option>
<option
v-for="value in values"
:key="value"
:value="value"
>
{{ value }}
</option>
</select>
</div>
</div>
docs-src/src/components/StringOption.vue
+1 -6
View File
@@ -1,9 +1,4 @@
<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
defineProps({
modelValue: {
type: String,
@@ -29,7 +24,7 @@ defineEmits(['update:modelValue']);
:placeholder="title"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
>
</div>
</div>
</template>
docs-src/src/components/ToggleGroupOption.vue
+7 -7
View File
@@ -1,11 +1,7 @@
<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
defineProps({
modelValue: {
type: [String, Number, Boolean, Object],
required: true,
},
title: {
@@ -32,8 +28,12 @@ defineEmits(['update:modelValue']);
:value="!! modelValue"
@input="$emit('update:modelValue', getDefaultValue($event.target.value === 'true'))"
>
<option value="true">Yes</option>
<option value="false">No</option>
<option value="true">
Yes
</option>
<option value="false">
No
</option>
</select>
</div>
</div>
docs-src/src/views/HomeView.vue
+103 -22
View File
@@ -45,48 +45,101 @@ onMounted(() => {
<template>
<div class="app w-full mx-auto mb-8 mt-16 md:mt-8 px-4">
<!-- GitHub -->
<p class="fixed right-0 top-0 mx-6 my-4 text-4xl">
<a href="https://github.com/7ph/powerglitch" target="_blank">
<a
href="https://github.com/7ph/powerglitch"
target="_blank"
>
<fa icon="fa-brands fa-github" />
</a>
</p>
<!-- Title -->
<div class="mt-8 font-bold text-5xl flex gap-4 justify-center">
<img :src="logo" class="powerglitch" style="width: 60px; height: 60px;" />
<div class="mt-1">PowerGlitch</div>
<img
:src="logo"
class="powerglitch"
style="width: 60px; height: 60px;"
>
<div class="mt-1">
PowerGlitch
</div>
</div>
<p class="text-center mt-4 text-lg">
A tiny library to glitch images on the web.
</p>
<div class="mt-2 flex justify-center gap-4">
<RouterLink to="/" class="">home</RouterLink>
<RouterLink to="/usage" class="underline">usage</RouterLink>
<RouterLink to="/playground" class="underline">playground</RouterLink>
<a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
<RouterLink
to="/"
class=""
>
home
</RouterLink>
<RouterLink
to="/usage"
class="underline"
>
usage
</RouterLink>
<RouterLink
to="/playground"
class="underline"
>
playground
</RouterLink>
<a
target="_blank"
href="https://github.com/7PH/powerglitch"
class="underline"
>
github
</a>
</div>
<!-- Introduction -->
<h1 class="font-bold mt-8">❓ Introduction</h1>
<h1 class="font-bold mt-8">
❓ 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>
<br>
What are you waiting for? <RouterLink to="playground" class="underline">Try glitching stuff now ⚡!</RouterLink>
What are you waiting for?
<RouterLink
to="playground"
class="underline"
>
Try glitching stuff now ⚡!
</RouterLink>
</p>
<!-- Demo -->
<h1 class="font-bold mt-8">🤔 Examples</h1>
<h1 class="font-bold mt-8">
🤔 Examples
</h1>
<div class="flex justify-center gap-8">
<div class="example example-1" ref="frog1Glitch"></div>
<div class="example example-2" ref="frog2Glitch"></div>
<div class="example example-3" ref="frog3Glitch"></div>
<div class="example example-4" ref="frog4Glitch"></div>
<div
ref="frog1Glitch"
class="example example-1"
/>
<div
ref="frog2Glitch"
class="example example-2"
/>
<div
ref="frog3Glitch"
class="example example-3"
/>
<div
ref="frog4Glitch"
class="example example-4"
/>
</div>
<!-- Install -->
<h1 class="font-bold mt-8">🔽 Install</h1>
<h1 class="font-bold mt-8">
🔽 Install
</h1>
<highlightjs
class="rounded-xl overflow-hidden mt-4"
language="shell"
@@ -96,10 +149,21 @@ or
$ yarn add powerglitch
`.trim()"
/>
<p class="mt-4">Alternatively, you can <a class="underline" target="_blank" href="https://raw.githubusercontent.com/7PH/powerglitch/master/dist/powerglitch.min.js">download minified web bundle</a> and use it directly in your project.</p>
<p class="mt-4">
Alternatively, you can
<a
class="underline"
target="_blank"
href="https://raw.githubusercontent.com/7PH/powerglitch/master/dist/powerglitch.min.js"
>
download minified web bundle
</a>
and use it directly in your project.
</p>
<!-- Basic usage -->
<h1 class="font-bold mt-8">🔨 Usage</h1>
<h1 class="font-bold mt-8">
🔨 Usage
</h1>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="js"
@@ -110,13 +174,30 @@ import { PowerGlitch } from 'powerglitch'
PowerGlitch.glitch('.some-image')
`.trim()"
/>
<p class="mt-4">To optimize and customize glitched images, check the <router-link to="/usage" class="underline">usage guide</router-link>.</p>
<p class="mt-4">
To optimize and customize glitched images, check the
<router-link
to="/usage"
class="underline"
>
usage guide
</router-link>.
</p>
<!-- Contribute -->
<h1 class="font-bold mt-8">🤝 Support and bugs</h1>
<h1 class="font-bold mt-8">
🤝 Support and bugs
</h1>
<p class="mt-4 pb-8">
Having trouble? Found a bug? Want to contribute?<br>
Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request <a href="https://github.com/7ph/powerglitch" target="_blank" class="underline">on GitHub</a>.<br>
Any kind of contribution is welcome. If you have any questions, please open an issue or create a pull request
<a
href="https://github.com/7ph/powerglitch"
target="_blank"
class="underline"
>
on GitHub
</a>.<br>
</p>
</div>
</template>
docs-src/src/views/PlaygroundView.vue
+5 -3
View File
@@ -1,12 +1,14 @@
<script setup>
import OptionPanel from '@/components/OptionPanel.vue'
import ImagePreview from '@/components/ImagePreview.vue'
import OptionPanel from '@/components/OptionPanel.vue';
import ImagePreview from '@/components/ImagePreview.vue';
</script>
<template>
<div class="app h-full flex flex-row w-full">
<p class="fixed right-0 top-0 mx-6 my-4 text-4xl">
<RouterLink to="/">🔙</RouterLink>
<RouterLink to="/">
🔙
</RouterLink>
</p>
<div class="option-panel border p-4 overflow-y-auto">
<OptionPanel />
docs-src/src/views/UsageView.vue
+83 -23
View File
@@ -12,43 +12,79 @@ onMounted(() => {
<template>
<div class="app w-full mx-auto mb-8 mt-16 md:mt-8 px-4">
<!-- GitHub -->
<p class="fixed right-0 top-0 mx-6 my-4 text-4xl">
<a href="https://github.com/7ph/powerglitch" target="_blank">
<a
href="https://github.com/7ph/powerglitch"
target="_blank"
>
<fa icon="fa-brands fa-github" />
</a>
</p>
<!-- Title -->
<div class="mt-8 font-bold text-5xl flex gap-4 justify-center">
<div ref="logoGlitch" style="width: 60px; height: 60px;"></div>
<div class="mt-1">PowerGlitch</div>
<div
ref="logoGlitch"
style="width: 60px; height: 60px;"
/>
<div class="mt-1">
PowerGlitch
</div>
</div>
<p class="text-center mt-4 text-lg">
A tiny library to glitch images on the web.
</p>
<div class="mt-2 flex justify-center gap-4">
<RouterLink to="/" class="underline">home</RouterLink>
<RouterLink to="/usage" class="">usage</RouterLink>
<RouterLink to="/playground" class="underline">playground</RouterLink>
<a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
<RouterLink
to="/"
class="underline"
>
home
</RouterLink>
<RouterLink
to="/usage"
class=""
>
usage
</RouterLink>
<RouterLink
to="/playground"
class="underline"
>
playground
</RouterLink>
<a
target="_blank"
href="https://github.com/7PH/powerglitch"
class="underline"
>
github
</a>
</div>
<h1 class="font-bold mt-8">⚪ Intro</h1>
<h1 class="font-bold mt-8">
⚪ Intro
</h1>
<p class="mt-2">
This simple guide will walk you through the basic usage of the library.
</p>
<!-- Glitching <div> -->
<h1 class="font-bold mt-8">🟣 Glitching {{ '<div>' }}</h1>
<p class="mt-2">The most optimized way to use PowerGlitch is to first create a placeholder div</p>
<h1 class="font-bold mt-8">
🟣 Glitching {{ '<div>' }}
</h1>
<p class="mt-2">
The most optimized way to use PowerGlitch is to first create a placeholder div
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="html"
:code="`<div class='glitch'></div>`"
/>
<p class="mt-2">ensure the div has a non-zero width/height</p>
<p class="mt-2">
ensure the div has a non-zero width/height
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="css"
@@ -59,7 +95,9 @@ onMounted(() => {
}
`.trim()"
/>
<p class="mt-2">then use PowerGlitch.glitch() to populate the div with the glitched image</p>
<p class="mt-2">
then use PowerGlitch.glitch() to populate the div with the glitched image
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="js"
@@ -69,17 +107,25 @@ PowerGlitch.glitch('div.glitch', {
})
`.trim()"
/>
<p class="mt-2">this takes care of animating the placeholder with the glitch effect.</p>
<p class="mt-2">
this takes care of animating the placeholder with the glitch effect.
</p>
<!-- Glitching <img> -->
<h1 class="font-bold mt-8">🔵 Glitching {{ '<img>' }}</h1>
<p class="mt-2">It is also possible to glitch images directly</p>
<h1 class="font-bold mt-8">
🔵 Glitching {{ '<img>' }}
</h1>
<p class="mt-2">
It is also possible to glitch images directly
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="html"
:code="`<img src='https://.../image.png' class='glitch' />`"
/>
<p class="mt-2">for images, call PowerGlitch.glitch() without specifying the imageUrl</p>
<p class="mt-2">
for images, call PowerGlitch.glitch() without specifying the imageUrl
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="js"
@@ -87,11 +133,17 @@ PowerGlitch.glitch('div.glitch', {
PowerGlitch.glitch('img.glitch')
`.trim()"
/>
<p class="mt-2">this replaces the image with its glitched version.</p>
<p class="mt-2">
this replaces the image with its glitched version.
</p>
<!-- By reference -->
<h1 class="font-bold mt-8">⚫ Passing reference</h1>
<p class="mt-2">If you already have a reference to the element to glitch, you can directly pass it as the first argument</p>
<h1 class="font-bold mt-8">
⚫ Passing reference
</h1>
<p class="mt-2">
If you already have a reference to the element to glitch, you can directly pass it as the first argument
</p>
<highlightjs
class="rounded-xl overflow-hidden mt-2"
language="js"
@@ -102,7 +154,9 @@ PowerGlitch.glitch(image)
/>
<!-- Customize glitch -->
<h1 class="font-bold mt-8">🟢 Customize glitch</h1>
<h1 class="font-bold mt-8">
🟢 Customize glitch
</h1>
<p class="mt-2">
By default, PowerGlitch will glitch images using a set of hardcoded default values that look good for most images.
However, you can customize the applied glitch by passing a custom options object as the second argument to PowerGlitch.glitch().
@@ -156,12 +210,18 @@ PowerGlitch.glitch(
`.trim()"
/>
<p class="mt-2">
to find the perfect set of options for your image, <router-link to="/playground" class="underline">
to find the perfect set of options for your image,
<router-link
to="/playground"
class="underline"
>
use the playground
</router-link>
</p>
<h1 class="font-bold mt-8">🟡 API reference</h1>
<h1 class="font-bold mt-8">
🟡 API reference
</h1>
<p class="mt-2 pb-8">
To know what options are accepted and what they mean, <a
class="underline"
docs/assets/index.ebbe7fb9.js → docs/assets/index.1fb6a104.js
+13 -13
View File
File diff suppressed because one or more lines are too long
docs/assets/index.bd0a6de9.css → docs/assets/index.93a801f9.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<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.ebbe7fb9.js"></script>
<link rel="stylesheet" href="/powerglitch/assets/index.bd0a6de9.css">
<script type="module" crossorigin src="/powerglitch/assets/index.1fb6a104.js"></script>
<link rel="stylesheet" href="/powerglitch/assets/index.93a801f9.css">
</head>
<body>
<div id="app"></div>
package.json
+3 -3
View File
@@ -11,9 +11,9 @@
"build": "npm run build:docs && npm run build:lib && npm run build:dist",
"preview:docs": "vite preview",
"size": "size-limit",
"lint": "eslint src/**/*.ts",
"test": "npm run lint && npm run size",
"fix-lint": "eslint --fix src/**/*.ts"
"lint": "eslint src/**/*.ts docs-src/**/*.vue",
"lint-fix": "eslint --fix src/**/*.ts docs-src/**/*.vue",
"test": "npm run lint && npm run size"
},
"files": [
"/lib"