SLB: Notes – JS: Components
Requirements
- Global properties support
- Manage instances of components that can have multiple configurations
- e.g. viewers, groups, etc.
- Component instances member of container/controller object
Global Properties/Methods
Properties/Methods used by all components, etc.
- Default configuration (for component instances, etc.)
- Aggregate component instances
- Initialize/Add new component instances
Component Instances
- Instances grouped by component and stored in controller object (in array or object)
- Each component instance can have a different configuration
- Reference controller object (e.g.
SLB.View
) - Provides access to controller props/methods
Component Types
Generic
Basic component that all other components are based on.
Note: This is an internal type and no instances are directly initialized/used
Properties
attributes
(object
): Component attributes
Viewer
Content viewer (aka: the lightbox). Manages options for displaying the themes and content.
References
theme
(Theme
): Unique instance, child of predefined theme (labels, options, etc. may different from other viewers using same theme)item
(Content_Item
): Current item loaded in Viewergroup
(Group
): Current group loaded in Viewer
Properties
labels
(object
): UI Text
Group
Collection of Content Items
References
items
(array[
Content_Item]
): Content items in groupCached: Fetched from DOM initially
viewer
(Viewer
): options for displaying items group
Content Type
Supported content type with instructions on how to display content in Viewer
References
item
(Content_Item
): For access to current item data while evaluating/renderingCached: Fetched from DOM initially
Properties
template
(string
): HTML markup template for displaying content type
Content Item
Content to display in Viewer
References
group
(group
): Group item belongs toCached: Fetched from DOM initially
viewer
(Viewer
): options for displaying itemcontent_type
(Content_Type
): Handles display of item’s type
Properties
uri
(string
): Item URIattributes
(object
): Type-specific attributes (width, height, src, etc.) to be accessed by respective Content Type
Theme
HTML layout/CSS used by Viewers
References
viewer
(
Viewer
): Access to viewer options at runtimeitem
(Content_Item
): Access to item data at runtime- Also provides access to Group data
Properties
template
(string
): Raw HTML layout (with data placeholders, etc.)container
(DOM element
): DOM element containing theme output- For reusing DOM elements built for theme