angular2
Version:
Angular 2 - a web framework for modern web apps
226 lines • 9.3 kB
JavaScript
'use strict';var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var core_1 = require('angular2/core');
var lang_1 = require('angular2/src/facade/lang');
var collection_1 = require('angular2/src/facade/collection');
var _WHEN_DEFAULT = lang_1.CONST_EXPR(new Object());
var SwitchView = (function () {
function SwitchView(_viewContainerRef, _templateRef) {
this._viewContainerRef = _viewContainerRef;
this._templateRef = _templateRef;
}
SwitchView.prototype.create = function () { this._viewContainerRef.createEmbeddedView(this._templateRef); };
SwitchView.prototype.destroy = function () { this._viewContainerRef.clear(); };
return SwitchView;
})();
/**
* Adds or removes DOM sub-trees when their match expressions match the switch expression.
*
* Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
* preserved at the location as specified in the template.
*
* `NgSwitch` simply inserts nested elements based on which match expression matches the value
* obtained from the evaluated switch expression. In other words, you define a container element
* (where you place the directive with a switch expression on the
* **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and
* place a `[ng-switch-when]` attribute per element.
*
* The `ng-switch-when` property is used to inform `NgSwitch` which element to display when the
* expression is evaluated. If a matching expression is not found via a `ng-switch-when` property
* then an element with the `ng-switch-default` attribute is displayed.
*
* ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
*
* ```typescript
* @Component({selector: 'app'})
* @View({
* template: `
* <p>Value = {{value}}</p>
* <button (click)="inc()">Increment</button>
*
* <div [ng-switch]="value">
* <p *ng-switch-when="'init'">increment to start</p>
* <p *ng-switch-when="0">0, increment again</p>
* <p *ng-switch-when="1">1, increment again</p>
* <p *ng-switch-when="2">2, stop incrementing</p>
* <p *ng-switch-default>> 2, STOP!</p>
* </div>
*
* <!-- alternate syntax -->
*
* <p [ng-switch]="value">
* <template ng-switch-when="init">increment to start</template>
* <template [ng-switch-when]="0">0, increment again</template>
* <template [ng-switch-when]="1">1, increment again</template>
* <template [ng-switch-when]="2">2, stop incrementing</template>
* <template ng-switch-default>> 2, STOP!</template>
* </p>
* `,
* directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
* })
* export class App {
* value = 'init';
*
* inc() {
* this.value = this.value === 'init' ? 0 : this.value + 1;
* }
* }
*
* bootstrap(App).catch(err => console.error(err));
* ```
*/
var NgSwitch = (function () {
function NgSwitch() {
this._useDefault = false;
this._valueViews = new collection_1.Map();
this._activeViews = [];
}
Object.defineProperty(NgSwitch.prototype, "ngSwitch", {
set: function (value) {
// Empty the currently active ViewContainers
this._emptyAllActiveViews();
// Add the ViewContainers matching the value (with a fallback to default)
this._useDefault = false;
var views = this._valueViews.get(value);
if (lang_1.isBlank(views)) {
this._useDefault = true;
views = lang_1.normalizeBlank(this._valueViews.get(_WHEN_DEFAULT));
}
this._activateViews(views);
this._switchValue = value;
},
enumerable: true,
configurable: true
});
/** @internal */
NgSwitch.prototype._onWhenValueChanged = function (oldWhen, newWhen, view) {
this._deregisterView(oldWhen, view);
this._registerView(newWhen, view);
if (oldWhen === this._switchValue) {
view.destroy();
collection_1.ListWrapper.remove(this._activeViews, view);
}
else if (newWhen === this._switchValue) {
if (this._useDefault) {
this._useDefault = false;
this._emptyAllActiveViews();
}
view.create();
this._activeViews.push(view);
}
// Switch to default when there is no more active ViewContainers
if (this._activeViews.length === 0 && !this._useDefault) {
this._useDefault = true;
this._activateViews(this._valueViews.get(_WHEN_DEFAULT));
}
};
/** @internal */
NgSwitch.prototype._emptyAllActiveViews = function () {
var activeContainers = this._activeViews;
for (var i = 0; i < activeContainers.length; i++) {
activeContainers[i].destroy();
}
this._activeViews = [];
};
/** @internal */
NgSwitch.prototype._activateViews = function (views) {
// TODO(vicb): assert(this._activeViews.length === 0);
if (lang_1.isPresent(views)) {
for (var i = 0; i < views.length; i++) {
views[i].create();
}
this._activeViews = views;
}
};
/** @internal */
NgSwitch.prototype._registerView = function (value, view) {
var views = this._valueViews.get(value);
if (lang_1.isBlank(views)) {
views = [];
this._valueViews.set(value, views);
}
views.push(view);
};
/** @internal */
NgSwitch.prototype._deregisterView = function (value, view) {
// `_WHEN_DEFAULT` is used a marker for non-registered whens
if (value === _WHEN_DEFAULT)
return;
var views = this._valueViews.get(value);
if (views.length == 1) {
this._valueViews.delete(value);
}
else {
collection_1.ListWrapper.remove(views, view);
}
};
NgSwitch = __decorate([
core_1.Directive({ selector: '[ng-switch]', inputs: ['ngSwitch'] }),
__metadata('design:paramtypes', [])
], NgSwitch);
return NgSwitch;
})();
exports.NgSwitch = NgSwitch;
/**
* Insert the sub-tree when the `ng-switch-when` expression evaluates to the same value as the
* enclosing switch expression.
*
* If multiple match expression match the switch expression value, all of them are displayed.
*
* See {@link NgSwitch} for more details and example.
*/
var NgSwitchWhen = (function () {
function NgSwitchWhen(viewContainer, templateRef, ngSwitch) {
// `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
/** @internal */
this._value = _WHEN_DEFAULT;
this._switch = ngSwitch;
this._view = new SwitchView(viewContainer, templateRef);
}
Object.defineProperty(NgSwitchWhen.prototype, "ngSwitchWhen", {
set: function (value) {
this._switch._onWhenValueChanged(this._value, value, this._view);
this._value = value;
},
enumerable: true,
configurable: true
});
NgSwitchWhen = __decorate([
core_1.Directive({ selector: '[ng-switch-when]', inputs: ['ngSwitchWhen'] }),
__param(2, core_1.Host()),
__metadata('design:paramtypes', [core_1.ViewContainerRef, core_1.TemplateRef, NgSwitch])
], NgSwitchWhen);
return NgSwitchWhen;
})();
exports.NgSwitchWhen = NgSwitchWhen;
/**
* Default case statements are displayed when no match expression matches the switch expression
* value.
*
* See {@link NgSwitch} for more details and example.
*/
var NgSwitchDefault = (function () {
function NgSwitchDefault(viewContainer, templateRef, sswitch) {
sswitch._registerView(_WHEN_DEFAULT, new SwitchView(viewContainer, templateRef));
}
NgSwitchDefault = __decorate([
core_1.Directive({ selector: '[ng-switch-default]' }),
__param(2, core_1.Host()),
__metadata('design:paramtypes', [core_1.ViewContainerRef, core_1.TemplateRef, NgSwitch])
], NgSwitchDefault);
return NgSwitchDefault;
})();
exports.NgSwitchDefault = NgSwitchDefault;
//# sourceMappingURL=ng_switch.js.map