@gabrielphala/blur v1.0.1

Blur

A JavaScript Single Page Application (SPA) Framework

Installation

Intall using npm package manager

npm i @gabrielphala/blur

Usage

Src\app.js

import layouts from './layouts';
import groups from './groups';
import components from './components';
import pages from './pages';
import transitions from './transitions';
import events from './events';

export default () => {
    layouts();
    groups();
    components();
    pages();
    transitions();
    events();
};

Src\index.js

import blur from 'blur';
import app from './app.js';

app();

blur.config({
    logs: {
        info: true
    },
    page: {
        title: 'Apply'
    }
});

blur.load();

Layouts

Define the layout of components to use on page load

Src\layouts.js

import Layouts from 'Blur/layouts';

Layouts.create('layout.one', {
    html: `
        <div class="page-wrapper__main">
            {{component.one}}

            <!-- dynamic component (multiple components merged into one to change according to the page) -->
            <div class="page-wrapper__main__center">
                {{tag.group.one}}
            </div>
        </div>
    `
});

Tag Groups

Used for changing content dynamically on page reload

Src\groups\tags.js

import Groups from "blur/Groups";

export default () => {
    // Tag groups load components based on the page the user is currently on
    Groups.use('tag').make('tag.group.one', [
        // this component will be loaded when on the page '/u/:user/page-one'
        { name: 'page.one.component', uri: '/u/:user/page-one' },

        // this component will be loaded when on the page '/u/:user/page-two'
        { name: 'page.two.component', uri: '/a/:user/page-two' },
    ]);
};

Transition Groups

Used for changing content dynamically when switching pages without reloading

Src\groups\transitions.js

import Groups from "blur/Groups";

export default () => {
    // Transition groups replace the innerHTML of elements with specific components base on the page the user is switching to
    Groups.use('transition').make('transition.group.one', [
        {
            name: 'page.one',
            targets: [    
                // replaces the innerHTML of this element with the contents of the component ('page.one.component')
                { targetClass: 'page-wrapper__main__center', component: 'page.one.component' },
            ]
        },
        {
            name: 'page.two',
            targets: [
                // replaces the innerHTML of this element with the contents of the component ('page.two.component')
                { targetClass: 'page-wrapper__main__center', component: 'page.two.component' },
            ]
        }
    ]);
};

Components

Building blocks of the application, they are loaded individually and cached and re-used where necessary

Src\groups\components.js

import Components from "blur/Components";

export default () => {
    // Load all components at once
    Components.all([
        {
            name: 'page.one.component',
            uri: '/c/page-one-component',
        },
        {
            name: 'page.two.component',
            uri: '/c/page-two-component',
        }
    ]);

    // Or load one at a time
    const componentOne = Components.create('page.one.component', {
        uri: '/c/page-one-component',
    });

    const componentTwo = Components.create('page.two.component', {
        uri: '/c/page-two-component',
    });

    const sidenav = Components.create('sidenav', {
        uri: '/c/sidenav',
        nav: {
                parentClass: 'sidenav',
                targetClass: 'sidenav__item',
                linkmultiple: {
                    mainPage: ['page.main.tab.one', 'page.main.tab.two']
                }
            },
        scope: [
            'page.one',
            'page.two'
        ]
    });
};

Properties to remember

• nav (Optional) Indicates that a component is of type navigation, makes things easier for the developer in such a way that the Framework detects an active page, adds event listeners, highlights active pages and sub-pages

• linkmultiple (Optional) Each sub property like mainPage defined above correspondes to data-linkmultiple on the HTML side of things. The tabs / array elements of mainPage will cause the Framewrok to attach an 'active' class on mainPage to indicate that the user is browsing a sub-page / tab of mainPage

• scope (Optional but required for nav) A component can only be used by these pages, defined in the scope property

HTML nav component

    <div class="sidenav">
        <div class="sidenav__item" data-linkmultiple="mainPage" data-linkaddress='/u/johndoe/page-one' data-linkactive='sidenav__item--active'>
            <p>Page one</p>
        </div>
        <div class="sidenav__item" data-linkaddress='/u/johndoe/page-two' data-linkactive='sidenav__item--active'>
            <p>Page two</p>
        </div>
    </div>

Pages

Pages are pages :)

Src\pages.js

import Pages from 'blur/Pages';
import Layouts from 'blur/Layouts';

export default () => {
    Pages.create('page.one', {
        title: 'Page one',
        uri: '/u/:user/page-one',
        layout: Layouts.use('layout.one')
    });

    Pages.create('page.two', {
        title: 'Page two',
        uri: '/u/:user/page-two',
        layout: Layouts.use('layout.one')
    });
};

Transitions

Relationships between pages, what must happens when a user moves from page 1 to 2

Src\transitions.js

import Transitions from 'blur/Transitions';

export default () => {
    const transitionOne = Transitions.create('transition.one', {
        from: ['page.one', 'page.two'],
        to: ['page.two', 'page.two'],
        group: 'transition.group.one'
    });

    transitionOne.updates((page) => {
        // remove some elements and stuff
    });
};

Events

Src\events.js

import Pages from 'blur/Pages';
import Blur from 'blur';

import userAuth from '../../auth/User';

export default () => {
    Pages.use('page.one').onShow((page) => {
        $('.form').on('submit', async (e) => {
            e.preventDefault();

            const response = await userAuth.signIn();

            if (response.successful)
                Blur.load(response.redirect);
        });
    });
};