diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts index 155a2c34cd..bdf44d1caf 100644 --- a/aio/src/app/embedded/code/code-example.component.ts +++ b/aio/src/app/embedded/code/code-example.component.ts @@ -1,5 +1,6 @@ /* tslint:disable component-selector */ import { Component, ElementRef, OnInit } from '@angular/core'; +import { getBoolFromAttribute } from 'app/shared/attribute-utils'; /** * An embeddable code block that displays nicely formatted code. @@ -38,7 +39,7 @@ export class CodeExampleComponent implements OnInit { this.path = element.getAttribute('path') || ''; this.region = element.getAttribute('region') || ''; this.title = element.getAttribute('title') || ''; - this.hideCopy = element.getAttribute('hideCopy') === 'true'; + this.hideCopy = getBoolFromAttribute(element, ['hidecopy', 'hide-copy']); } ngOnInit() { diff --git a/aio/src/app/embedded/live-example/live-example.component.ts b/aio/src/app/embedded/live-example/live-example.component.ts index c67b1fc0bd..b2d52708e2 100644 --- a/aio/src/app/embedded/live-example/live-example.component.ts +++ b/aio/src/app/embedded/live-example/live-example.component.ts @@ -2,6 +2,8 @@ import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core'; import { Location } from '@angular/common'; +import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils'; + const defaultPlnkrImg = 'plunker/placeholder.png'; const imageBase = 'content/images/'; const liveExampleBase = 'content/live-examples/'; @@ -87,7 +89,7 @@ export class LiveExampleComponent implements OnInit { private elementRef: ElementRef, location: Location ) { - const attrs = this.attrs = this.getAttrs(); + const attrs = this.attrs = getAttrs(this.elementRef); let exampleDir = attrs.name; if (!exampleDir) { // take last segment, excluding hash fragment and query params @@ -98,12 +100,11 @@ export class LiveExampleComponent implements OnInit { this.plnkrName = attrs.plnkr ? attrs.plnkr.trim() + '.' : ''; this.zip = `${zipBase}${exampleDir}/${this.plnkrName}${this.zipName}.zip`; - const noDownload = this.getAttrValue(['noDownload', 'nodownload']); // noDownload aliases - this.enableDownload = !boolFromAtty(noDownload); + this.enableDownload = !boolFromValue(getAttrValue(attrs, 'nodownload')); this.plnkrImg = imageBase + (attrs.img || defaultPlnkrImg); - if (boolFromAtty(this.getAttrValue(['downloadOnly', 'downloadonly']))) { + if (boolFromValue(getAttrValue(attrs, 'downloadonly'))) { this.mode = 'downloadOnly'; } } @@ -116,7 +117,7 @@ export class LiveExampleComponent implements OnInit { let plnkrStyle = 'eplnkr'; // embedded style by default this.mode = 'default'; // display in another browser tab by default - this.isEmbedded = boolFromAtty(attrs.embedded); + this.isEmbedded = boolFromValue(attrs.embedded); if (this.isEmbedded) { this.mode = 'embedded'; // display embedded in the doc @@ -126,11 +127,11 @@ export class LiveExampleComponent implements OnInit { // If wide enough, choose style based on style attributes if (width > this.narrowWidth) { // Make flat style with `flat-style` or `embedded-style="false`; support atty aliases - const flatStyle = this.getAttrValue(['flat-style', 'flatstyle', 'flatStyle']); - const isFlatStyle = boolFromAtty(flatStyle); + const flatStyle = getAttrValue(attrs, ['flat-style', 'flatstyle']); + const isFlatStyle = boolFromValue(flatStyle); - const embeddedStyle = this.getAttrValue(['embedded-style', 'embeddedstyle', 'embeddedStyle']); - const isEmbeddedStyle = boolFromAtty(embeddedStyle, !isFlatStyle); + const embeddedStyle = getAttrValue(attrs, ['embedded-style', 'embeddedstyle']); + const isEmbeddedStyle = boolFromValue(embeddedStyle, !isFlatStyle); plnkrStyle = isEmbeddedStyle ? 'eplnkr' : 'plnkr'; } } @@ -138,17 +139,6 @@ export class LiveExampleComponent implements OnInit { this.plnkr = `${liveExampleBase}${exampleDir}/${this.plnkrName}${plnkrStyle}.html`; } - getAttrs(): any { - const attrs = this.elementRef.nativeElement.attributes; - const attrMap = {}; - Object.keys(attrs).forEach(key => attrMap[attrs[key].name] = attrs[key].value); - return attrMap; - } - - getAttrValue(atty: string | string[]) { - return this.attrs[typeof atty === 'string' ? atty : atty.find(a => this.attrs[a] !== undefined)]; - } - ngOnInit() { // The `liveExampleContent` property is set by the DocViewer when it builds this component. // It is the original innerHTML of the host element. @@ -168,11 +158,6 @@ export class LiveExampleComponent implements OnInit { toggleEmbedded () { this.showEmbedded = !this.showEmbedded; } } -function boolFromAtty(atty: string , def: boolean = false) { - // tslint:disable-next-line:triple-equals - return atty == undefined ? def : atty.trim() !== 'false'; -} - ///// EmbeddedPlunkerComponent /// /** * Hides the