From 78bfcdeafdbb0bc844ba16951493157d7bc13dce Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Thu, 13 Aug 2020 21:30:08 -0500 Subject: [PATCH 01/24] Amended CI build to create configs --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a1e0e59c4..b2ff5447f 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:static-setup": "node scripts/build-wvr-components-static.js", "build:static-docs": "npm run test:audit && npm run build:static-setup && npm run build:docs-usage && npm run build:docs-development", "build:static-reports": "npm run build:static-setup && npm run test:coverage", - "build:static-production": "npm run build:static && ls -A | grep -v static | xargs rimraf && mv static/weaver-components/* . && rimraf static", + "build:static-production": "npm run build:static && node scripts/build-wvr-components-configuration.js defaults-ci-overrides.env && ls -A | grep -v static | xargs rimraf && mv static/weaver-components/* . && rimraf static", "clean": "rimraf dist", "clean:static": "rimraf static", "lint": "ng lint", From 2d47e3557fd7f4d581dbb6244f2a11bf9016baa9 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Thu, 13 Aug 2020 21:30:57 -0500 Subject: [PATCH 02/24] Added CI enviroment overrides --- defaults-ci-overrides.env | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 defaults-ci-overrides.env diff --git a/defaults-ci-overrides.env b/defaults-ci-overrides.env new file mode 100644 index 000000000..187b67e6e --- /dev/null +++ b/defaults-ci-overrides.env @@ -0,0 +1,7 @@ +# +# This overrides file should contain only those value which need to be overriden +# in ./defaults.env when running a build for continuous integration. +# + +BASE_URL=https://tamulib.github.io/weaver-components/docs +ASSETS_URL=https://tamulib.github.io/weaver-components/docs/assets From e1704a55f25f8106a66a5e8e30d6709adb4ae085 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Tue, 25 Aug 2020 14:41:58 -0500 Subject: [PATCH 03/24] Added cross orgin configuration to dockerfile --- Dockerfile | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Dockerfile b/Dockerfile index 9f48afc71..ced8e4e65 100644 --- a/Dockerfile +++ b/Dockerfile @@ -20,4 +20,13 @@ RUN chmod +x /usr/local/bin/docker-entrypoint ENTRYPOINT ["docker-entrypoint"] +RUN apk update; +RUN apk upgrade; + +RUN echo "" >> /usr/local/apache2/conf/httpd.conf +RUN echo "###SPECIFIC CUSTOMIZATIONS###" >> /usr/local/apache2/conf/httpd.conf +RUN echo "" >> /usr/local/apache2/conf/httpd.conf + +RUN printf ' \nOrder Allow,Deny \nAllow from all \nAllowOverride all \nHeader set Access-Control-Allow-Origin "*" \n' >> /usr/local/apache2/conf/httpd.conf + CMD ["httpd", "-D", "FOREGROUND"] From df023222cf54bf386880deaf0456961b2c9344a4 Mon Sep 17 00:00:00 2001 From: William Welling Date: Tue, 25 Aug 2020 20:21:32 -0500 Subject: [PATCH 04/24] upgrade dependencies --- package.json | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index a1e0e59c4..beadf77e4 100644 --- a/package.json +++ b/package.json @@ -50,16 +50,16 @@ "test:ci": "npm run test:coverage && npm run test:audit" }, "dependencies": { - "@angular/animations": "^10.0.9", - "@angular/common": "^10.0.9", - "@angular/compiler": "^10.0.9", - "@angular/core": "^10.0.9", - "@angular/elements": "^10.0.9", - "@angular/forms": "^10.0.9", - "@angular/localize": "^10.0.9", - "@angular/platform-browser": "^10.0.9", - "@angular/platform-browser-dynamic": "^10.0.9", - "@angular/router": "^10.0.9", + "@angular/animations": "^10.0.12", + "@angular/common": "^10.0.12", + "@angular/compiler": "^10.0.12", + "@angular/core": "^10.0.12", + "@angular/elements": "^10.0.12", + "@angular/forms": "^10.0.12", + "@angular/localize": "^10.0.12", + "@angular/platform-browser": "^10.0.12", + "@angular/platform-browser-dynamic": "^10.0.12", + "@angular/router": "^10.0.12", "@ng-bootstrap/ng-bootstrap": "^7.0.0", "@types/json5": "0.0.30", "dotenv-override": "^5.0.1", @@ -76,18 +76,18 @@ "zone.js": "~0.10.3" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.1000.5", - "@angular-devkit/build-ng-packagr": "~0.1000.5", - "@angular-devkit/schematics": "^10.0.5", - "@angular/cli": "^10.0.5", - "@angular/compiler-cli": "^10.0.9", - "@angular/language-service": "^10.0.9", + "@angular-devkit/build-angular": "~0.1000.7", + "@angular-devkit/build-ng-packagr": "~0.1000.7", + "@angular-devkit/schematics": "^10.0.7", + "@angular/cli": "^10.0.7", + "@angular/compiler-cli": "^10.0.12", + "@angular/language-service": "^10.0.12", "@compodoc/compodoc": "^1.1.11", - "@lhci/cli": "^0.4.4", + "@lhci/cli": "^0.5.0", "@pickra/copy-code-block": "^1.2.0", - "@types/jasmine": "~3.5.12", + "@types/jasmine": "~3.5.13", "@types/jasminewd2": "~2.0.8", - "@types/node": "^14.0.27", + "@types/node": "^14.6.0", "angular-tslint-rules": "^1.20.4", "chalk": "^4.1.0", "chrome-launcher": "^0.13.4", @@ -106,13 +106,13 @@ "karma-jasmine-html-reporter": "^1.5.4", "lighthouse": "^6.2.0", "lighthouse-badges": "^1.0.33", - "ng-packagr": "^10.0.3", + "ng-packagr": "^10.0.4", "protractor": "~7.0.0", "rimraf": "^3.0.2", "static-server": "^2.2.1", - "ts-loader": "^8.0.2", - "ts-node": "~8.10.2", + "ts-loader": "^8.0.3", + "ts-node": "~9.0.0", "tslint": "~6.1.3", - "typescript": "~3.9.7" + "typescript": "~3.9.4" } } From 65837e706eaa8b11c3dea4514c0b13a2707686c6 Mon Sep 17 00:00:00 2001 From: William Welling Date: Wed, 26 Aug 2020 10:18:27 -0500 Subject: [PATCH 05/24] scope all of bootstrap to dynamically applied class --- projects/wvr-elements/src/lib/shared/wvr-base.component.ts | 5 ++++- src/styles.scss | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index eb09e7456..f47041b1c 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, Directive, ElementRef, EventEmitter, Injector, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { AfterContentInit, Directive, ElementRef, EventEmitter, Injector, Input, OnInit, Output, ViewChild, HostBinding } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; @@ -9,6 +9,9 @@ import { WvrAnimationService } from '../core/wvr-animation.service'; // tslint:disable-next-line:directive-class-suffix export abstract class WvrBaseComponent implements AfterContentInit, OnInit { + @HostBinding('class.wvr-bootstrap') + wvrBootstrap = true; + private _animationSettings: any = {}; @Input() set animate(value: string) { this._animationSettings = JSON5.parse(value); diff --git a/src/styles.scss b/src/styles.scss index 42bee1e7a..e747d35ac 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,5 @@ /* You can add global styles to this file, and also import other style files */ -@import "~bootstrap/scss/bootstrap"; +.wvr-bootstrap { + @import "~bootstrap/scss/bootstrap"; +} From 01b7a64d1e918616df9689278136a92394bac2f2 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 26 Aug 2020 16:08:38 -0500 Subject: [PATCH 06/24] Bunped version --- package.json | 2 +- projects/wvr-elements/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 10ce90e1c..bdc9ee7ef 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "type": "git", "url": "git+https://github.com/TAMULib/weaver-components.git" }, - "version": "1.3.0-rc3", + "version": "1.3.1-rc", "private": false, "license": "MIT", "bin": { diff --git a/projects/wvr-elements/package.json b/projects/wvr-elements/package.json index 4879d875d..49019f3e3 100644 --- a/projects/wvr-elements/package.json +++ b/projects/wvr-elements/package.json @@ -1,6 +1,6 @@ { "name": "@wvr/elements", - "version": "1.3.0", + "version": "1.3.1-rc", "description": "Collection of angular components for Weaver's Custom Web Component UI", "author": "Texas A&M University Libraries", "private": false, From 556333e7c3e117d427f06b71c2410555c1461578 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Mon, 31 Aug 2020 16:43:33 -0500 Subject: [PATCH 07/24] Priority given to the list item context attribute followed by parents context attr --- .../lib/wvr-list/wvr-list-item/wvr-list-item.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts index f0ec00951..4e3134916 100644 --- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts +++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.ts @@ -32,9 +32,12 @@ export class WvrListItemComponent extends WvrBaseComponent implements OnInit { const listTypeAttribute = this._parent ? this._parent.getAttribute('list-type') : undefined; this.listType = listTypeAttribute ? listTypeAttribute : 'unordered'; - const contextAttribute = this._parent ? (this._parent.getAttribute('context') as Theme) : undefined; - this.context = contextAttribute ? contextAttribute : undefined; + this.context = this.context ? + this.context : + contextAttribute ? + contextAttribute : + undefined; } } From 5e6e6da4b85544306490bd9789225ee889120177 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 2 Sep 2020 10:33:25 -0500 Subject: [PATCH 08/24] Fixed issue with screen size returning 0 --- projects/wvr-elements/src/lib/shared/wvr-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index f47041b1c..041c5eeff 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -104,6 +104,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { this.triggerAnimations($event.type); } - private readonly checkScreenSize = () => document.body.offsetWidth < 767; + private readonly checkScreenSize = () => window.innerWidth < 767; } From d2d3f81a635724d5b059feb083ece4dc453431bc Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Thu, 3 Sep 2020 18:01:39 -0500 Subject: [PATCH 09/24] Added conditional display of components in mobile view --- .../src/lib/shared/wvr-base.component.ts | 14 ++++++++++---- src/index.html | 4 ++-- src/styles.scss | 4 ++++ 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index 041c5eeff..52d87d457 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, Directive, ElementRef, EventEmitter, Injector, Input, OnInit, Output, ViewChild, HostBinding } from '@angular/core'; +import { AfterContentInit, ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnInit, Output, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; @@ -9,10 +9,10 @@ import { WvrAnimationService } from '../core/wvr-animation.service'; // tslint:disable-next-line:directive-class-suffix export abstract class WvrBaseComponent implements AfterContentInit, OnInit { - @HostBinding('class.wvr-bootstrap') - wvrBootstrap = true; + @HostBinding('class.wvr-bootstrap') wvrBootstrap = true; private _animationSettings: any = {}; + private _cdRef: ChangeDetectorRef; @Input() set animate(value: string) { this._animationSettings = JSON5.parse(value); } @@ -47,13 +47,19 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { protected readonly _eRef: ElementRef; + @HostBinding('hidden') get _hiddenInMobile(): boolean { + return this.isMobileLayout && this.hiddenInMobile; + } + + @Input() hiddenInMobile = this._hiddenInMobile ? this._hiddenInMobile : false; + @Output() protected readonly animationEventTrigger = new EventEmitter(); constructor(injector: Injector) { - this._animationService = injector.get(WvrAnimationService); this._domSanitizer = injector.get(DomSanitizer); this._eRef = injector.get(ElementRef); + this._cdRef = injector.get(ChangeDetectorRef); this.screenSizeChanged$ = fromEvent(window, 'resize') .pipe(debounceTime(50)) diff --git a/src/index.html b/src/index.html index a080f745d..0e6f2caa5 100644 --- a/src/index.html +++ b/src/index.html @@ -121,7 +121,7 @@ - + @@ -167,7 +167,7 @@
- +

diff --git a/src/styles.scss b/src/styles.scss index e747d35ac..a956ca47a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,3 +3,7 @@ .wvr-bootstrap { @import "~bootstrap/scss/bootstrap"; } + +.hidden { + display: none; +} From 66e41fe0393c2d34252746c23e756533af9e9ad1 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Sun, 6 Sep 2020 17:19:30 -0500 Subject: [PATCH 10/24] WIP - Conditional display of components in mobile view not working for wvr-icons --- .../src/lib/shared/wvr-base.component.ts | 5 +++- src/index.html | 24 +++++++++---------- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index 52d87d457..9c45b2caa 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -47,7 +47,10 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { protected readonly _eRef: ElementRef; - @HostBinding('hidden') get _hiddenInMobile(): boolean { + // tslint:disable-next-line: prefer-inline-decorator + @HostBinding('class.hidden') + @HostBinding('hidden') + get _hiddenInMobile(): boolean { return this.isMobileLayout && this.hiddenInMobile; } diff --git a/src/index.html b/src/index.html index 0e6f2caa5..88f244ff4 100644 --- a/src/index.html +++ b/src/index.html @@ -24,7 +24,7 @@ - +
- + - + @@ -371,7 +371,7 @@

- + @@ -441,8 +441,8 @@

- - + + @@ -470,13 +470,13 @@

- + - +
@@ -486,7 +486,7 @@


- + @@ -607,7 +607,7 @@


- +

- + @@ -674,7 +674,7 @@
- + From 1a8304c861f66719de1b8f78a65ccfd1d303ab22 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Mon, 7 Sep 2020 11:23:45 -0500 Subject: [PATCH 11/24] Conditional display of components in mobile view --- projects/wvr-elements/src/lib/shared/wvr-base.component.ts | 5 +---- src/index.html | 2 +- src/styles.scss | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index 9c45b2caa..c13e21631 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -47,10 +47,7 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { protected readonly _eRef: ElementRef; - // tslint:disable-next-line: prefer-inline-decorator - @HostBinding('class.hidden') - @HostBinding('hidden') - get _hiddenInMobile(): boolean { + @HostBinding('class.wvr-hidden') get _hiddenInMobile(): boolean { return this.isMobileLayout && this.hiddenInMobile; } diff --git a/src/index.html b/src/index.html index 88f244ff4..21e5c0e16 100644 --- a/src/index.html +++ b/src/index.html @@ -475,7 +475,7 @@ - + diff --git a/src/styles.scss b/src/styles.scss index a956ca47a..2bd7872ca 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,6 +4,6 @@ @import "~bootstrap/scss/bootstrap"; } -.hidden { +.wvr-hidden { display: none; } From fc535fe751c3532638c84f3c32cb8c7004a49833 Mon Sep 17 00:00:00 2001 From: Rincy Mathew Date: Mon, 7 Sep 2020 13:43:40 -0500 Subject: [PATCH 12/24] Code clean up --- .../wvr-elements/src/lib/shared/wvr-base.component.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index c13e21631..0bfade646 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnInit, Output, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; @@ -12,7 +12,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { @HostBinding('class.wvr-bootstrap') wvrBootstrap = true; private _animationSettings: any = {}; - private _cdRef: ChangeDetectorRef; @Input() set animate(value: string) { this._animationSettings = JSON5.parse(value); } @@ -47,11 +46,11 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { protected readonly _eRef: ElementRef; - @HostBinding('class.wvr-hidden') get _hiddenInMobile(): boolean { + @HostBinding('class.wvr-hidden') private get _hiddenInMobile(): boolean { return this.isMobileLayout && this.hiddenInMobile; } - @Input() hiddenInMobile = this._hiddenInMobile ? this._hiddenInMobile : false; + @Input() hiddenInMobile = false; @Output() protected readonly animationEventTrigger = new EventEmitter(); @@ -59,7 +58,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { this._animationService = injector.get(WvrAnimationService); this._domSanitizer = injector.get(DomSanitizer); this._eRef = injector.get(ElementRef); - this._cdRef = injector.get(ChangeDetectorRef); this.screenSizeChanged$ = fromEvent(window, 'resize') .pipe(debounceTime(50)) From f9aeed312387c0be87a04f4ecff4bf236157f2d8 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 9 Sep 2020 11:59:37 -0500 Subject: [PATCH 13/24] Added debounce --- .../src/lib/shared/utility/decorators.utilty.ts | 16 ++++++++++++++++ .../wvr-elements/src/lib/shared/utility/index.ts | 2 +- .../src/lib/wvr-footer/wvr-footer.component.ts | 3 ++- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts diff --git a/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts new file mode 100644 index 000000000..a854208e4 --- /dev/null +++ b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts @@ -0,0 +1,16 @@ +const debounce = (delay = 300): MethodDecorator => (target: any, propertyKey: string, descriptor: PropertyDescriptor) => { + const timeoutKey = Symbol(); + const original = descriptor.value; + descriptor.value = (...args) => { + // tslint:disable-next-line:no-invalid-this + clearTimeout(this[timeoutKey]); + // tslint:disable-next-line:no-invalid-this + this[timeoutKey] = setTimeout(() => original.apply(this, args), delay); + }; + + return descriptor; +}; + +export { + debounce +}; diff --git a/projects/wvr-elements/src/lib/shared/utility/index.ts b/projects/wvr-elements/src/lib/shared/utility/index.ts index c3b760301..693c2d7da 100644 --- a/projects/wvr-elements/src/lib/shared/utility/index.ts +++ b/projects/wvr-elements/src/lib/shared/utility/index.ts @@ -1,2 +1,2 @@ export { obtainConfigPath, weaverBootstrap } from './bootstrap.utility'; - +export { debounce } from './decorators.utilty'; diff --git a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts index 1c843fd3b..f77601ffd 100644 --- a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts +++ b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Injector, Input, OnInit } from '@angular/core'; import { ResizeSensor } from 'css-element-queries'; import { WvrBaseComponent } from '../shared/wvr-base.component'; +import { debounce } from '../shared/utility'; /** * A fullwidth footer component which attaches to the bottom of the document body. @@ -43,7 +44,7 @@ export class WvrFooterComponent extends WvrBaseComponent implements OnInit { * Resizes the width of the footer to match its parents width, * and calculates height to determine 'stickiness' */ - @HostListener('window:resize', ['$event']) positionSelf(): void { + @HostListener('window:resize', ['$event']) @debounce() positionSelf(): void { this.footerElement.style.width = `${this.parentElement.clientWidth}px`; const compareHeight = this.isSticky ? (window.innerHeight - this.footerElement.clientHeight) : window.innerHeight; const newIsSticky = this.parentElement.clientHeight <= compareHeight; From 7182e82978a2499e1fe9b3d57145b00b23282848 Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Wed, 9 Sep 2020 16:39:37 -0500 Subject: [PATCH 14/24] WIP provide mobile menu --- .../lib/shared/utility/decorators.utilty.ts | 26 ++++++----- .../lib/wvr-header/wvr-header.component.html | 39 ++++++++++++++-- .../lib/wvr-header/wvr-header.component.scss | 44 ++++++++++++++++++- .../lib/wvr-header/wvr-header.component.ts | 6 +++ 4 files changed, 99 insertions(+), 16 deletions(-) diff --git a/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts index a854208e4..34c446a27 100644 --- a/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts +++ b/projects/wvr-elements/src/lib/shared/utility/decorators.utilty.ts @@ -1,15 +1,19 @@ -const debounce = (delay = 300): MethodDecorator => (target: any, propertyKey: string, descriptor: PropertyDescriptor) => { - const timeoutKey = Symbol(); - const original = descriptor.value; - descriptor.value = (...args) => { - // tslint:disable-next-line:no-invalid-this - clearTimeout(this[timeoutKey]); - // tslint:disable-next-line:no-invalid-this - this[timeoutKey] = setTimeout(() => original.apply(this, args), delay); - }; +// tslint:disable-next-line:only-arrow-functions +function debounce(delay = 300): MethodDecorator { + return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => { + const timeoutKey = Symbol(); + const original = descriptor.value; + // tslint:disable-next-line:typedef + descriptor.value = function(...args) { + // tslint:disable-next-line:no-invalid-this + clearTimeout(this[timeoutKey]); + // tslint:disable-next-line:no-invalid-this + this[timeoutKey] = setTimeout(() => original.apply(this, args), delay); + }; - return descriptor; -}; + return descriptor; + }; +} export { debounce diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html index 62ef07b1b..195bd05a4 100644 --- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html +++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html @@ -30,17 +30,50 @@ -
-
-
- -
+
+
@@ -68,12 +66,18 @@
- - + +
+ +
- - + +
+ +
- - + +
+ +
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss index 68f3f0185..f5c811139 100644 --- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss +++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.scss @@ -53,6 +53,7 @@ .mobile-menu-button, .mobile-menu { display: none; + overflow: hidden; } @media (max-width: 767px) { From 98bb4ee0486a2734ee33deadbbb76d19e4d9438f Mon Sep 17 00:00:00 2001 From: jeremythuff Date: Mon, 14 Sep 2020 11:48:10 -0500 Subject: [PATCH 16/24] Added mobile service --- .../wvr-elements/src/lib/core/icon.service.ts | 1 - .../src/lib/core/mobile.service.spec.ts | 16 +++++++++++ .../src/lib/core/mobile.service.ts | 28 +++++++++++++++++++ .../src/lib/shared/wvr-base.component.ts | 25 +++++++---------- .../lib/wvr-header/wvr-header.component.html | 2 +- .../lib/wvr-header/wvr-header.component.scss | 3 ++ .../wvr-elements/src/lib/wvr-lib.module.ts | 2 ++ projects/wvr-elements/src/public-api.ts | 1 + 8 files changed, 61 insertions(+), 17 deletions(-) create mode 100644 projects/wvr-elements/src/lib/core/mobile.service.spec.ts create mode 100644 projects/wvr-elements/src/lib/core/mobile.service.ts diff --git a/projects/wvr-elements/src/lib/core/icon.service.ts b/projects/wvr-elements/src/lib/core/icon.service.ts index d89fad207..749f8d49b 100644 --- a/projects/wvr-elements/src/lib/core/icon.service.ts +++ b/projects/wvr-elements/src/lib/core/icon.service.ts @@ -17,7 +17,6 @@ export class IconService { private readonly http: HttpClient, @Inject(APP_CONFIG) private readonly appConfig: AppConfig ) { - } registerIcons(icons: IconSet): void { diff --git a/projects/wvr-elements/src/lib/core/mobile.service.spec.ts b/projects/wvr-elements/src/lib/core/mobile.service.spec.ts new file mode 100644 index 000000000..a315b8161 --- /dev/null +++ b/projects/wvr-elements/src/lib/core/mobile.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { MobileService } from './mobile.service'; + +describe('MobileService', () => { + let service: MobileService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(MobileService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/wvr-elements/src/lib/core/mobile.service.ts b/projects/wvr-elements/src/lib/core/mobile.service.ts new file mode 100644 index 000000000..2eabb2825 --- /dev/null +++ b/projects/wvr-elements/src/lib/core/mobile.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { fromEvent, Observable } from 'rxjs'; +import { delay, map, throttleTime } from 'rxjs/operators'; + +@Injectable({ + providedIn: 'root' +}) +export class MobileService { + + isMobileLayout: boolean; + + private readonly screenSizeChanged$: Observable; + + constructor() { + this.screenSizeChanged$ = fromEvent(window, 'resize') + .pipe(throttleTime(100)) + .pipe(map(this.checkScreenSize)); + + this.screenSizeChanged$.subscribe(iml => { + this.isMobileLayout = iml; + }); + + this.isMobileLayout = this.checkScreenSize(); + } + + private readonly checkScreenSize = () => window.innerWidth < 767; + +} diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts index 0bfade646..c21c14f07 100644 --- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts +++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts @@ -4,6 +4,8 @@ import * as JSON5 from 'json5'; import { fromEvent, Observable } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators'; import { WvrAnimationService } from '../core/wvr-animation.service'; +import { IconService } from '../core/icon.service'; +import { MobileService } from '../core/mobile.service'; @Directive() // tslint:disable-next-line:directive-class-suffix @@ -29,6 +31,10 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { @ViewChild('animationRoot') animationRootElem: ElementRef; + get isMobileLayout(): boolean { + return this.mobileService.isMobileLayout; + } + get isMobileAgent(): boolean { const agent = navigator.userAgent || navigator.vendor || (window as any).opera; @@ -36,18 +42,16 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0, 4))); } - screenSizeChanged$: Observable; - - isMobileLayout = this.isMobileAgent; - protected readonly _animationService: WvrAnimationService; protected readonly _domSanitizer: DomSanitizer; protected readonly _eRef: ElementRef; + private readonly mobileService: MobileService; + @HostBinding('class.wvr-hidden') private get _hiddenInMobile(): boolean { - return this.isMobileLayout && this.hiddenInMobile; + return this.mobileService.isMobileLayout && this.hiddenInMobile; } @Input() hiddenInMobile = false; @@ -58,10 +62,7 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { this._animationService = injector.get(WvrAnimationService); this._domSanitizer = injector.get(DomSanitizer); this._eRef = injector.get(ElementRef); - - this.screenSizeChanged$ = fromEvent(window, 'resize') - .pipe(debounceTime(50)) - .pipe(map(this.checkScreenSize)); + this.mobileService = injector.get(MobileService); } ngOnInit(): void { @@ -77,10 +78,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { } }); } - this.screenSizeChanged$.subscribe(iml => { - this.isMobileLayout = iml; - }); - this.isMobileLayout = this.checkScreenSize(); } ngAfterContentInit(): void { @@ -108,6 +105,4 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit { this.triggerAnimations($event.type); } - private readonly checkScreenSize = () => window.innerWidth < 767; - } diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html index 12091fec5..dfd474a0a 100644 --- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html +++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html @@ -32,7 +32,7 @@