diff --git a/src/app/views/edition-view/edition-outlets/edition-graph/edition-graph.component.html b/src/app/views/edition-view/edition-outlets/edition-graph/edition-graph.component.html
index d9bd3c3430..c4e1b151af 100644
--- a/src/app/views/edition-view/edition-outlets/edition-graph/edition-graph.component.html
+++ b/src/app/views/edition-view/edition-outlets/edition-graph/edition-graph.component.html
@@ -40,13 +40,11 @@
Diese interaktive Visualisierung basiert auf Mads Holten's
- SPARQL Visualizer . Sie modelliert den aktuellen Skizzenkomplex in Form eines
- RDF -Graphen. Die
+ SPARQL Visualizer . Sie modelliert den
+ aktuellen Skizzenkomplex in Form eines RDF -Graphen. Die
zugrundeliegenden RDF-Daten sind unter dem Punkt RDF Triples einsehbar und lokal editierbar.
Eine Filterung und Eingrenzung dieser RDF-Daten kann mithilfe der Abfragesprache
- SPARQL
+ SPARQL
unter dem Punkt SPARQL Abfrage vorgenommen werden; in der Voreinstellung werden hierbei alle
vorhandenen Triples abgefragt.
diff --git a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph-no-result/force-graph-no-result.component.html b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph-no-result/force-graph-no-result.component.html
index 3e2a762e4a..f6dc556187 100644
--- a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph-no-result/force-graph-no-result.component.html
+++ b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph-no-result/force-graph-no-result.component.html
@@ -2,13 +2,13 @@
Entschuldigung, Ihre SPARQL-Anfrage führte leider zu keinem Ergebnis.
Möglicherweise können Sie Ihre Anfrage anpassen.
-
+
Ausführliche Informationen zu SPARQL finden Sie unter:
- {{ logos.sparql.href }} {{ logos.sparql.href }}.
diff --git a/src/app/views/edition-view/edition-view.component.html b/src/app/views/edition-view/edition-view.component.html
index caed85d1db..db5f2383b1 100644
--- a/src/app/views/edition-view/edition-view.component.html
+++ b/src/app/views/edition-view/edition-view.component.html
@@ -15,7 +15,7 @@
Ediert von
- {{ editor.name }} {{ editor.name }} &
diff --git a/src/app/views/home-view/home-view.component.html b/src/app/views/home-view/home-view.component.html
index 238a984ad3..27a6fd18d6 100644
--- a/src/app/views/home-view/home-view.component.html
+++ b/src/app/views/home-view/home-view.component.html
@@ -33,29 +33,19 @@
Kontaktieren sie uns gerne unter:
- anton-webern.ch
+ anton-webern.ch
diff --git a/src/app/views/structure-view/structure-view.component.html b/src/app/views/structure-view/structure-view.component.html
index 6b8611c015..913f7083c6 100644
--- a/src/app/views/structure-view/structure-view.component.html
+++ b/src/app/views/structure-view/structure-view.component.html
@@ -12,8 +12,6 @@
Die erforderlichen Objektklassen und Eigenschaften werden von SALSAH intern als RDF (Resource Description Framework ) Triple verwaltet. Sie sind in der Grafik als Ellipsen symbolisiert, deren Verknüpfungen und Verweise
untereinander als Pfeile dargestellt.
From 412351b8c2ca325fd829e5cf0c07d2120de77398 Mon Sep 17 00:00:00 2001
From: "Stefan@Lap"
Date: Wed, 7 Oct 2020 21:36:05 +0200
Subject: [PATCH 05/18] style(app): run prettier on html files
---
.../bibliography-search.component.html | 4 +---
.../search-result-list.component.html | 2 +-
src/app/views/data-view/data-view.component.html | 4 +---
.../graph-visualizer.component.html | 16 ++++------------
.../edition-tka-table.component.html | 8 ++++----
5 files changed, 11 insertions(+), 23 deletions(-)
diff --git a/src/app/views/data-view/data-outlets/bibliography/bibliography-search/bibliography-search.component.html b/src/app/views/data-view/data-outlets/bibliography/bibliography-search/bibliography-search.component.html
index 4213ed1a55..25949285d4 100644
--- a/src/app/views/data-view/data-outlets/bibliography/bibliography-search/bibliography-search.component.html
+++ b/src/app/views/data-view/data-outlets/bibliography/bibliography-search/bibliography-search.component.html
@@ -1,3 +1 @@
-
- bibliography-search works!
-
+bibliography-search works!
diff --git a/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.html b/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.html
index b7331d3e4a..eeebc668f4 100644
--- a/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.html
+++ b/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.html
@@ -49,7 +49,7 @@
-
diff --git a/src/app/views/data-view/data-view.component.html b/src/app/views/data-view/data-view.component.html
index 14ab0a370a..3ea8599e6d 100644
--- a/src/app/views/data-view/data-view.component.html
+++ b/src/app/views/data-view/data-view.component.html
@@ -4,9 +4,7 @@
-
- BETA: Suche momentan noch mit eingeschränkter Funktionalität
-
+BETA: Suche momentan noch mit eingeschränkter Funktionalität
diff --git a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/graph-visualizer.component.html b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/graph-visualizer.component.html
index 4eda7f8a19..465e889991 100644
--- a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/graph-visualizer.component.html
+++ b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/graph-visualizer.component.html
@@ -10,13 +10,9 @@
-
- Update
-
+ Update
-
- Reset
-
+ Reset
@@ -67,13 +63,9 @@
-
- Query
-
+ Query
-
- Reset
-
+ Reset
diff --git a/src/app/views/edition-view/edition-outlets/edition-tka-table/edition-tka-table.component.html b/src/app/views/edition-view/edition-outlets/edition-tka-table/edition-tka-table.component.html
index 6ae99abb84..783fd5febc 100644
--- a/src/app/views/edition-view/edition-outlets/edition-tka-table/edition-tka-table.component.html
+++ b/src/app/views/edition-view/edition-outlets/edition-tka-table/edition-tka-table.component.html
@@ -2,10 +2,10 @@
- Takt
- System
- Ort im Takt
- Kommentar
+ Takt
+ System
+ Ort im Takt
+ Kommentar
From ad39d0a0a7f646f5ad2aacd7bc81eeab7b0f53ce Mon Sep 17 00:00:00 2001
From: "Stefan@Lap"
Date: Thu, 8 Oct 2020 00:43:18 +0200
Subject: [PATCH 06/18] test(shared): add tests for ExternalLinkDirective
---
.../external-link.directive.spec.ts | 160 +++++++++++++++++-
.../external-link/external-link.directive.ts | 1 -
2 files changed, 157 insertions(+), 4 deletions(-)
diff --git a/src/app/shared/external-link/external-link.directive.spec.ts b/src/app/shared/external-link/external-link.directive.spec.ts
index 9044ee6c4f..b7f815cd6d 100644
--- a/src/app/shared/external-link/external-link.directive.spec.ts
+++ b/src/app/shared/external-link/external-link.directive.spec.ts
@@ -1,8 +1,162 @@
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
import { ExternalLinkDirective } from './external-link.directive';
+@Component({
+ template: `Link External
+
+
+ Link External Dynamic
+
+
+ Link Internal
+
+
+ Link Internal Dynamic
+
+
+ Link without href `
+})
+class TestExernalLinkComponent {
+ hostname = location.hostname;
+ dynamicInternalLink = this.hostname + '#anchor';
+ dynamicExternalLink = 'https://coryrylan.com/blog/managing-external-links-safely-in-angular';
+
+ doSomething() {
+ console.log('Clicked on link without href');
+ }
+}
+
describe('ExternalLinkDirective', () => {
- it('should create an instance', () => {
- const directive = new ExternalLinkDirective();
- expect(directive).toBeTruthy();
+ let component: TestExernalLinkComponent;
+ let fixture: ComponentFixture;
+
+ let aDes: DebugElement[];
+ let bareADes: DebugElement[];
+
+ const expectedExternalLink = 'https://coryrylan.com/blog/managing-external-links-safely-in-angular';
+ const expectedNewExternalLink = 'https://anton-webern.ch/';
+ const expectedInternalLink = '#anchor';
+ const expectedRelAttr = 'noopener noreferrer';
+ const expectedTargetAttr = '_blank';
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestExernalLinkComponent, ExternalLinkDirective]
+ });
+
+ fixture = TestBed.createComponent(TestExernalLinkComponent);
+ component = fixture.componentInstance;
+
+ fixture.detectChanges(); // initial binding
+ });
+
+ it('should have 4 anchor elements with href attributes', () => {
+ // all elements with an attached ExternalLinkDirective (a[href])
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+
+ expect(aDes.length).toBe(4, 'should be 4');
+
+ console.log(aDes);
+ });
+
+ it('should have 1 anchor element without href attributes', () => {
+ bareADes = fixture.debugElement.queryAll(By.css('a:not([href])'));
+
+ expect(bareADes.length).toBe(1, 'should be 1');
+ });
+
+ it('should apply [href|target|rel] values to 1st anchor element (external)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[0].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedExternalLink, `should be ${expectedExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External', 'should be "Link External"');
+ });
+
+ it('should apply [href|target|rel] values to 2nd anchor element (dynamic external)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[1].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedExternalLink, `should be ${expectedExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External Dynamic', 'should be "Link External Dynamic"');
+ });
+
+ it('should not apply [target|rel] values to 3rd anchor element (internal)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[2].nativeElement;
+
+ const expectedHref = aEl.baseURI + aEl.hostname + expectedInternalLink;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedHref, `should be ${expectedHref}`);
+
+ expect(aEl.rel).not.toBeTruthy('should be empty string');
+ expect(aEl.target).not.toBeTruthy('should be empty string');
+
+ expect(aEl.innerText).toBe('Link Internal', 'should be "Link Internal"');
+ });
+
+ it('should not apply [target|rel] values to 4th anchor element (dynamic internal)', () => {
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[3].nativeElement;
+
+ const expectedHref = aEl.baseURI + aEl.hostname + expectedInternalLink;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedHref, `should be ${expectedHref}`);
+
+ expect(aEl.rel).not.toBeTruthy('should be empty string');
+ expect(aEl.target).not.toBeTruthy('should be empty string');
+
+ expect(aEl.innerText).toBe('Link Internal Dynamic', 'should be "Link Internal Dynamic"');
+ });
+
+ it('should not apply [href|target|rel] values to bare anchor', () => {
+ bareADes = fixture.debugElement.queryAll(By.css('a:not([href])'));
+
+ expect(bareADes[0].properties.href).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.target).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.rel).not.toBeTruthy('should be empty string');
+ expect(bareADes[0].properties.innerText).toBe('Link without href', 'should be "Link without href"');
+ });
+
+ it('should reflect input change for [href] values', () => {
+ component.dynamicExternalLink = expectedNewExternalLink;
+
+ // apply changes
+ fixture.detectChanges();
+
+ aDes = fixture.debugElement.queryAll(By.directive(ExternalLinkDirective));
+ const aEl = aDes[1].nativeElement;
+
+ expect(aEl.href).toBeTruthy();
+ expect(aEl.href).toBe(expectedNewExternalLink, `should be ${expectedNewExternalLink}`);
+
+ expect(aEl.rel).toBeTruthy();
+ expect(aEl.rel).toBe(expectedRelAttr, `should be ${expectedRelAttr}`);
+
+ expect(aEl.target).toBeTruthy();
+ expect(aEl.target).toBe(expectedTargetAttr, `should be ${expectedTargetAttr}`);
+
+ expect(aEl.innerText).toBe('Link External Dynamic', 'should be "Link External Dynamic"');
});
});
diff --git a/src/app/shared/external-link/external-link.directive.ts b/src/app/shared/external-link/external-link.directive.ts
index f42efa53f8..798dc44ab9 100644
--- a/src/app/shared/external-link/external-link.directive.ts
+++ b/src/app/shared/external-link/external-link.directive.ts
@@ -20,7 +20,6 @@ export class ExternalLinkDirective implements OnChanges {
this.targetAttr = '_blank';
this.relAttr = 'noopener noreferrer';
}
- console.log(this.hrefAttr);
}
private isExternalLink() {
From 31aa5e38f020479f94f717f242ec0941a1553eb1 Mon Sep 17 00:00:00 2001
From: "Stefan@Lap"
Date: Thu, 8 Oct 2020 07:43:42 +0200
Subject: [PATCH 07/18] refactor(shared): move bootstrap items into separate
module
---
src/app/shared/shared-ngbootstrap.module.ts | 35 +++++++++++++++++++++
src/app/shared/shared.module.ts | 31 +++---------------
2 files changed, 39 insertions(+), 27 deletions(-)
create mode 100644 src/app/shared/shared-ngbootstrap.module.ts
diff --git a/src/app/shared/shared-ngbootstrap.module.ts b/src/app/shared/shared-ngbootstrap.module.ts
new file mode 100644
index 0000000000..782d41052d
--- /dev/null
+++ b/src/app/shared/shared-ngbootstrap.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import {
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+} from '@ng-bootstrap/ng-bootstrap';
+
+@NgModule({
+ imports: [
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+ ],
+ exports: [
+ NgbAccordionModule,
+ NgbButtonsModule,
+ NgbCollapseModule,
+ NgbDropdownModule,
+ NgbModalModule,
+ NgbNavModule,
+ NgbPaginationModule,
+ NgbTooltipModule
+ ]
+})
+export class SharedNgbootstrapModule {}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index c2f8f570e0..fb628e0275 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -8,18 +8,9 @@ import { RouterModule } from '@angular/router';
import { CompileHtmlModule } from './compile-html';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import {
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule
-} from '@ng-bootstrap/ng-bootstrap';
import { NgxGalleryModule } from '@kolkov/ngx-gallery';
import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import { SharedNgbootstrapModule } from '@awg-shared/shared-ngbootstrap.module';
//
// shared components
@@ -53,16 +44,9 @@ import { OrderByPipe } from './order-by/order-by.pipe';
CompileHtmlModule,
CodemirrorModule,
FontAwesomeModule,
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule,
NgxGalleryModule,
- NgxJsonViewerModule
+ NgxJsonViewerModule,
+ SharedNgbootstrapModule
],
declarations: [
AddressComponent,
@@ -83,16 +67,9 @@ import { OrderByPipe } from './order-by/order-by.pipe';
RouterModule,
CompileHtmlModule,
FontAwesomeModule,
- NgbAccordionModule,
- NgbButtonsModule,
- NgbCollapseModule,
- NgbDropdownModule,
- NgbModalModule,
- NgbNavModule,
- NgbPaginationModule,
- NgbTooltipModule,
NgxGalleryModule,
NgxJsonViewerModule,
+ SharedNgbootstrapModule,
AddressComponent,
HeadingComponent,
From 6740feee4cfaed4228bbaa9da9385e4671ecd9d2 Mon Sep 17 00:00:00 2001
From: "Stefan@Lap"
Date: Thu, 8 Oct 2020 10:19:42 +0200
Subject: [PATCH 08/18] style(app): include more file formats for prettier
check
---
package.json | 17 +++----
.../search-result-list.component.ts | 6 +--
.../force-graph/d3/d3.service.ts | 8 +---
.../models/d3-force-simulation.model.ts | 2 +-
.../page-not-found-view.component.ts | 2 +-
src/index.html | 10 ++--
src/index.style.css | 46 +++++++++++--------
src/plugins/dateConverter.js | 4 +-
src/plugins/htmlConverter.js | 6 +--
9 files changed, 50 insertions(+), 51 deletions(-)
diff --git a/package.json b/package.json
index 10917b6027..3587702c48 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,9 @@
"lint": "ng lint awg-app",
"lint-staged": "lint-staged",
"tslint-check": "tslint-config-prettier-check ./tslint.json",
- "format:check": "prettier --check \"src/**/*.ts\"",
- "format:fix": "pretty-quick --staged",
+ "format:check": "prettier --check \"src/**/*.{ts,js,css,html}\"",
+ "format:write": "prettier --write \"src/**/*.{ts,js,css,html}\"",
+ "format:fix-staged": "pretty-quick --staged",
"doc": "yarn compodoc --tsconfig tsconfig.base.json --theme Readthedocs --output dist/awg-app/compodoc --disableRoutesGraph",
"serve:doc": "yarn doc --serve --watch",
"build:doc": "yarn doc",
@@ -66,20 +67,20 @@
},
"husky": {
"hooks": {
- "pre-commit": "run-s -l format:fix lint-staged",
+ "pre-commit": "run-s -l format:fix-staged lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"prettier": {
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": true,
"printWidth": 120,
- "tabWidth": 4,
- "useTabs": false,
"semi": true,
"singleQuote": true,
+ "tabWidth": 4,
"trailingComma": "none",
- "bracketSpacing": true,
- "jsxBracketSameLine": true,
- "arrowParens": "avoid"
+ "useTabs": false
},
"dependencies": {
"@angular/animations": "~10.0.4",
diff --git a/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.ts b/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.ts
index 16add3a271..5490e75ad1 100644
--- a/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.ts
+++ b/src/app/views/data-view/data-outlets/search-panel/search-result-list/search-result-list.component.ts
@@ -341,9 +341,9 @@ export class SearchResultListComponent implements OnInit, OnDestroy {
*/
getSearchResponseWithQueryData(): void {
// cold request to streamer service
- const searchResponseWithQuery$: Observable<
- SearchResponseWithQuery
- > = this.dataStreamerService.getSearchResponseWithQuery().pipe(takeUntil(this.destroy$));
+ const searchResponseWithQuery$: Observable = this.dataStreamerService
+ .getSearchResponseWithQuery()
+ .pipe(takeUntil(this.destroy$));
// subscribe to response to handle changes
searchResponseWithQuery$.subscribe(
diff --git a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph/d3/d3.service.ts b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph/d3/d3.service.ts
index 2f054e1a8a..1e40734cb4 100644
--- a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph/d3/d3.service.ts
+++ b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/force-graph/d3/d3.service.ts
@@ -69,13 +69,7 @@ export class D3Service {
d.fy = null;
};
- dragElement.call(
- d3_drag
- .drag()
- .on('start', dragStart)
- .on('drag', dragActions)
- .on('end', dragEnd)
- );
+ dragElement.call(d3_drag.drag().on('start', dragStart).on('drag', dragActions).on('end', dragEnd));
}
/**
diff --git a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/models/d3-force-simulation.model.ts b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/models/d3-force-simulation.model.ts
index fecb78c602..ccde44b7e1 100644
--- a/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/models/d3-force-simulation.model.ts
+++ b/src/app/views/edition-view/edition-outlets/edition-graph/graph-visualizer/models/d3-force-simulation.model.ts
@@ -205,7 +205,7 @@ export class D3ForceSimulation {
this.forceSimulation.force('charge_force', this.chargeForce).force('collide_force', this.collideForce);
// connect the d3 ticker to an angular event emitter
- this.forceSimulation.on('tick', function() {
+ this.forceSimulation.on('tick', function () {
ticker.emit(this);
});
diff --git a/src/app/views/page-not-found-view/page-not-found-view.component.ts b/src/app/views/page-not-found-view/page-not-found-view.component.ts
index 74972f319f..9357d8d90f 100644
--- a/src/app/views/page-not-found-view/page-not-found-view.component.ts
+++ b/src/app/views/page-not-found-view/page-not-found-view.component.ts
@@ -21,7 +21,7 @@ export class PageNotFoundViewComponent {
* It keeps the title of
* the page not found section.
*/
- pageNotFoundTitle = 'Entschuldigung, diese Seite gibt es hier nicht…';
+ pageNotFoundTitle = 'Entschuldigung, diese Seite gibt es hier nicht… ';
/**
* Public variable: pageNotFoundSubTitle.
diff --git a/src/index.html b/src/index.html
index 126b9643bc..54b3f193ca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,9 +20,7 @@
-
- AWG prototype is…
-
+
AWG prototype is…
@@ -51,11 +49,11 @@
* TODO: https://jaxenter.de/google-analytics-angular-57919
*/
if (document.location.hostname == 'edition.anton-webern.ch') {
- (function(i, s, o, g, r, a, m) {
+ (function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
- function() {
+ function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
@@ -68,7 +66,7 @@
// exclude non-production page calls
// cf. https://stackoverflow.com/questions/1251922/is-there-a-way-to-stop-google-analytics-counting-development-work-as-hits#8178283
console.log('Running non-production google analytics replacement now');
- ga = function(arg) {
+ ga = function (arg) {
// console.info('ga:', arguments);
};
}
diff --git a/src/index.style.css b/src/index.style.css
index d8fb06a5a9..6ea0546d8e 100644
--- a/src/index.style.css
+++ b/src/index.style.css
@@ -1,14 +1,16 @@
-body, html {
+body,
+html {
height: 100%;
}
.app-loading {
text-align: center;
}
-.app-loading .twelveTone-preText, .app-loading .twelveTone-spinner {
+.app-loading .twelveTone-preText,
+.app-loading .twelveTone-spinner {
height: 140px;
width: 140px;
position: absolute;
- top: 0; /* -50% */
+ top: 0; /* -50% */
bottom: 0;
left: 0;
right: 0;
@@ -35,7 +37,7 @@ body, html {
animation: twelveTone-circleBounceDelay 1.2s infinite ease-in-out both;
}
-.twelveTone-spinner .twelveTone-loadText>p {
+.twelveTone-spinner .twelveTone-loadText > p {
/* border: 1px solid blue; */
margin-top: 30%;
margin-bottom: 30%;
@@ -97,14 +99,13 @@ body, html {
transform: rotate(330deg);
}
-
.twelveTone-spinner .twelveTone-note2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.twelveTone-spinner .twelveTone-note3:before {
/* UNICODE SHARP SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
- content: "\266F";
+ content: '\266F';
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@@ -118,7 +119,7 @@ body, html {
}
.twelveTone-spinner .twelveTone-note6:before {
/* UNICODE FLAT SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
- content: "\266D";
+ content: '\266D';
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
@@ -132,7 +133,7 @@ body, html {
}
.twelveTone-spinner .twelveTone-note9:before {
/* UNICODE SHARP SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
- content: "\266F";
+ content: '\266F';
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
@@ -146,27 +147,32 @@ body, html {
}
.twelveTone-spinner .twelveTone-note12:before {
/* UNICODE FLAT SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
- content: "\266D";
+ content: '\266D';
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
-
@-webkit-keyframes twelveTone-circleBounceDelay {
- 0%, 80%, 100% {
+ 0%,
+ 80%,
+ 100% {
-webkit-transform: scale(0);
transform: scale(0);
- } 40% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ }
+ 40% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
}
@keyframes twelveTone-circleBounceDelay {
- 0%, 80%, 100% {
+ 0%,
+ 80%,
+ 100% {
-webkit-transform: scale(0);
transform: scale(0);
- } 40% {
- -webkit-transform: scale(1);
- transform: scale(1);
- }
+ }
+ 40% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
}
diff --git a/src/plugins/dateConverter.js b/src/plugins/dateConverter.js
index 87de82efd8..a7c27d0fe1 100644
--- a/src/plugins/dateConverter.js
+++ b/src/plugins/dateConverter.js
@@ -1,4 +1,4 @@
-(function(angular) {
+(function (angular) {
/*
JavaScript functions for the Fourmilab Calendar Converter
@@ -241,7 +241,7 @@
* - name .calendar ("GREGORIAN", "JULIAN", "JEWISH", "FRENCH")
*/
- return (dateConverter = function(dateobj) {
+ return (dateConverter = function (dateobj) {
var $that = this;
var d1 = jdc_to_date(dateobj.dateval1, dateobj.calendar);
var d2 = jdc_to_date(dateobj.dateval2, dateobj.calendar);
diff --git a/src/plugins/htmlConverter.js b/src/plugins/htmlConverter.js
index d9fb6b99af..b2d1716335 100644
--- a/src/plugins/htmlConverter.js
+++ b/src/plugins/htmlConverter.js
@@ -1,4 +1,4 @@
-(function(angular) {
+(function (angular) {
/*
jQuery-plugin template for SALSAH
converts the linear standoff
@@ -16,7 +16,7 @@
* @param txt The text (sequence of characters)
* @return {String} A string which can be converted to HTML
*/
- return (htmlConverter = function(assigned_props, txt) {
+ return (htmlConverter = function (assigned_props, txt) {
var html = '';
var proparr;
var stack;
@@ -92,7 +92,7 @@
//
var propnames = Object.keys(assigned_props);
- propnames.sort(function(a, b) {
+ propnames.sort(function (a, b) {
return tagPrecedence[matching_inv[a]] - tagPrecedence[matching_inv[b]];
});
From a6faaf3c61c6d8c1adcc9452b29d93c7113eb88d Mon Sep 17 00:00:00 2001
From: "Stefan@Lap"
Date: Thu, 8 Oct 2020 13:10:17 +0200
Subject: [PATCH 09/18] fix(core): move analytics handling into service
---
src/app/app.component.ts | 14 ++-
.../analytics.service.spec.ts | 16 +++
.../analytics-sercvice/analytics.service.ts | 107 ++++++++++++++++++
.../core/services/analytics-sercvice/index.ts | 1 +
src/app/core/services/index.ts | 2 +
src/index.html | 29 +----
6 files changed, 137 insertions(+), 32 deletions(-)
create mode 100644 src/app/core/services/analytics-sercvice/analytics.service.spec.ts
create mode 100644 src/app/core/services/analytics-sercvice/analytics.service.ts
create mode 100644 src/app/core/services/analytics-sercvice/index.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 81967fe553..17a0376723 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
-import { RouterEventsService } from '@awg-core/services';
+import { AnalyticsService, RouterEventsService } from '@awg-core/services';
/**
* The main component of the AWG App.
@@ -20,15 +20,17 @@ export class AppComponent {
* It declares private instances of the Angular router and the RouterEventsService.
*
* @param {Router} router Instance of the Angular router.
+ * @param {AnalyticsService} analyticsService Instance of the AnalyticsService.
* @param {RouterEventsService} routerEventsService Instance of the RouterEventsService.
*/
- constructor(private readonly router: Router, private routerEventsService: RouterEventsService) {
+ constructor(
+ private readonly router: Router,
+ private analyticsService: AnalyticsService,
+ private routerEventsService: RouterEventsService
+ ) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
- // catch GoogleAnalytics pageview events,
- // cf. https://codeburst.io/using-google-analytics-with-angular-25c93bffaa18
- (window as any).ga('set', 'page', event.urlAfterRedirects);
- (window as any).ga('send', 'pageview');
+ this.analyticsService.trackPageView(event.urlAfterRedirects);
}
});
}
diff --git a/src/app/core/services/analytics-sercvice/analytics.service.spec.ts b/src/app/core/services/analytics-sercvice/analytics.service.spec.ts
new file mode 100644
index 0000000000..cf75f3cfe2
--- /dev/null
+++ b/src/app/core/services/analytics-sercvice/analytics.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AnalyticsService } from './analytics.service';
+
+describe('AnalyticsService', () => {
+ let service: AnalyticsService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AnalyticsService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/core/services/analytics-sercvice/analytics.service.ts b/src/app/core/services/analytics-sercvice/analytics.service.ts
new file mode 100644
index 0000000000..77866270ce
--- /dev/null
+++ b/src/app/core/services/analytics-sercvice/analytics.service.ts
@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * The Analytics service.
+ *
+ * It handles the configuration for the GoogleAnalytics setup.
+ * Inspired by https://jaxenter.de/google-analytics-angular-57919
+ *
+ * Provided in: `root`.
+ */
+@Injectable({
+ providedIn: 'root'
+})
+export class AnalyticsService {
+ /**
+ * Private variable: analytics.
+ *
+ * It stores the analytics object.
+ */
+ private analytics: any;
+
+ /**
+ * Private variable: isInitialized.
+ *
+ * It stores a boolean flag for successful initialization.
+ */
+ private isInitialized = false;
+
+ /**
+ * Constructor of the AnalyticsService.
+ *
+ * It calls the initialization method.
+ */
+ constructor() {
+ this.initializeAnalytics();
+ }
+
+ /**
+ * Public method: trackPageView.
+ *
+ * It tracks a page view for Analytics
+ * if initialization was successful.
+ *
+ * @params {string} [page] The given page string.
+ *
+ * @returns {void} Sets and sends the page view to GA.
+ */
+ trackPageView(page: string): void {
+ if (!this.isInitialized) {
+ console.log('Analytics not initialized');
+ return;
+ }
+ (window as any).ga('set', 'page', page);
+ (window as any).ga('send', 'pageview');
+ }
+
+ /**
+ * Private method: initializeAnalytics.
+ *
+ * It initializes the Analytics setup by setting the analytics object
+ * and a boolean flag for successful initialization.
+ *
+ * @returns {void} Sets analytics object and init flag.
+ */
+ private initializeAnalytics(): void {
+ if (!(window as any).analyticsConfig || !(window as any).analyticsConfig.trackingId) {
+ console.log('No analytics config found');
+ return;
+ }
+ this.analytics = (window as any).analyticsConfig;
+
+ if (document.location.hostname === 'edition.anton-webern.ch') {
+ ((i, s, o, g, r, a, m) => {
+ i['GoogleAnalyticsObject'] = r;
+ (i[r] =
+ i[r] ||
+ (() => {
+ (i[r].q = i[r].q || []).push(arguments);
+ })),
+ (i[r].l = 1 * (new Date() as any));
+ (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+ a.async = 1;
+ a.src = g;
+ m.parentNode.insertBefore(a, m);
+ })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+ } else {
+ // exclude non-production page calls
+ // cf. https://stackoverflow.com/questions/1251922/is-there-a-way-to-stop-google-analytics-counting-development-work-as-hits#8178283
+ console.log('Running non-production google analytics replacement now');
+ (window as any).ga = arg => {
+ // console.info('ga:', arguments);
+ };
+ }
+
+ if (this.analytics.debug) {
+ window['ga_debug'] = { trace: true };
+ }
+ if (this.analytics.cookieDomain) {
+ (window as any).ga('create', this.analytics.trackingId, {
+ cookieDomain: this.analytics.cookieDomain
+ });
+ } else {
+ (window as any).ga('create', this.analytics.trackingId, 'auto');
+ }
+ this.isInitialized = true;
+ }
+}
diff --git a/src/app/core/services/analytics-sercvice/index.ts b/src/app/core/services/analytics-sercvice/index.ts
new file mode 100644
index 0000000000..fbfed7f79f
--- /dev/null
+++ b/src/app/core/services/analytics-sercvice/index.ts
@@ -0,0 +1 @@
+export * from './analytics.service';
diff --git a/src/app/core/services/index.ts b/src/app/core/services/index.ts
index 50067ab69f..9283e1dfbb 100644
--- a/src/app/core/services/index.ts
+++ b/src/app/core/services/index.ts
@@ -7,6 +7,7 @@
*
*/
+import { AnalyticsService } from './analytics-sercvice';
import { ApiService } from './api-service';
import { ConversionService } from './conversion-service';
import { CoreService } from './core-service';
@@ -18,6 +19,7 @@ import { SideInfoService } from './side-info-service';
import { StorageService } from './storage-service';
export {
+ AnalyticsService,
ApiService,
ConversionService,
CoreService,
diff --git a/src/index.html b/src/index.html
index 54b3f193ca..5b1eeea978 100644
--- a/src/index.html
+++ b/src/index.html
@@ -43,34 +43,11 @@