Text Highlight directive (#839)

* Adding highlight directive and demo page.

* Adding and replacing highlight style.

* Use mark element.

* Update demo.

* Add test for directive.

* Update test.

* Update highlighter to be case insensitive.

* Can't add mark text to innerhtml.

* Update tests.

* Use mutation observer for dom events.

* Reformat test

* Update async test.

* Mock mutation observer service.

* Add extra test.

* Adding visual tests.

* Add text highlight visual test.

* Move mutation service class.

* Update event creation in test.

* Adding test for mutation observer class. Removing undefined check for IE10.

* Disconnect mutation observer on destroy. Add exports. Fix name.

skyux-spa-visual-tests/src/app/home.component.ts

@@ -36,6 +36,7 @@ export class HomeComponent {
     'tabs',
     'text-expand',
     'text-expand-repeater',
+    'text-highlight',
     'tiles',
     'toolbar',
     'wait'

skyux-spa-visual-tests/src/app/text-highlight/index.html

@@ -0,0 +1 @@
+<text-highlight-visual></text-highlight-visual>

skyux-spa-visual-tests/src/app/text-highlight/text-highlight-visual.component.html

@@ -0,0 +1,9 @@
+<div id="text-highlight-normal">
+    <div [skyHighlight]="normalSearchTerm">The text that you enter is highlighted here.</div>
+<div>
+<div id="text-highlight-blank">
+    <div [skyHighlight]="blankSearchTerm">The text that you enter is highlighted here.</div>
+<div>
+<div id="text-highlight-no-match">
+    <div [skyHighlight]="notMatchedSearchTerm">The text that you enter is highlighted here.</div>
+<div>

skyux-spa-visual-tests/src/app/text-highlight/text-highlight-visual.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+  selector: 'text-highlight-visual',
+  templateUrl: './text-highlight-visual.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TextHighlightVisualComponent {
+  public normalSearchTerm: string = 'enter';
+  public blankSearchTerm: string = '';
+  public notMatchedSearchTerm: string = 'xnotmatched';
+}

skyux-spa-visual-tests/src/app/text-highlight/text-highlight.visual-spec.ts

@@ -0,0 +1,35 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+import { element, by } from 'protractor';
+
+describe('TextHighlight', () => {
+
+  it('should match previous text highlight screenshot', () => {
+    return SkyVisualTest.setupTest('text-highlight')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'text-highlight-normal-screenshot',
+        selector: '#text-highlight-normal'
+      });
+    });
+  });
+
+  it('should match previous text highlight screenshot when term is blank', () => {
+    return SkyVisualTest.setupTest('text-highlight')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'text-highlight-blank-screenshot',
+        selector: '#text-highlight-blank'
+      });
+    });
+  });
+
+  it('should match previous text highlight screenshot when term is not matched', () => {
+    return SkyVisualTest.setupTest('text-highlight')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'text-highlight-no-match-screenshot',
+        selector: '#text-highlight-no-match'
+      });
+    });
+  });
+});

src/app/components/demo-components.service.ts

