Thanks to visit codestin.com
Credit goes to github.com

Skip to content

web 3.1.5 #1585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 23, 2021
Merged

web 3.1.5 #1585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ <h1>Demos</h1>
<li><a href="nested.html">Nested grids</a></li>
<li><a href="responsive.html">Responsive</a></li>
<li><a href="react.html">ReactJS</a></li>
<li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
<li><a href="serialization.html">Serialization</a></li>
<li><a href="static.html">Static</a></li>
<li><a href="two.html">Two grids</a></li>
<li><a href="vue2js.html">Vue2.js</a></li>
<li><a href="vue3js.html">Vue3.js</a></li>
<li><a href="vue2js.html">Vue2.js</a></li>
<li><a href="web-comp.html">Web Component</a></li>
</ul>
</body>
</html>
68 changes: 25 additions & 43 deletions demo/nested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nested grids demo</title>

<title>Nested grids demo (ES6)</title>
<link rel="stylesheet" href="demo.css"/>
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
<style type="text/css">
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
Expand All @@ -21,60 +19,44 @@
<body>
<div class="container-fluid">
<h1>Nested grids demo</h1>
<a class="btn btn-primary" onClick="addNewWidget(grid1)" href="#">Add Widget Grid1</a>
<a class="btn btn-primary" onClick="addNewWidget(grid2)" href="#">Add Widget Grid2</a>
<p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
<p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
<a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
<a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
<br><br>

<div class="grid-stack top">
<div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="1">
<div class="grid-stack-item-content">regular item</div>
</div>
<div class="grid-stack-item" gs-x="1" gs-y="0" gs-w="4" gs-h="4">
<div class="grid-stack-item-content">
nested 1 - can drag items out
<div class="grid-stack nested1">
<div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">1</div></div>
<div class="grid-stack-item sub" gs-x="3" gs-y="0" gs-w="3"><div class="grid-stack-item-content">2</div></div>
<div class="grid-stack-item sub" gs-x="6" gs-y="0" gs-w="3"><div class="grid-stack-item-content">3</div></div>
<div class="grid-stack-item sub" gs-x="9" gs-y="0" gs-w="3"><div class="grid-stack-item-content">4</div></div>
<div class="grid-stack-item sub" gs-x="0" gs-y="1" gs-w="3"><div class="grid-stack-item-content">5</div></div>
<div class="grid-stack-item sub" gs-x="3" gs-y="1" gs-w="3"><div class="grid-stack-item-content">6</div></div>
</div>
</div>
</div>
<div class="grid-stack-item" gs-x="5" gs-y="0" gs-w="3" gs-h="4">
<div class="grid-stack-item-content">
nested 2 - constrained to parent (default)
<div class="grid-stack nested2">
<div class="grid-stack-item sub" gs-x="0" gs-y="0" gs-w="3"><div class="grid-stack-item-content">7</div></div>
<div class="grid-stack-item sub" gs-x="0" gs-y="3" gs-w="3"><div class="grid-stack-item-content">8</div></div>
</div>
</div>
</div>
<!-- grid will be added here -->
</div>

<script type="text/javascript">
let nestOptions = {
let sub1 = [ {w:3}, {w:3}, {w:3}, {w:3}, {w:3}, {w:3}];
let sub2 = [ {w:3}, {x:0, y:1, w:3}];
let count = 0;
[...sub1, ...sub2].forEach(d => d.content = String(count++));
let subOptions = {
itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted, otherwise grid-items causes all sort of issues
dragOut: true, // let us drag them out!
disableOneColumnMode: true, // nested are small, but still want N columns
margin: 1
};
let grid0 = GridStack.init({cellHeight: 70}, '.grid-stack.top');
let grid1 = GridStack.init(nestOptions, '.grid-stack.nested1');
nestOptions.dragOut = false;
let grid2 = GridStack.init(nestOptions, '.grid-stack.nested2');
let layout = {cellHeight: 70, children: [
{w:1, content: 'regular item'},
{x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},
{x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},
]};

// create and load it all from JSON above
GridStack.addGrid(document.querySelector('.container-fluid'), layout);

let count = 9;
addNewWidget = function(grid) {
addNewWidget = function(selector) {
grid = document.querySelector(selector).gridstack;
let node = {
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())
h: Math.round(1 + 3 * Math.random()),
content: count++
};
// Note: we have additional style .sub here so add the HTML passed directly...
grid.addWidget('<div class="grid-stack-item sub"><div class="grid-stack-item-content">' + count++ + '</div></div>', node);
grid.addWidget(node);
return false;
};
</script>
Expand Down
189 changes: 189 additions & 0 deletions demo/react-hooks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gridstack.js React integration example</title>
<link rel="stylesheet" href="demo.css" />
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>

<!-- Scripts to use react inside html -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
<div>
<h1>Using GridStack.js with React hooks</h1>
<p>
As with any virtualDOM-based framework, you need to check if Reacthas rendered the DOM (or any updates to it)
<strong>before</strong> you initialize GridStack or call its methods. This example shows how to make rendered
components widgets:
</p>
<ol>
<li>Render items, each with a reference</li>
<li>Convert each rendered item to a widget using the reference and the <a
href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">
makeWidget</a> function</li>
</ol>
</div>
<div>
<h2>Controlled stack</h2>
<div id="controlled-stack"></div>
</div>
<div>
<h2>Uncontrolled stack</h2>
<div id="uncontrolled-stack"></div>
</div>
</body>

<script type="text/babel">
const { useState, useEffect, createRef, useRef } = React

const Item = ({ id }) => <div>I am item: {id}</div>

//
// Controlled example
//

const ControlledStack = ({ items, addItem }) => {
const refs = useRef({})
const gridRef = useRef()

if (Object.keys(refs.current).length !== items.length) {
items.forEach(({ id }) => {
refs.current[id] = refs.current[id] || createRef()
})
}

useEffect(() => {
gridRef.current =
gridRef.current ||
GridStack.init(
{
float: true,
},
'.controlled'
)
const grid = gridRef.current
grid.batchUpdate()
grid.removeAll(false)
items.forEach(({ id }) => grid.makeWidget(refs.current[id].current))
grid.commit()
}, [items])

return (
<div>
<button onClick={addItem}>Add new widget</button>
<div className={`grid-stack controlled`}>
{items.map((item, i) => {
return (
<div ref={refs.current[item.id]} key={item.id} className={'grid-stack-item'}>
<div className="grid-stack-item-content">
<Item {...item} />
</div>
</div>
)
})}
</div>
</div>
)
}

const ControlledExample = () => {
const [items, setItems] = useState([{ id: 'item-1' }, { id: 'item-2' }])

return (
<ControlledStack
items={items}
addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])}
/>
)
}

