fix(core): update

This commit is contained in:
Philipp Kunz 2020-11-04 18:01:04 +00:00
parent 49ca240237
commit 7a0d767e9d
14 changed files with 2112 additions and 1665 deletions

3320
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -16,15 +16,16 @@
"websafe" "websafe"
], ],
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.22", "@gitzone/tsbuild": "^2.1.25",
"@gitzone/tsbundle": "^1.0.72", "@gitzone/tsbundle": "^1.0.78",
"@gitzone/tstest": "^1.0.38", "@gitzone/tstest": "^1.0.52",
"@pushrocks/tapbundle": "^3.2.7", "@pushrocks/tapbundle": "^3.2.9",
"tslint": "^6.1.0", "tslint": "^6.1.3",
"tslint-config-prettier": "^1.15.0" "tslint-config-prettier": "^1.15.0"
}, },
"dependencies": { "dependencies": {
"@tsclass/tsclass": "^3.0.18" "@pushrocks/smartpromise": "^3.1.3",
"@tsclass/tsclass": "^3.0.29"
}, },
"files": [ "files": [
"ts/**/*", "ts/**/*",

View File

@ -1,20 +1,4 @@
import * as plugins from './websetup.plugins'; export * from './websetup.classes.websetup';
import { IMetaObject, setupMetaInformation } from './meta'; export * from './websetup.classes.tag.metatag';
export * from './websetup.classes.tag.opengraphtag';
export interface IWebSetupConstructorOptions { export * from './websetup.classes.tag.jsonldtag';
metaObject: IMetaObject;
}
/**
* the main WebSetup class
*/
export class WebSetup {
public options: IWebSetupConstructorOptions;
constructor(optionsArg: IWebSetupConstructorOptions) {
this.options = optionsArg;
}
public async setup() {
await setupMetaInformation(this.options.metaObject);
}
}

9
ts/interfaces/index.ts Normal file
View File

@ -0,0 +1,9 @@
import * as plugins from '../websetup.plugins';
export interface IMetaObject {
title: string;
description: string;
canonicalDomain?: string;
ldCompany?: plugins.tsclass.business.ICompany;
ldProduct?: any;
}

View File

@ -1,122 +0,0 @@
import * as plugins from '../websetup.plugins';
export interface IMetaObject {
title: string;
description: string;
canonicalDomain?: string;
ldCompany?: plugins.tsclass.business.ICompany;
ldProduct?: any;
}
export const setupMetaInformation = async (metaObjectArg: IMetaObject) => {
document.title = metaObjectArg.title;
addMetaTag('description', metaObjectArg.description);
addMetaTag('google', 'notranslate');
addMetaTag('revisit-after', '1 days');
metaObjectArg.canonicalDomain ? addLinkTag('canonical', metaObjectArg.canonicalDomain) : null;
if (metaObjectArg.ldCompany) {
addCompanyInfo(metaObjectArg.ldCompany);
}
};
const addMetaTag = async (metaNameArg: string, contentArg: string) => {
const metaElement = document.createElement('meta');
metaElement.name = metaNameArg;
metaElement.content = contentArg;
document.getElementsByTagName('head')[0].appendChild(metaElement);
};
const addLinkTag = async (relArg, hrefArg): Promise<Element> => {
const link = !!document.querySelector("link[rel='canonical']")
? document.querySelector("link[rel='canonical']")
: document.createElement('link');
link.setAttribute('rel', relArg);
link.setAttribute('href', hrefArg);
document.head.appendChild(link);
return link;
};
const addOpenGraphProperty = async (
propertyNameArg: string,
contentArg: string
): Promise<Element> => {
const openGraphElement = document.createElement('meta');
openGraphElement.setAttribute('property', propertyNameArg);
openGraphElement.content = contentArg;
document.getElementsByTagName('head')[0].appendChild(openGraphElement);
return openGraphElement;
};
const addCompanyInfo = async (
companyDataArg: plugins.tsclass.business.ICompany
): Promise<Element[]> => {
const returnElementArray: Element[] = [];
// lets care about linked data
const companyLd = {
'@context': 'https://schema.org',
'@type': 'Corporation',
name: companyDataArg.name,
alternateName: companyDataArg.name.replace(' GmbH', ''),
url: companyDataArg.contact.website,
logo: companyDataArg.contact.logoUrl,
contactPoint: {
'@type': 'ContactPoint',
telephone: companyDataArg.contact.phone,
contactType: 'customer service',
areaServed: 'DE',
availableLanguage: ['en', 'German'],
},
sameAs: [],
};
if (companyDataArg.contact.facebookUrl) {
companyLd.sameAs.push(companyDataArg.contact.facebookUrl);
}
if (companyDataArg.contact.twitterUrl) {
companyLd.sameAs.push(companyDataArg.contact.twitterUrl);
}
const jsonLdElement = document.createElement('script');
jsonLdElement.type = 'application/ld+json';
jsonLdElement.text = JSON.stringify(companyLd);
document.querySelector('head').appendChild(jsonLdElement);
returnElementArray.push(jsonLdElement);
// lets care about open graph
returnElementArray.push(await addOpenGraphProperty('og:type', 'business.business'));
returnElementArray.push(await addOpenGraphProperty('og:title', companyDataArg.name));
returnElementArray.push(await addOpenGraphProperty('og:url', companyDataArg.contact.website));
returnElementArray.push(await addOpenGraphProperty('og:image', companyDataArg.contact.logoUrl));
returnElementArray.push(
await addOpenGraphProperty(
'business:contact_data:street_address',
`${companyDataArg.contact.address.streetName} ${companyDataArg.contact.address.houseNumber}`
)
);
returnElementArray.push(
await addOpenGraphProperty(
'business:contact_data:locality',
companyDataArg.contact.address.postalCode
)
);
returnElementArray.push(
await addOpenGraphProperty('business:contact_data:region', companyDataArg.contact.address.city)
);
returnElementArray.push(
await addOpenGraphProperty(
'business:contact_data:postal_code',
companyDataArg.contact.address.postalCode
)
);
returnElementArray.push(
await addOpenGraphProperty(
'business:contact_data:country_name',
companyDataArg.contact.address.country
)
);
return returnElementArray;
};

View File

@ -0,0 +1,45 @@
import * as plugins from './websetup.plugins';
import * as interfaces from './interfaces';
import { Tag } from "./websetup.classes.tag";
export class JsonLdTag extends Tag {
public static createCompanyLd(companyDataArg: plugins.tsclass.business.ICompany) {
// lets care about linked data
const companyLd = {
'@context': 'https://schema.org',
'@type': 'Corporation',
name: companyDataArg.name,
alternateName: companyDataArg.name.replace(' GmbH', ''),
url: companyDataArg.contact.website,
logo: companyDataArg.contact.logoUrl,
contactPoint: {
'@type': 'ContactPoint',
telephone: companyDataArg.contact.phone,
contactType: 'customer service',
areaServed: 'DE',
availableLanguage: ['en', 'German'],
},
sameAs: [],
};
if (companyDataArg.contact.facebookUrl) {
companyLd.sameAs.push(companyDataArg.contact.facebookUrl);
}
if (companyDataArg.contact.twitterUrl) {
companyLd.sameAs.push(companyDataArg.contact.twitterUrl);
}
const ldTag = new JsonLdTag(companyLd);
return ldTag;
}
constructor(ldObjectArg: any) {
super();
const jsonLdElement = document.createElement('script');
jsonLdElement.type = 'application/ld+json';
jsonLdElement.text = JSON.stringify(JSON.stringify(ldObjectArg));
this.elementRef = jsonLdElement;
}
}

View File

@ -0,0 +1,13 @@
import { Tag } from './websetup.classes.tag';
export class LinkTag extends Tag {
constructor(relArg: string, hrefArg: string) {
super();
const linkElement = !!document.querySelector("link[rel='canonical']")
? document.querySelector("link[rel='canonical']")
: document.createElement('link');
linkElement.setAttribute('rel', relArg);
linkElement.setAttribute('href', hrefArg);
this.elementRef = linkElement;
}
}

View File

@ -0,0 +1,11 @@
import { Tag } from "./websetup.classes.tag";
export class MetaTag extends Tag {
constructor(metaNameArg: string, contentArg: string) {
super();
const metaElement = document.createElement('meta');
metaElement.name = metaNameArg;
metaElement.content = contentArg;
this.elementRef = metaElement;
}
}

View File

@ -0,0 +1,11 @@
import { Tag } from './websetup.classes.tag';
export class OpengraphTag extends Tag {
constructor(propertyNameArg: string, contentArg: string) {
super();
const openGraphElement = document.createElement('meta');
openGraphElement.setAttribute('property', propertyNameArg);
openGraphElement.content = contentArg;
this.elementRef = openGraphElement;
}
}

View File

@ -0,0 +1,21 @@
import * as plugins from './websetup.plugins';
export class Tag {
public elementRef: Element;
public tagLevel: 'global' | 'levelbound';
public appendToDom() {
if (!this.elementRef.parentElement && !this.elementRef.parentNode) {
document.getElementsByTagName('head')[0].appendChild(this.elementRef);
}
}
public removeFromDom() {
if (this.elementRef.parentElement) {
this.elementRef.parentElement.removeChild(this.elementRef);
} else if (this.elementRef.parentNode) {
this.elementRef.parentNode.removeChild(this.elementRef);
}
}
}

View File

@ -0,0 +1,78 @@
import { Tag } from './websetup.classes.tag';
import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
import { TagManager } from './websetup.classes.tagmanager';
import * as plugins from './websetup.plugins';
export type TBaseLevelType = 'global' | 'base' | 'subpage';
export class TagLevel {
public tagManagerRef: TagManager;
public title: string;
public type: TBaseLevelType;
public tags: Tag[] = [];
constructor(tagManagerRefArg: TagManager, levelType: TBaseLevelType) {
this.tagManagerRef = tagManagerRefArg;
}
public addTag(tagArg: Tag) {
this.tags.push(tagArg);
}
public async addCompanyInfo(
companyDataArg: plugins.tsclass.business.ICompany
) {
this.addTag(JsonLdTag.createCompanyLd(companyDataArg));
// lets care about open graph
this.addTag(new OpengraphTag('og:type', 'business.business'));
this.addTag(new OpengraphTag('og:title', companyDataArg.name));
this.addTag(new OpengraphTag('og:url', companyDataArg.contact.website));
this.addTag(new OpengraphTag('og:image', companyDataArg.contact.logoUrl));
this.addTag(
new OpengraphTag(
'business:contact_data:street_address',
`${companyDataArg.contact.address.streetName} ${companyDataArg.contact.address.houseNumber}`
)
);
this.addTag(
new OpengraphTag(
'business:contact_data:locality',
companyDataArg.contact.address.postalCode
)
);
this.addTag(
new OpengraphTag('business:contact_data:region', companyDataArg.contact.address.city)
);
this.addTag(
new OpengraphTag(
'business:contact_data:postal_code',
companyDataArg.contact.address.postalCode
)
);
this.addTag(
new OpengraphTag(
'business:contact_data:country_name',
companyDataArg.contact.address.country
)
);
}
public async enable() {
if (this.title) {
document.title = this.title;
}
for (const tagArg of this.tags) {
tagArg.appendToDom();
}
}
public async disable() {
for (const tagArg of this.tags) {
tagArg.removeFromDom();
}
}
}

View File

@ -0,0 +1,53 @@
import { TagLevel } from './websetup.classes.taglevel';
import * as plugins from './websetup.plugins';
import * as interfaces from './interfaces';
import { MetaTag } from './websetup.classes.tag.metatag';
import { JsonLdTag } from './websetup.classes.tag.jsonldtag';
import { OpengraphTag } from './websetup.classes.tag.opengraphtag';
export class TagManager {
public globalLevel: TagLevel;
public baseLevel: TagLevel;
public activeLevel: TagLevel;
public async setup(metaObjectArg: interfaces.IMetaObject) {
// global tag level
this.globalLevel = new TagLevel(this, 'global');
this.globalLevel.addTag(new MetaTag('google', 'notranslate'));
this.globalLevel.addTag(new MetaTag('revisit-after', '1 days'));
// base tag level
this.baseLevel = new TagLevel(this, 'base');
this.baseLevel.title = metaObjectArg.title;
this.baseLevel.addTag(new MetaTag('description', metaObjectArg.description));
if (metaObjectArg.canonicalDomain){
this.baseLevel.addTag(new MetaTag('canonical', metaObjectArg.canonicalDomain))
}
if (metaObjectArg.ldCompany) {
this.baseLevel.addCompanyInfo(metaObjectArg.ldCompany);
}
await this.globalLevel.enable();
await this.baseLevel.enable();
}
public setSubPageLevel(metaObjectArg: interfaces.IMetaObject) {
const subPageLevel = new TagLevel(this, 'subpage');
subPageLevel.title = metaObjectArg.title;
subPageLevel.addTag(new MetaTag('description', metaObjectArg.description));
this.activeLevel.disable();
this.activeLevel = subPageLevel;
this.activeLevel.enable();
}
public revertToBaseLevel() {
if (this.activeLevel !== this.baseLevel) {
this.activeLevel.disable();
this.activeLevel = this.baseLevel;
this.activeLevel.enable();
}
}
}

View File

@ -0,0 +1,43 @@
import * as plugins from './websetup.plugins';
import * as interfaces from './interfaces';
import { TagManager } from './websetup.classes.tagmanager';
import { TagLevel } from './websetup.classes.taglevel';
export interface IWebSetupConstructorOptions {
metaObject: interfaces.IMetaObject;
}
/**
* the main WebSetup class
*/
export class WebSetup {
public tagManager: TagManager = new TagManager();
public options: IWebSetupConstructorOptions;
private readyDeferred = plugins.smartpromise.defer();
public readyPromise = this.readyDeferred.promise;
constructor(optionsArg: IWebSetupConstructorOptions) {
this.options = optionsArg;
this.setup().then(() => {this.readyDeferred.resolve()});
}
/**
* an async setup called by the constructor
*/
private async setup() {
await this.tagManager.setup(this.options.metaObject);
}
/**
* reverts the active level and returns to the base level
*/
public revertToBaseLevel() {
this.tagManager.revertToBaseLevel();
}
/**
* sets a subpage
* @param metaObject
*/
public setSubLevel(metaObject: interfaces.IMetaObject) {
}
}

View File

@ -1,3 +1,11 @@
// pushrocks scope
import * as smartpromise from '@pushrocks/smartpromise';
export {
smartpromise
};
// tsclass scope
import * as tsclass from '@tsclass/tsclass'; import * as tsclass from '@tsclass/tsclass';
export { tsclass }; export { tsclass };