wheresjames/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Full width and height dynamic grid.

I recently needed a full width and height dynamic grid and couldn't quite find a cots solution.
But with a bit of tweaking, it was possible to get what I wanted from gridstack.
DEMO

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet">

<style>

body
{
    min-width: 800px;
}

.frame
{
	top: 60px;
	left: 20px;
	right: 20px;
	bottom: 20px;
    padding: 20px;
    min-width: 400px;
    min-height: 300px;
    position: absolute;
	border: 4px dashed #000;
}

.tile
{
    position: absolute;
    background: #444;
    box-shadow: 0px 0px 10px #f00;
    border: 2px solid #f00;
    border-radius: 10px;
}

.del-tile
{
    height: 32px;
    width: 32px;
    background: #600;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font: bold 20px arial;
}

</style>

<script id="tmpl_tile" type="text/x-tile">
    <div>
        <div class="grid-stack-item-content tile">
            <div class="del-tile" onclick="delTile(this)">
                X
            </div>
        </div>
    <div/>
</script>

<body>
	<button id="addTile" type="button">Add Tile</button>
	<button id="saveGrid" type="button">Serialize</button>
	<button id="loadGrid" type="button">Deserialize</button>
	<button id="resetGrid" type="button">Reset</button>
    <input id="jsonStr" type="edit">

	<div class="frame"><div id="grid" class="grid-stack grid-stack-12"></div></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>

<script>

function MyGrid(id)
{
    var width = 0;
    var height = 0;
    var cols = 12;
    var rows = 12;
    var vmargin = 20;

    var lastHeight = 0;

    var gridObj = 0;

    var options = {
        width: cols,
        height: rows,
        float: false,
        animate: true,
        disableResize: false,
        disableDrag: false,
        cellHeight: 'auto',
        cellHeightUnit: 'px',
        removable: '',
        removeTimeout: 100,
        verticalMargin: vmargin,
        acceptWidgets: '.grid-stack-item',
        resizable: { handles: 'e, se, s, sw, w' },
        alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    };

    function init()
    {
        $(id).gridstack(options);

        gridObj = $(id).data('gridstack');

        gridObj._updateHeightsOnResize = function() { resize(); };

        gridObj.onResizeHandler();
    }

    function resize()
    {
        width = $(id).parent().width();
        height = $(id).parent().height() - ((rows - 1) * vmargin);

        if (0 >= height)
        {
            setTimeout(gridObj.onResizeHandler, 1000);
            return;
        }

        if (lastHeight == height)
			return;

        lastHeight = height;
        gridObj.cellHeight(parseInt(height / rows) + 'px');

    }

    function addTile(tmpl_tile, x, y, w, h)
    {
        x = x ? x : 0;
        y = y ? y : 0;
        w = w ? w : 4;
        h = h ? h : 4;

		var tile = $($(tmpl_tile).text());
        gridObj.addWidget(tile, x, y, w, h);

		return tile;
    }

    function removeTile(h)
    {
        gridObj.removeWidget($(h).closest('.grid-stack-item'));
    }

    function save()
    {
        return $.makeArray($(id + ' > .grid-stack-item:visible')).map(function(v)
        {
            var n = $(v).data('_gridstack_node');
            return n ? { x: n.x, y: n.y, width: n.width, height: n.height } : null;
        });
    }

    function load(data, tmpl_tile)
    {
        gridObj.removeAll();
        $.each(data, function(k, v) { addTile(tmpl_tile, v.x, v.y, v.width, v.height); });
    }

    function clear()
    {
        gridObj.removeAll();
    }

    init();

    this.resize = resize;
    this.addTile = addTile;
    this.removeTile = removeTile;
    this.save = save;
    this.load = load;
    this.clear = clear;
}

var myGrid = 0;
$(function()
{
    var tmpl = [
            {"x":0,"y":4,"width":4,"height":4},
            {"x":0,"y":8,"width":4,"height":4},
            {"x":0,"y":0,"width":4,"height":4},
            {"x":4,"y":0,"width":8,"height":4},
            {"x":4,"y":4,"width":8,"height":8}
        ];

    myGrid = new MyGrid('#grid', 'tile_');

    myGrid.load(tmpl, '#tmpl_tile');
});

$('#addTile').on('click', function() { myGrid.addTile('#tmpl_tile'); });

function delTile(tile) { myGrid.removeTile(tile); }

$('#resetGrid').on('click', function() { myGrid.clear(); });

$('#saveGrid').on('click', function()
{
    $('#jsonStr').val(JSON.stringify(myGrid.save()));
});

$('#loadGrid').on('click', function()
{
    myGrid.load(JSON.parse($('#jsonStr').val()), '#tmpl_tile');
});

