feat(directive): add ng-switch directive
This commit is contained in:
Victor Berchet
parent
769e9741d3
commit
683bb6e5a2
|
|
@ -0,0 +1,190 @@
|
|||
import {Decorator, Template} from 'core/annotations/annotations';
|
||||
import {ViewPort} from 'core/compiler/viewport';
|
||||
import {NgElement} from 'core/dom/element';
|
||||
import {DOM} from 'facade/dom';
|
||||
import {isPresent, isBlank} from 'facade/lang';
|
||||
import {ListWrapper, List, MapWrapper, Map} from 'facade/collection';
|
||||
import {Parent} from 'core/annotations/visibility';
|
||||
|
||||
/**
|
||||
* The `ngSwitch` directive is used to conditionally swap DOM structure on your template based on a
|
||||
* scope expression.
|
||||
* Elements within `ngSwitch` but without `ngSwitchWhen` or `ngSwitchDefault` directives will be
|
||||
* preserved at the location as specified in the template.
|
||||
*
|
||||
* `ngSwitch` simply chooses nested elements and makes them visible based on which element matches
|
||||
* the value obtained from the evaluated expression. In other words, you define a container element
|
||||
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
|
||||
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
|
||||
* element.
|
||||
* The when attribute is used to inform ngSwitch which element to display when the expression is
|
||||
* evaluated. If a matching expression is not found via a when attribute then an element with the
|
||||
* default attribute is displayed.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* <ANY [ng-switch]="expression">
|
||||
* <template [ng-switch-when]="whenExpression1">...</template>
|
||||
* <template [ng-switch-when]="whenExpression1">...</template>
|
||||
* <template [ng-switch-default]>...</template>
|
||||
* </ANY>
|
||||
* ```
|
||||
*/
|
||||
@Decorator({
|
||||
selector: '[ng-switch]',
|
||||
bind: {
|
||||
'ng-switch': 'value'
|
||||
}
|
||||
})
|
||||
export class NgSwitch {
|
||||
_switchValue: any;
|
||||
_useDefault: boolean;
|
||||
_valueViewPorts: Map;
|
||||
_activeViewPorts: List;
|
||||
|
||||
constructor() {
|
||||
this._valueViewPorts = MapWrapper.create();
|
||||
this._activeViewPorts = ListWrapper.create();
|
||||
this._useDefault = false;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
// Remove the currently active viewports
|
||||
this._removeAllActiveViewPorts();
|
||||
|
||||
// Add the viewports matching the value (with a fallback to default)
|
||||
this._useDefault = false;
|
||||
var viewPorts = MapWrapper.get(this._valueViewPorts, value);
|
||||
if (isBlank(viewPorts)) {
|
||||
this._useDefault = true;
|
||||
viewPorts = MapWrapper.get(this._valueViewPorts, _whenDefault);
|
||||
}
|
||||
this._activateViewPorts(viewPorts);
|
||||
|
||||
this._switchValue = value;
|
||||
}
|
||||
|
||||
_onWhenValueChanged(oldWhen, newWhen, viewPort: ViewPort) {
|
||||
this._deregisterViewPort(oldWhen, viewPort);
|
||||
this._registerViewPort(newWhen, viewPort);
|
||||
|
||||
if (oldWhen === this._switchValue) {
|
||||
viewPort.remove();
|
||||
ListWrapper.remove(this._activeViewPorts, viewPort);
|
||||
} else if (newWhen === this._switchValue) {
|
||||
if (this._useDefault) {
|
||||
this._useDefault = false;
|
||||
this._removeAllActiveViewPorts();
|
||||
}
|
||||
viewPort.create();
|
||||
ListWrapper.push(this._activeViewPorts, viewPort);
|
||||
}
|
||||
|
||||
// Switch to default when there is no more active viewports
|
||||
if (this._activeViewPorts.length === 0 && !this._useDefault) {
|
||||
this._useDefault = true;
|
||||
this._activateViewPorts(MapWrapper.get(this._valueViewPorts, _whenDefault));
|
||||
}
|
||||
}
|
||||
|
||||
_removeAllActiveViewPorts() {
|
||||
var activeViewPorts = this._activeViewPorts;
|
||||
for (var i = 0; i < activeViewPorts.length; i++) {
|
||||
activeViewPorts[i].remove();
|
||||
}
|
||||
this._activeViewPorts = ListWrapper.create();
|
||||
}
|
||||
|
||||
_activateViewPorts(viewPorts) {
|
||||
// TODO(vicb): assert(this._activeViewPorts.length === 0);
|
||||
if (isPresent(viewPorts)) {
|
||||
for (var i = 0; i < viewPorts.length; i++) {
|
||||
viewPorts[i].create();
|
||||
}
|
||||
this._activeViewPorts = viewPorts;
|
||||
}
|
||||
}
|
||||
|
||||
_registerViewPort(value, viewPort: ViewPort) {
|
||||
var viewPorts = MapWrapper.get(this._valueViewPorts, value);
|
||||
if (isBlank(viewPorts)) {
|
||||
viewPorts = ListWrapper.create();
|
||||
MapWrapper.set(this._valueViewPorts, value, viewPorts);
|
||||
}
|
||||
ListWrapper.push(viewPorts, viewPort);
|
||||
}
|
||||
|
||||
_deregisterViewPort(value, viewPort: ViewPort) {
|
||||
// `_whenDefault` is used a marker for non-registered whens
|
||||
if (value == _whenDefault) return;
|
||||
var viewPorts = MapWrapper.get(this._valueViewPorts, value);
|
||||
if (viewPorts.length == 1) {
|
||||
MapWrapper.delete(this._valueViewPorts, value);
|
||||
} else {
|
||||
ListWrapper.remove(viewPorts, viewPort);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines a case statement as an expression.
|
||||
*
|
||||
* If multiple `ngSwitchWhen` match the `ngSwitch` value, all of them are displayed.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* // match against a context variable
|
||||
* <template [ng-switch-when]="contextVariable">...</template>
|
||||
*
|
||||
* // match against a constant string
|
||||
* <template [ng-switch-when]="'stringValue'">...</template>
|
||||
* ```
|
||||
*/
|
||||
@Template({
|
||||
selector: '[ng-switch-when]',
|
||||
bind: {
|
||||
'ng-switch-when' : 'when'
|
||||
}
|
||||
})
|
||||
export class NgSwitchWhen {
|
||||
_value: any;
|
||||
_ngSwitch: NgSwitch;
|
||||
_viewPort: ViewPort;
|
||||
|
||||
constructor(el: NgElement, viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
|
||||
// `_whenDefault` is used as a marker for a not yet initialized value
|
||||
this._value = _whenDefault;
|
||||
this._ngSwitch = ngSwitch;
|
||||
this._viewPort = viewPort;
|
||||
}
|
||||
|
||||
set when(value) {
|
||||
this._ngSwitch._onWhenValueChanged(this._value, value, this._viewPort);
|
||||
this._value = value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Defines a default case statement.
|
||||
*
|
||||
* Default case statements are displayed when no `NgSwitchWhen` match the `ngSwitch` value.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* <template [ng-switch-default]>...</template>
|
||||
* ```
|
||||
*/
|
||||
@Template({
|
||||
selector: '[ng-switch-default]'
|
||||
})
|
||||
export class NgSwitchDefault {
|
||||
constructor(viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
|
||||
ngSwitch._registerViewPort(_whenDefault, viewPort);
|
||||
}
|
||||
}
|
||||
|
||||
var _whenDefault = new Object();
|
||||
|
|
@ -3,7 +3,7 @@ import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'test_li
|
|||
import {DOM} from 'facade/dom';
|
||||
|
||||
import {Injector} from 'di/di';
|
||||
import {Lexer, Parser, ChangeDetector} from 'change_detection/change_detection';
|
||||
import {Lexer, Parser} from 'change_detection/change_detection';
|
||||
|
||||
import {Compiler, CompilerCache} from 'core/compiler/compiler';
|
||||
import {OnChange} from 'core/compiler/interfaces';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
import {describe, xit, it, expect, beforeEach, ddescribe, iit, el} from 'test_lib/test_lib';
|
||||
import {DOM} from 'facade/dom';
|
||||
import {Injector} from 'di/di';
|
||||
import {Lexer, Parser} from 'change_detection/change_detection';
|
||||
import {Compiler, CompilerCache} from 'core/compiler/compiler';
|
||||
import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader';
|
||||
import {Component} from 'core/annotations/annotations';
|
||||
import {TemplateConfig} from 'core/annotations/template_config';
|
||||
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'directives/ng_switch';
|
||||
|
||||
export function main() {
|
||||
describe('ng-switch', () => {
|
||||
var view, cd, compiler, component;
|
||||
beforeEach(() => {
|
||||
compiler = new Compiler(null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache());
|
||||
});
|
||||
|
||||
function createView(pv) {
|
||||
component = new TestComponent();
|
||||
view = pv.instantiate(null);
|
||||
view.hydrate(new Injector([]), null, component);
|
||||
cd = view.changeDetector;
|
||||
}
|
||||
|
||||
function compileWithTemplate(template) {
|
||||
return compiler.compile(TestComponent, el(template));
|
||||
}
|
||||
|
||||
describe('switch value changes', () => {
|
||||
it('should switch amongst when values', (done) => {
|
||||
var template = '<div>' +
|
||||
'<ul [ng-switch]="switchValue">' +
|
||||
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
|
||||
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when a');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when b');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should switch amongst when values with fallback to default', (done) => {
|
||||
var template = '<div>' +
|
||||
'<ul [ng-switch]="switchValue">' +
|
||||
'<li template="ng-switch-when \'a\'">when a</li>' +
|
||||
'<li template="ng-switch-default">when default</li>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when a');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should support multiple whens with the same value', (done) => {
|
||||
var template = '<div>' +
|
||||
'<ul [ng-switch]="switchValue">' +
|
||||
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
|
||||
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
|
||||
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
|
||||
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
|
||||
'<template [ng-switch-default]><li>when default1;</li></template>' +
|
||||
'<template [ng-switch-default]><li>when default2;</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default1;when default2;');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when a1;when a2;');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when b1;when b2;');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when values changes', () => {
|
||||
it('should switch amongst when values', (done) => {
|
||||
var template = '<div>' +
|
||||
'<ul [ng-switch]="switchValue">' +
|
||||
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
|
||||
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
|
||||
'<template [ng-switch-default]><li>when default;</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
|
||||
component.when1 = 'a';
|
||||
component.when2 = 'b';
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 2;');
|
||||
|
||||
component.switchValue = 'c';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default;');
|
||||
|
||||
component.when1 = 'c';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
|
||||
|
||||
component.when1 = 'd';
|
||||
cd.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default;');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'test-cmp',
|
||||
template: new TemplateConfig({
|
||||
inline: '', // each test swaps with a custom template.
|
||||
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
|
||||
})
|
||||
})
|
||||
class TestComponent {
|
||||
switchValue: any;
|
||||
when1: any;
|
||||
when2: any;
|
||||
|
||||
constructor() {
|
||||
this.switchValue = null;
|
||||
this.when1 = null;
|
||||
this.when2 = null;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue