gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-extra.min.css">
<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />

<div class="grid-stack"></div>

SCSS

.grid-stack {
  background: red;
  width:50vw;
  height: 700px;
}

.grid-stack-item-content {
  color: blue;
  text-align: center;
  background-color: #18bc9c;
  min-width: 100px;
  width:100px;
}

JavaScript

var options = {
  					cellHeight: 210,
            margin: '5px',
            disableResize: true,
            disableOneColumnMode: true,
            column: 4
};
var grid = GridStack.init(options);

var count = 0;
var items = [
	{autoPosition: true, w: 1, h: 1},
	{autoPosition: true, w: 1},
  {autoPosition: true, h: 1},
  {autoPosition: true, w: 1},
];

addNewWidget = function () {
  var node = items[count] || {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    w: Math.round(1 + 3 * Math.random()),
    h: Math.round(1 + 3 * Math.random())
  };
  node.content = String(count++);
  grid.addWidget(node);
  return false;
};

        $(window).resize(function () {
            if (this.resizeTO) clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function () {
                $(this).trigger('resizeEnd'); // evento cambiar tamaño pagina
            }, 500);
        });
        
        

        $(window).bind('resizeEnd', function () {
            if (grid.cellWidth() < 100) {
                let numOfCol = parseInt(grid.getColumn()) - 1;
                if (grid.getColumn() < 3) {
                    grid.opts.oneColumnModeDomSort = true;
                    grid.column(1);
                } else {
                    grid.column(numOfCol - 1);
                    $(window).trigger('resizeEnd');
                }
            } else {
                let gridwidth = $(".grid-stack").width();
                let ncolumns = Math.floor(gridwidth / 100);

                if (ncolumns > 12) {
                    ncolumns = 12;
                }
                grid.column(ncolumns);
            }
            console.log( grid.getColumn())

        });

addNewWidget();
addNewWidget();
addNewWidget();