From d5ae328692d995fadc20c36510bb7513ad505655 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 17 Mar 2017 17:52:22 +0100 Subject: [PATCH] chore: remove dom projection service Gets rid of the `DomProjection` service which isn't being used anymore. Fixes #3649. --- src/demo-app/demo-app-module.ts | 3 - src/demo-app/demo-app/demo-app.ts | 1 - src/demo-app/demo-app/routes.ts | 2 - src/demo-app/projection/projection-demo.ts | 50 ------------ src/lib/core/core.ts | 3 - src/lib/core/projection/projection.spec.ts | 88 -------------------- src/lib/core/projection/projection.ts | 93 ---------------------- src/lib/module.ts | 3 - 8 files changed, 243 deletions(-) delete mode 100644 src/demo-app/projection/projection-demo.ts delete mode 100644 src/lib/core/projection/projection.spec.ts delete mode 100644 src/lib/core/projection/projection.ts diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 0263eff112fc..4dfe2f347bb8 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -38,7 +38,6 @@ import {SnackBarDemo} from './snack-bar/snack-bar-demo'; import {PortalDemo, ScienceJoke} from './portal/portal-demo'; import {MenuDemo} from './menu/menu-demo'; import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo'; -import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo'; import {PlatformDemo} from './platform/platform-demo'; import {AutocompleteDemo} from './autocomplete/autocomplete-demo'; import {InputDemo} from './input/input-demo'; @@ -81,8 +80,6 @@ import {StyleDemo} from './style/style-demo'; PortalDemo, ProgressBarDemo, ProgressSpinnerDemo, - ProjectionDemo, - ProjectionTestComponent, RadioDemo, RippleDemo, RotiniPanel, diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 746a18056915..40c583c21c89 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -36,7 +36,6 @@ export class DemoApp { {name: 'Live Announcer', route: 'live-announcer'}, {name: 'Overlay', route: 'overlay'}, {name: 'Portal', route: 'portal'}, - {name: 'Projection', route: 'projection'}, {name: 'Progress Bar', route: 'progress-bar'}, {name: 'Progress Spinner', route: 'progress-spinner'}, {name: 'Radio', route: 'radio'}, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index d2e2360799f6..fa01702d1e7d 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/src/demo-app/demo-app/routes.ts @@ -27,7 +27,6 @@ import {RippleDemo} from '../ripple/ripple-demo'; import {DialogDemo} from '../dialog/dialog-demo'; import {TooltipDemo} from '../tooltip/tooltip-demo'; import {SnackBarDemo} from '../snack-bar/snack-bar-demo'; -import {ProjectionDemo} from '../projection/projection-demo'; import {TABS_DEMO_ROUTES} from '../tabs/routes'; import {PlatformDemo} from '../platform/platform-demo'; import {AutocompleteDemo} from '../autocomplete/autocomplete-demo'; @@ -48,7 +47,6 @@ export const DEMO_APP_ROUTES: Routes = [ {path: 'progress-spinner', component: ProgressSpinnerDemo}, {path: 'progress-bar', component: ProgressBarDemo}, {path: 'portal', component: PortalDemo}, - {path: 'projection', component: ProjectionDemo}, {path: 'overlay', component: OverlayDemo}, {path: 'checkbox', component: CheckboxDemo}, {path: 'input', component: InputDemo}, diff --git a/src/demo-app/projection/projection-demo.ts b/src/demo-app/projection/projection-demo.ts deleted file mode 100644 index 70d9d6fdae04..000000000000 --- a/src/demo-app/projection/projection-demo.ts +++ /dev/null @@ -1,50 +0,0 @@ -import {Component, ViewChild, ElementRef, OnInit, Input} from '@angular/core'; -import {DomProjectionHost, DomProjection} from '@angular/material'; - - -@Component({ - selector: '[projection-test]', - template: ` -
- Before - - After -
- `, - styles: [` - .demo-outer { - background-color: #663399; - } - `] -}) -export class ProjectionTestComponent implements OnInit { - @ViewChild(DomProjectionHost) _host: DomProjectionHost; - @Input('class') cssClass: any; - - constructor(private _projection: DomProjection, private _ref: ElementRef) {} - - ngOnInit() { - this._projection.project(this._ref, this._host); - } -} - - -@Component({ - selector: 'projection-app', - template: ` -
-
Content: {{binding}}
-
-
- - - `, - styles: [` - .demo-inner { - background-color: #DAA520; - } - `] -}) -export class ProjectionDemo { - binding: string = 'abc'; -} diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index ac0e148798dd..04814c0de02a 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -33,9 +33,6 @@ export { } from './portal/portal-directives'; export {DomPortalHost} from './portal/dom-portal-host'; -// Projection -export * from './projection/projection'; - // Platform export * from './platform/index'; diff --git a/src/lib/core/projection/projection.spec.ts b/src/lib/core/projection/projection.spec.ts deleted file mode 100644 index 384f953368c3..000000000000 --- a/src/lib/core/projection/projection.spec.ts +++ /dev/null @@ -1,88 +0,0 @@ -import {TestBed, async} from '@angular/core/testing'; -import { - NgModule, - Component, - ViewChild, - ElementRef, -} from '@angular/core'; -import {ProjectionModule, DomProjection, DomProjectionHost} from './projection'; - - -describe('Projection', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ProjectionModule.forRoot(), ProjectionTestModule], - }); - - TestBed.compileComponents(); - })); - - it('should project properly', async(() => { - const fixture = TestBed.createComponent(ProjectionTestApp); - const appEl: HTMLDivElement = fixture.nativeElement; - const outerDivEl = appEl.querySelector('.outer'); - const innerDivEl = appEl.querySelector('.inner'); - - // Expect the reverse of the tests down there. - expect(appEl.querySelector('cdk-dom-projection-host')).not.toBeNull(); - expect(outerDivEl.querySelector('.inner')).not.toBe(innerDivEl); - - const innerHtml = appEl.innerHTML; - - // Trigger OnInit (and thus the projection). - fixture.detectChanges(); - - expect(appEl.innerHTML).not.toEqual(innerHtml); - - // Assert `` is not in the DOM anymore. - expect(appEl.querySelector('cdk-dom-projection-host')).toBeNull(); - - // Assert the outerDiv contains the innerDiv. - expect(outerDivEl.querySelector('.inner')).toBe(innerDivEl); - - // Assert the innerDiv contains the content. - expect(innerDivEl.querySelector('.content')).not.toBeNull(); - })); -}); - - -/** Test-bed component that contains a projection. */ -@Component({ - selector: '[projection-test]', - template: ` -
- -
- `, -}) -class ProjectionTestComponent { - @ViewChild(DomProjectionHost) _host: DomProjectionHost; - - constructor(private _projection: DomProjection, private _ref: ElementRef) {} - ngOnInit() { this._projection.project(this._ref, this._host); } -} - - -/** Test-bed component that contains a portal host and a couple of template portals. */ -@Component({ - selector: 'projection-app', - template: ` -
-
-
- `, -}) -class ProjectionTestApp { -} - - - -const TEST_COMPONENTS = [ProjectionTestApp, ProjectionTestComponent]; -@NgModule({ - imports: [ProjectionModule], - exports: TEST_COMPONENTS, - declarations: TEST_COMPONENTS, - entryComponents: TEST_COMPONENTS, -}) -class ProjectionTestModule { } - diff --git a/src/lib/core/projection/projection.ts b/src/lib/core/projection/projection.ts deleted file mode 100644 index fb22b8672185..000000000000 --- a/src/lib/core/projection/projection.ts +++ /dev/null @@ -1,93 +0,0 @@ -import {Injectable, Directive, ModuleWithProviders, NgModule, ElementRef} from '@angular/core'; - - -// "Polyfill" for `Node.replaceWith()`. -// cf. https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith -function _replaceWith(toReplaceEl: HTMLElement, otherEl: HTMLElement) { - toReplaceEl.parentElement.replaceChild(otherEl, toReplaceEl); -} - -/** @docs-private */ -@Directive({ - selector: 'cdk-dom-projection-host' -}) -export class DomProjectionHost { - constructor(public ref: ElementRef) {} -} - - -/** @docs-private */ -@Injectable() -export class DomProjection { - /** - * Project an element into a host element. - * Replace a host element by another element. This also replaces the children of the element - * by the children of the host. - * - * It should be used like this: - * - * ``` - * @Component({ - * template: `
- * - *
other
- * - * - *
` - * }) - * class Cmpt { - * constructor(private _projector: DomProjection, private _el: ElementRef) {} - * ngOnInit() { this._projector.project(this._el, this._projector); } - * } - * ``` - * - * This component will move the content of the element it's applied to in the outer div. Because - * `project()` also move the children of the host inside the projected element, the element will - * contain the `
other
` HTML as well as its own children. - * - * Note: without `` the projection will project an empty element. - * - * @param ref ElementRef to be projected. - * @param host Projection host into which to project the `ElementRef`. - */ - project(ref: ElementRef, host: DomProjectionHost): void { - const projectedEl = ref.nativeElement; - const hostEl = host.ref.nativeElement; - const childNodes = projectedEl.childNodes; - let child = childNodes[0]; - - // We hoist all of the projected element's children out into the projected elements position - // because we *only* want to move the projected element and not its children. - _replaceWith(projectedEl, child); - let l = childNodes.length; - while (l--) { - child.parentNode.insertBefore(childNodes[0], child.nextSibling); - child = child.nextSibling; // nextSibling is now the childNodes[0]. - } - - // Insert all host children under the projectedEl, then replace host by component. - l = hostEl.childNodes.length; - while (l--) { - projectedEl.appendChild(hostEl.childNodes[0]); - } - _replaceWith(hostEl, projectedEl); - - // At this point the host is replaced by the component. Nothing else to be done. - } -} - - -/** @docs-private */ -@NgModule({ - exports: [DomProjectionHost], - declarations: [DomProjectionHost], - providers: [DomProjection], -}) -export class ProjectionModule { - /** @deprecated */ - static forRoot(): ModuleWithProviders { - return { - ngModule: ProjectionModule, - }; - } -} diff --git a/src/lib/module.ts b/src/lib/module.ts index 970cdd5785ea..da1eea31c87c 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -7,7 +7,6 @@ import { PortalModule, OverlayModule, A11yModule, - ProjectionModule, CompatibilityModule, } from './core/index'; @@ -68,7 +67,6 @@ const MATERIAL_MODULES = [ StyleModule, A11yModule, PlatformModule, - ProjectionModule, CompatibilityModule, ObserveContentModule ]; @@ -91,7 +89,6 @@ const MATERIAL_MODULES = [ MdTabsModule.forRoot(), MdToolbarModule.forRoot(), PortalModule.forRoot(), - ProjectionModule.forRoot(), RtlModule.forRoot(), ObserveContentModule.forRoot(),