feat(renderer): add a setElementStyles method

This commit is contained in:
Matias Niemelä
2016-04-29 15:18:53 -07:00
parent 982fad0c45
commit 1ac38bd69a
7 changed files with 37 additions and 1 deletions
@@ -20,6 +20,8 @@ import {
isString
} from '../../src/facade/lang';
import {StringMapWrapper} from '../../src/facade/collection';
import {BaseException} from '../../src/facade/exceptions';
import {DomSharedStylesHost} from './shared_styles_host';
import {EventManager} from './events/event_manager';
@@ -219,6 +221,11 @@ export class DomRenderer implements Renderer {
}
}
setElementStyles(renderElement: any, styles: {[key: string]: string}) {
StringMapWrapper.forEach(styles,
(value, prop) => this.setElementStyle(renderElement, prop, value));
}
setElementStyle(renderElement: any, styleName: string, styleValue: string): void {
if (isPresent(styleValue)) {
getDOM().setStyle(renderElement, styleName, stringify(styleValue));
@@ -59,6 +59,9 @@ export class MessageBasedRenderer {
broker.registerMethod("setElementStyle",
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
FunctionWrapper.bind(this._setElementStyle, this));
broker.registerMethod("setElementStyles",
[RenderStoreObject, RenderStoreObject, PRIMITIVE],
FunctionWrapper.bind(this._setElementStyles, this));
broker.registerMethod("invokeElementMethod",
[RenderStoreObject, RenderStoreObject, PRIMITIVE, PRIMITIVE],
FunctionWrapper.bind(this._invokeElementMethod, this));
@@ -144,6 +147,11 @@ export class MessageBasedRenderer {
renderer.setElementStyle(renderElement, styleName, styleValue);
}
private _setElementStyles(renderer: Renderer, renderElement: any,
styles: {[key: string]: string}) {
renderer.setElementStyles(renderElement, styles);
}
private _invokeElementMethod(renderer: Renderer, renderElement: any, methodName: string,
args: any[]) {
renderer.invokeElementMethod(renderElement, methodName, args);
@@ -190,6 +190,11 @@ export class WebWorkerRenderer implements Renderer, RenderStoreObject {
]);
}
setElementStyles(renderElement: any, styles: {[key: string]: string}) {
this._runOnService('setElementStyles',
[new FnArg(renderElement, RenderStoreObject), new FnArg(styles, null)]);
}
setElementStyle(renderElement: any, styleName: string, styleValue: string) {
this._runOnService('setElementStyle', [
new FnArg(renderElement, RenderStoreObject),
@@ -134,7 +134,7 @@ export function main() {
});
}));
it('should update any element property/attributes/class/style independent of the compilation on the root element and other elements',
it('should update any element property/attributes/class/style(s) independent of the compilation on the root element and other elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp2, new ViewMetadata(
{template: '<input [title]="y" style="position:absolute">'}))
@@ -156,6 +156,15 @@ export function main() {
renderer.setElementStyle(workerEl, 'width', null);
expect(getDOM().getStyle(el, 'width')).toEqual('');
renderer.setElementStyles(workerEl, {'height': '999px', 'opacity': '0.5'})
expect(getDOM().getStyle(el, 'height'))
.toEqual('999px');
expect(getDOM().getStyle(el, 'opacity')).toEqual('0.5');
renderer.setElementStyles(workerEl, {'height': '999px', 'opacity': null});
expect(getDOM().getStyle(el, 'height'))
.toEqual('999px');
expect(getDOM().getStyle(el, 'opacity')).toEqual('');
renderer.setElementAttribute(workerEl, 'someattr', 'someValue');
expect(getDOM().getAttribute(el, 'someattr')).toEqual('someValue');
};