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

Skip to content

Commit 0c9dd12

Browse files
adumesnyadumesny
committed
web v6.0.0
1 parent f2cb3f0 commit 0c9dd12

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1064
-88
lines changed

‎.gitignore

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,14 @@ node_modules/*
99
node_modules/gridstack/*
1010
!node_modules/gridstack/dist/
1111
node_modules/gridstack/dist/*
12-
!node_modules/gridstack/dist/gridstack-h5.js
13-
!node_modules/gridstack/dist/gridstack-h5.js.map
14-
!node_modules/gridstack/dist/gridstack-jq.js
15-
!node_modules/gridstack/dist/gridstack-jq.js.map
12+
!node_modules/gridstack/dist/gridstack-all.js
13+
!node_modules/gridstack/dist/gridstack-all.js.map
1614
!node_modules/gridstack/dist/gridstack.css
1715
!node_modules/gridstack/dist/gridstack.min.css
1816
!node_modules/gridstack/dist/gridstack-extra.min.css
1917
!node_modules/gridstack/dist/gridstack-extra.css
2018
!node_modules/gridstack/dist/es5/
2119
node_modules/gridstack/dist/es5/*
2220
!node_modules/gridstack/dist/es5/gridstack-poly.js
23-
!node_modules/gridstack/dist/es5/gridstack-jq.js
24-
!node_modules/gridstack/dist/es5/gridstack-jq.js.map
21+
!node_modules/gridstack/dist/es5/gridstack-all.js
22+
!node_modules/gridstack/dist/es5/gridstack-all.js.map

‎demo/angular-ngFor.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import { Component, AfterViewInit, OnChanges, SimpleChanges, Input, ChangeDetectionStrategy } from '@angular/core';
55

66
import { GridStack, GridStackWidget } from 'gridstack';
7-
import 'gridstack/dist/h5/gridstack-dd-native';
87

98
@Component({
109
selector: 'app-angular-ng-for-test',

‎demo/angular.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import { Component, OnInit } from '@angular/core';
55

66
import { GridStack, GridStackWidget } from 'gridstack';
7-
import 'gridstack/dist/h5/gridstack-dd-native';
87

98
@Component({
109
selector: 'app-angular-test',

‎demo/anijs.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
1010
<link rel="stylesheet" href="demo.css"/>
1111

12-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
12+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1313
<script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
1414
</head>
1515
<body>

‎demo/canvasJS.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>CanvasJS grid demo</title>
5+
6+
<link rel="stylesheet" href="demo.css"/>
7+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
8+
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
9+
10+
<style type="text/css">
11+
body { margin: 8px 0; } /* make grid take entire vw so we have correct square cells */
12+
</style>
13+
</head>
14+
<body>
15+
<div>
16+
<h1>CanvasJS grid demo</h1>
17+
<br/>
18+
<div class="grid-stack">
19+
</div>
20+
</div>
21+
22+
<script type="text/javascript">
23+
let grid = GridStack.init({
24+
cellHeight: 'initial', // start square but will set to % of window width later
25+
animate: false, // show immediate (animate: true is nice for user dragging though)
26+
disableOneColumnMode: true, // will manually do 1 column
27+
float: true
28+
});
29+
30+
let items = [ // our initial 12 column layout loaded first so we can compare
31+
{x: 1, y: 1, w: 7, h:3 , content: '<div id="chartContainer" style="height: 370px; width: 100%;"></div>'},
32+
];
33+
grid.load(items);
34+
35+
var chart = new CanvasJS.Chart("chartContainer", {
36+
animationEnabled: true,
37+
title:{
38+
text: "Company Revenue by Year"
39+
},
40+
axisY: {
41+
title: "Revenue in USD",
42+
valueFormatString: "#0,,.",
43+
suffix: "mn",
44+
prefix: "$"
45+
},
46+
data: [{
47+
type: "splineArea",
48+
color: "rgba(54,158,173,.7)",
49+
markerSize: 5,
50+
xValueFormatString: "YYYY",
51+
yValueFormatString: "$#,##0.##",
52+
dataPoints: [
53+
{ x: new Date(2000, 0), y: 3289000 },
54+
{ x: new Date(2001, 0), y: 3830000 },
55+
{ x: new Date(2002, 0), y: 2009000 },
56+
{ x: new Date(2003, 0), y: 2840000 },
57+
{ x: new Date(2004, 0), y: 2396000 },
58+
{ x: new Date(2005, 0), y: 1613000 },
59+
{ x: new Date(2006, 0), y: 2821000 },
60+
{ x: new Date(2007, 0), y: 2000000 },
61+
{ x: new Date(2008, 0), y: 1397000 },
62+
{ x: new Date(2009, 0), y: 2506000 },
63+
{ x: new Date(2010, 0), y: 2798000 },
64+
{ x: new Date(2011, 0), y: 3386000 },
65+
{ x: new Date(2012, 0), y: 6704000},
66+
{ x: new Date(2013, 0), y: 6026000 },
67+
{ x: new Date(2014, 0), y: 2394000 },
68+
{ x: new Date(2015, 0), y: 1872000 },
69+
{ x: new Date(2016, 0), y: 2140000 }
70+
]
71+
}]
72+
});
73+
chart.render();
74+
</script>
75+
</body>
76+
</html>

