Latest version | 3.0.3 |
---|---|
Minimum Core | 10 |
Compatible Core | 12 |
Last updated | 4 months ago |
Created | 4 years ago |
Authors | |
Languages |
English Español Português (Brasil) 日本語 |
Systems | All systems |
Project source | Project URL |
Adds color picker as settings option and form option in Foundry VTT to use as library for module developers.
Install the lib - Color Settings
(this) module.
Optional: Add a tester to your module that checks if color settings is installed and notifies the user if it isn't:
Hooks.once('ready', () => {
try{window.Ardittristan.ColorSetting.tester} catch {
ui.notifications.notify('Please make sure you have the "lib - ColorSettings" module installed and enabled.', "error");
}
});
colorSettings.js
file, css
folder and lib
folder into your project. Make sure the css
and lib
folders are in the same directory as the colorSettings.js
file. To make the integrated library work, you'll have to add/merge (with your own file locations): json
"esmodules": ["./lib/colorsettings/colorSetting.js"],
"styles": [ "./lib/colorsettings/css/colorpicker.css" ]
to your module.json
. Please do inform your users in some way that they can install colorsettings as a module so they'll have the latest version of the library instead of the included version in your module.colorSettingStub.js
file. This will show a popup if the library is detected but not enabled. Or a notification if the library is not detected at all. Both the popup and notification can be disabled by the user via a button or the settings. You will have to add this to your module.json file for it to work (with your own file locations): json
"scripts": ["./lib/colorSettingStub"]
If nothing appears when you click the setting button. Try running with the libwrapper module.
To make a new color setting, make a new ColorSetting
object:
// module key options
new window.Ardittristan.ColorSetting("myModule", "myColorSetting", {
name: "My Color Setting", // The name of the setting in the settings menu
hint: "Click on the button", // A description of the registered setting and its behavior
label: "Color Picker", // The text label used in the button
restricted: false, // Restrict this setting to gamemaster only?
defaultColor: "#000000ff", // The default color of the setting
scope: "client", // The scope of the setting
onChange: (value) => {} // A callback function which triggers when the setting is changed
})
This creates a new setting that you can read with:
game.settings.get("myModule", "myColorSetting") // Returns color code, eg: "#000000ff"
A form color picker does not require a window.Ardittristan.ColorSetting
object since it just outputs to the text input box.
To add a color picker to a text field, add is="colorpicker-input"
to the text field element. If you want the color of the text field to change according to color, you can add the data tag data-responsive-color
If you want it to be a permanently open color picker you can give it the data tag data-permanent
(can be combined)
Example:
<input type="text" name="clickable" is="colorpicker-input">
<input type="text" name="alwaysOn" is="colorpicker-input" data-permanent>
<input type="text" name="colored" is="colorpicker-input" data-responsive-color>
When the user clicks the OK button, it puts the color code in the text field in hex8 form (eg: #123456ff
)
To add a color picker to a button, add is="colorpicker-button"
to the button element. If you want the color of the button to change according to color, you can add the data tag data-responsive-color
If you want to get the button value in your form, you should add form="form_id".
Example:
<button name="clickable" is="colorpicker-button">
<button name="forForm" is="colorpicker-button" form="myFormId">
<button name="colored" is="colorpicker-button" data-responsive-color>
When the user clicks the OK button, it puts the color code in the element's value property in hex8 form (eg: #123456ff
)
Check the Changelog
To install this package, open your Foundry Setup screen and navigate to your Module tab and click the Install Module button.
From there, you can either search for the package unique name: colorsettings or copy its manifest URL:
And paste it to the input box at the bottom of your window.
You can install this package directly to your Forge account.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to deliver visitors with customized advertisements based on the pages they visited before and analyze the effectiveness of the ad campaign.