feat(website): add mix-blend-mode option

crashmax-dev · Jul 27, 2023 · ade99b9 · ade99b9
1 parent c4ef414
commit ade99b9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/website/src/config.ts b/website/src/config.ts
@@ -25,5 +25,6 @@ export const paneOptions = {
   stringOptions: JSON.stringify(wallpaperOptions, null, 2),
   copyOptions: cloneDeep(wallpaperOptions),
   currentColors: arrayColorToObject(wallpaperOptions.colors),
-  patternSize: PATTERN_SIZE
+  patternSize: PATTERN_SIZE,
+  mixBlendMode: 'overlay'
 }
diff --git a/website/src/index.ts b/website/src/index.ts
@@ -10,6 +10,10 @@ import 'twallpaper/css'
 const wallpaper = new TWallpaper(paneOptions.container, wallpaperOptions)
 wallpaper.init()
 
+const wallpaperPatternElement =
+  document.querySelector<HTMLElement>('.tw-pattern')!
+wallpaperPatternElement.style.mixBlendMode = paneOptions.mixBlendMode
+
 const tweakpane = new Pane({
   document,
   expanded: true,
@@ -163,6 +167,7 @@ patternsFolder
   .on('change', ({ value }) => {
     patternBlur.disabled = value!
     patternBackground.disabled = !value!
+    patternMixBlendMode.disabled = value!
     wallpaper.updatePattern(wallpaperOptions.pattern!)
   })
 
@@ -208,6 +213,22 @@ const patternBackground = patternsFolder
     wallpaper.updatePattern(wallpaperOptions.pattern!)
   })
 
+const patternMixBlendMode = patternsFolder.addBlade({
+  view: 'list',
+  value: paneOptions.mixBlendMode,
+  label: 'mix-blend-mode',
+  options: [
+    { text: 'normal', value: 'normal' },
+    { text: 'overlay', value: 'overlay' },
+    { text: 'hard-light', value: 'hard-light' },
+    { text: 'soft-light', value: 'soft-light' }
+  ]
+}) as ListApi<string>
+
+patternMixBlendMode.on('change', (event) => {
+  wallpaperPatternElement.style.mixBlendMode = event.value
+})
+
 const patternsList = patternsFolder.addBlade({
   view: 'list',
   value: PATTERNS[0].path,