add translation support

.github/workflows/main.yml

@@ -1,6 +1,9 @@
 name: colorSettings CI
 
-on: [push]
+on:
+ push:
+ branches:
+ - master
 
 jobs:
  build:
@@ -11,7 +14,7 @@ jobs:
  shell: bash
  id: get-version
  run: echo "::set-output name=version::$(node ./.github/workflows/get-version.js)"
- - run: zip -r ./colorSettings.zip module.json colorSetting.js css/ lib/ # Add folders/files here
+ - run: zip -r ./colorSettings.zip module.json colorSetting.js css/ lib/ lang/  # Add folders/files here
  - name: Create Release # Create an additional release for this version
  id: create_versioned_release
  uses: ncipollo/release-action@v1
@@ -34,4 +37,4 @@ jobs:
  prerelease: false
  token: ${{ secrets.GITHUB_TOKEN }}
  artifacts: './module.json,./colorSettings.zip' # don't forget to rename module zip thing
- tag: latest
+ tag: latest

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.5.1
+
+* Add optional translation support.
+
 ## 2.5.0
 
 * Added stub method of including library.
@@ -82,7 +86,7 @@
 
 * Added color picker to use in forms.
 * Fixed settings not being reset to default when button pressed.
-* Fixed issue when one setting name was the same as the beginning of another setting name. 
+* Fixed issue when one setting name was the same as the beginning of another setting name.
 ~~Will fix tidyUI styling issues later, it's 4am and I'm tired~~
 
 ## 2.1.1

README.md

