Skip to content

Commit 747ecdf

Browse files
committed
angular V11 APi support
* updated Angular to upcoming v11 demo.html to create components now for sidebar!
1 parent 9fe8879 commit 747ecdf

File tree

4 files changed

+38
-43
lines changed

4 files changed

+38
-43
lines changed

angular/projects/demo/src/app/app.component.html

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,21 +71,15 @@
7171
</div>
7272

7373
<div *ngIf="show===7">
74-
<p><b>two.html</b>: shows multiple grids and outside drag&drop</p>
74+
<p><b>two.html</b>: shows multiple grids, sidebar creating Components</p>
7575
<div class="row">
76-
<div class="col-md-3">
76+
<div class="col-md-6">
7777
<div class="sidebar">
78-
<!-- will size to match content -->
79-
<div class="grid-stack-item">
80-
<div class="grid-stack-item-content">Drag me</div>
81-
</div>
82-
<!-- manually force a drop size of 2x1 -->
83-
<div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
84-
<div class="grid-stack-item-content">2x1, max=3</div>
85-
</div>
78+
<div class="sidebar-item grid-stack-item">will be A</div>
79+
<div class="sidebar-item grid-stack-item">will be B max=3</div>
8680
</div>
8781
</div>
88-
<div class="col-md-9">
82+
<div class="col-md-6">
8983
<div class="trash" id="trash">
9084
</div>
9185
</div>

angular/projects/demo/src/app/app.component.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ export class AppComponent implements OnInit {
4646
children: this.sub0,
4747
}
4848

49+
// sidebar content to create storing the Widget description to be used on drop
50+
public sidebarContent: NgGridStackWidget[] = [
51+
{selector: 'app-a'},
52+
{selector: 'app-b', w:2, maxW: 3},
53+
];
54+
4955
// nested grid options
5056
private subOptions: GridStackOptions = {
5157
cellHeight: 50, // should be 50 - top/bottom
@@ -76,8 +82,8 @@ export class AppComponent implements OnInit {
7682
acceptWidgets: true,
7783
float: true,
7884
children: [
79-
{x: 0, y: 0, w: 2, h: 2},
80-
{x: 3, y: 1, h: 2},
85+
{x: 0, y: 0, w: 2, h: 2, selector: 'app-a'},
86+
{x: 3, y: 1, h: 2, selector: 'app-b'},
8187
{x: 4, y: 1},
8288
{x: 2, y: 3, w: 3, maxW: 3, id: 'special', content: 'has maxW=3'},
8389
]
@@ -128,7 +134,7 @@ export class AppComponent implements OnInit {
128134
case 5: data = this.gridOptionsFull; break;
129135
case 6: data = this.nestedGridOptions; break;
130136
case 7: data = this.twoGridOpt1;
131-
GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
137+
GridStack.setupDragIn('.sidebar>.grid-stack-item', undefined, this.sidebarContent);
132138
break;
133139
}
134140
if (this.origTextEl) this.origTextEl.nativeElement.value = JSON.stringify(data, null, ' ');

angular/projects/demo/src/app/dummy.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,6 @@ export class BComponent extends BaseWidget implements OnDestroy {
3434
selector: 'app-c',
3535
template: 'Comp C',
3636
})
37-
export class CComponent extends BaseWidget {
37+
export class CComponent extends BaseWidget implements OnDestroy {
38+
ngOnDestroy() { console.log('Comp C destroyed'); }
3839
}

angular/projects/demo/src/styles.css

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,29 @@ h1 {
2020
margin-bottom: .5rem;
2121
}
2222

23+
.sidebar {
24+
background: rgb(215, 243, 215);
25+
padding: 25px 0;
26+
height: 100px;
27+
text-align: center;
28+
}
29+
.sidebar > .grid-stack-item,
30+
.sidebar-item {
31+
width: 120px;
32+
height: 50px;
33+
border: 2px dashed green;
34+
text-align: center;
35+
line-height: 35px;
36+
background: rgb(192, 231, 192);
37+
cursor: default;
38+
display: inline-block;
39+
}
40+
2341
.grid-stack {
2442
background: #FAFAD2;
2543
}
2644

45+
.sidebar > .grid-stack-item,
2746
.grid-stack-item-content {
2847
text-align: center;
2948
background-color: #18bc9c;
@@ -32,47 +51,22 @@ h1 {
3251
.grid-stack-item-removing {
3352
opacity: 0.5;
3453
}
35-
3654
.trash {
3755
height: 100px;
3856
background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
3957
}
4058

41-
.sidebar {
42-
background: rgba(0, 255, 0, 0.1);
43-
padding: 25px 0;
44-
height: 100px;
45-
text-align: center;
46-
}
47-
48-
.sidebar .grid-stack-item {
49-
width: 120px;
50-
height: 50px;
51-
border: 2px dashed green;
52-
text-align: center;
53-
line-height: 35px;
54-
background: rgba(0, 255, 0, 0.1);
55-
cursor: default;
56-
display: inline-block;
57-
}
58-
59-
.sidebar .grid-stack-item .grid-stack-item-content {
60-
background: none;
61-
}
62-
6359
/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
64-
.grid-stack>.grid-stack-item.grid-stack-sub-grid>.grid-stack-item-content {
65-
background: rgba(0, 0, 0, 0.1);
60+
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
61+
background: rgba(0,0,0,0.1);
6662
inset: 0 2px;
6763
}
68-
6964
.grid-stack.grid-stack-nested {
7065
background: none;
7166
/* background-color: red; */
7267
/* take entire space */
7368
position: absolute;
74-
inset: 0;
75-
/* TODO change top: if you have content in nested grid */
69+
inset: 0; /* TODO change top: if you have content in nested grid */
7670
}
7771

7872
/* for two.html example from bootstrap.min.css */

0 commit comments

Comments
 (0)