diff --git a/.gitignore b/.gitignore index ee5c9d8..2174627 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,7 @@ npm-debug.log yarn-error.log testem.log /typings +src/app/angular2gridster # System Files .DS_Store diff --git a/README.md b/README.md index 3de9464..aefa089 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,15 @@ npm i npm start ``` +Windows: +In CMD run `MKLINK /D .\src\app\angular2gridster D:\your\absolute\path\to\angular2gridster\projects\angular2gridster\src\lib` (make sure the second path is the correct absolute for your environment). + +Then run the following: +```shell + npm install + ng serve +``` + Go to: http://localhost:4200/ ## Compilation problems diff --git a/package.json b/package.json index 8dd7af8..6ac5929 100644 --- a/package.json +++ b/package.json @@ -40,25 +40,25 @@ }, "homepage": "https://github.com/swiety85/angular2gridster#readme", "dependencies": { - "@angular/common": "^6.0.3", - "@angular/core": "^6.0.3", - "@angular/compiler": "^6.0.3", - "@angular/animations": "^6.0.3", - "@angular/forms": "^6.0.3", - "@angular/http": "^6.0.3", - "@angular/platform-browser": "^6.0.3", - "@angular/platform-browser-dynamic": "^6.0.3", - "@angular/router": "^6.0.3", + "@angular/common": "4.3.6", + "@angular/core": "4.3.6", + "@angular/compiler": "4.3.6", + "@angular/animations": "4.3.6", + "@angular/forms": "4.3.6", + "@angular/http": "4.3.6", + "@angular/platform-browser": "4.3.6", + "@angular/platform-browser-dynamic": "4.3.6", + "@angular/router": "4.3.6", "core-js": "^2.5.4", - "rxjs": "^6.0.0", + "rxjs": "^5.4.3", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.5", "@angular-devkit/build-ng-packagr": "~0.6.5", - "@angular/cli": "~6.0.7", - "@angular/compiler-cli": "^6.0.3", - "@angular/language-service": "^6.0.3", + "@angular/cli": "~1.7.4", + "@angular/compiler-cli": "4.3.6", + "@angular/language-service": "4.3.6", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", diff --git a/projects/angular2gridster/src/lib/GridsterOptions.ts b/projects/angular2gridster/src/lib/GridsterOptions.ts index dc160a3..6dd5c49 100644 --- a/projects/angular2gridster/src/lib/GridsterOptions.ts +++ b/projects/angular2gridster/src/lib/GridsterOptions.ts @@ -1,4 +1,4 @@ -import { Observable, of, fromEvent, pipe, merge } from 'rxjs'; +import { Observable } from 'rxjs'; import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators'; import { IGridsterOptions } from './IGridsterOptions'; @@ -35,7 +35,7 @@ export class GridsterOptions { responsiveOptions: Array = []; basicOptions: IGridsterOptions; - breakpointsMap = { + breakpointsMap: {[index: string]: number} = { sm: 576, // Small devices md: 768, // Medium devices lg: 992, // Large devices @@ -47,9 +47,9 @@ export class GridsterOptions { this.responsiveOptions = this.extendResponsiveOptions(config.responsiveOptions || []); - this.change = merge( - of(this.getOptionsByWidth(document.documentElement.clientWidth)), - fromEvent(window, 'resize').pipe( + this.change = Observable.merge( + Observable.of(this.getOptionsByWidth(document.documentElement.clientWidth)), + Observable.fromEvent(window, 'resize').pipe( debounceTime(config.responsiveDebounce || 0), map((event: Event) => this.getOptionsByWidth(document.documentElement.clientWidth)) ) diff --git a/projects/angular2gridster/src/lib/gridList/GridListItem.ts b/projects/angular2gridster/src/lib/gridList/GridListItem.ts index 6f6d508..b5183fe 100644 --- a/projects/angular2gridster/src/lib/gridList/GridListItem.ts +++ b/projects/angular2gridster/src/lib/gridList/GridListItem.ts @@ -82,7 +82,6 @@ export class GridListItem { get h () { const item = this.getItem(); const breakpoint = item.gridster ? item.gridster.options.breakpoint : null; - return this.getValueH(breakpoint); } set h (value: number) { @@ -127,6 +126,18 @@ export class GridListItem { return item.positionY; } + get variableHeight(): boolean { + return this.getItem().variableHeight; + } + + get contentHeight(): number { + const contentHeight = this.itemComponent.contentWrapper.nativeElement.offsetheight || 0; + const childHeight = this.$element.firstChild.offsetHeight || 0; + return Math.max(contentHeight, childHeight); + } + + constructor () {} + public setFromGridsterItem (item: GridsterItemComponent): GridListItem { if (this.isItemSet()) { throw new Error('GridListItem is already set.'); @@ -166,7 +177,7 @@ export class GridListItem { }); } - public copyForBreakpoint(breakpoint?) { + public copyForBreakpoint(breakpoint?: string) { const itemCopy = new GridListItem(); return itemCopy.setFromObjectLiteral({ @@ -181,83 +192,83 @@ export class GridListItem { }); } - public getValueX(breakpoint?) { + public getValueX(breakpoint?: string) { const item = this.getItem(); return item[this.getXProperty(breakpoint)]; } - public getValueY(breakpoint?) { + public getValueY(breakpoint?: string) { const item = this.getItem(); return item[this.getYProperty(breakpoint)]; } - public getValueW(breakpoint?) { + public getValueW(breakpoint?: string) { const item = this.getItem(); return item[this.getWProperty(breakpoint)] || 1; } - public getValueH(breakpoint?) { + public getValueH(breakpoint?: string) { const item = this.getItem(); return item[this.getHProperty(breakpoint)] || 1; } - public setValueX(value: number, breakpoint?) { + public setValueX(value: number, breakpoint?: string) { const item = this.getItem(); item[this.getXProperty(breakpoint)] = value; } - public setValueY(value: number, breakpoint?) { + public setValueY(value: number, breakpoint?: string) { const item = this.getItem(); item[this.getYProperty(breakpoint)] = value; } - public setValueW(value: number, breakpoint?) { + public setValueW(value: number, breakpoint?: string) { const item = this.getItem(); item[this.getWProperty(breakpoint)] = value; } - public setValueH(value: number, breakpoint?) { + public setValueH(value: number, breakpoint?: string) { const item = this.getItem(); item[this.getHProperty(breakpoint)] = value; } - public triggerChangeX(breakpoint?) { + public triggerChangeX(breakpoint?: string) { const item = this.itemComponent; if (item) { - item[this.getXProperty(breakpoint) + 'Change'].emit(this.getValueX(breakpoint)); + (item)[this.getXProperty(breakpoint) + 'Change'].emit(this.getValueX(breakpoint)); } } - public triggerChangeY(breakpoint?) { + public triggerChangeY(breakpoint?: string) { const item = this.itemComponent; if (item) { - item[this.getYProperty(breakpoint) + 'Change'].emit(this.getValueY(breakpoint)); + (item)[this.getYProperty(breakpoint) + 'Change'].emit(this.getValueY(breakpoint)); } } - public triggerChangeW(breakpoint?) { + public triggerChangeW(breakpoint?: string) { const item = this.itemComponent; if (item) { - item[this.getWProperty(breakpoint) + 'Change'].emit(this.getValueW(breakpoint)); + (item)[this.getWProperty(breakpoint) + 'Change'].emit(this.getValueW(breakpoint)); } } - public triggerChangeH(breakpoint?) { + public triggerChangeH(breakpoint?: string) { const item = this.itemComponent; if (item) { - item[this.getHProperty(breakpoint) + 'Change'].emit(this.getValueH(breakpoint)); + (item)[this.getHProperty(breakpoint) + 'Change'].emit(this.getValueH(breakpoint)); } } - public hasPositions(breakpoint?) { + public hasPositions(breakpoint?: string) { const x = this.getValueX(breakpoint); const y = this.getValueY(breakpoint); @@ -278,9 +289,18 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; + let top; + if (gridster.gridList) { + const rowHeights = gridster.getRowHeights(); + const rowTops = gridster.getRowTops(rowHeights); + top = rowTops[this.y]; + } else { + top = this.y * gridster.cellHeight; + } + return { left: this.x * gridster.cellWidth, - top: this.y * gridster.cellHeight + top: top }; } @@ -297,8 +317,14 @@ export class GridListItem { } gridster = gridster || this.itemComponent.gridster; - let width = this.getValueW(gridster.options.breakpoint); - let height = this.getValueH(gridster.options.breakpoint); + let rowHeights, rowTops; + if (gridster.gridList) { + rowHeights = gridster.getRowHeights(); + rowTops = gridster.getRowTops(rowHeights); + } + + let width = this.w; + let height = this.h; if (gridster.options.direction === 'vertical') { width = Math.min(width, gridster.options.lanes); @@ -307,9 +333,19 @@ export class GridListItem { height = Math.min(height, gridster.options.lanes); } + let pixelHeight; + if (rowHeights) { + pixelHeight = 0; + for (let i = this.y; i < this.y + height; i++) { + pixelHeight += rowHeights[i]; + } + } else { + pixelHeight = height * gridster.cellHeight; + } + return { width: width * gridster.cellWidth, - height: height * gridster.cellHeight + height: pixelHeight }; } @@ -333,7 +369,7 @@ export class GridListItem { private getWProperty(breakpoint?: string) { if (this.itemPrototype) { - return this.itemPrototype[GridListItem.W_PROPERTY_MAP[breakpoint]] ? + return (this.itemPrototype)[GridListItem.W_PROPERTY_MAP[breakpoint]] ? GridListItem.W_PROPERTY_MAP[breakpoint] : 'w'; } @@ -349,7 +385,7 @@ export class GridListItem { private getHProperty(breakpoint?: string) { if (this.itemPrototype) { - return this.itemPrototype[GridListItem.H_PROPERTY_MAP[breakpoint]] ? + return (this.itemPrototype)[GridListItem.H_PROPERTY_MAP[breakpoint]] ? GridListItem.H_PROPERTY_MAP[breakpoint] : 'w'; } diff --git a/projects/angular2gridster/src/lib/gridList/gridList.ts b/projects/angular2gridster/src/lib/gridList/gridList.ts index f140428..dc89f65 100644 --- a/projects/angular2gridster/src/lib/gridList/gridList.ts +++ b/projects/angular2gridster/src/lib/gridList/gridList.ts @@ -1,13 +1,15 @@ import { GridListItem } from './GridListItem'; import { IGridsterOptions } from '../IGridsterOptions'; -const GridCol = function (lanes) { +const makeGridCol = function (lanes: number): GridCol { + let result: GridListItem[] = []; for (let i = 0; i < lanes; i++) { - this.push(null); + result.push(null); } + return result; }; -// Extend the Array prototype -GridCol.prototype = []; + +type GridCol = GridListItem[]; /** * A GridList manages the two-dimensional positions from a list of items, @@ -90,7 +92,7 @@ export class GridList { return output; } - setOption(name: string, value: any) { + setOption(name: keyof IGridsterOptions, value: any) { this.options[name] = value; } @@ -146,8 +148,8 @@ export class GridList { * * @returns Array x and y. */ - findPositionForItem(item: GridListItem, start: { x: number, y: number }, fixedRow?: number): Array { - let x, y, position; + findPositionForItem(item: GridListItem, start: { x: number, y: number }, fixedRow?: number): [number, number] { + let x, y, position: [number, number]; // Start searching for a position from the horizontal position of the // rightmost item from the grid @@ -235,7 +237,7 @@ export class GridList { * Each item that is returned is not the GridListItem but the helper that holds GridListItem * and list of changed properties. */ - getChangedItems(initialItems: Array, breakpoint?): Array<{ + getChangedItems(initialItems: Array, breakpoint?: string): Array<{ item: GridListItem, changes: Array, isNew: boolean }> { @@ -313,7 +315,7 @@ export class GridList { * If a "fixed item" is provided, its position will be kept intact and the * rest of the items will be layed around it. */ - pullItemsToLeft(fixedItem?) { + pullItemsToLeft(fixedItem?: any) { if (this.options.direction === 'none') { return; } @@ -468,7 +470,7 @@ export class GridList { } } - private isItemFloating(item) { + private isItemFloating(item: any) { if (item.itemComponent && item.itemComponent.isDragging) { return false; } @@ -504,7 +506,7 @@ export class GridList { (itemData.x + itemData.w) <= options.lanes; } - private findDefaultPositionHorizontal(width: number, height: number) { + public findDefaultPositionHorizontal(width: number, height: number) { for (const col of this.grid) { const colIdx = this.grid.indexOf(col); let rowIdx = 0; @@ -518,7 +520,7 @@ export class GridList { return [this.grid.length, 0]; } - private findDefaultPositionVertical(width: number, height: number) { + public findDefaultPositionVertical(width: number, height: number) { for (const row of this.grid) { const rowIdx = this.grid.indexOf(row); @@ -606,7 +608,7 @@ export class GridList { * Check that an item wouldn't overlap with another one if placed at a * certain position within the grid */ - private itemFitsAtPosition(item: GridListItem, newPosition) { + private itemFitsAtPosition(item: GridListItem, newPosition: [number, number]) { const position = this.getItemPosition(item); let x, y; @@ -646,7 +648,7 @@ export class GridList { return true; } - private updateItemPosition(item: GridListItem, position: Array) { + private updateItemPosition(item: GridListItem, position: [number, number]) { if (item.x !== null && item.y !== null) { this.deleteItemPositionFromGrid(item); } @@ -661,7 +663,7 @@ export class GridList { * @param number width The new width. * @param number height The new height. */ - private updateItemSize(item: GridListItem, width, height) { + private updateItemSize(item: GridListItem, width: number, height: number) { if (item.x !== null && item.y !== null) { this.deleteItemPositionFromGrid(item); } @@ -694,10 +696,10 @@ export class GridList { /** * Ensure that the grid has at least N columns available. */ - private ensureColumns(N) { + private ensureColumns(N: number) { for (let i = 0; i < N; i++) { if (!this.grid[i]) { - this.grid.push(new GridCol(this.options.lanes)); + this.grid.push(makeGridCol(this.options.lanes)); } } } @@ -741,10 +743,10 @@ export class GridList { return itm.copy(); }), this.options); - let leftOfItem; - let rightOfItem; - let aboveOfItem; - let belowOfItem; + let leftOfItem: [number, number]; + let rightOfItem: [number, number]; + let aboveOfItem: [number, number]; + let belowOfItem: [number, number]; for (let i = 0; i < collidingItems.length; i++) { const collidingItem = _gridList.items[collidingItems[i]], @@ -805,7 +807,7 @@ export class GridList { * - preserving its current row * - preserving the previous horizontal order between items */ - private findLeftMostPositionForItem(item) { + private findLeftMostPositionForItem(item: any) { let tail = 0; const position = this.getItemPosition(item); @@ -828,7 +830,7 @@ export class GridList { return tail; } - private findItemByPosition(x: number, y: number): GridListItem { + public findItemByPosition(x: number, y: number): GridListItem { for (let i = 0; i < this.items.length; i++) { if (this.items[i].x === x && this.items[i].y === y) { return this.items[i]; @@ -836,7 +838,7 @@ export class GridList { } } - private getItemByAttribute(key, value) { + public getItemByAttribute(key: keyof GridListItem, value: any) { for (let i = 0; i < this.items.length; i++) { if (this.items[i][key] === value) { return this.items[i]; @@ -845,7 +847,7 @@ export class GridList { return null; } - private padNumber(nr, prefix) { + private padNumber(nr: number, prefix: string) { // Currently works for 2-digit numbers (<100) return nr >= 10 ? nr : prefix + nr; } @@ -873,8 +875,7 @@ export class GridList { * This restores the direction of the actions and greatly simplifies the * transformations. */ - private getItemPosition(item: any) { - + private getItemPosition(item: any): { x: number, y: number, w: number, h: number } { if (this.options.direction === 'horizontal') { return item; } else { @@ -890,7 +891,7 @@ export class GridList { /** * See getItemPosition. */ - private setItemPosition(item, position) { + private setItemPosition(item: any, position: [number, number]) { if (this.options.direction === 'horizontal') { item.x = position[0]; diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts index 6b3b62e..3d65e1c 100644 --- a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts +++ b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts @@ -1,10 +1,9 @@ -import { Component, OnInit, ElementRef, Inject, Host, Input, Output, +import { Component, OnInit, ElementRef, Inject, Input, Output, EventEmitter, SimpleChanges, OnChanges, OnDestroy, HostBinding, - ChangeDetectionStrategy, AfterViewInit, NgZone, ViewEncapsulation } from '@angular/core'; + ChangeDetectionStrategy, AfterViewInit, NgZone, ViewEncapsulation, ViewChild } from '@angular/core'; import { Subscription } from 'rxjs'; import { GridsterService } from '../gridster.service'; -import { GridsterPrototypeService } from '../gridster-prototype/gridster-prototype.service'; import { GridListItem } from '../gridList/GridListItem'; import {DraggableEvent} from '../utils/DraggableEvent'; @@ -15,8 +14,10 @@ import {utils} from '../utils/utils'; @Component({ selector: 'ngx-gridster-item', - template: `
- + template: `
+ + +
@@ -198,6 +199,10 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, @Input() options: any = {}; + @Input() variableHeight = false; + + @ViewChild('contentWrapper') contentWrapper: ElementRef; + autoSize: boolean; @HostBinding('class.is-dragging') isDragging = false; @@ -240,7 +245,6 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, private resizeSubscriptions: Array = []; constructor(private zone: NgZone, - private gridsterPrototypeService: GridsterPrototypeService, @Inject(ElementRef) elementRef: ElementRef, @Inject(GridsterService) gridster: GridsterService) { @@ -294,6 +298,30 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, if (this.gridster.options.resizable && this.item.resizable) { this.enableResizable(); } + + if (this.variableHeight) { + const readySubscription = this.gridster.gridsterComponent.ready.subscribe(() => { + this.gridster.gridList.resizeItem(this.item, { w: this.w, h: 1 }); + readySubscription.unsubscribe(); + }); + let lastOffsetHeight: number; + const observer = new MutationObserver((mutations) => { + const offsetHeight = this.item.contentHeight; + if (offsetHeight !== lastOffsetHeight) { + for (const item of this.gridster.items) { + item.applySize(); + item.applyPosition(); + } + } + lastOffsetHeight = offsetHeight; + }); + observer.observe(this.contentWrapper.nativeElement, { + childList: true, + subtree: true, + attributes: true, + characterData: true + }); + } } ngOnChanges(changes: SimpleChanges) { @@ -304,20 +332,20 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, ['w', ...Object.keys(GridListItem.W_PROPERTY_MAP).map(breakpoint => GridListItem.W_PROPERTY_MAP[breakpoint])] .filter(propName => changes[propName] && !changes[propName].isFirstChange()) - .forEach((propName: string) => { + .forEach((propName: keyof GridsterItemComponent) => { if (changes[propName].currentValue > this.options.maxWidth) { this[propName] = this.options.maxWidth; - setTimeout(() => this[propName + 'Change'].emit(this[propName])); + setTimeout(() => this[(propName + 'Change')].emit(this[propName])); } rerender = true; }); ['h', ...Object.keys(GridListItem.H_PROPERTY_MAP).map(breakpoint => GridListItem.H_PROPERTY_MAP[breakpoint])] .filter(propName => changes[propName] && !changes[propName].isFirstChange()) - .forEach((propName: string) => { + .forEach((propName: keyof GridsterItemComponent) => { if (changes[propName].currentValue > this.options.maxHeight) { this[propName] = this.options.maxHeight; - setTimeout(() => this[propName + 'Change'].emit(this[propName])); + setTimeout(() => this[(propName + 'Change')].emit(this[propName])); } rerender = true; }); @@ -392,9 +420,24 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, const draggable = new Draggable(handler, this.getResizableOptions()); - let startEvent; - let startData; - let cursorToElementPosition; + let startEvent: DraggableEvent; + let startData: { + top: number, + left: number, + height: number, + width: number, + minX: number, + maxX: number, + minY: number, + maxY: number, + minW: number, + maxW: number, + minH: number, + maxH: number, + scrollLeft: number, + scrollTop: number + }; + let cursorToElementPosition: { x: number, y: number }; const dragStartSub = draggable.dragStart .subscribe((event: DraggableEvent) => { @@ -452,7 +495,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, }); this.resizeSubscriptions = []; - [].forEach.call(this.$element.querySelectorAll('.gridster-item-resizable-handler'), (handler) => { + [].forEach.call(this.$element.querySelectorAll('.gridster-item-resizable-handler'), (handler: HTMLElement) => { handler.style.display = ''; }); } @@ -462,7 +505,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, return; } this.zone.runOutsideAngular(() => { - let cursorToElementPosition; + let cursorToElementPosition: { x: number, y: number }; const draggable = new Draggable(this.$element, this.getDraggableOptions()); @@ -511,7 +554,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, } private getResizeHandlers(): HTMLElement[] { - return [].filter.call(this.$element.children[0].children, (el) => { + return [].filter.call(this.$element.children[0].children, (el: HTMLElement) => { return el.classList.contains('gridster-item-resizable-handler'); }); @@ -540,7 +583,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit, const isItemResizable = this.gridster.options.resizable && this.item.resizable; const resizeHandles = this.gridster.options.resizeHandles; - return isItemResizable && (!resizeHandles || (resizeHandles && !!resizeHandles[direction])); + return isItemResizable && (!resizeHandles || (resizeHandles && !!(resizeHandles)[direction])); } private setPositionsForGrid(options: IGridsterOptions) { diff --git a/projects/angular2gridster/src/lib/gridster-prototype/gridster-item-prototype.directive.ts b/projects/angular2gridster/src/lib/gridster-prototype/gridster-item-prototype.directive.ts index 257739d..5f7cc72 100644 --- a/projects/angular2gridster/src/lib/gridster-prototype/gridster-item-prototype.directive.ts +++ b/projects/angular2gridster/src/lib/gridster-prototype/gridster-item-prototype.directive.ts @@ -1,6 +1,6 @@ -import { Directive, ElementRef, Input, Output, HostBinding, EventEmitter, OnInit, OnDestroy, +import { Directive, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy, NgZone} from '@angular/core'; -import { Observable, Subscription, fromEvent } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; import { GridsterPrototypeService } from './gridster-prototype.service'; import { GridListItem } from '../gridList/GridListItem'; @@ -35,6 +35,9 @@ export class GridsterItemPrototypeDirective implements OnInit, OnDestroy { @Input() hLg: number; @Input() hXl: number; + @Input() variableHeight: boolean = false; + @Input() variableHeightContainToRow: boolean = false; + positionX: number; positionY: number; @@ -152,7 +155,7 @@ export class GridsterItemPrototypeDirective implements OnInit, OnDestroy { } private enableDragDrop() { - let cursorToElementPosition; + let cursorToElementPosition: { x: number, y: number }; const draggable = new Draggable(this.elementRef.nativeElement); const dragStartSub = draggable.dragStart @@ -186,7 +189,7 @@ export class GridsterItemPrototypeDirective implements OnInit, OnDestroy { }); }); - const scrollSub = fromEvent(document, 'scroll') + const scrollSub = Observable.fromEvent(document, 'scroll') .subscribe(() => { if (this.$element) { this.updateParentElementData(); diff --git a/projects/angular2gridster/src/lib/gridster-prototype/gridster-prototype.service.ts b/projects/angular2gridster/src/lib/gridster-prototype/gridster-prototype.service.ts index 7bae304..a693ef7 100644 --- a/projects/angular2gridster/src/lib/gridster-prototype/gridster-prototype.service.ts +++ b/projects/angular2gridster/src/lib/gridster-prototype/gridster-prototype.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Observable, Subject, merge } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { takeUntil, switchMap, map, scan, filter, share, tap } from 'rxjs/operators'; import { GridsterService } from '../gridster.service'; @@ -22,10 +22,10 @@ export class GridsterPrototypeService { observeDropOver (gridster: GridsterService) { return this.dragStopSubject.pipe( - filter((data) => { + filter((data: any) => { const gridsterEl = gridster.gridsterComponent.$element; const isOverNestedGridster = [].slice.call(gridsterEl.querySelectorAll('gridster')) - .reduce((isOverGridster, nestedGridsterEl) => { + .reduce((isOverGridster: boolean, nestedGridsterEl: HTMLElement) => { return isOverGridster || this.isOverGridster(data.item, nestedGridsterEl, data.event, gridster.options); }, false); @@ -36,7 +36,7 @@ export class GridsterPrototypeService { return this.isOverGridster(data.item, gridsterEl, data.event, gridster.options); }), - tap((data) => { + tap((data: any) => { // TODO: what we should provide as a param? // prototype.drop.emit({item: prototype.item}); data.item.onDrop(gridster); @@ -46,12 +46,12 @@ export class GridsterPrototypeService { observeDropOut (gridster: GridsterService) { return this.dragStopSubject.pipe( - filter((data) => { + filter((data: any) => { const gridsterEl = gridster.gridsterComponent.$element; return !this.isOverGridster(data.item, gridsterEl, data.event, gridster.options); }), - tap((data) => { + tap((data: any) => { // TODO: what we should provide as a param? data.item.onCancel(); }) @@ -64,7 +64,7 @@ export class GridsterPrototypeService { dragOut: Observable } { const over = this.dragSubject.pipe( - map((data) => { + map((data: any) => { const gridsterEl = gridster.gridsterComponent.$element; return { @@ -77,7 +77,7 @@ export class GridsterPrototypeService { ); const drop = this.dragStopSubject.pipe( - map((data) => { + map((data: any) => { const gridsterEl = gridster.gridsterComponent.$element; return { @@ -89,7 +89,7 @@ export class GridsterPrototypeService { }) ); - const dragExt = merge( + const dragExt = Observable.merge( // dragStartSubject is connected in case when item prototype is placed above gridster // and drag enter is not fired this.dragStartSubject.pipe(map(() => ({ item: null, isOver: false, isDrop: false }))), @@ -140,14 +140,14 @@ export class GridsterPrototypeService { /** * Creates observable that is fired on dragging over gridster container. */ - private createDragOverObservable ( + public createDragOverObservable ( dragIsOver: Observable<{item: GridsterItemPrototypeDirective, isOver: boolean}>, gridster: GridsterService ) { return dragIsOver.pipe( filter((data: any) => data.isOver && !data.isEnter && !data.isOut), map((data: any): GridsterItemPrototypeDirective => data.item), - tap((item) => item.onOver(gridster)) + tap((item: GridsterItemPrototypeDirective) => item.onOver(gridster)) ); } /** @@ -160,7 +160,7 @@ export class GridsterPrototypeService { return dragIsOver.pipe( filter((data: any) => data.isEnter), map((data: any): GridsterItemPrototypeDirective => data.item), - tap((item) => item.onEnter(gridster)) + tap((item: GridsterItemPrototypeDirective) => item.onEnter(gridster)) ); } /** @@ -174,7 +174,7 @@ export class GridsterPrototypeService { return dragIsOver.pipe( filter((data: any) => data.isOut), map((data: any): GridsterItemPrototypeDirective => data.item), - tap((item) => item.onOut(gridster)) + tap((item: GridsterItemPrototypeDirective) => item.onOut(gridster)) ); } @@ -182,7 +182,7 @@ export class GridsterPrototypeService { * Checks whether "element" position fits inside "containerEl" position. * It checks if "element" is totally covered by "containerEl" area. */ - private isOverGridster(item: GridsterItemPrototypeDirective, gridsterEl: HTMLElement, event, options): boolean { + private isOverGridster(item: GridsterItemPrototypeDirective, gridsterEl: HTMLElement, event: any, options: any): boolean { const el = item.$element; const parentItem = gridsterEl.parentElement && gridsterEl.parentElement.closest('gridster-item'); diff --git a/projects/angular2gridster/src/lib/gridster.component.ts b/projects/angular2gridster/src/lib/gridster.component.ts index e2cc8d7..44f010d 100644 --- a/projects/angular2gridster/src/lib/gridster.component.ts +++ b/projects/angular2gridster/src/lib/gridster.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, AfterContentInit, OnDestroy, ElementRef, ViewChild, NgZone, Input, Output, EventEmitter, ChangeDetectionStrategy, HostBinding, ViewEncapsulation } from '@angular/core'; -import { Observable, Subscription, fromEvent, ConnectableObservable } from 'rxjs'; +import { Observable, Subscription, ConnectableObservable } from 'rxjs'; import { debounceTime, filter, publish } from 'rxjs/operators'; import { utils } from './utils/utils'; @@ -18,6 +18,7 @@ import { GridsterOptions } from './GridsterOptions'; @Component({ selector: 'ngx-gridster', template: `
+