3.0.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushrocks/websetup",
-  "version": "2.0.15",
+  "version": "3.0.2",
   "private": false,
   "description": "setup basic page properties",
   "main": "dist_ts/index.js",
@@ -16,15 +16,16 @@
     "websafe"
   ],
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.22",
-    "@gitzone/tsbundle": "^1.0.57",
-    "@gitzone/tstest": "^1.0.28",
-    "@pushrocks/tapbundle": "^3.2.1",
-    "tslint": "^6.1.0",
+    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tstest": "^1.0.52",
+    "@pushrocks/tapbundle": "^3.2.9",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@tsclass/tsclass": "^3.0.18"
+    "@pushrocks/smartpromise": "^3.1.3",
+    "@tsclass/tsclass": "^3.0.29"
   },
   "files": [
     "ts/**/*",
@@ -37,5 +38,8 @@
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
   ]
 }

readme.md

@@ -31,10 +31,6 @@ Use TypeScript for best in class intellisense.
 
 We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
 
-## Contribution
-
-We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
-
 For further information read the linked docs at the top of this readme.
 
 > MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)

test/test.browser.ts

@@ -0,0 +1,16 @@
+import { expect, tap } from '@pushrocks/tapbundle';
+import * as websetup from '../ts/index';
+
+tap.test('first test', async () => {
+  const websetupInstance = new websetup.WebSetup({
+    metaObject: {
+      description: 'A awesome description',
+      title: 'mytitle',
+      canonicalDomain: 'lossless.com'
+    }
+  });
+  await websetupInstance.readyPromise;
+  expect(document.title).to.equal('mytitle');
+});
+
+tap.start();

test/test.ts

@@ -1,8 +0,0 @@
-import { expect, tap } from '@pushrocks/tapbundle';
-import * as websetup from '../ts/index';
-
-tap.test('first test', async () => {
-  console.log('Waiting for proper puppeteer support here');
-});
-
-tap.start();

ts/index.ts

@@ -1,33 +1,4 @@
-import * as plugins from './websetup.plugins';
-
-import { setupGoogleAnalytics } from './tools/ganalytics';
-import { setupFullStory } from './tools/fullstory';
-import { IMetaObject, setupMetaInformation } from './meta';
-
-export interface IWebSetupConstructorOptions {
-  googleAnalyticsCode?: string;
-  fsCode?: string;
-  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);
-
-    if (this.options.googleAnalyticsCode) {
-      await setupGoogleAnalytics(this.options.googleAnalyticsCode);
-    }
-
-    if (this.options.fsCode) {
-      await setupFullStory(this.options.fsCode);
-    }
-  }
-}
+export * from './websetup.classes.websetup';
+export * from './websetup.classes.tag.metatag';
+export * from './websetup.classes.tag.opengraphtag';
+export * from './websetup.classes.tag.jsonldtag';

ts/interfaces/index.ts

@@ -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;
+}

ts/meta/index.ts

@@ -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;
-};

ts/tools/fullstory.ts

@@ -1,70 +0,0 @@
-declare global {
-  // tslint:disable-next-line: interface-name
-  interface Window {
-    _fs_debug: boolean;
-    _fs_host: any;
-    _fs_org: string;
-    _fs_namespace: string;
-  }
-}
-export const setupFullStory = async (fsCodeArg: string) => {
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_debug'] = false;
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_host'] = 'fullstory.com';
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_org'] = fsCodeArg;
-  // tslint:disable-next-line: no-string-literal
-  window['_fs_namespace'] = 'FS';
-  ((m, n, e, t, l, o, g, y) => {
-    if (e in m) {
-      if (m.console && m.console.log) {
-        m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');
-      }
-      return;
-    }
-    // tslint:disable-next-line: only-arrow-functions
-    g = m[e] = function (a, b, s) {
-      g.q ? g.q.push([a, b, s]) : g._api(a, b, s);
-    };
-    g.q = [];
-    o = n.createElement(t);
-    o.async = 1;
-    o.src = 'https://' + window._fs_host + '/s/fs.js';
-    o.crossorigin = 'anonymous';
-    y = n.getElementsByTagName(t)[0];
-    y.parentNode.insertBefore(o, y);
-    // tslint:disable-next-line: only-arrow-functions
-    g.identify = function (i, v, s) {
-      g(l, { uid: i }, s);
-      if (v) g(l, v, s);
-    };
-    g.setUserVars = function (v, s) {
-      g(l, v, s);
-    };
-    g.event = function (i, v, s) {
-      g('event', { n: i, p: v }, s);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.shutdown = function () {
-      g('rec', !1);
-    };
-    g.restart = function () {
-      g('rec', !0);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.consent = function (a) {
-      g('consent', !arguments.length || a);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.identifyAccount = function (i, v) {
-      o = 'account';
-      v = v || {};
-      v.acctId = i;
-      g(o, v);
-    };
-    // tslint:disable-next-line: only-arrow-functions
-    g.clearUserCookie = function () {};
-    // tslint:disable-next-line: no-string-literal
-  })(window, document, window['_fs_namespace'], 'script', 'user');
-};

ts/tools/ganalytics.ts

@@ -1,32 +0,0 @@
-declare global {
-  // tslint:disable-next-line: interface-name
-  interface Window {
-    analytics: any;
-  }
-}
-
-export const setupGoogleAnalytics = async (gaCode: string) => {
-  // tslint:disable-next-line: only-arrow-functions
-  (function (i, s, o, g, r, a, m) {
-    // tslint:disable-next-line: no-string-literal
-    i['GoogleAnalyticsObject'] = r;
-    // tslint:disable-next-line: ban-comma-operator
-    (i[r] =
-      i[r] ||
-      // tslint:disable-next-line: only-arrow-functions
-      function () {
-        (i[r].q = i[r].q || []).push(arguments);
-      }),
-      (i[r].l = new Date().getTime());
-    // tslint:disable-next-line: ban-comma-operator
-    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-    a.async = 1;
-    a.src = g;
-    a.crossorigin = 'anonymous';
-    m.parentNode.insertBefore(a, m);
-  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'analytics');
-
-  window.analytics('create', gaCode, 'auto');
-  window.analytics('send', 'pageview');
-  console.log('Loaded Google Analytics. You may view our privacy policy at https://lossless.gmbh');
-};

ts/websetup.classes.tag.jsonldtag.ts

@@ -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;
+  }
+}

ts/websetup.classes.tag.linktag.ts

@@ -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;
+  }
+}

ts/websetup.classes.tag.metatag.ts

@@ -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;
+  }
+}

ts/websetup.classes.tag.opengraphtag.ts

@@ -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;
+  }
+}

ts/websetup.classes.tag.ts

@@ -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);
+    }
+  }
+}

ts/websetup.classes.taglevel.ts

@@ -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();
+    }
+  }
+}

ts/websetup.classes.tagmanager.ts

@@ -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();
+    }
+  }
+}

ts/websetup.classes.websetup.ts

@@ -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) {
+  }
+}

ts/websetup.plugins.ts

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