cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(CSSClass): add support for string and array expresions

Browse Source 
Closes #2025
This commit is contained in:
Pawel Kozlowski
2015-06-21 11:54:21 +02:00
committed by Victor Berchet
parent 2c11205b96
commit 8c993dca03
2 changed files with 250 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
modules/angular2/src/directives/class.ts
View File

@ -1,40 +1,71 @@
import {Directive, onCheck} from 'angular2/annotations';
import {ElementRef} from 'angular2/core';
import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
import {isPresent} from 'angular2/src/facade/lang';
import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
import {Renderer} from 'angular2/src/render/api';
import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
import {IterableChanges} from 'angular2/src/change_detection/pipes/iterable_changes';
import {isPresent, isString, StringWrapper} from 'angular2/src/facade/lang';
import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
@Directive({selector: '[class]', lifecycle: [onCheck], properties: ['rawClass: class']})
export class CSSClass {
_pipe;
_pipe: Pipe;
_rawClass;
constructor(private _pipeRegistry: PipeRegistry, private _ngEl: ElementRef,
private _renderer: Renderer) {}
set rawClass(v) {
this._cleanupClasses(this._rawClass);
if (isString(v)) {
v = v.split(' ');
}
this._rawClass = v;
this._pipe = this._pipeRegistry.get('keyValDiff', this._rawClass);
this._pipe = this._pipeRegistry.get(isListLikeIterable(v) ? 'iterableDiff' : 'keyValDiff', v);
}
_toggleClass(className, enabled): void {
this._renderer.setElementClass(this._ngEl, className, enabled);
}
onCheck() {
onCheck(): void {
var diff = this._pipe.transform(this._rawClass);
if (isPresent(diff)) this._applyChanges(diff.wrapped);
}
private _applyChanges(diff) {
if (isPresent(diff)) {
diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachRemovedItem((record) => {
if (record.previousValue) {
this._toggleClass(record.key, false);
}
});
if (isPresent(diff) && isPresent(diff.wrapped)) {
if (diff.wrapped instanceof IterableChanges) {
this._applyArrayChanges(diff.wrapped);
} else {
this._applyObjectChanges(diff.wrapped);
}
}
}
private _cleanupClasses(rawClassVal): void {
if (isPresent(rawClassVal)) {
if (isListLikeIterable(rawClassVal)) {
ListWrapper.forEach(rawClassVal, (className) => { this._toggleClass(className, false); });
} else {
StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
if (expVal) this._toggleClass(className, false);
});
}
}
}
private _applyObjectChanges(diff: KeyValueChanges): void {
diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachRemovedItem((record) => {
if (record.previousValue) {
this._toggleClass(record.key, false);
}
});
}
private _applyArrayChanges(diff: IterableChanges): void {
diff.forEachAddedItem((record) => { this._toggleClass(record.item, true); });
diff.forEachRemovedItem((record) => { this._toggleClass(record.item, false); });
}
private _toggleClass(className: string, enabled): void {
this._renderer.setElementClass(this._ngEl, className, enabled);
}
}