Headline Component
Overview
Here is an overview of the Headline class:
class Headline {
constructor (opts = false) { ... }
get_class_defaults () { ... }
get_generate_options (options) { ... }
generate (options = false) { ... }
h1 (options = false) { ... }
h2 (options = false) { ... }
h3 (options = false) { ... }
h4 (options = false) { ... }
h5 (options = false) { ... }
h6 (options = false) { ... }
}
Default Settings
The following object properties and values are all of the defaults for this class:
{
tag: 'h1',
attributes: {},
text: ['Default Headline Text']
}
Methods
The following class methods allow you to interact with the Headline 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 } from './js/modules/html_elements.js';
// create an object with your overrides specified
let headline_default_settings = {
tag: 'h2',
text: ['My New Headline']
};
// initialize the class and pass your settings as an argument
let headlines = new Headline(headline_default_settings);
// confirm your changes
console.log( headlines.defaults.attributes.tag );
</script>
get_class_defaults()
Returns an object with all of the default properties of the Headline class.
<script type="module">
// import module
import { Headline } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Headline().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 } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Headline().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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
let my_test_settings = {
tag: 'h2',
text: ['My New Headline']
};
// initialize the class and call the method
console.log( headlines.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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let headline_settings = {
tag: 'h2',
text: ['My New Headline']
};
// generate the component nodes to spec by passing your settings in
let headline = headlines.generate( headline_settings );
</script>
h1()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h1_headline_settings = {
text: ['My New h1 Headline']
};
// generate the component nodes to spec by passing your settings in
let h1_headline = headlines.h1( h1_headline_settings );
</script>
h2()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h2_headline_settings = {
text: ['My New h2 Headline']
};
// generate the component nodes to spec by passing your settings in
let h2_headline = headlines.h2( h2_headline_settings );
</script>
h3()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h3_headline_settings = {
text: ['My New h3 Headline']
};
// generate the component nodes to spec by passing your settings in
let h3_headline = headlines.h3( h3_headline_settings );
</script>
h4()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h4_headline_settings = {
text: ['My New h4 Headline']
};
// generate the component nodes to spec by passing your settings in
let h4_headline = headlines.h4( h4_headline_settings );
</script>
h5()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h5_headline_settings = {
text: ['My New h5 Headline']
};
// generate the component nodes to spec by passing your settings in
let h5_headline = headlines.h5( h5_headline_settings );
</script>
h6()
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 } from './js/modules/html_elements.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
// set your desired settings for the component elements you're about to generate
let h6_headline_settings = {
text: ['My New h6 Headline']
};
// generate the component nodes to spec by passing your settings in
let h6_headline = headlines.h6( h6_headline_settings );
</script>