Placeholder Text Component
Overview
Here is an overview of the Placeholder_text class:
class Placeholder_text {
constructor (opts = false) { ... }
get_class_defaults () { ... }
headline (index = false) { ... }
paragraph (index = false) { ... }
quote (index = false) { ... }
brand (index = false) { ... }
navigation (index = false) { ... }
node (type, index = false) { ... }
}
Default Settings
The following object properties and values are all of the defaults for this class:
{
headlines : [
'Lorem Ipsum Dolor Sit',
'Quisque Feugiat Hendrerit',
'Mauris Ut Nulla Id Libero',
'Sed Bibendum Nisi A Est Semper'
],
paragraphs : [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis bibendum augue, in facilisis lorem euismod fermentum. Maecenas non auctor magna, et tempor purus. Morbi et ex iaculis nunc tincidunt semper a eget dui. Nulla ac turpis id arcu cursus condimentum eget vel ante. Quisque vel malesuada sapien. Etiam non urna vitae urna iaculis rutrum non non sem.',
'Quisque feugiat hendrerit ornare. Ut in magna mi. Donec pellentesque viverra lorem, id vestibulum nibh. Pellentesque egestas sit amet ante sed malesuada. Suspendisse commodo facilisis nulla, a malesuada ante accumsan convallis. Sed maximus tellus eu justo ornare, varius ullamcorper nibh scelerisque. Nulla facilisi. Quisque sed eros ex. In fringilla justo odio.',
'Mauris ut nulla id libero viverra lobortis. Phasellus ut elit eu diam feugiat scelerisque. Vivamus semper nibh id turpis pharetra bibendum. In eget felis risus. Nullam at tincidunt tellus, non fermentum enim. Mauris varius suscipit lectus ac feugiat. Pellentesque pulvinar semper tempor. Vivamus ac ipsum bibendum, malesuada magna id, viverra erat. Ut aliquet neque nec hendrerit tristique.',
'Sed bibendum nisi a est semper consequat. Aliquam mi neque, blandit lobortis justo sit amet, commodo consectetur sem. Donec sagittis erat quis venenatis dignissim. Duis ac iaculis leo, viverra fringilla lacus. In hac habitasse platea dictumst. Vestibulum euismod purus et tellus congue accumsan. Sed ligula libero, finibus non neque sed, semper consectetur est. Ut tincidunt, sapien aliquam varius fermentum, diam sem consequat risus, eget molestie erat ante quis erat.'
],
quotes : [
'Nulla ac turpis id arcu cursus condimentum eget vel ante.',
'Suspendisse commodo facilisis nulla, a malesuada ante accumsan convallis.',
'In eget felis risus. Nullam at tincidunt tellus, non fermentum enim.',
'Duis ac iaculis leo, viverra fringilla lacus. In hac habitasse platea dictumst.'
],
brands : [
'Lorem Ipsum',
'Suspendisse',
'Nulla Ac Magna',
'Aliquam Vulputate'
],
navigation : [
'Link One',
'Link Two',
'Link Three',
'Link Four',
'Link Five'
]
}
Methods
The following class methods allow you to interact with the Placeholder_text 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 { Placeholder_text } from './js/modules/content_components.js';
// create an object with your overrides specified
let placeholder_default_settings = {
headlines : [
'Short Test Headline',
'A Rather Medium Sized Headline',
'This Headline Is Quite Long, As It Has Two Full-Length Sections',
'SingleWord'
]
};
// initialize the class and pass your settings as an argument
let placeholders = new Placeholder_text(placeholder_default_settings);
// confirm your changes
console.log( placeholders.defaults.headlines );
</script>
get_class_defaults()
Returns an object with all of the default properties of the Placeholder_text class.
<script type="module">
// import module
import { Placeholder_text } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Placeholder_text().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 { Placeholder_text } from './js/modules/form_components.js';
// initialize the class and call the method
console.log( new Placeholder_text().defaults );
</script>
headline()
Accepts an optional index value that allows you to specify the specific placeholder index in the defaults.headlines array and returns the string. Otherwise if no arguments are passed, a random string from the current settings of defaults.headlines array of strings is returned.
<script type="module">
// import module
import { Headline } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let headline_settings = {
text: [placeholder.headline()]
};
// generate the component nodes to spec by passing your settings in
let placeholder_headline = headlines.generate( headline_settings );
</script>
paragraph()
Accepts an optional index value that allows you to specify the specific placeholder index in the defaults.paragraphs array and returns the string. Otherwise if no arguments are passed, a random string from the current settings of defaults.paragraphs array of strings is returned.
<script type="module">
// import module
import { Paragraph } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let paragraphs = new Paragraph();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let paragraph_settings = {
text: [placeholder.paragraph()]
};
// generate the component nodes to spec by passing your settings in
let placeholder_paragraph = paragraphs.generate( paragraph_settings );
</script>
quote()
Accepts an optional index value that allows you to specify the specific placeholder index in the defaults.quotes array and returns the string. Otherwise if no arguments are passed, a random string from the current settings of defaults.quotes array of strings is returned.
<script type="module">
// import module
import { Paragraph } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let paragraphs = new Paragraph();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let quote_paragraph_settings = {
attributes: {
class : 'lead'
},
text: [placeholder.quote()]
};
// generate the component nodes to spec by passing your settings in
let placeholder_quote_paragraph = paragraphs.generate( quote_paragraph_settings );
</script>
brand()
Accepts an optional index value that allows you to specify the specific placeholder index in the defaults.brands array and returns the string. Otherwise if no arguments are passed, a random string from the current settings of defaults.brands array of strings is returned.
<script type="module">
// import module
import { Headline } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let brand_headline_settings = {
text: [placeholder.brand()]
};
// generate the component nodes to spec by passing your settings in
let brand_placeholder_headline = headlines.generate( brand_headline_settings );
</script>
navigation()
Accepts an optional index value that allows you to specify the specific placeholder index in the defaults.navigation array and returns the string. Otherwise if no arguments are passed, a random string from the current settings of defaults.navigation array of strings is returned.
<script type="module">
// import module
import { Anchor } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let anchors = new Anchor();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let nav_anchor_settings = {
text: [placeholder.navigation()]
};
// generate the component nodes to spec by passing your settings in
let nav_placeholder_anchor = anchors.generate( nav_anchor_settings );
</script>
node()
Requires a first argument that is a lowercase string matching the singular form of a default property of the Class (Acceptable strings are: 'headline', 'paragraph', 'quote', 'brand', and 'navigation'). Also accepts an optional index value as a second argument, that allows you to specify the specific placeholder index in the defaults array of the type specified in the first argument, and returns the string. Otherwise if no 2nd argument is passed, a random string from the current settings of the defaults array of the type specified in the first argument is returned.
<script type="module">
// import module
import { Headline } from './js/modules/html_elements.js';
import { Placeholder_text } from './js/modules/content_components.js';
// initialize the class and pass your settings as an argument
let headlines = new Headline();
let placeholder = new Placeholder_text();
// set your desired settings for the component elements you're about to generate
let headline_settings = {
text: [placeholder.node('headline', 0)]
};
// generate the component nodes to spec by passing your settings in
let placeholder_headline = headlines.generate( headline_settings );
</script>