Added custom background image/color support

ClassicOldSong · Jan 11, 2017 · 37ef16b · 37ef16b
1 parent 01a444b
commit 37ef16b
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 1,060 deletions.
diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "K-Egg",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "KarasamaEgg dynamic wallpaper for WallpaperEngine",
   "main": "dist/main.min.js",
   "scripts": {

diff --git a/src/main.js b/src/main.js
@@ -2,7 +2,6 @@
 'use strict'
 
 import { info } from './debug.js'
-
 import content from './main.html'
 import ew from './res/egg-w.svg'
 import ey from './res/egg-y.svg'
@@ -11,28 +10,21 @@ import './style/style.css'
 // Set default properties
 const props = {
 	fps: 0,
-	tg: 0
+	tg: 0,
+	color: 'rgb(79, 81, 120)',
+	img: ''
 }
 
 const $ = selector => document.querySelector(selector)
 
-// Handle user properties
-window.wallpaperPropertyListener = {
-	applyGeneralProperties(up) {
-		if (up.fps) {
-			props.fps = up.fps
-			props.tg = 1000 / up.fps
-			info('FPS limitation updated, current FPS limitation is', props.fps, 'timegap is', props.tg)
-		}
-	}
-}
-
 const init = () => {
 	// Remove the init listener
 	document.removeEventListener('DOMContentLoaded', init, false)
 
 	// Prepare the frying pan
-	$('body').insertAdjacentHTML('afterbegin', content)
+	const body = $('body')
+
+	body.insertAdjacentHTML('afterbegin', content)
 	const pr = window.devicePixelRatio || 1,
 		c = $('.egg'),
 		wW = window.innerWidth,
@@ -165,10 +157,41 @@ const init = () => {
 		}
 		wS = 1 + (lf / gap) / 2
 		yS = 1 + (hf / gap) / 2
+
 		// Start animation
 		start()
 	}
 
+	// Update background
+	const updateBg = () => {
+		body.style.backgroundColor = `rgb(${props.color})`
+		if (props.img) body.style.backgroundImage = `url(file:///${props.img})`
+	}
+	updateBg()
+
+	// Handle user properties
+	window.wallpaperPropertyListener = {
+		applyGeneralProperties(gp) {
+			if (gp.fps) {
+				props.fps = gp.fps
+				props.tg = 1000 / gp.fps
+				info('FPS limitation updated, current FPS limitation is', props.fps, 'timegap is', props.tg)
+			}
+		},
+		applyUserProperties(up) {
+			if (up.schemecolor) {
+				const colors = up.schemecolor.value.split(' ').map(val => Math.ceil(val * 255))
+				props.color = colors.join(', ')
+				info('Schemecolor updated, current value is', props.color)
+			}
+			if (up.image) {
+				props.img = up.image.value
+				info('Background image updated, current value is', props.img)
+			}
+			updateBg()
+		}
+	}
+
 	// Listen audio updates
 	window.wallpaperRegisterAudioListener(audioListener)
 

diff --git a/src/style/style.css b/src/style/style.css
@@ -3,6 +3,10 @@ html, body {
 	width: 100%;
 	overflow: hidden;
 	background-color: #4f5178;
+	background-position: center;
+	background-size: cover;
+	pading: 0;
+	margin: 0;
 }
 
 .egg {

diff --git a/test/index.html b/test/index.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Karasama Egg</title>
-	<script src="./wpesmu.dev.js"></script>
+	<script src="./wpesmu.min.js"></script>
 	<script src="./main.dev.js"></script>
 </head>
 <body>

diff --git a/test/main.dev.js b/test/main.dev.js