‎demo/cell-height.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>cell height demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1111
<style type="text/css">
1212
.container {
1313
background-color: lightblue;

‎demo/column.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<link rel="stylesheet" href="demo.css"/>
1010
<link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css"/>
11-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
11+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1212
</head>
1313
<body>
1414
<div class="container-fluid">

‎demo/custom-engine.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Custom Engine</title>
8+
9+
<link rel="stylesheet" href="demo.css"/>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
11+
<script src="events.js"></script>
12+
</head>
13+
<body>
14+
<div class="container-fluid">
15+
<h1>Custom Engine</h1>
16+
<p>shows a custom engine subclass in Typescript that only allows objects to move vertically.</p>
17+
<div>
18+
<a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
19+
<a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
20+
</div>
21+
<br><br>
22+
<div class="grid-stack"></div>
23+
</div>
24+
25+
<script type="module" > // so we can use import
26+
// get CORS error in Chrome...need to have http://localhost/ URL - see https://stackoverflow.com/questions/50197495/javascript-modules-and-cors
27+
import { GridStack, GridStackEngine } from '../dist/gridstack-all.js';
28+
29+
/**
30+
* Custom engine class that only allows vertical movement and resizing
31+
*/
32+
class CustomEngine extends GridStackEngine {
33+
/** refined this to move the node to the given new location */
34+
moveNode(node, o) {
35+
// keep the same original X and Width and let base do it all...
36+
o.x = node.x;
37+
o.w = node.w;
38+
return super.moveNode(node, o);
39+
}
40+
}
41+
GridStack.registerEngine(CustomEngine); // globally set our custom class
42+
43+
let count = 0;
44+
let items = [
45+
{x: 0, y: 0},
46+
{x: 1, y: 0},
47+
{x: 1, y: 2, w: 3},
48+
];
49+
items.forEach(n => n.content = String(count++));
50+
51+
let grid = GridStack.init({
52+
float: true,
53+
disableOneColumnMode: true,
54+
cellHeight: 70
55+
}).load(items);
56+
addEvents(grid);
57+
58+
let addNewWidget = function() {
59+
let n = items[count] || {
60+
x: Math.round(12 * Math.random()),
61+
y: Math.round(5 * Math.random()),
62+
w: Math.round(1 + 3 * Math.random()),
63+
h: Math.round(1 + 3 * Math.random())
64+
};
65+
n.content = n.content || String(count++);
66+
grid.addWidget(n);
67+
};
68+
69+
let toggleFloat = function() {
70+
grid.float(! grid.getFloat());
71+
document.querySelector('#float').innerHTML = 'float: ' + grid.getFloat();
72+
};
73+
</script>
74+
</body>
75+
</html>

‎demo/drag-and-drop-dataTransfer-angular.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Simple Angular Example using GridStack API with event.dataTransfer
3+
*/
4+
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
5+
import { GridStack, GridStackWidget, GridStackNode } from 'gridstack';
6+
import { DDElement } from "gridstack/dist/h5/dd-element";
7+
8+
@Component({
9+
selector: 'grid-stack-test',
10+
template: `
11+
<div class="grid-stack-item" #dragElement>
12+
<div class="grid-stack-item-content" style="background-color: #cccccc; padding: 15px;">Drag Me</div>
13+
</div>
14+
<hr>
15+
<div class="grid-stack"></div>
16+
`,
17+
})
18+
export class GridStackTestComponent implements OnInit {
19+
20+
@ViewChild('dragElement') public dragElement: ElementRef<HTMLElement>;
21+
22+
private sampleElement = `<div style="background-color: #eeeeee; padding: 15px; height: 100%;">Sample Element</div>`;
23+
private items: GridStackWidget[] = [
24+
{ x: 0, y: 0, w: 9, h: 1, content: this.sampleElement },
25+
{ x: 9, y: 0, w: 3, h: 2, content: this.sampleElement }
26+
];
27+
private grid: GridStack;
28+
29+
constructor() { }
30+
public ngOnInit() {
31+
32+
const _ddElement = DDElement.init(this.dragElement.nativeElement);
33+
_ddElement.setupDraggable({
34+
handle: '.sample-drag',
35+
appendTo: 'body',
36+
helper: 'clone',
37+
start: (event: DragEvent) => {
38+
if (event.dataTransfer) {
39+
event.dataTransfer.setData('message', 'Hello World');
40+
}
41+
},
42+
});
43+
44+
this.grid = GridStack.init({
45+
removable: true,
46+
acceptWidgets: (el) => {
47+
return true;
48+
}
49+
});
50+
51+
this.grid.on('dropped', this.gridStackDropped.bind(this));
52+
this.grid.load(this.items); // and load our content directly (will create DOM)
53+
}
54+
55+
gridStackDropped(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode): void {
56+
const dragEvent = event as DragEvent;
57+
if (dragEvent.dataTransfer) {
58+
console.log('gridstack dropped: ', dragEvent.dataTransfer.getData('message'));
59+
}
60+
}
61+
}
62+

‎demo/drag-and-drop-dataTransfer.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Event DataTransfer Demo</title>
9+
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="demo.css" />
12+
<link rel="stylesheet" href="../node_modules/gridstack/dist/gridstack-extra.min.css" />
13+
14+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
15+
</head>
16+
17+
<body>
18+
<div class="container-fluid">
19+
<h1>Event DataTransfer Demo</h1>
20+
21+
<div class="row">
22+
<div class="col-md-3">
23+
<div class="sidebar">
24+
<div class="grid-stack-item">
25+
<div class="grid-stack-item-content">Drag me</div>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="col-md-9">
30+
<div class="grid-stack grid-stack-12"></div>
31+
</div>
32+
</div>
33+
</div>
34+
<script type="text/javascript">
35+
let options = {
36+
column: 12,
37+
disableOneColumnMode: true,
38+
acceptWidgets: function (el) { return true; }
39+
};
40+
let items = [
41+
{ x: 0, y: 0, w: 9, h: 1, content: 'Sample Element' },
42+
{ x: 9, y: 0, w: 3, h: 2, content: 'Sample Element 2' }
43+
];
44+
45+
let grid = GridStack.init(options)
46+
47+
grid.load(items);
48+
49+
grid.on('dropped', function (event, previousWidget, newWidget) {
50+
if (event.dataTransfer) {
51+
console.log('gridstack dropped: ', event.dataTransfer.getData('message'));
52+
}
53+
});
54+
55+
GridStack.setupDragIn(
56+
'.sidebar .grid-stack-item',
57+
{
58+
appendTo: 'body',
59+
helper: clone,
60+
start: start
61+
}
62+
);
63+
64+
function clone(event) {
65+
return event.target.cloneNode(true);
66+
}
67+
68+
function start(event) {
69+
if (event.dataTransfer) {
70+
event.dataTransfer.setData('message', 'Hello World');
71+
}
72+
}
73+
</script>
74+
</body>
75+
76+
</html>

‎demo/float.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Float grid demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1111

1212
</head>
1313
<body>

‎demo/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,11 @@ <h1>Demos</h1>
3131
<li><a href="web1.html">Website demo 1</a></li>
3232
<li><a href="web2.html">Website demo 2</a></li>
3333
</ul>
34+
<h1>Old v5.1.1 Jquery Demos</h1>
35+
Note: those are no longer supported, and use a old version of the lib.
36+
<ul>
37+
<li><a href="two-jq.html">Two grids</a></li>
38+
<li><a href="nested-jq.html">Nested grids</a></li>
39+
</ul>
3440
</body>
3541
</html>

‎demo/knockout.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="demo.css"/>
1010

1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>
12-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
12+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1313
</head>
1414
<body>
1515
<div class="container-fluid">

‎demo/locked.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Locked demo</title>
88

99
<link rel="stylesheet" href="demo.css"/>
10-
<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>
10+
<script src="../node_modules/gridstack/dist/gridstack-all.js"></script>
1111
</style>
1212
</head>
1313
<body>

0 commit comments

Comments
 (0)