README
Table of contents
- Videoflow Controllers Library
- Videoflow Controllers
- Loading dependencies
- Starter Template
- How to use this library
- Using Controllers
- Available Controllers
Videoflow Controllers Library
This library provides HTML components and Layout helper classes that will allow you to create your Videoflow controllers out of the box.
Videoflow Controllers
Videflow controllers allow you to manage your visual engagement data in most intuitive way.
Controllers are HTML elements and can be simply used inside you're HTML.
Please note, VFF controllers are Custom Elements and can not be self closing tags.
The proper way of using a component is by always writing the opening and the closing tag:
<vff-custom-component></vff-custom-component>
Loading dependencies
Javascript
<script type="module" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.esm.js"></script>
<script nomodule="" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.js"></script>
CSS
<link rel="stylesheet" href="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.css"/>
Starter Template
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Videflow Controllers Starter</title>
<!-- Videoflow CSS -->
<link rel="stylesheet" href="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.css"/>
<!-- Videoflow Controllers -->
<script type="module" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.esm.js"></script>
<script nomodule="" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.js"></script>
</head>
<body>
<vff-tabs default="section1">
<vff-tab for="section1">First</vff-tab>
<vff-tab for="section2">Second</vff-tab>
<vff-tab for="section3">Third</vff-tab>
</vff-tabs>
<div id="section1" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
<div id="section2" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
<div id="section3" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
</body>
</html>
How to use this library
Basic Layout
A section must have a ctrl-container class html<div id="section1" class="ctrl-container">
This is needed in order to control section visibility and give a section the initial CSS it needs.
Each direct descendant of a ctrl-container must have in ctrl-container-row class.
<div id="section1" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
Tabs
Tabs used to control section visibility.
Each tab has a for attribute : html<vff-tab for="section_id">.
This attribute specifies which content section a tab is bound to.
<vff-tabs>
<vff-tab for="section1">First</vff-tab>
</vff-tabs>
Sections
Sections used to visually divide controllers, each section holds controllers needed for a specific engagement screen.
In order to allow a section to be bound to a tab it must have the same id=section_id as the tab.
<div id="section1" class="ctrl-container"></div>
Classes
.ctrl-container
.ctrl-container-row
.ctrl-container-block
Using Controllers
Common events that each component fires in different stages of it's life cycle:
| Event | Payload | Description |
|---|---|---|
| vff:init | {data, target: HTMLElement} | Right after a controller has been attached to DOM. |
| vff:change | {data, target: HTMLElement} | Each time when a change from user interface of a controller is received. |
| vff:remove | {data, target: HTMLElement} | Each time a controller has been detached from DOM |
Common events that each component listens to:
| Event | Payload | Description |
|---|---|---|
| vff:update | {dataAttrName: string, dataAttrValue: string, value} | Each component can be updated with new data. |
Available Controllers
After setting up the basic layout, you can start declaring which controllers your layout will include.
vff-checkbox:
<vff-checkbox>You can have you're text here!</vff-checkbox>
Properties
| Property | Value | Description |
|---|---|---|
| value | boolean | Sets or returns the checked state of a checkbox |
vff-radio-button:
<vff-radio-button name="radio-group">Radio1</vff-radio-button>
<vff-radio-button name="radio-group">Radio2</vff-radio-button>
<vff-radio-button name="radio-group">Radio3</vff-radio-button>
Properties
| Property | Value | Description |
|---|---|---|
| name | string | Sets or returns the value of the name attribute of the radio button |
| value | string | Sets or returns the value of the value attribute of the radio button |
| checked | boolean | Sets or returns the checked state of a radio button |
vff-image-browser:
Image Browser provides drag’n’drop and upload button file uploads with image previews.
<vff-image-browser></vff-image-browser>
Properties
| Property | Value | Description |
|---|---|---|
| value | string | Sets and returns image url for preview only. Previed image will not be registered in selectedFiles. |
| selectedFiles | [File] | Returns array of File objects that represent selected file or files. |
| error | string | Set related error messages. Error text is cleared after 10 secs or on click. |
| progress | boolean | Set this property to enable progress bar UI. |
| progress-status | int [0-100] | Set to control the progress bar value. |
Methods
| Method | Arguments | Returns | Description |
|---|---|---|---|
| addFiles | [File] | n/a | Sets File objects that represent selected file or files |
vff-color-picker:
This component is a wrapper of color pickr by Simonwep
<vff-color-picker></vff-color-picker>
Properties
| Property | Value | Description |
|---|---|---|
| value | string | Sets or returns color representation in HEX(A) |
vff-select:
<vff-select></vff-select>
Interfaces
| Name | Description |
|---|---|
| SelectItem | { key: 'string', value: 'string' }. |
Properties:
| Property | Type | Description |
|---|---|---|
| options | SelectItem | SelectItem[] |
| multiple | boolean | Enables multiple selection |
| value | SelectItem[] | Sets or returns selected options |
Important: When setting the options, the key must be a unique value to avoid unexpected behaviour.
vff-text:
<vff-text></vff-text>
Properties:
| Property | Type | Description |
|---|---|---|
| multiline | boolean | Defines a multi-line text input control |
| placeholder | string | Specifies a short hint that describes the expected value of a text area |
| value | string | Sets or returns the contents of a text area |
vff-range:
<vff-range></vff-range>
Properties:
| Property | Type | Description |
|---|---|---|
| max | number | Sets or returns the maximum value allowed |
| min | number | Sets or returns the minimum value allowed |
| step | number | Sets or returns the number of intervals of a slider control |
| value | number | Sets or returns the value of a slider control |
vff-video-time:
<vff-video-time></vff-video-time>
Properties:
| Property | Type | Description |
|---|---|---|
| value | number | Sets or returns the value in seconds. |