rizerok / gridion

js grid

Gridion v0.0.3

A small self-adjusting js grid.

Install via npm:

npm i gridion --save

js

import Gridion from 'gridion';
import 'gridion/dist/gridion.css';
let grid = new Gridion('.container',6);

Or use cdn:

<link rel="stylesheet" href="https://cdn.rawgit.com/rizerok/Gridion/v0.0.3/dist/gridion.css">
<script src="https://cdn.rawgit.com/rizerok/Gridion/v0.0.3/dist/gridion.js"></script>

let grid = new Gridion('.container',6);

Demo:

Simple demo

Demo1

Demo2 (Infinity gallery)

Usage:

let grid = new Gridion(parentSelector,cols);

parentSelector - tag selector that contains grid;

cols - columns amount;

let cellConfig = {
	size:{
		w:1,//width
		h:2//height
	},
	data:'content'//content,
    buildCallback:function(){
        //running callback when cell is added to model
    }
}

//just an array of cell configurations
let configList = [
    cellConfig1,
    cellConfig2,
];

grid.addItems(configList,index,cbk) - Adds cells to grid

grid.removeItem(id,cbk) - Remove cell from grid

grid.scaleItem(id,x,y,cbk) - Change cell size

grid.fastAddItem(config,index) - Adds cell to grid, without animation

grid.fastAddItems(configList,index) - Adds cells to grid, without animation

grid.fastRemoveItem(id) - Remove cell from grid, without animation