openaire-library/sharedComponents/metaService.ts

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {Injectable, Inject} from '@angular/core';
// es6-modules are used here
import { ɵgetDOM as getDOM} from '@angular/platform-browser';
import {DOCUMENT} from '@angular/platform-browser';
/**
 * Represent meta element.
 *
 * ### Example
 *
 * ```ts
 * { name: 'application-name', content: 'Name of my application' },
 * { name: 'description', content: 'A description of the page', id: 'desc' }
 * // ...
 * // Twitter
 * { name: 'twitter:title', content: 'Content Title' }
 * // ...
 * // Google+
 * { itemprop: 'name', content: 'Content Title' },
 * { itemprop: 'description', content: 'Content Title' }
 * // ...
 * // Facebook / Open Graph
 * { property: 'fb:app_id', content: '123456789' },
 * { property: 'og:title', content: 'Content Title' }
 * ```
 *
 * @experimental
 */
export interface MetaDefinition {
  charset?: string;
  content?: string;
  httpEquiv?: string;
  id?: string;
  itemprop?: string;
  name?: string;
  property?: string;
  scheme?: string;
  url?: string;
  [prop: string]: string;
}

/**
 * A service that can be used to get and add meta tags.
 *
 * @experimental
 */
@Injectable()
export class Meta {
  private _dom: any = getDOM();
  constructor( @Inject(DOCUMENT) private _document: any) { }
  /**
   * Sets the title of the page
   */
  setTitle(title: string) {
    this._document.title = title
  }
  /**
   * Adds a new meta tag to the dom.
   *
   *  ### Example
   *
   * ```ts
   * const name: MetaDefinition = {name: 'application-name', content: 'Name of my application'};
   * const desc: MetaDefinition = {name: 'description', content: 'A description of the page'};
   * const tags: HTMLMetaElement[] = this.meta.addTags([name, desc]);
   * ```
   *
   * @param tags
   * @returns {HTMLMetaElement[]}
   */
  addTags(...tags: Array<MetaDefinition|MetaDefinition[]>): HTMLMetaElement[] {
    const presentTags = this._flattenArray(tags);
    if (presentTags.length === 0) return [];
    return presentTags.map((tag: MetaDefinition) => this._addInternal(tag));
  }

  /**
   * Gets the meta tag by the given selector. Returns element or null
   * if there's no such meta element.
   *
   *  ### Example
   *
   * ```ts
   * const meta: HTMLMetaElement = this.meta.getTag('name=description');
   * const twitterMeta: HTMLMetaElement = this.meta.getTag('name="twitter:title"');
   * const fbMeta: HTMLMetaElement = this.meta.getTag('property="fb:app_id"');
   * ```
   *
   * @param selector
   * @returns {HTMLMetaElement}
   */
  // getTag(selector: string): HTMLMetaElement {
  //   if (!selector) return null;
  //   return this._dom.query(`meta[${selector}]`);
  // }
  getTag(attrSelector: string): HTMLMetaElement|null {
  if (!attrSelector) return null;
  return this._dom.querySelector(this._document, `meta[${attrSelector}]`);
}

  /**
   * Updates the meta tag with the given selector.
   *
   * *  ### Example
   *
   * ```ts
   * const meta: HTMLMetaElement = this.meta.updateTag('name=description', {name: 'description',
   * content: 'New description'});
   * console.log(meta.content); // 'New description'
   * ```
   *
   * @param selector
   * @param tag updated tag definition
   * @returns {HTMLMetaElement}
   */
  updateTag(selector: string, tag: MetaDefinition): HTMLMetaElement {
    const meta: HTMLMetaElement = this.getTag(selector);
    if (!meta) {
      // create element if it doesn't exist
      return this._addInternal(tag);
    }
    return this._prepareMetaElement(tag, meta);
  }

  updateMeta(name, content) {
       const head = this._document.head;
       let childNodesAsList = this._dom.childNodesAsList(head);
       let metaEl = childNodesAsList.find(el => el['attribs'] ?  el['attribs'].name == name : false);
       if (metaEl) metaEl['attribs'].content = content;
    }
    updateProperty(property, content) {
         const head = this._document.head;
         let childNodesAsList = this._dom.childNodesAsList(head);
         let metaEl = childNodesAsList.find(el => el['attribs'] ?  el['attribs'].property == property : false);
         if (metaEl) metaEl['attribs'].content = content;
      }

  /**
   * Removes meta tag with the given selector from the dom.
   *
   *  ### Example
   *
   * ```ts
   * this.meta.removeTagBySelector('name=description');
   * ```
   *
   * @param selector
   */
  removeTagBySelector(selector: string): void {
    const meta: HTMLMetaElement = this.getTag(selector);
    this.removeTagElement(meta);
  }

  /**
   * Removes given meta element from the dom.
   *
   *  ### Example
   *  ```ts
   * const elem: HTMLMetaElement = this.meta.getTag('name=description');
   * this.meta.removeTagElement(elem);
   * ```
   *
   * @param meta meta element
   */
  removeTagElement(meta: HTMLMetaElement): void {
    if (meta) {
      this._removeMetaElement(meta);
    }
  }

  private _addInternal(tag: MetaDefinition): HTMLMetaElement {
    const meta: HTMLMetaElement = this._createMetaElement();
    this._prepareMetaElement(tag, meta);
    this._appendMetaElement(meta);
    return meta;
  }

  private _createMetaElement(): HTMLMetaElement {
    return this._dom.createElement('meta') as HTMLMetaElement;
  }

  private _prepareMetaElement(tag: MetaDefinition, el: HTMLMetaElement): HTMLMetaElement {
    Object.keys(tag).forEach((prop: string) => this._dom.setAttribute(el, prop, tag[prop]));
    return el;
  }

  // private _appendMetaElement(meta: HTMLMetaElement): void {
  //   const head = this._dom.getElementsByTagName(this._dom.defaultDoc(), 'head')[0];
  //   this._dom.appendChild(head, meta);
  // }
  private _appendMetaElement(meta: HTMLMetaElement): void {
    const head = this._document.head;
    this._dom.appendChild(head, meta);
  }
  private _removeMetaElement(meta: HTMLMetaElement): void {
    const head = this._dom.parentElement(meta);
    this._dom.removeChild(head, meta);
  }

  private _flattenArray(input: any[], out: any[] = []): any[] {
    if (input) {
      for (let i = 0; i < input.length; i++) {
        const item: any = input[i];
        if (Array.isArray(item)) {
          this._flattenArray(item, out);
        } else if (item) {
          out.push(item);
        }
      }
    }
    return out;
  }
}