README

Viewly

A Javascript framework created by Speakly

Features

Base
Placeholders
Snippets
Notice
Self
Data
Form
Localization
Routing
Store
View
Form Validation

Shortcuts

There are some shortcuts you can access with the V property:

V(element).on(event, callback)
V.undefined(value)
V.type(value, type)
V.is(value)
V.format(content)
V.self
V.dev()
V.on(event, callback)
V.data(key, value)
V.store(key, value)

If translation plugin is being used and the translation json is provided in the config:

V.locale(key)

Base

<script>
    viewly.add('view_name', {
        config: {
            view: {lock: true}, // Should the view start locked
            footer: {active: 'view_name'} // Set the active footer item
        },
        init: function() {
            // This function is only called once when the view is loaded for the first time.
        },
        show: function() {
            // This function is called every time when the view appears
        },

        hide: function() {
            // This function is called every time when the view disappears
        }
    });
</script>

<style>
    /* CSS */
</style>

<div id="{id}" class="{{{data}.display}} view" header="Header text">
     <!-- HTML -->
</div>

Placeholders

We have a couple of placeholders in viewly that can be used in your views to create a custom id of your current view.

<!-- The view name for this example = welcome -->
{code} = welcome
{view} = welcome
{id} = view_welcome
{data} = view.welcome
{style} = #welcome
{t9n} = t9n.welcome
{form} = form_welcome

Snippets

In your view you can use snippets, for every snippet you have to create a custom .js file in your snippet folder. For example:

View:

<script>
    viewly.add('view_name', {
        config: {
            view: {lock: true}, // Should the view start locked
            footer: {active: 'view_name'} // Set the active footer item
        },
        init: function() {
            <!-- This includes to provided js when the total html has been build -->

            {view_name/custom.js}
        }
    });
</script>

snippet/view_name/custom.js

var test = 1;
console.log(test);

Notice

// Icon = font awesome 5 icon
viewly.ui.success(message, icon)
viewly.ui.info(message, icon)
viewly.ui.warning(message, icon)
viewly.ui.error(message, icon)

You can also use the notice functions directly on a html element

<button success="You successfully submitted this form">Submit</button>

Self

// Get the data of the current view
V.self.data(key);
// Get the config of the current view
V.self.config(key);

Data

// Set the global data by key
viewly.data.set('key', 'value');
// OR
V.data('key', 'value');

// Get the global data by key
viewly.data.get('key');
// OR
V.data('key');

// Get the root of the key
var rootKey = viewly.data.keyRoot('key1.key2.key3');
// rootKey = 'key1'

// Get the path of the key
var keyPath = viewly.data.keyPath('key1.key2.key3');
// keyPath = 'key2.key3'

// Watch all registered keys in the data store
viewly.data.watch(callback);

// Watch a single data key in the data store
viewly.data.watchKey('key', callback)

//Remove watcher from a key
viewly.data.unwatch(id);

Form

// Get the data of a form
var formData = viewly.form.data('formName');

Locale

// Get the translation for the provided code
viewly.locale.get(code)
// OR
V.locale(code)

Route

// Go to the provided view. Route = config you can send with the view
viewly.route.view(code, route);

// Get the hash of the current url
viewly.route.hash();

// Go to previous view
viewly.route.back();

// Check if view exists
viewly.route.exists();

Store

The store in Viewly is being used for writing cookies or writing in the localstorage

// Check if browser supports localstorage
var supported = viewly.store.supported();
// Returns a true/false

// Set a storage item. Checks automaticly if localstorage is available if not it uses Cookies
viewly.store.set(name, value, day)

// Get a storage item. Checks automaticly if localstorage is available if not it uses Cookies
viewly.store.get(name)

// Removes a storage item from either the localstorage or the Cookie
viewly.store.remove(name);

// Dynamic set/get items from the storage
// Set
V.store(name, value);
// Get
V.store(name);

View

// Check if a view exists
var exists = viewly.view.exists(code);
// Returns true/false

// Get the view
viewly.view.get(code);

Form Validation

You can use regular expressions to validate form inputs or you can create your own custom functions to validate inputs

<!-- require gets triggered once something is entered or when you try to submit the form -->
<input name="name" type="text" require="[^0-9]{2,}"/>

<!-- validate only gets triggered when something is entered in the input field -->
<input name="name" type="text" validate="[^0-9]{2,}"/>

<!-- You can use a custom validator when you have the validator javascript created -->

<input name="name" type="text" validate="custom"/>

app/validator.js

app.validator = {
    custom: function(value, callback) {
        if(value == 1)
            callback(true);
        else
            callback(false);
    }
}

Usage no npm install needed!