npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vff-controllers

v1.0.69

Published

Videoflow controller components

Downloads

20

Readme

Table of contents

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 |

vff-video-time:
    <vff-video-time></vff-video-time>

Properties:

| Property | Type | Description | |:---------|:-------|:---------------------------------------------------------------------| | value | number | Sets or returns the value in seconds. |