Bug Fix: All theme variables and shades are now written properly on a…

…ctivation. (Fixes #9)

New Feature: Two new hooks available: 'onThemeActivated' and 'onThemeDeactivated' (Fixes #12)
New Feature: You can now specify a 'template' entry for variables to format the value just before being written to page.
New Feature: New variable type 'image' lets you use the filepicker to select an image url.
New Feature: The 'shades' color type includes a 'full' variant with no transparency.
OceanBlues: You can now change the background images of window headers and sheet backgrounds.
Version push: v1.1.2

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## Version 1.1.2
+
+ * Bug Fix: All theme variables and shades are now written properly on activation. (Fixes #9)
+ * New Feature: Two new hooks available: 'onThemeActivated' and 'onThemeDeactivated' (Fixes #12)
+ * New Feature: You can now specify a 'template' entry for variables to format the value just before being written to page.
+ * New Feature: New variable type 'image' lets you use the filepicker to select an image url.
+ * New Feature: The 'shades' color type includes a 'full' variant with no transparency.
+ * OceanBlues: You can now change the background images of window headers and sheet backgrounds.
+
 ## Version 1.1.1
 
  * OceanBlues: Added 'classic' colors from version 1.0.0

Whetstone.js

@@ -311,6 +311,13 @@ Hooks.once('WhetstoneReady', () => {
 				type: 'shades',
 				presets: 'oceanblues'
 			},
+			{
+				name: '--OceanBlues-bg-image-window',
+				title: 'OCEANBLUES.OceanBlues-bg-image-window',
+				hint: 'OCEANBLUES.OceanBlues-bg-image-windowHint',
+				default: 'ui/denim075.png',
+				type: 'image'
+			},
 			{
 				name: '--OceanBlues-bg-window-blendmode',
 				title: 'OCEANBLUES.OceanBlues-bg-window-blendmode',
@@ -319,6 +326,13 @@ Hooks.once('WhetstoneReady', () => {
 				type: String,
 				presets: 'blendmodes'
 			},
+			{
+				name: '--OceanBlues-bg-image-sheet',
+				title: 'OCEANBLUES.OceanBlues-bg-image-sheet',
+				hint: 'OCEANBLUES.OceanBlues-bg-image-sheetHint',
+				default: 'ui/parchment.jpg',
+				type: 'image'
+			},
 			{
 				name: '--OceanBlues-bg-sheet-blendmode',
 				title: 'OCEANBLUES.OceanBlues-bg-sheet-blendmode',
@@ -466,7 +480,9 @@ Hooks.once('WhetstoneReady', () => {
 				presets: 'oceanblues',
 				values: {
 					'--OceanBlues-bg-color': '#3e5c86e6',
+					'--OceanBlues-bg-image-window': 'ui/denim075.png',
 					'--OceanBlues-bg-window-blendmode': 'luminosity',
+					'--OceanBlues-bg-image-sheet': 'ui/parchment.jpg',
 					'--OceanBlues-bg-sheet-blendmode': 'color-burn',
 					'--OceanBlues-text-light-color': '#c6dceaff',
 					'--OceanBlues-text-dark-color': '#8dbbdcff',
@@ -483,7 +499,9 @@ Hooks.once('WhetstoneReady', () => {
 				presets: 'icewindblues',
 				values: {
 					'--OceanBlues-bg-color': '#3d5a80ff',
+					'--OceanBlues-bg-image-window': 'ui/denim075.png',
 					'--OceanBlues-bg-window-blendmode': 'luminosity',
+					'--OceanBlues-bg-image-sheet': 'ui/parchment.jpg',
 					'--OceanBlues-bg-sheet-blendmode': 'luminosity',
 					'--OceanBlues-text-light-color': '#a0c6dcff',
 					'--OceanBlues-text-dark-color': '#102632ff',
@@ -500,7 +518,9 @@ Hooks.once('WhetstoneReady', () => {
 				presets: 'earthygreen',
 				values: {
 					'--OceanBlues-bg-color': '#55744bd2',
+					'--OceanBlues-bg-image-window': 'ui/denim-dark-090.png',
 					'--OceanBlues-bg-window-blendmode': 'luminosity',
+					'--OceanBlues-bg-image-sheet': 'ui/denim075.png',
 					'--OceanBlues-bg-sheet-blendmode': 'color-burn',
 					'--OceanBlues-text-light-color': '#ecf0bdff',
 					'--OceanBlues-text-dark-color': '#d5bb99ff',
@@ -517,7 +537,9 @@ Hooks.once('WhetstoneReady', () => {
 				presets: 'hackerspace',
 				values: {
 					'--OceanBlues-bg-color': '#032202ff',
+					'--OceanBlues-bg-image-window': 'ui/denim075.png',
 					'--OceanBlues-bg-window-blendmode': 'darken',
+					'--OceanBlues-bg-image-sheet': 'ui/parchment.jpg',
 					'--OceanBlues-bg-sheet-blendmode': 'multiply',
 					'--OceanBlues-text-light-color': '#1caa29ff',
 					'--OceanBlues-text-dark-color': '#00b700ff',
@@ -534,7 +556,9 @@ Hooks.once('WhetstoneReady', () => {
 				presets: 'lavender_fields',
 				values: {
 					'--OceanBlues-bg-color': '#412e5280',
+					'--OceanBlues-bg-image-window': 'ui/denim075.png',
 					'--OceanBlues-bg-window-blendmode': 'luminosity',
+					'--OceanBlues-bg-image-sheet': 'ui/parchment.jpg',
 					'--OceanBlues-bg-sheet-blendmode': 'color-burn',
 					'--OceanBlues-text-light-color': '#f5e0e6ff',
 					'--OceanBlues-text-dark-color': '#60006aff',
@@ -573,4 +597,28 @@ Hooks.once('renderSettings', () => {
 	WhetstoneThemes.toggleConfigButton(
 		JSON.parse(game.settings.get('Whetstone', 'addMenuButton'))
 	);
+});
+
+// this implementation is for v1.1.2 only
+// this process will be streamlined in future versions
+Hooks.on('onThemeActivated', (themeData) => {
+	if(themeData.id !== 'OceanBlues') return;
+
+	let windowImage = game.Whetstone.settings.get('OceanBlues', 'variables.--OceanBlues-bg-image-window');
+	let sheetImage = game.Whetstone.settings.get('OceanBlues', 'variables.--OceanBlues-bg-image-sheet');
+
+	let customStyle = $('#OceanBluesCustomStyle');
+	if (!customStyle.length) {
+		$('head').append('<style id="OceanBluesCustomStyle"></style>');
+		customStyle = $('#OceanBluesCustomStyle');
+	}
+
+	customStyle.html(`
+.app {
+	background: url('/${windowImage}') repeat;
+}
+.window-app .window-content, .dnd5e.sheet .window-content {
+	background: url('/${sheetImage}') repeat;
+}`);
+
 });

lang/en.json

@@ -66,8 +66,12 @@
 
     "OCEANBLUES.OceanBlues-bg-color": "Background Color",
     "OCEANBLUES.OceanBlues-bg-colorHint": "Used in sheet headers, tinges the background.",
+    "OCEANBLUES.OceanBlues-bg-image-window": "Window Background Image",
+    "OCEANBLUES.OceanBlues-bg-image-windowHint": "Background image used for window titles and the sidebar.",
     "OCEANBLUES.OceanBlues-bg-window-blendmode": "Window Background Blend Mode",
     "OCEANBLUES.OceanBlues-bg-window-blendmodeHint": "Color blend for window titles and sidebar.",
+    "OCEANBLUES.OceanBlues-bg-image-sheet": "Sheet Background Image",
+    "OCEANBLUES.OceanBlues-bg-image-sheetHint": "Background image used for sheets and dialogs.",
     "OCEANBLUES.OceanBlues-bg-sheet-blendmode": "Sheet Background Blend Mode",
     "OCEANBLUES.OceanBlues-bg-sheet-blendmodeHint": "Color blend for sheet backgrounds.",
     "OCEANBLUES.OceanBlues-text-light-color": "Text Color - Light",

module.json

@@ -2,7 +2,7 @@
   "name": "Whetstone",
   "title": "Whetstone - Foundry Theme Manager",
   "description": "A robust theme manager for Foundry, designed to make applying and customizing themes easier for users and theme authors.",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "author": "MajorVictory",
   "esmodules": [
     "Whetstone.js"
@@ -19,7 +19,7 @@
   "packs": [],
   "url": "https://github.com/MajorVictory/Whetstone",
   "manifest": "https://raw.githubusercontent.com/MajorVictory/Whetstone/master/module.json",
-  "download": "https://github.com/MajorVictory/Whetstone/releases/download/v1.1.1/Whetstone.zip",
+  "download": "https://github.com/MajorVictory/Whetstone/releases/download/v1.1.2/Whetstone.zip",
   "compatibleCoreVersion": "0.6.6",
   "minimumCoreVersion": "0.6.6"
 }

modules/WhetstoneTheme.js

@@ -42,15 +42,36 @@ export class WhetstoneTheme extends Entity {
 		const allStyles = this.getCoreStyles().concat(systemStyles);
 		const themeVariables = this.getVariableValues();
 
-		// gather and write any overriden css variables
-		Object.keys(themeVariables).forEach((k) => {
-			WhetstoneThemes.writeVariable(k, themeVariables[k]);
-		});
-
 		// add stylesheets
 		for (let i = 0, len = allStyles.length; i < len; ++i) {
 			WhetstoneThemes.addStyle(allStyles[i]);
 		}
+
+		this.data.variables.forEach((cssVar) => {
+
+			const themeSetting = game.Whetstone.settings.settings.get(`Whetstone.themes.${this.name}.variables.${cssVar.name}`);
+
+			let writeValue = themeVariables[cssVar.name];
+
+			if (cssVar.template && typeof cssVar.template === 'function') {
+				writeValue = cssVar.template(cssVar, cssVar.name, writeValue);
+			}
+
+			WhetstoneThemes.writeVariable(cssVar.name, writeValue);
+
+			if(themeSetting.color === 'shades') {
+				Object.keys(WhetstoneThemes.getShades()).forEach((v, k) => {
+
+					writeValue = themeVariables[`${cssVar.name}-${v}`];
+
+					if (cssVar.template && typeof cssVar.template === 'function') {
+						writeValue = cssVar.template(cssVar, `${cssVar.name}-${v}`, writeValue);
+					}
+					WhetstoneThemes.writeVariable(`${cssVar.name}-${v}`, writeValue);
+				});
+			}
+		});
+		Hooks.callAll('onThemeActivated', this);
 	}
 
 	/**
@@ -81,6 +102,7 @@ export class WhetstoneTheme extends Entity {
 		for (let i = 0, len = allStyles.length; i < len; ++i) {
 			WhetstoneThemes.removeStyle(allStyles[i]);
 		}
+		Hooks.callAll('onThemeDeactivated', this);
 	}
 
 	/**
@@ -160,7 +182,7 @@ export class WhetstoneTheme extends Entity {
 				const shades = WhetstoneThemes.getShades(writeValue);
 
 				Object.keys(shades).forEach((k) => {
-					returnValues[k] = shades[k];
+					returnValues[`${cssVar.name}-${k}`] = shades[k];
 				});
 			}
 		});

modules/WhetstoneThemeConfigDialog.js

@@ -59,9 +59,10 @@ export class WhetstoneThemeConfigDialog extends FormApplication {
 			let currentValue = this._userValues[s.id] || variableValues[s.id] || game.Whetstone.settings.get(`${s.theme}.${s.tab}`, s.id);
 			if (currentValue === null || currentValue === '') currentValue = s.default;
 
-			s.isColor = ['color', 'shades'].includes(s.color);
 			s.value = this.reset ? s.default : currentValue;
+			s.isColor = ['color', 'shades'].includes(s.color);
 			s.colorData = s.isColor ? WhetstoneThemes.colorData(s.value) : null;
+			s.isImage = s.type === 'image';
 			s.type = setting.type instanceof Function ? setting.type.name : 'String';
 			s.isCheckbox = setting.type === Boolean;
 			s.isRange = setting.type === Number && s.range;
@@ -110,20 +111,18 @@ export class WhetstoneThemeConfigDialog extends FormApplication {
 		html.find('select[name="colorTheme"]').change(this._updateThemePresets.bind(this));
 		// connect color-pickers to validator
 		html.find('.ws-color-value').change(this._updateColor.bind(this));
-		// Reset Default Values
-		html.find('button[name="reset"]').click(this._onResetDefaults.bind(this));
 
 		// fix for typed colors not always triggering validation on dialog open
 		$('[data-tab="variables"]').change(this._updateVariable.bind(this));
+		$('[data-tab="variables"]').change();
 
 		// theme delete/import/export
 		html.find('button.theme-delete').click(this._themeDelete.bind(this));
 		html.find('button.theme-export').click(this._themeExport.bind(this));
 		html.find('button.theme-import').click(this._themeImport.bind(this));
 
-
-		$('[data-tab="variables"]').change();
-
+		// Reset Default Values
+		html.find('button[name="reset"]').click(this._onResetDefaults.bind(this));
 		this.reset = false;
 	}
 
@@ -220,17 +219,33 @@ export class WhetstoneThemeConfigDialog extends FormApplication {
 	 */
 	_updateVariable(event) {
 		const control = $(event.target);
+		const tab = control.data('tab');
 		const variableKey = control.attr('name');
 		if (!variableKey) return;
 
+		const settingData = game.Whetstone.settings.settings.get(
+			`Whetstone.themes.${this._theme}.${tab}.${variableKey}`
+		);
+		if (!settingData) return;
+
 		this._userValues[variableKey] = control.val();
-		WhetstoneThemes.writeVariable(variableKey, control.val(), true);
+		let writeValue = control.val();
+
+		if (settingData.template && typeof settingData.template === 'function') {
+			writeValue = settingData.template(settingData, variableKey, writeValue);
+		}
+
+		WhetstoneThemes.writeVariable(variableKey, writeValue, true);
 
 		if (control.data('shades') === 'shades') {
 			let colorShades = WhetstoneThemes.getShades(control.val());
 
 			Object.keys(colorShades).forEach((k) => {
-				WhetstoneThemes.writeVariable(`${variableKey}-${k}`, colorShades[k]);
+				writeValue = colorShades[k];
+				if (settingData.template && typeof settingData.template === 'function') {
+					writeValue = settingData.template(settingData, `${variableKey}-${k}`, writeValue);
+				}
+				WhetstoneThemes.writeVariable(`${variableKey}-${k}`, writeValue);
 			});
 		}
 	}
@@ -344,7 +359,9 @@ export class WhetstoneThemeConfigDialog extends FormApplication {
 				game.Whetstone.settings.set(themeKey, settingData.id, newValue);
 
 				if (settingData.tab === 'variables') {
-					WhetstoneThemes.writeVariable(`${settingData.id}`, newValue);
+					this._updateVariable({target:`[name="${k}"]`});
+
+					//WhetstoneThemes.writeVariable(`${settingData.id}`, newValue);
 				}
 				Hooks.callAll(`update${settingData.theme}`, settingData, newValue, current);
 			}

modules/WhetstoneThemeSettings.js

@@ -116,8 +116,13 @@ export class WhetstoneThemeSettings {
 		let value = storage.getItem(key);
 		value = value !== null ? JSON.parse(value) : setting.default;
 
+		let valueType = setting.type;
+		if (['color', 'shades', 'image'].includes(setting.type)) {
+			valueType = String;
+		}
+
 		// Cast the value to a requested type
-		return setting.type ? setting.type(value) : value;
+		return valueType ? valueType(value) : value;
 	}
 
 	/* -------------------------------------------- */

modules/WhetstoneThemes.js

@@ -48,6 +48,7 @@ export class WhetstoneThemes extends EntityCollection {
 			colorTheme: '',
 			colorThemes: [],
 			dialog: '',
+			template: '',
 			systems: {},
 			dependencies: {},
 			compatible: {},
@@ -109,6 +110,7 @@ export class WhetstoneThemes extends EntityCollection {
 			scope: 'client',
 			default: data.default || data.value,
 			color: data.type,
+			template: data.template,
 			type: (['color', 'shades'].includes(data.type)) ? String : data.type,
 			config: true
 		};
@@ -256,6 +258,7 @@ export class WhetstoneThemes extends EntityCollection {
 			contrast: '',
 			//quarter: '',
 			half: '',
+			full: '',
 			//threequarter: '',
 			//shadow: '',
 			//dark: '',
@@ -279,6 +282,7 @@ export class WhetstoneThemes extends EntityCollection {
 				contrast: WhetstoneThemes.getContrastYIQ((r*255), (g*255), (b*255)),
 				//quarter: `hsla(${h},${s}%,${l}%,0.25)`,
 				half: `hsla(${h},${s}%,${l}%,${a/2})`,
+				full: `hsla(${h},${s}%,${l}%,1)`,
 				//threequarter: `hsla(${h},${s}%,${l}%,0.75)`,
 				//shadow: `hsla(${h},${s}%,25%,1)`,
 				//dark: `hsla(${h},${s}%,25%,0.5)`,

styles/OceanBlues.css

@@ -194,8 +194,8 @@ input[type="range"]:focus,
 .window-app .window-content,
 .dnd5e.sheet .window-content {
 	color: var(--OceanBlues-text-dark-color);
-	background-blend-mode: var(--OceanBlues-bg-sheet-blendmode);
 	background-color: var(--OceanBlues-bg-color);
+	background-blend-mode: var(--OceanBlues-bg-sheet-blendmode);
 }
 
 .app.sidebar-popout .window-content,
@@ -246,4 +246,14 @@ nav.list-filters a.filter.active {
 form .notes,
 form .hint {
 	color: var(--OceanBlues-text-dark-color);
+}
+
+.filepicker .display-modes a {
+    background: var(--OceanBlues-fg-color);
+    border: 1px solid var(--OceanBlues-border-color);
+}
+
+.filepicker .display-modes a.active {
+    background: var(--OceanBlues-highlight-color);
+    color: var(--OceanBlues-text-highlight-color);
 }

styles/Whetstone-core.css

@@ -161,7 +161,7 @@ form .form-group > .ws-color-input {
 .ws-shade-preview .ws-shade-item {
 	flex: none;
 	height: 14px;
-	width: 48px;
+	width: 38px;
 	border: 1px solid;
 	border-radius: 2px;
 	padding: 0px;
@@ -182,7 +182,9 @@ form .form-group > .ws-color-input {
 	font-weight: 500;
 }
 
-.theme-presets button {
+.theme-presets button, 
+#WhetstoneCoreConfig button.file-picker,
+#WhetstoneThemeConfigDialog button.file-picker {
 	flex: 0 0 32px;
 	width: 32px;
 	height: 32px;