Vff-controllers NPM

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:

Common events that each component listens to:

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

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

vff-image-browser:

    <vff-image-browser></vff-image-browser>

Properties

Methods

vff-color-picker:

    <vff-color-picker></vff-color-picker>

Properties

vff-select:

    <vff-select></vff-select>

Interfaces

Properties:

Property	Type	Description
options	SelectItem	SelectItem[]	Sets or returns all available options
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