Headline Group Component

Overview

Here is an overview of the Headline_group class:

    
        class Headline_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:

                                
                                    {
                                        parent: {
                                            attributes: {
                                                class: 'border-left border-width-5 border-primary pl-3 pt-2 pb-3 mb-2'
                                            }
                                        },
                                        headlines: {
                                            top: {
                                                tag: 'h1',
                                                attributes: {
                                                    class: 'mb-1'
                                                },
                                                text: ['Headline Group Top']
                                            },
                                            bottom: {
                                                tag: 'h5',
                                                attributes: {
                                                    class: 'mb-0'
                                                },
                                                text: ['Default Bottom Headline']
                                            }
                                        }
                                    }
                                
                            

Methods

The following class methods allow you to interact with the Headline_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 { Headline_group } from './js/modules/content_components.js';

                                        // create an object with your overrides specified
                                        let headline_groups_default_settings = {
                                            headlines: {
                                                top: {
                                                    text: ['My New Top Headline']
                                                },
                                                bottom: {
                                                    text: ['My New Bottom Headline']
                                                }
                                            }
                                        };

                                        // initialize the class and pass your settings as an argument
                                        let headline_groups = new Headline_group(headline_groups_default_settings);

                                        // confirm your changes
                                        console.log( headline_groups.defaults.headlines.top.text );

                                    </script>
                                
                            

get_class_defaults()

Returns an object with all of the default properties of the Headline_group class.

    
        <script type="module">
        
            // import module
            import { Headline_group } from './js/modules/form_components.js';

            // initialize the class and call the method
            console.log( new Headline_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 { Headline_group } from './js/modules/form_components.js';

            // initialize the class and call the method
            console.log( new Headline_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 { Headline_group } from './js/modules/content_components.js';

                                        // initialize the class and pass your settings as an argument
                                        let headline_groups = new Headline_group();

                                        let my_test_settings = {
                                            headlines: {
                                                top: {
                                                    text: ['My New Top Headline']
                                                },
                                                bottom: {
                                                    text: ['My New Bottom Headline']
                                                }
                                            }
                                        };

                                        // initialize the class and call the method
                                        console.log( headline_groups.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 { Headline_group } from './js/modules/content_components.js';

                                        // initialize the class and pass your settings as an argument
                                        let headline_groups = new Headline_group();

                                        // set your desired settings for the component elements you're about to generate
                                        let headline_group_settings = {
                                            headlines: {
                                                top: {
                                                    text: ['My New Top Headline']
                                                },
                                                bottom: {
                                                    text: ['My New Bottom Headline']
                                                }
                                            }
                                        };

                                        // generate the component nodes to spec by passing your settings in
                                        let headline_group = video_components.generate( headline_group_settings );

                                    </script>