presentation-components
Version:
The Augmented.js Next - Presentation Components Module.
346 lines (214 loc) • 6.76 kB
Markdown
# presentation-components
Augmented.js Presentation Simple Components Module
# API
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
### Table of Contents
- [Article](#article)
- [Parameters](#parameters)
- [Examples](#examples)
- [header](#header)
- [Parameters](#parameters-1)
- [Properties](#properties)
- [footer](#footer)
- [Parameters](#parameters-2)
- [Properties](#properties-1)
- [body](#body)
- [Parameters](#parameters-3)
- [Properties](#properties-2)
- [sections](#sections)
- [Parameters](#parameters-4)
- [Properties](#properties-3)
- [addSection](#addsection)
- [Parameters](#parameters-5)
- [Examples](#examples-1)
- [clearSections](#clearsections)
- [render](#render)
- [Card](#card)
- [Parameters](#parameters-6)
- [style](#style)
- [Parameters](#parameters-7)
- [style](#style-1)
- [Parameters](#parameters-8)
- [body](#body-1)
- [Parameters](#parameters-9)
- [render](#render-1)
- [remove](#remove)
- [Footer](#footer-1)
- [Parameters](#parameters-10)
- [body](#body-2)
- [Parameters](#parameters-11)
- [render](#render-2)
- [Header](#header-1)
- [Parameters](#parameters-12)
- [title](#title)
- [Parameters](#parameters-13)
- [Properties](#properties-4)
- [subTitle](#subtitle)
- [Parameters](#parameters-14)
- [Properties](#properties-5)
- [render](#render-3)
- [remove](#remove-1)
- [Manager](#manager)
- [Parameters](#parameters-15)
- [manageComponent](#managecomponent)
- [Parameters](#parameters-16)
- [unmanageComponent](#unmanagecomponent)
- [Parameters](#parameters-17)
- [SelectBox](#selectbox)
- [Parameters](#parameters-18)
- [render](#render-4)
- [remove](#remove-2)
- [addOption](#addoption)
- [Parameters](#parameters-19)
- [Examples](#examples-2)
## Article
**Extends DecoratorView**
An article class for setting up a 'page'<br/>
Supported options are:<br/>
<ul>
<li>name - The name of the article view</li>
<li>el - The mount point</li>
<li>style - The style class</li>
<li>header - The header markup</li>
<li>headerEl - The header mount point</li>
<li>footer - The footer markup</li>
<li>footerEl - The footer mount point</li>
<li>body - The body markup</li>
<li>bodyEl - The body mount point (will generate a div)</li>
<li>sections - array of sections to prefill (see addSection API for format)</li>
</ul>
### Parameters
- `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Options to pass to the constructor
### Examples
```javascript
const article = new Presentation.Component.Article(
{ "el": "#mount", "header": "html", "footerEl": "#foot" });
```
### header
Header property
#### Parameters
- `header`
#### Properties
- `header` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
### footer
Footer for the article
#### Parameters
- `footer`
#### Properties
- `footer` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
### body
The body content of the card (supports HTML)
#### Parameters
- `body`
#### Properties
- `body` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
### sections
The section array
#### Parameters
- `sections`
#### Properties
- `sections` **[array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)**
### addSection
Add a section object to the article
#### Parameters
- `section` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** a section object
#### Examples
```javascript
Section Object format:
{
"id" "something",
"body" "html",
"class" "something"
}
```
### clearSections
Clear the sections
### render
render - render the article
## Card
**Extends DecoratorView**
A card view - simple panel/dialog-like panel
### Parameters
- `options`
### style
body property - the body of the card
#### Parameters
- `style`
### style
style property - the style
#### Parameters
- `style`
### body
The body content of the card (supports HTML)
#### Parameters
- `body`
### render
render - render the card
### remove
remove
## Footer
**Extends DecoratorView**
A Footer Component
### Parameters
- `options`
### body
The body content of the card (supports HTML)
#### Parameters
- `body`
### render
render - render the footer
## Header
**Extends DecoratorView**
A Header Component
### Parameters
- `options`
### title
#### Parameters
- `title`
#### Properties
- `title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** A title property
### subTitle
#### Parameters
- `subTitle`
#### Properties
- `subTitle` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** A subTitle property
### render
render - render the header
### remove
Remove the Header
Returns **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Returns the view context ('this')
## Manager
**Extends Mediator**
A Component Manager or Mediator
### Parameters
- `options`
**Meta**
- **deprecated**: Use Mediator
### manageComponent
Manages a component (colleague)
#### Parameters
- `component` **View** A component or view to manage
### unmanageComponent
Unmanages a component (colleague)
#### Parameters
- `component` **View** A component or view to manage
## SelectBox
**Extends DecoratorView**
A SelectBox
### Parameters
- `options` (optional, default `{}`)
### render
Render the SelectBox
Returns **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Returns the view context ('this')
### remove
remove
### addOption
Adds an option to the select
#### Parameters
- `label` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** label of the option
- `value` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** value of the option
- `selected` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** selected or not
#### Examples
```javascript
addOption({"dog", 0, true});
```