iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): support disabling DocViewer animations via class

Browse Source
This commit is contained in:
George Kalpakas 2017-12-19 01:53:38 +02:00 committed by Alex Rickabaugh
parent 74e3115686
commit f8fe53aeb0
2 changed files with 137 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
View File

@ -13,7 +13,7 @@ import {
TestDocViewerComponent, TestModule, TestParentComponent TestDocViewerComponent, TestModule, TestParentComponent
} from 'testing/doc-viewer-utils'; } from 'testing/doc-viewer-utils';
import { MockLogger } from 'testing/logger.service'; import { MockLogger } from 'testing/logger.service';
import { DocViewerComponent } from './doc-viewer.component'; import { DocViewerComponent, NO_ANIMATIONS } from './doc-viewer.component';
describe('DocViewerComponent', () => { describe('DocViewerComponent', () => {
@ -656,6 +656,10 @@ describe('DocViewerComponent', () => {
beforeEach(() => DocViewerComponent.animationsEnabled = animationsEnabled); beforeEach(() => DocViewerComponent.animationsEnabled = animationsEnabled);
afterEach(() => DocViewerComponent.animationsEnabled = true); afterEach(() => DocViewerComponent.animationsEnabled = true);
[true, false].forEach(noAnimations => {
describe(`(.${NO_ANIMATIONS}: ${noAnimations})`, () => {
beforeEach(() => docViewerEl.classList[noAnimations ? 'add' : 'remove'](NO_ANIMATIONS));
it('should return an observable', done => { it('should return an observable', done => {
docViewer.swapViews().subscribe(done, done.fail); docViewer.swapViews().subscribe(done, done.fail);
}); });
@ -756,9 +760,9 @@ describe('DocViewerComponent', () => {
expect(docViewer.nextViewContainer.innerHTML).toBe(''); expect(docViewer.nextViewContainer.innerHTML).toBe('');
}); });
if (animationsEnabled) { if (animationsEnabled && !noAnimations) {
// Without animations, the views are swapped synchronously, // Only test this when there are animations. Without animations, the views are swapped
// so there is no need (or way) to abort. // synchronously, so there is no need (or way) to abort.
it('should abort swapping if the returned observable is unsubscribed from', async () => { it('should abort swapping if the returned observable is unsubscribed from', async () => {
docViewer.swapViews().subscribe().unsubscribe(); docViewer.swapViews().subscribe().unsubscribe();
await doSwapViews(); await doSwapViews();
@ -771,8 +775,24 @@ describe('DocViewerComponent', () => {
expect(docViewer.currViewContainer.innerHTML).toBe('Next view'); expect(docViewer.currViewContainer.innerHTML).toBe('Next view');
expect(docViewer.nextViewContainer.innerHTML).toBe(''); expect(docViewer.nextViewContainer.innerHTML).toBe('');
}); });
} else {
it('should swap views synchronously when animations are disabled', () => {
const cbSpy = jasmine.createSpy('cb');
docViewer.swapViews(cbSpy).subscribe();
expect(cbSpy).toHaveBeenCalledTimes(1);
expect(docViewerEl.contains(oldCurrViewContainer)).toBe(false);
expect(docViewerEl.contains(oldNextViewContainer)).toBe(true);
expect(docViewer.currViewContainer).toBe(oldNextViewContainer);
expect(docViewer.nextViewContainer).toBe(oldCurrViewContainer);
expect(docViewer.currViewContainer.innerHTML).toBe('Next view');
expect(docViewer.nextViewContainer.innerHTML).toBe('');
});
} }
}); });
}); });
}); });
});
});
}); });

8
aio/src/app/layout/doc-viewer/doc-viewer.component.ts
View File

@ -15,6 +15,9 @@ import { Logger } from 'app/shared/logger.service';
import { TocService } from 'app/shared/toc.service'; import { TocService } from 'app/shared/toc.service';
// Constants
export const NO_ANIMATIONS = 'no-animations';
// Initialization prevents flicker once pre-rendering is on // Initialization prevents flicker once pre-rendering is on
const initialDocViewerElement = document.querySelector('aio-doc-viewer'); const initialDocViewerElement = document.querySelector('aio-doc-viewer');
const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElement.innerHTML : ''; const initialDocViewerContent = initialDocViewerElement ? initialDocViewerElement.innerHTML : '';
@ -186,8 +189,11 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
}; };
const animateProp = const animateProp =
(elem: HTMLElement, prop: string, from: string, to: string, duration = 333) => { (elem: HTMLElement, prop: string, from: string, to: string, duration = 333) => {
const animationsDisabled = !DocViewerComponent.animationsEnabled
|| this.hostElement.classList.contains(NO_ANIMATIONS);
elem.style.transition = ''; elem.style.transition = '';
return !DocViewerComponent.animationsEnabled return animationsDisabled
? this.void$.do(() => elem.style[prop] = to) ? this.void$.do(() => elem.style[prop] = to)
: this.void$ : this.void$
// In order to ensure that the `from` value will be applied immediately (i.e. // In order to ensure that the `from` value will be applied immediately (i.e.