Custom Select Form Group Component
Overview
Here is an overview of the Custom_select_form_group class:
class Custom_select_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',
label_wrappers : 'd-flex justify-content-between align-items-center',
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',
selects : 'custom-select',
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'
},
aria_describedby_suffix : '-help',
error_text_suffix : '-error',
success_text_suffix : '-success',
id : 'custom-select-id',
name : 'custom-select-name',
label : 'Default Custom Select',
form_text : {
help : ['Custom Select help text'],
error : ['Custom Select error text'],
success : ['Custom Select success text']
},
form_modal_text : {
heading: 'Custom Selects',
body: [{
type: 'paragraphs',
content: [ 'Custom Select elements allow a user to select a single option from a list of options.', 'Custom Selects are specifically styled elements in Bootstrap 4, which is one of our core dependencies.' ]
}]
},
options : [
{
text: 'Select an Option',
attributes: {
selected : ''
}
},
{
text: 'Option One',
attributes: {
value : 'one'
}
}
],
required : false
}
Methods
The following class methods allow you to interact with the Custom_select_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_select_form_group } from './js/modules/form_components.js';
// create an object with your overrides specified
let custom_select_default_settings = {
id : 'color-mode',
name : 'color-mode',
label : 'Select a Color Mode:',
options : [
{
text: 'Select an Option',
attributes: {
selected : ''
}
},
{
text: 'Dark Mode',
attributes: {
value : 'dark'
}
},
{
text: 'Light Mode',
attributes: {
value : 'light'
}
}
]
};
// initialize the class and pass your settings as an argument
let custom_selects = new Custom_select_form_group(custom_select_default_settings);
// confirm your changes
console.log( custom_selects.defaults.attributes.class );
</script>
get_class_defaults()
Returns an object with all of the default properties of the Custom_select_form_group class.
<script type="module">
// import module
import { Custom_select_form_group } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Custom_select_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_select_form_group } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Custom_select_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_select_form_group } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let custom_selects = new Custom_select_form_group();
let my_test_settings = {
id : 'color-mode',
name : 'color-mode',
label : 'Select a Color Mode:',
options : [
{
text: 'Select an Option',
attributes: {
selected : ''
}
},
{
text: 'Dark Mode',
attributes: {
value : 'dark'
}
},
{
text: 'Light Mode',
attributes: {
value : 'light'
}
}
]
};
// initialize the class and call the method
console.log( custom_selects.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_select_form_group } from './js/modules/form_components.js';
// initialize the class and pass your settings as an argument
let custom_selects = new Custom_select_form_group();
// set your desired settings for the component elements you're about to generate
let custom_select_settings = {
id : 'color-mode',
name : 'color-mode',
label : 'Select a Color Mode:',
options : [
{
text: 'Select an Option',
attributes: {
selected : ''
}
},
{
text: 'Dark Mode',
attributes: {
value : 'dark'
}
},
{
text: 'Light Mode',
attributes: {
value : 'light'
}
}
]
};
// generate the component nodes to spec by passing your settings in
let custom_select = custom_selects.generate( custom_select_settings );
</script>