MOLECULAR COMPONENTS
Custom Checkboxes Switch Gated Form Group Component
DEFAULT EXAMPLE:
Overview
Here is an overview of the Custom_checkboxes_switch_gated_form_group class:
class Custom_checkboxes_switch_gated_form_group {
constructor (opts = false) { ... }
get_class_defaults () { ... }
get_generate_options (options) { ... }
generate (options = false) { ... }
}
Default Settings
The following object properties and values are all of the defaults for this class:
{
classes : {
form_groups : 'form-group mb-4',
bordered_label_wrappers : 'd-flex justify-content-between align-items-center border-bottom mb-2',
labels : 'mb-1',
label_buttons : 'btn btn-sm btn-link pb-1 pl-3 pr-0',
label_button_icons : 'fas fa-question-circle text-primary',
checkbox_parents : 'custom-control custom-checkbox',
checkboxes : 'custom-control-input',
checkbox_labels : 'custom-control-label',
form_text_parents : 'text-left pr-2',
form_help_texts : 'form-text text-muted',
form_error_texts : 'd-none form-text text-danger',
form_success_texts : 'd-none form-text text-success',
switch_parents : 'custom-control custom-switch',
switches : 'custom-control-input',
switch_labels : 'custom-control-label',
switch_collapses : 'collapse',
checkboxes_cards : 'card card-body bg-transparent border-0 pt-2 pb-0',
all_buttons_parents : 'd-flex',
check_all_buttons : 'btn btn-sm btn-link text-decoration-none pt-2 pl-0',
uncheck_all_buttons : 'btn btn-sm btn-link text-decoration-none pt-2'
},
aria_describedby_suffix : '-help',
error_text_suffix : '-error',
success_text_suffix : '-success',
switch_collapse_suffix : '-collapse',
group_id : 'default-switch-gated-checkboxes',
label : 'Default Switch Gated Checkboxes',
initial_switch_checked_state : false,
initial_collapse_visible_state : false,
autocomplete_disabled : true,
clear_checkboxes_on_collapse : true,
enable_check_all : true,
enable_uncheck_all : true,
check_all_suffix : '-check-all',
uncheck_all_suffix : '-uncheck-all',
check_all_button_text : 'Check All',
uncheck_all_button_text : 'Uncheck All',
enable_on_collapse_action : true,
on_collapse_action : 'uncheckall', // strict value: "uncheckall" or "checkall" to get expected action upon collapse
switch : {
suffix : '-switch',
initial_label : 'Initial Switch Label',
changed_label : 'Changed Switch Label',
// switch name attribute should be variable from the group_id value
// that's used as the id for the switch
// along with the switch.suffix value!
name : 'switch-default-name',
value : ''
},
form_text : {
help : ['Default Switch Gated Checkboxes help text'],
error : ['Default Switch Gated Checkboxes error text'],
success : ['Default Switch Gated Checkboxes success text']
},
form_modal_text : {
heading: 'Default Switch Gated Checkboxes',
body: [{
type: 'paragraphs',
content: [ 'The Default Switch Gated Checkboxes Component is a complex component offering end users a primary toggle with two different switch states and two different text labels states. The toggle state then determines the visibility of a collapsable set of standard checkboxes.', 'This UI pattern is especially useful for privacy settings in an application. For example, you may want a user to have a 1-click UI element to make data private, but also leverage the same UI element to serve as a transitional interaction leading to a list of specific options, to give the user the ability to control the visibility of a spceific data point across a variety of contexts in your application.' ]
}]
},
checkboxes : [
{
label: 'Default Checkbox 1',
attributes: {
id : 'default-switch-checkbox-1',
name : 'default-switch-checkbox-1',
value : 'value1'
}
}
]
}
Methods
The following class methods allow you to interact with the Custom_checkboxes_switch_gated_form_group class object.
constructor(opts)
Class constructor with an optional argument expecting an object with class-specific properties/values. Any matching properties passed will override the default values. The constructor function exposes a .defaults object containing various default settings for the component.
<script type="module">
// import module
import { Custom_checkboxes_switch_gated_form_group } from './js/modules/form_components.js';
// create an object with your overrides specified
let gated_checks_default_settings = {
group_id : 'privacy-settings',
label : 'Privacy settings',
initial_switch_checked_state : true,
initial_collapse_visible_state : false,
switch : {
initial_label : 'Privacy Mode is ON',
changed_label : 'Privacy Mode is OFF',
name : 'privacy-enabled'
},
checkboxes : [
{
label: 'Privacy Setting One',
attributes: {
id : 'privacy-setting-1',
name : 'privacy-setting-1',
value : 'privacy1'
}
},
{
label: 'Privacy Setting Two',
attributes: {
id : 'privacy-setting-2',
name : 'privacy-setting-2',
value : 'privacy2'
}
}
]
};
// initialize the class and pass your settings as an argument
let gated_checkss = new Custom_checkboxes_switch_gated_form_group(gated_checks_default_settings);
// confirm your changes
console.log( gated_checkss.defaults.attributes.class );
</script>
get_class_defaults()
Returns an object with all of the default properties of the Custom_checkboxes_switch_gated_form_group class.
<script type="module">
// import module
import { Custom_checkboxes_switch_gated_form_group } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Custom_checkboxes_switch_gated_form_group().get_class_defaults() );
</script>
Conversely, you can also access the Class defaults directly after initializing the class, and without the get_class_defaults() method:
<script type="module">
// import module
import { Custom_checkboxes_switch_gated_form_group } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Custom_checkboxes_switch_gated_form_group().defaults );
</script>
get_generate_options()
Requires an object to be passed as an argument. The argument will override the default settings of the class, but ONLY in the scope of this method. This method is mainly provided for debugging purposes.
<script type="module">
// import module
import { Custom_checkboxes_switch_gated_form_group } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let gated_checkss = new Custom_checkboxes_switch_gated_form_group();
let my_test_settings = {
group_id : 'privacy-settings',
label : 'Privacy settings',
initial_switch_checked_state : true,
initial_collapse_visible_state : false,
switch : {
initial_label : 'Privacy Mode is ON',
changed_label : 'Privacy Mode is OFF',
name : 'privacy-enabled'
},
checkboxes : [
{
label: 'Privacy Setting One',
attributes: {
id : 'privacy-setting-1',
name : 'privacy-setting-1',
value : 'privacy1'
}
},
{
label: 'Privacy Setting Two',
attributes: {
id : 'privacy-setting-2',
name : 'privacy-setting-2',
value : 'privacy2'
}
}
]
};
// initialize the class and call the method
console.log( gated_checkss.get_generate_options( my_test_settings ) );
</script>
generate()
Takes an optional argument expecting an object with class-specific properties/values. Any matching properties passed will override the default values. This method returns a node list of DOM element(s), configured according to the class defaults and any overridden settings.
<script type="module">
// import module
import { Custom_checkboxes_switch_gated_form_group } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let gated_checkss = new Custom_checkboxes_switch_gated_form_group();
// set your desired settings for the component elements you're about to generate
let gated_checks_settings = {
group_id : 'privacy-settings',
label : 'Privacy settings',
initial_switch_checked_state : true,
initial_collapse_visible_state : false,
switch : {
initial_label : 'Privacy Mode is ON',
changed_label : 'Privacy Mode is OFF',
name : 'privacy-enabled'
},
checkboxes : [
{
label: 'Privacy Setting One',
attributes: {
id : 'privacy-setting-1',
name : 'privacy-setting-1',
value : 'privacy1'
}
},
{
label: 'Privacy Setting Two',
attributes: {
id : 'privacy-setting-2',
name : 'privacy-setting-2',
value : 'privacy2'
}
}
]
};
// generate the component nodes to spec by passing your settings in
let gated_checks = gated_checkss.generate( gated_checks_settings );
</script>