112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
import { Component, QueryList, ViewChildren } from '@angular/core';
|
|
import {CdkDragDrop, CdkDragEnter, CdkDropList, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
|
|
|
|
const COLORS = [
|
|
'#ea4335',
|
|
'#4285f4',
|
|
'#fbbc04',
|
|
'#34a853',
|
|
'#fa7b17',
|
|
'#f538a0',
|
|
'#a142f4',
|
|
'#24c1e0',
|
|
'#9aa0a6',
|
|
'#5195ea',
|
|
'#e25142',
|
|
'#f5c518',
|
|
'#41af6a',
|
|
'#f6aea9',
|
|
'#a50e0e',
|
|
'#aecbfa',
|
|
'#174ea6',
|
|
'#fde293',
|
|
'#a8dab5',
|
|
'#0d652d',
|
|
'#fdc69c',
|
|
'#fba9d6',
|
|
'#c92786',
|
|
'#d7aefb',
|
|
'#8430ce',
|
|
'#a1e4f2',
|
|
'#007b83',
|
|
'#e8eaed',
|
|
'#b9d4f6',
|
|
'#f3b9b3',
|
|
'#fbe7a2',
|
|
'#b3dfc3',
|
|
]
|
|
|
|
function getColor() {
|
|
return COLORS[Math.floor(Math.random() * 32)];
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-customizable-grid',
|
|
templateUrl: './customizable-grid.component.html'
|
|
})
|
|
export class CustomizableGridComponent {
|
|
entered($event: CdkDragEnter) {
|
|
console.log($event.item.data, $event.container.data);
|
|
moveItemInArray(this.cards, $event.item.data, $event.container.data);
|
|
}
|
|
entered2($event: CdkDragEnter) {
|
|
console.log($event.item.data, $event.container.data);
|
|
moveItemInArray(this.cards, $event.item.data, $event.container.data);
|
|
}
|
|
|
|
drop(event: CdkDragDrop<any[]>) {
|
|
|
|
}
|
|
|
|
done(){
|
|
|
|
}
|
|
|
|
@ViewChildren(CdkDropList) dropsQuery!: QueryList<CdkDropList>;
|
|
|
|
drops!: CdkDropList[];
|
|
|
|
ngAfterViewInit() {
|
|
this.dropsQuery.changes.subscribe(() => {
|
|
this.drops = this.dropsQuery.toArray()
|
|
})
|
|
Promise.resolve().then(() => {
|
|
this.drops = this.dropsQuery.toArray();
|
|
console.log(this.drops);
|
|
})
|
|
}
|
|
|
|
/** Based on the screen size, switch from standard to one column per row */
|
|
cards = [
|
|
{ title: 'Card 1', cols: 2, rows: 2, color: getColor()},
|
|
{ title: 'Card 2', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 3', cols: 3, rows: 1, color: getColor() },
|
|
{ title: 'Card 4', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 5', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 6', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 7', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 8', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 9', cols: 1, rows: 3, color: getColor() },
|
|
{ title: 'Card 10', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 11', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 12', cols: 2, rows: 1, color: getColor() },
|
|
{ title: 'Card 13', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 14', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 15', cols: 1, rows: 2, color: getColor() },
|
|
{ title: 'Card 16', cols: 2, rows: 1, color: getColor() },
|
|
{ title: 'Card 17', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 18', cols: 2, rows: 1, color: getColor() },
|
|
{ title: 'Card 19', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 20', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 21', cols: 1, rows: 1, color: getColor()},
|
|
/* { title: 'Card 22', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 23', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 24', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 25', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 26', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 27', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 28', cols: 1, rows: 1, color: getColor() },
|
|
{ title: 'Card 29', cols: 1, rows: 1, color: getColor() } */
|
|
];
|
|
}
|