//
// Uncontrolled example
//

const UncontrolledExample = () => {
const gridRef = useRef()

const [state, setState] = useState({
count: 0,
info: '',
items: [
{ x: 2, y: 1, h: 2 },
{ x: 2, y: 4, w: 3 },
{ x: 4, y: 2 },
{ x: 3, y: 1, h: 2 },
{ x: 0, y: 6, w: 2, h: 2 },
],
})

useEffect(() => {
gridRef.current =
gridRef.current ||
GridStack.init(
{
float: true,
cellHeight: '70px',
minRow: 1,
},
'.uncontrolled'
)

const grid = gridRef.current

grid.on('dragstop', (event, element) => {
const node = element.gridstackNode
setState(prevState => ({
...prevState,
info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,
}))

let timerId
window.clearTimeout(timerId)
timerId = window.setTimeout(() => {
setState(prevState => ({
...prevState,
info: '',
}))
}, 2000)
})
}, [])

return (
<div>
<button
onClick={() => {
const grid = gridRef.current
const node = state.items[state.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.id = node.content = String(state.count)
setState(prevState => ({
...prevState,
count: prevState.count + 1,
}))
grid.addWidget(node)
}}
>
Add Widget
</button>
<div>{JSON.stringify(state)}</div>
<section class="grid-stack uncontrolled"></section>
</div>
)
}

ReactDOM.render(<ControlledExample />, document.getElementById('controlled-stack'))
ReactDOM.render(<UncontrolledExample />, document.getElementById('uncontrolled-stack'))

</script>

</html>
61 changes: 20 additions & 41 deletions demo/serialization.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
<h1>Serialization demo</h1>
<a onClick="saveGrid()" class="btn btn-primary" href="#">Save</a>
<a onClick="loadGrid()" class="btn btn-primary" href="#">Load</a>
<a onClick="saveGridManual()" class="btn btn-primary" href="#">Save Manual</a>
<a onClick="loadGridManual()" class="btn btn-primary" href="#">Load Manual</a>
<a onClick="saveFullGrid()" class="btn btn-primary" href="#">Save Full</a>
<a onClick="loadFullGrid()" class="btn btn-primary" href="#">Load Full</a>
<a onClick="clearGrid()" class="btn btn-primary" href="#">Clear</a>
<br/><br/>
<div class="grid-stack"></div>
<div id="gridCont"><div class="grid-stack"></div></div>
<hr/>
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
</div>
Expand All @@ -41,54 +41,33 @@ <h1>Serialization demo</h1>
];
serializedData.forEach((n, i) =>
n.content = `<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`);
let serializedFull;

// NEW 2.x method
// 2.x method - just saving list of widgets with content (default)
loadGrid = function() {
grid.load(serializedData, true);
grid.load(serializedData, true); // update things
}

// NEW 2.x method
// 2.x method
saveGrid = function() {
delete serializedFull;
serializedData = grid.save();
document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, ' ');
}

// old (pre 2.x) way to manually load a grid
loadGridManual = function() {
let items = GridStack.Utils.sort(serializedData);
grid.batchUpdate();

if (grid.engine.nodes.length === 0) {
// load from empty
items.forEach(function (item) {
grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">' + item.id + '</div></div>', item);
});
} else {
// else update existing nodes (instead of calling grid.removeAll())
grid.engine.nodes.forEach(function (node) {
let item = items.find(function(e) { return e.id === node.id});
grid.move(node.el, item.x, item.y, item.w, item.h);
});
}

grid.commit();
};
// 3.1 full method saving the grid options + children (which is recursive for nested grids)
saveFullGrid = function() {
serializedFull = grid.save(true, true);
serializedData = serializedFull.children;
document.querySelector('#saved-data').value = JSON.stringify(serializedFull, null, ' ');
}

// old (pre 2.x) way to manually save a grid
saveGridManual = function() {
serializedData = [];
grid.engine.nodes.forEach(function(node) {
serializedData.push({
x: node.x,
y: node.y,
w: node.w,
h: node.h,
id: node.id,
custom: 'save anything here'
});
});
document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, ' ');
};
// 3.1 full method to reload from scratch - delete the grid and add it back from JSON
loadFullGrid = function() {
if (!serializedFull) return;
grid.destroy(true); // nuke everything
grid = GridStack.addGrid(document.querySelector('#gridCont'), serializedFull)
}

clearGrid = function() {
grid.removeAll();
Expand Down
Loading