layout-constructor

Visual tool for constructing custom banner pages layout

Installation

The package can be installed via NPM:

npm install layout-constructor --save

Dependencies

You’ll need to install some dependencies separately since they aren’t included in the package:

• react
• react-dom
• prop-types
• classnames
• autobind-decorator
• rx
• tanok

Example

Here's simple usage example:

import LayoutConstructor from 'layout-constructor';
import 'layout-constructor/dist/index.min.css';

const node = document.getElementById('app');
const presetTemplates = [
    {
        id: '4_columns',
        children: [
            { column: 1, row: 1 },
            { column: 2, row: 1 },
            { column: 3, row: 1 },
            { column: 4, row: 1 },
        ]
    },
    {
        id: '3_columns_2_left_big',
        children: [
            { column: [1, 2], row: 1 },
            { column: 3, row: 1 },
            { column: 4, row: 1 },
        ]
    },
    {
        id: '3_columns_2_middle_big',
        children: [
            { column: 1, row: 1 },
            { column: [2, 3], row: 1 },
            { column: 4, row: 1 },
        ]
    },
    {
        id: '3_columns_2_right_big',
        children: [
            { column: 1, row: 1 },
            { column: 2, row: 1 },
            { column: [3, 4], row: 1 },
        ]
    },
    {
        id: '2_columns',
        children: [
            { column: [1, 2], row: 1 },
            { column: [3, 4], row: 1 },
        ]
    },
    {
        id: '1_column',
        children: [
            { column: [1, 2, 3, 4], row: 1 }
        ]
    },
];
const importJSON = null; // or an exported JSON you want to load
const onExportJSON = null; // or a callback which will receive data in JSON format
const onUploadImage = (file) => {
    console.log('onUploadImage was called with ', file);
    return Promise.resolve({
        id:  1,
        src: 'https://static-cache.ua.uaprom.net/image/portal/UA/logo.png'
    });
};

LayoutConstructor(node, { presetTemplates, importJSON, onExportJSON, onUploadImage });

Note that you need to require css file from this package. This example will work if your build system supports requiring css files (webpack is one that does).

presetTemplates is an array of block structures that will be available for building your layout. In this example your presets will look like this:

Demo

You can try it out on the Demo page

Development

You must be part of @evo organization on NPM

npm publish --access public

Testing

Only smoke tests implemented using mocha, chai and istanbul. Feel free to extend.

vagga test

or if you want coverage

vagga cover-test