Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@wildebeest/boxlayout

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wildebeest/boxlayout

Box Layout module for creating fullscreen admin enviroments

0.4.15
Source
npm

Version published: 6 years ago

Weekly downloads: 2; decreased by-75%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

Box Layout Module

Layout page components in no-scroll, absolute-positioned, single-screen enviroment.

Installation

npm install --save @wildebeest/boxlayout

Requirements

It's usefull to know these libraries:

inversify
@wildebeest/js-modules

Usage

HTML

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <div class="box-layout">
            <div class="box-layout__top scroll-box">
                <div>...</div>
            </div>
            <div class="box-layout__left scroll-box">
                <div class="scroll-box__pane">...</div>
            </div>
            <div class="box-layout__center scroll-box">
                <div class="scroll-box__pane">...</div>
            </div>
            <div class="box-layout__right scroll-box">
                <div class="scroll-box__pane">...</div>
            </div>
            <div class="box-layout__bottom scroll-box">
                <div class="scroll-box__pane">...</div>
            </div>
        </div>
    </body>
</html>

JS

Create Appication

let app = new Application();
app.run([BoxLayoutModule]);

Create Box Layout Component

let boxLayoutElement = document.querySelector('.box-layout');
let boxLayout = app.getContainer().get(BoxLayout);
boxLayout.initialize(boxLayoutElement, {
    top: 80,
    right: 400,
    bottom: 200,
    left: 200,
    deviders: {
        dragable: true
    }
});

Bind DOM Elements To Layout

boxLayout.bindElement(document.querySelector('.box-layout__top'), 'top');
boxLayout.bindElement(document.querySelector('.box-layout__left'), 'left');
boxLayout.bindElement(document.querySelector('.box-layout__center'), 'center');
boxLayout.bindElement(document.querySelector('.box-layout__right'), 'right');
boxLayout.bindElement(document.querySelector('.box-layout__bottom'), 'bottom');

This is the result of such a configuration with some css styles and random data.

Add Scroll Bars

Add ScrollModule to Application

app.run([ScrollModule, BoxLayoutModule]);

Create Scroll Box Components

let scrollBoxElements = document.querySelectorAll('.scroll-box');
let scrollBoxes = [];
for (let i = 0; i < scrollBoxElements.length; i++) {
    let box = app.getContainer().get(ScrollBox);
    box.initialize(scrollBoxElements[i], {});
    scrollBoxes.push(box);
}

Recalculate Scroll Box On Box Layout Resize

boxLayout.getEmitter().on('resize', (event) => {
    for (let i = 0; i < scrollBoxes.length; i++) {
        scrollBoxes[i].recalc();
    }
});

This is the result of box layout with scroll boxes and some custom css.

Keywords

FAQs

What is @wildebeest/boxlayout?

Is @wildebeest/boxlayout popular?

Is @wildebeest/boxlayout well maintained?

Package last updated on 09 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install