@memberjunction/ng-container-directives 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lib/ng-fill-container-directive.d.ts +7 -4
  2. package/dist/lib/ng-fill-container-directive.d.ts.map +1 -1
  3. package/dist/lib/ng-fill-container-directive.js +56 -29
  4. package/package.json +3 -3
package/dist/lib/ng-fill-container-directive.d.ts CHANGED
@@ -6,15 +6,18 @@ export declare class FillContainer implements OnInit, OnDestroy {
6
6
  fillHeight: boolean;
7
7
  rightMargin: number;
8
8
  bottomMargin: number;
9
+ static DisableResize: boolean;
10
+ static OutputDebugInfo: boolean;
11
+ protected static OutputDebugMessage(message: string): void;
9
12
  constructor(elementRef: ElementRef);
10
13
  private _resizeDebounceTime;
11
14
  private _resizeEndDebounceTime;
15
+ private _resizeSubscription;
16
+ private _resizeImmediateSubscription;
12
17
  ngOnInit(): void;
13
- private resizeImmediateSubscription;
14
- private resizeEndSubscription;
15
18
  ngOnDestroy(): void;
16
- getParent(element: HTMLElement): HTMLElement | null;
17
- resizeElement(): void;
19
+ protected getParent(element: HTMLElement): HTMLElement | null;
20
+ protected resizeElement(): void;
18
21
  protected shouldSkipResize(el: HTMLElement): boolean;
19
22
  protected elementBelowHiddenTab(element: HTMLElement): boolean;
20
23
  protected elementWithinGrid(element: HTMLElement): boolean;
package/dist/lib/ng-fill-container-directive.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ng-fill-container-directive.d.ts","sourceRoot":"","sources":["../../src/lib/ng-fill-container-directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAS,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAMhF,qBAGa,aAAc,YAAW,MAAM,EAAE,SAAS;IAMzC,OAAO,CAAC,UAAU;IALrB,SAAS,EAAE,OAAO,CAAQ;IAC1B,UAAU,EAAE,OAAO,CAAQ;IAC3B,WAAW,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,MAAM,CAAK;gBAEd,UAAU,EAAE,UAAU;IAG1C,OAAO,CAAC,mBAAmB,CAAe;IAC1C,OAAO,CAAC,sBAAsB,CAAe;IAC7C,QAAQ,IAAI,IAAI;IAwBhB,OAAO,CAAC,2BAA2B,CAA6B;IAChE,OAAO,CAAC,qBAAqB,CAA6B;IAE1D,WAAW,IAAI,IAAI;IAKnB,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI;IAuBnD,aAAa,IAAI,IAAI;IA+CrB,SAAS,CAAC,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO;IAWpD,SAAS,CAAC,qBAAqB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAiB9D,SAAS,CAAC,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;yCA7I/C,aAAa;2CAAb,aAAa;CA2JzB"}
1
+ {"version":3,"file":"ng-fill-container-directive.d.ts","sourceRoot":"","sources":["../../src/lib/ng-fill-container-directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAS,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAMhF,qBAGa,aAAc,YAAW,MAAM,EAAE,SAAS;IAezC,OAAO,CAAC,UAAU;IAdrB,SAAS,EAAE,OAAO,CAAQ;IAC1B,UAAU,EAAE,OAAO,CAAQ;IAC3B,WAAW,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,MAAM,CAAK;IAGlC,OAAc,aAAa,EAAE,OAAO,CAAS;IAC7C,OAAc,eAAe,EAAE,OAAO,CAAS;IAC/C,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;gBAMtC,UAAU,EAAE,UAAU;IAG1C,OAAO,CAAC,mBAAmB,CAAe;IAC1C,OAAO,CAAC,sBAAsB,CAAe;IAE7C,OAAO,CAAC,mBAAmB,CAA6B;IACxD,OAAO,CAAC,4BAA4B,CAA6B;IAEjE,QAAQ,IAAI,IAAI;IAwDhB,WAAW,IAAI,IAAI;IAKnB,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI;IAY7D,SAAS,CAAC,aAAa,IAAI,IAAI;IAsD/B,SAAS,CAAC,gBAAgB,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO;IAWpD,SAAS,CAAC,qBAAqB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAiB9D,SAAS,CAAC,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;yCAnL/C,aAAa;2CAAb,aAAa;CAiMzB"}
package/dist/lib/ng-fill-container-directive.js CHANGED
@@ -5,6 +5,11 @@ import { debounceTime } from 'rxjs/operators';
5
5
  import { MJEventType, MJGlobal } from '@memberjunction/global';
6
6
  import * as i0 from "@angular/core";
7
7
  export class FillContainer {
8
+ static OutputDebugMessage(message) {
9
+ if (FillContainer.OutputDebugInfo) {
10
+ console.log(message);
11
+ }
12
+ }
8
13
  constructor(elementRef) {
9
14
  this.elementRef = elementRef;
10
15
  this.fillWidth = true;
@@ -13,25 +18,53 @@ export class FillContainer {
13
18
  this.bottomMargin = 0;
14
19
  this._resizeDebounceTime = 100;
15
20
  this._resizeEndDebounceTime = 500;
16
- this.resizeImmediateSubscription = null;
17
- this.resizeEndSubscription = null;
21
+ this._resizeSubscription = null;
22
+ this._resizeImmediateSubscription = null;
18
23
  }
19
24
  ngOnInit() {
20
25
  const el = this.elementRef.nativeElement;
21
26
  if (el && el.style) {
27
+ // initial resize
28
+ FillContainer.OutputDebugMessage('');
29
+ FillContainer.OutputDebugMessage('Initial resize event');
22
30
  this.resizeElement();
23
- // This will fire more frequently while the user is resizing
24
- this.resizeImmediateSubscription = fromEvent(window, 'resize')
31
+ // This will fire more frequently while the user is resizing so use a shorter debounce time
32
+ this._resizeImmediateSubscription = fromEvent(window, 'resize')
25
33
  .pipe(debounceTime(this._resizeDebounceTime))
26
- .subscribe(() => this.resizeElement());
34
+ .subscribe(() => {
35
+ FillContainer.OutputDebugMessage('');
36
+ FillContainer.OutputDebugMessage('RECEIVED resize event');
37
+ this.resizeElement();
38
+ });
27
39
  // This will fire once the user has stopped resizing for _resizeEndDebounceTime milliseconds
28
- this.resizeEndSubscription = fromEvent(window, 'resize')
40
+ this._resizeSubscription = fromEvent(window, 'resize')
29
41
  .pipe(debounceTime(this._resizeEndDebounceTime))
30
- .subscribe(() => this.resizeElement());
42
+ .subscribe(() => {
43
+ FillContainer.OutputDebugMessage('');
44
+ FillContainer.OutputDebugMessage('RECEIVED resize end event');
45
+ this.resizeElement();
46
+ });
47
+ // // Subscribe once but handle both scenarios
48
+ // this._resizeSubscription = fromEvent(window, 'resize').pipe(
49
+ // throttleTime(this._resizeDebounceTime), // handles frequent resizes
50
+ // tap(() => {
51
+ // this.resizeElement();
52
+ // FillContainer.OutputDebugMessage('RECEIVED resize event');
53
+ // }),
54
+ // debounceTime(this._resizeEndDebounceTime), // handles end of resizing
55
+ // finalize(() => {
56
+ // this.resizeElement();
57
+ // FillContainer.OutputDebugMessage('RECEIVED resize end event');
58
+ // })
59
+ // ).subscribe();
31
60
  // also subscribe to MJGlobal events so we can monitor for a manually invoked resize event request
32
61
  // from another component
33
- MJGlobal.Instance.GetEventListener(true).subscribe((event) => {
62
+ MJGlobal.Instance.GetEventListener(true)
63
+ //.pipe(debounceTime(this._resizeDebounceTime))
64
+ .subscribe((event) => {
34
65
  if (event.event === MJEventType.ManualResizeRequest) {
66
+ FillContainer.OutputDebugMessage('');
67
+ FillContainer.OutputDebugMessage('RECEIVED manual resize request');
35
68
  this.resizeElement();
36
69
  }
37
70
  });
@@ -39,33 +72,24 @@ export class FillContainer {
39
72
  }
40
73
  ngOnDestroy() {
41
74
  var _a, _b;
42
- (_a = this.resizeImmediateSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
43
- (_b = this.resizeEndSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
75
+ (_a = this._resizeImmediateSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
76
+ (_b = this._resizeSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
44
77
  }
45
78
  getParent(element) {
46
- const parent = element.parentElement;
47
- if (parent && parent.nodeName === 'APP-ROOT') {
48
- let curElement = parent.parentElement;
49
- // go to root of the DOM to get HTML element as that has size info
50
- while (curElement && curElement.nodeName !== 'HTML') {
51
- curElement = curElement.parentElement;
79
+ let curElement = element;
80
+ while (curElement && curElement.nodeName !== 'HTML') {
81
+ if (curElement.parentElement && window.getComputedStyle(curElement.parentElement).display === 'block') {
82
+ return curElement.parentElement;
52
83
  }
53
- return curElement;
84
+ curElement = curElement.parentElement;
54
85
  }
55
- else if (parent) {
56
- let style = window.getComputedStyle(parent);
57
- let display = style.getPropertyValue('display');
58
- if (display === 'block') {
59
- return parent;
60
- }
61
- else {
62
- return this.getParent(parent); // recursive call, need to go up the DOM until we find a block element
63
- }
64
- }
65
- else
66
- return null; // no parent
86
+ return curElement;
67
87
  }
68
88
  resizeElement() {
89
+ if (FillContainer.DisableResize) {
90
+ // global disable flag
91
+ return;
92
+ }
69
93
  const element = this.elementRef.nativeElement;
70
94
  try {
71
95
  if (element && element.style && !this.shouldSkipResize(element)) {
@@ -76,6 +100,7 @@ export class FillContainer {
76
100
  LogStatus('skipping hidden element: ' + parent.nodeName);
77
101
  }
78
102
  else {
103
+ FillContainer.OutputDebugMessage('Resizing element: ' + element.nodeName + ' parent: ' + parent.nodeName);
79
104
  const parentRect = parent.getBoundingClientRect();
80
105
  if (parent.nodeName === 'HTML') {
81
106
  parentRect.height = window.innerHeight;
@@ -148,6 +173,8 @@ export class FillContainer {
148
173
  return false;
149
174
  }
150
175
  }
176
+ FillContainer.DisableResize = false;
177
+ FillContainer.OutputDebugInfo = false;
151
178
  FillContainer.ɵfac = function FillContainer_Factory(t) { return new (t || FillContainer)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
152
179
  FillContainer.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FillContainer, selectors: [["", "mjFillContainer", ""]], inputs: { fillWidth: "fillWidth", fillHeight: "fillHeight", rightMargin: "rightMargin", bottomMargin: "bottomMargin" } });
153
180
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FillContainer, [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-container-directives",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "description": "MemberJunction: Angular Container Directives - Fill Container for Auto-Resizing, and plain container just for element identification/binding",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -29,8 +29,8 @@
29
29
  "@angular/router": "~17.2.2"
30
30
  },
31
31
  "dependencies": {
32
- "@memberjunction/core": "^1.0.9",
33
- "@memberjunction/global": "^1.0.9",
32
+ "@memberjunction/core": "~1.1.0",
33
+ "@memberjunction/global": "~1.1.0",
34
34
  "tslib": "^2.3.0"
35
35
  },
36
36
  "sideEffects": false