@@ -1,4 +1,5 @@
 ![GitHub All Releases](https://img.shields.io/github/downloads/ardittristan/VTTColorSettings/total)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-Green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TF3LJHWV9U7HN)
 
 # VTTColorSettings
 
@@ -14,7 +15,7 @@ Adds color picker as settings option and form option in Foundry VTT to use as li
 
 Install the `lib - Color Settings` (this) module.
 
-*Optional:* 
+*Optional:*
 Add a tester to your module that checks if color settings is installed and notifies the user if it isn't:
 
 ```javascript

colorSetting.js

@@ -9,33 +9,24 @@ var data = {};
 function runInit() {
 
  // monkeypatch the onclick event of settings to allow for more settings types
+ const onClickSubmenuWrapper = function (event) {
+ event.preventDefault();
+ const menu = game.settings.menus.get(event.currentTarget.dataset.key);
+ if (!menu) return ui.notifications.error(compatLocalize("colorSettings.menuError", "No submenu found for the provided key"));
+ try {
+ const app = new menu.type();
+ return app.render(true);
+ } catch {
+ const app = new menu.type(event);
+ return app.render(true);
+ }
+ };
+
  if (typeof libWrapper === "function") {
- libWrapper.register('colorsettings', 'SettingsConfig.prototype._onClickSubmenu', function (event) {
- event.preventDefault();
- const menu = game.settings.menus.get(event.currentTarget.dataset.key);
- if (!menu) return ui.notifications.error("No submenu found for the provided key");
- try {
- const app = new menu.type();
- return app.render(true);
- } catch {
- const app = new menu.type(event);
- return app.render(true);
- }
- }, 'OVERRIDE');
+ libWrapper.register('colorsettings', 'SettingsConfig.prototype._onClickSubmenu', onClickSubmenuWrapper, 'OVERRIDE');
  } else {
  // IMPORTANT: most likely to have compatibility issues with other modules
- SettingsConfig.prototype._onClickSubmenu = function (event) {
- event.preventDefault();
- const menu = game.settings.menus.get(event.currentTarget.dataset.key);
- if (!menu) return ui.notifications.error("No submenu found for the provided key");
- try {
- const app = new menu.type();
- return app.render(true);
- } catch {
- const app = new menu.type(event);
- return app.render(true);
- }
- };
+ SettingsConfig.prototype._onClickSubmenu = onClickSubmenuWrapper;
  }
 }
 
@@ -278,7 +269,7 @@ class colorPickerInput extends HTMLInputElement {
  _makePicker(pickerClass) {
  this.picker = new Picker();
 
- // check if an actual value 
+ // check if an actual value
  if (this.value != undefined && this.value.length != 0 && this.value.startsWith("#") && this.value.match(/[^A-Fa-f0-9#]+/g) == null) {
  this.picker.setColor(this.value.padEnd(9, "f").slice(0, 9), true);
  }
@@ -304,7 +295,7 @@ class colorPickerInput extends HTMLInputElement {
  }
  });
  if (this.picker._domCancel) {
- this.picker._domCancel.textContent = " Eye Dropper";
+ this.picker._domCancel.textContent = " " + compatLocalize("colorSettings.dropper", "Eye Dropper");
  this.picker._domCancel.style.paddingBottom = 0;
  this.picker._domCancel.style.paddingTop = 0;
  this.picker._domCancel.onclick = () => {
@@ -316,7 +307,7 @@ class colorPickerInput extends HTMLInputElement {
  jQuery(this.picker.domElement).insertAfter(this).addClass(pickerClass);
 
  jQuery(this.picker.domElement).find("div.picker_cancel").each(function () {
- if (this.firstChild.firstChild.textContent === " Eye Dropper") {
+ if (this.firstChild.firstChild.textContent === " " + compatLocalize("colorSettings.dropper", "Eye Dropper")) {
  let faIcon = document.createElement("i");
  faIcon.className = "fas fa-eye-dropper";
  this.firstChild.prepend(faIcon);
@@ -355,7 +346,7 @@ class colorPickerButton extends HTMLButtonElement {
  _makePicker() {
  this.picker = new Picker();
 
- // check if an actual value 
+ // check if an actual value
  if (this.value != undefined && this.value.length != 0 && this.value.startsWith("#") && this.value.match(/[^A-Fa-f0-9#]+/g) == null) {
  this.picker.setColor(this.value.padEnd(9, "f").slice(0, 9), true);
  }
@@ -385,7 +376,7 @@ class colorPickerButton extends HTMLButtonElement {
  jQuery(this.picker.domElement).insertAfter(this);
 
  if (this.picker._domCancel) {
- this.picker._domCancel.textContent = " Eye Dropper";
+ this.picker._domCancel.textContent = " " + compatLocalize("colorSettings.dropper", "Eye Dropper");
  this.picker._domCancel.style.paddingBottom = 0;
  this.picker._domCancel.style.paddingTop = 0;
  this.picker._domCancel.onclick = () => {
@@ -394,7 +385,7 @@ class colorPickerButton extends HTMLButtonElement {
  }
 
  jQuery(this.picker.domElement).find("div.picker_cancel").each(function () {
- if (this.firstChild.firstChild.textContent === " Eye Dropper") {
+ if (this.firstChild.firstChild.textContent === " " + compatLocalize("colorSettings.dropper", "Eye Dropper")) {
  let faIcon = document.createElement("i");
  faIcon.className = "fas fa-eye-dropper";
  this.firstChild.prepend(faIcon);
@@ -477,7 +468,7 @@ async function _settingsWatcher(_this) {
  jQuery(settingsEvent.element[0].lastElementChild.firstElementChild.elements.namedItem("reset")).on('click', () => {
  if (window.Ardittristan.resettingSettings == undefined || window.Ardittristan.resettingSettings === false) {
  window.Ardittristan.resettingSettings = true;
- ui.notifications.notify('Color pickers will reset on save');
+ ui.notifications.notify(compatLocalize("colorSettings.reset", "Color pickers will reset on save"));
  }
  // check if save button is pressed
  jQuery(settingsEvent.element[0].lastElementChild.firstElementChild.elements.namedItem("submit")).on('click', () => {
@@ -532,13 +523,25 @@ function getRunningScript() {
  };
 }
 
+/**
+ * @param {String} identifier
+ * @param {String} fallback
+ */
+function compatLocalize(identifier, fallback) {
+ const translation = game.i18n.localize(identifier)
+ if (translation === identifier) {
+ return fallback;
+ }
+ return translation;
+}
+
 Hooks.once('init', function () {
  game.settings.register("colorsettings", "showWarning", {
  config: true,
  type: Boolean,
  default: true,
- name: "Show Error",
- hint: "Enable or disable error if main module missing."
+ name: compatLocalize("colorSettings.showError", "Show Error"),
+ hint: compatLocalize("colorSettings.showErrorHint", "Enable or disable error if main module missing.")
  });
  /** @type {String} */
  const scriptLocation = getRunningScript()();
@@ -555,8 +558,8 @@ Hooks.once('init', function () {
  Hooks.once("canvasReady", () => {
  if (game.user.isGM && game.settings.get("colorsettings", "autoEnable")) {
  Dialog.confirm({
- title: "Enable Color Settings module?",
- content: "<p>You seem to have Color Settings installed already, do you want to enable it?</p>",
+ title: compatLocalize("colorSettings.enableDialog", "Enable Color Settings module?"),
+ content: "<p>" + compatLocalize("colorSettings.enableDialogContent", "You seem to have Color Settings installed already, do you want to enable it?") + "</p>",
  yes: () => game.settings.set("core", ModuleManagement.CONFIG_SETTING, {
  ...game.settings.get("core", ModuleManagement.CONFIG_SETTING),
  ...{ colorsettings: true }
@@ -572,7 +575,7 @@ Hooks.once('init', function () {
 
  Hooks.once('ready', function () {
  if (game.settings.get("colorsettings", "showWarning")) {
- ui.notifications.notify("A module is running a backup color picker library. For best results, please install and enable the Lib-Color Settings module.", "warning");
+ ui.notifications.notify(compatLocalize("colorSettings.backupWarning", "A module is running a backup color picker library. For best results, please install and enable the Lib-Color Settings module."), "warning");
  }
  });
  console.log("ColorSettings | initializing fallback mode");

lang/en.json

@@ -0,0 +1,12 @@
+{
+ "colorSettings.menuError": "No submenu found for the provided key",
+ "colorSettings.dropper": "Eye Dropper",
+ "colorSettings.reset": "Color pickers will reset on save",
+ "colorSettings.showError": "Show Error",
+ "colorSettings.showErrorHint": "Enable or disable error if main module missing.",
+ "colorSettings.enableDialog": "Enable Color Settings module?",
+ "colorSettings.enableDialogContent": "You seem to have Color Settings installed already, do you want to enable it?",
+ "colorSettings.backupWarning": "A module is running a backup color picker library. For best results, please install and enable the Lib-Color Settings module.",
+ "colorSettings.init": "ColorSettings | initializing",
+ "colorSettings.fallBackInit": "ColorSettings | initializing fallback mode"
+}

module.json

@@ -2,9 +2,16 @@
  "name": "colorsettings",
  "title": "lib - Color Settings",
  "description": "Library that allows modules to add color settings and forms.",
- "version": "2.5.0",
+ "version": "2.5.1",
  "author": "ardittristan#0001",
  "esmodules": ["colorSetting.js"],
+ "languages": [
+ {
+ "lang": "en",
+ "name": "English",
+ "path": "lang/en.json"
+ }
+ ],
  "socket": true,
  "url": "https://github.com/ardittristan/VTTColorSettings",
  "manifest": "https://raw.githubusercontent.com/ardittristan/VTTColorSettings/master/module.json",