-
-
Notifications
You must be signed in to change notification settings - Fork 38
DataSettings
Starting in ModernDeck 7.0, we implement a settings management system that dynamically builds the settings page, which makes it easily easy to quickly add new UI and functionality to the settings menu.
The root objects in settingsData are the tabs, which work like so:
let settingsData = {
tabOne: {
tabName: "Tab 1",
options: {
// options here
}
},
tabTwo: {
tabName: "Tab 2",
enabled: false,
options: {
// options here
}
}
}
Contains information regarding the tab.
true = Tab is displayed to user.
false = Tab is not displayed to user.
Default: true
The string is how the tab is displayed to the user, unlike the internal tab Id.
This indicates to the preference loader to use custom UI instead of the standard preference builder. In ModernDeck, this is used for the About page and Mutes page.
Subobject that contains each preference, in order of appearance, within the tab.
If this tab is an enum page, pass along options as an empty object {}
See below for how to implement options.
Preference options are flexible and allow for a variety of configurations to help accommodate any sort of preference type.
Example of a basic, native ModernDeck preference implemented in the system.
dockedmodals: {
headerBefore: "Behavior",
title: "Use docked modals",
type: "checkbox",
activate:{
disableStylesheet:"undockedmodals"
},
deactivate: {
enableStylesheet:"undockedmodals"
},
settingsKey: "mtd_dockedmodals",
default: false
}
Example of an original TweetDeck setting implemented in the system.
sensitive: {
title: "Display media that may contain sensitive content",
type: "checkbox",
activate: {
func: () => {
TD.settings.setDisplaySensitiveMedia(true);
}
},
deactivate: {
func: () => {
TD.settings.setDisplaySensitiveMedia(false);
}
},
queryFunction: () => {
return TD.settings.getDisplaySensitiveMedia();
}
}
The name of the option should reflect what the option does. Ensure that you're using a unique name for each option.
This actionParser is called when a preference needs to be activated. This can occur in two main situations.
If type is "checkbox",
- When the page is first started, and the box is checked
- When the user checks the box in the Settings window.
If type is NOT "checkbox",
- (Excludes
type "button"andtype "link") When the page is first started, also passing on the current setting to the activateFunc, if applicable. - The preference was activated in the Settings menu. How this works depends on the type.
type="dropdown"
After an option in the dropdown menu is selected.
type="textbox" and type="textarea"
After the user has finished writing text and unfocused the textbox/textarea.
type="slider"
After the user has let go of the slider in a new position.
type="button" and type="link"
After the user has pressed the button or link
Adds classes to the specified input itself, primarily for styling purposes.
option.deactivate only works when option.type is checkbox
The actionParser is called when the checkbox is deactivated
This specifies the value it is set to if there is no saved setting value for it before.
Hides the option from the menu entirely, similar to tab.enabled
true = option is displayed to user.
false = option is not displayed to user.
If not specified, it will default to true.
This will create a header before this preference with the specified String. This is great for dividing preferences into groups for better clarity.
A function that is called after the preference is initialised, passing along 1 argument into the function, the (jquery) input value that the user is able to interface with, depending on option.type.
A supplemental text label for option.types "button" and "link"
Object that specifies the options for the dropdown items.
Example:
options:{
default:{value:"default",text:"Default"},
complete: {
name:"Complete Themes",
children: {
paper:{value:"paper",text:"Paperwhite"},
amoled:{value:"amoled",text:"AMOLED"}
}
}
In the case of a primary, non-group choice, you'll use String value and String text.
For groups, it works like so:
complementary:{
name:"Complementary Themes",
children:{
grey:{value:"grey","text":"Grey"},
red:{value:"red","text":"Red"},
pink:{value:"pink","text":"Pink"},
orange:{value:"orange","text":"Orange"},
violet:{value:"violet","text":"Violet"},
teal:{value:"teal","text":"Teal"},
green:{value:"green","text":"Green"},
yellow:{value:"yellow","text":"Yellow"},
cyan:{value:"cyan","text":"Cyan"},
black:{value:"black","text":"Black"},
blue:{value:"blue","text":"Blue"},
}
}
name becomes the name of the option group.
The title is what the preference is called. It is the button text in the case of option.type being "button", the text next to a "checkbox", "slider", "dropdown", "textbox", or "textarea".
It is unused on option.type = "link", see option.label, but a title is required in all other cases.
This string determines the type of option it is listed as.
"button"
A button that can be pressed.
"checkbox"
A checkbox that can be checked on or off.
"dropdown"
A selector option that can select from a list of specified options.
"link"
A link that can be pressed.
"slider"
A slider option that can select from a range of numerical values.
"textarea"
A large field for text.
"textbox"
A smaller field for text.
This function is used to query whether or not a checkbox preference is enabled, especially for querying bridged TweetDeck settings.
The settings key of the stored value. In ModernDeck, these usually start with "mtd_".
This isn't required, for example, if you are using it to set native TweetDeck preferences.
For option.activate and option.deactivate, there is an action parser that can be used to create action sequences, some of which even without any additional code.
It can be validated by testing out a custom setting or by calling the parseAction(actions) function.
Enables a stylesheet extension with the specified name
Disables a stylesheet extension with the specified name
Adds the specified class to the <html> element
Removes the specified class from the <html> element
Custom function to enable custom preference enable/disable procedures.
This passes 1 argument to the function, the currently selected option.
Tells the action parser to process actions actions, also passing along selectedOption in case it comes across a func action.