@@ -316,6 +316,28 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Highlight',
+        icon: 'paint-brush',
+        summary: `The highlight component highlights text within DOM elements.`,
+        url: '/components/text-highlight',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'text-highlight-demo.component.html',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./text-highlight/text-highlight-demo.component.html')
+            },
+            {
+              name: 'text-highlight-demo.component.ts',
+              // tslint:disable-next-line
+              fileContents: require('!!raw-loader!./text-highlight/text-highlight-demo.component.ts'),
+              componentName: 'SkyTextHighlightDemoComponent',
+              bootstrapSelector: 'sky-text-highlight-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Key info',
         icon: 'key',

src/app/components/text-highlight/index.html

@@ -0,0 +1,18 @@
+<sky-demo-page title="Highlight">
+  <sky-demo-page-summary>
+    The highlight directive allows you to highlight text within DOM elements. When you set the <code>skyHighlight</code> attribute to the text you want to highlight, it highlights all matching text within the element.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties>
+    <sky-demo-page-property
+      propertyName="skyHighlight"
+      defaultValue="">
+      Specifies the text to highlight.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <sky-text-highlight-demo></sky-text-highlight-demo>
+    <sky-demo-page-code demoName="Highlight"></sky-demo-page-code>
+  </sky-demo-page-example>
+</sky-demo-page>

src/app/components/text-highlight/text-highlight-demo.component.html

@@ -0,0 +1,23 @@
+<div class="sky-form-group">
+    <label for="sky-demo-search-term">Enter text to highlight:</label>
+    <br />
+    <input
+        id="sky-demo-search-term"
+        type="text"
+        style="margin: 10px 0 10px 0; width: 180px;"
+        class="sky-form-control" 
+        [(ngModel)]="searchTerm" 
+    />
+</div>
+
+<div style="margin-bottom: 10px;">
+    <sky-checkbox [(ngModel)]="showAdditionalContent">
+        <sky-checkbox-label>Display additional content</sky-checkbox-label>
+    </sky-checkbox>
+</div>
+
+<div [skyHighlight]="searchTerm">The text that you enter is highlighted here.
+    <div *ngIf="showAdditionalContent">
+        This additional content is highlighted too!
+    </div>
+</div>

src/app/components/text-highlight/text-highlight-demo.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-text-highlight-demo',
+  templateUrl: './text-highlight-demo.component.html'
+})
+export class SkyTextHighlightDemoComponent {
+  public searchTerm: string;
+  public showAdditionalContent: boolean = false;
+}

src/core.ts

@@ -40,6 +40,7 @@ import { SkySortModule } from './modules/sort';
 import { SkyTabsModule } from './modules/tabs';
 import { SkyTextExpandModule } from './modules/text-expand';
 import { SkyTextExpandRepeaterModule } from './modules/text-expand-repeater';
+import { SkyTextHighlightModule } from './modules/text-highlight';
 import { SkyToolbarModule } from './modules/toolbar';
 import { SkyTilesModule } from './modules/tiles';
 import { SkyTimepickerModule } from './modules/timepicker';
@@ -84,6 +85,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyTabsModule,
     SkyTextExpandModule,
     SkyTextExpandRepeaterModule,
+    SkyTextHighlightModule,
     SkyTilesModule,
     SkyTimepickerModule,
     SkyToolbarModule,
@@ -356,6 +358,10 @@ export {
   SkyTextExpandRepeaterComponent,
   SkyTextExpandRepeaterModule
 } from './modules/text-expand-repeater';
+export {
+  SkyTextHighlightDirective,
+  SkyTextHighlightModule
+} from './modules/text-highlight';
 export {
   SkyTileDashboardService,
   SkyTileContentModule,

src/modules/mutation/mutation-observer-service.spec.ts

@@ -0,0 +1,13 @@
+import { TestBed } from '@angular/core/testing';
+import { MutationObserverService } from './mutation-observer-service';
+
+describe('Mutation observer service', () => {
+
+  it('should return a new instance of a mutation observer', () => {
+    let service = new MutationObserverService();
+    let observer = service.create((mutations: MutationRecord[]) => 0);
+
+    expect(observer).not.toBe(undefined);
+    expect(observer).toEqual(jasmine.any(MutationObserver));
+  });
+});

src/modules/mutation/mutation-observer-service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MutationObserverService {
+  public create(callback: any): MutationObserver {
+    return new MutationObserver(callback);
+  }
+}

src/modules/text-highlight/fixtures/text-highlight.component.fixture.html

@@ -0,0 +1,8 @@
+<input class="sky-input-search-term" type="text" [(ngModel)]="searchTerm" />
+<input class="sky-test-checkbox" type="checkbox" [(ngModel)]="showAdditionalContent" />
+
+<div class="sky-test-div-container" [skyHighlight]="searchTerm">Here is some test text.
+    <div *ngIf="showAdditionalContent">
+        Here is additional text that was previously hidden.
+    </div>
+</div>

src/modules/text-highlight/fixtures/text-highlight.component.fixture.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'sky-text-highlight-component',
+    templateUrl: 'text-highlight.component.fixture.html'
+})
+
+export class SkyTextHighlightTestComponent {
+  public searchTerm: string;
+  public showAdditionalContent: boolean = false;
+}

src/modules/text-highlight/index.ts

@@ -0,0 +1,2 @@
+export { SkyTextHighlightModule } from './text-highlight.module';
+export { SkyTextHighlightDirective } from './text-highlight.directive';