/** * @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): 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; } }