$('#load').on('click', function()
{
    $('#jsonStr').val(JSON.stringify(myGrid.save()));
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet">

	<style>

	body
	{
	min-width: 800px;
	}

	.frame
	{
	top: 60px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	padding: 20px;
	min-width: 400px;
	min-height: 300px;
	position: absolute;
	border: 4px dashed #000;
	}

	.tile
	{
	position: absolute;
	background: #444;
	box-shadow: 0px 0px 10px #f00;
	border: 2px solid #f00;
	border-radius: 10px;
	}

	.del-tile
	{
	height: 32px;
	width: 32px;
	background: #600;
	color: #fff;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font: bold 20px arial;
	}

	</style>

	<script id="tmpl_tile" type="text/x-tile">
	<div>
	<div class="grid-stack-item-content tile">
	<div class="del-tile" onclick="delTile(this)">
	X
	</div>
	</div>
	<div/>
	</script>

	<body>
	<button id="addTile" type="button">Add Tile</button>
	<button id="saveGrid" type="button">Serialize</button>
	<button id="loadGrid" type="button">Deserialize</button>
	<button id="resetGrid" type="button">Reset</button>
	<input id="jsonStr" type="edit">

	<div class="frame"><div id="grid" class="grid-stack grid-stack-12"></div></div>
	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>

	<script>

	function MyGrid(id)
	{
	var width = 0;
	var height = 0;
	var cols = 12;
	var rows = 12;
	var vmargin = 20;

	var lastHeight = 0;

	var gridObj = 0;

	var options = {
	width: cols,
	height: rows,
	float: false,
	animate: true,
	disableResize: false,
	disableDrag: false,
	cellHeight: 'auto',
	cellHeightUnit: 'px',
	removable: '',
	removeTimeout: 100,
	verticalMargin: vmargin,
	acceptWidgets: '.grid-stack-item',
	resizable: { handles: 'e, se, s, sw, w' },
	alwaysShowResizeHandle: /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(navigator.userAgent)
	};

	function init()
	{
	$(id).gridstack(options);

	gridObj = $(id).data('gridstack');

	gridObj._updateHeightsOnResize = function() { resize(); };

	gridObj.onResizeHandler();
	}

	function resize()
	{
	width = $(id).parent().width();
	height = $(id).parent().height() - ((rows - 1) * vmargin);

	if (0 >= height)
	{
	setTimeout(gridObj.onResizeHandler, 1000);
	return;
	}

	if (lastHeight == height)
	return;

	lastHeight = height;
	gridObj.cellHeight(parseInt(height / rows) + 'px');

	}

	function addTile(tmpl_tile, x, y, w, h)
	{
	x = x ? x : 0;
	y = y ? y : 0;
	w = w ? w : 4;
	h = h ? h : 4;

	var tile = $($(tmpl_tile).text());
	gridObj.addWidget(tile, x, y, w, h);

	return tile;
	}

	function removeTile(h)
	{
	gridObj.removeWidget($(h).closest('.grid-stack-item'));
	}

	function save()
	{
	return $.makeArray($(id + ' > .grid-stack-item:visible')).map(function(v)
	{
	var n = $(v).data('_gridstack_node');
	return n ? { x: n.x, y: n.y, width: n.width, height: n.height } : null;
	});
	}

	function load(data, tmpl_tile)
	{
	gridObj.removeAll();
	$.each(data, function(k, v) { addTile(tmpl_tile, v.x, v.y, v.width, v.height); });
	}

	function clear()
	{
	gridObj.removeAll();
	}

	init();

	this.resize = resize;
	this.addTile = addTile;
	this.removeTile = removeTile;
	this.save = save;
	this.load = load;
	this.clear = clear;
	}

	var myGrid = 0;
	$(function()
	{
	var tmpl = [
	{"x":0,"y":4,"width":4,"height":4},
	{"x":0,"y":8,"width":4,"height":4},
	{"x":0,"y":0,"width":4,"height":4},
	{"x":4,"y":0,"width":8,"height":4},
	{"x":4,"y":4,"width":8,"height":8}
	];

	myGrid = new MyGrid('#grid', 'tile_');

	myGrid.load(tmpl, '#tmpl_tile');
	});

	$('#addTile').on('click', function() { myGrid.addTile('#tmpl_tile'); });

	function delTile(tile) { myGrid.removeTile(tile); }

	$('#resetGrid').on('click', function() { myGrid.clear(); });

	$('#saveGrid').on('click', function()
	{
	$('#jsonStr').val(JSON.stringify(myGrid.save()));
	});

	$('#loadGrid').on('click', function()
	{
	myGrid.load(JSON.parse($('#jsonStr').val()), '#tmpl_tile');
	});

	$('#load').on('click', function()
	{
	$('#jsonStr').val(JSON.stringify(myGrid.save()));
	});

	</script>