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

View File

@ -124,6 +124,10 @@ export class DebugDomRenderer implements Renderer {
this._delegate.setElementClass(renderElement, className, isAdd);
}
setElementStyles(renderElement: any, styles: {[key: string]: string}) {
this._delegate.setElementStyles(renderElement, styles);
}
setElementStyle(renderElement: any, styleName: string, styleValue: string) {
this._delegate.setElementStyle(renderElement, styleName, styleValue);
}

View File

@ -52,6 +52,8 @@ export abstract class Renderer {
abstract setElementClass(renderElement: any, className: string, isAdd: boolean);
abstract setElementStyles(renderElement: any, styles: {[key: string]: string});
abstract setElementStyle(renderElement: any, styleName: string, styleValue: string);
abstract invokeElementMethod(renderElement: any, methodName: string, args: any[]);

View File

@ -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));

View File

@ -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);

View File

@ -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),

View File

@ -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');
};

View File

@ -433,6 +433,7 @@ const CORE = [
'Renderer.setElementClass(renderElement:any, className:string, isAdd:boolean):any',
'Renderer.setElementProperty(renderElement:any, propertyName:string, propertyValue:any):void',
'Renderer.setElementStyle(renderElement:any, styleName:string, styleValue:string):any',
'Renderer.setElementStyles(renderElement:any, styles:{[key:string]:string}):any',
'Renderer.setText(renderNode:any, text:string):any',
'ResolvedReflectiveBinding',
'ResolvedReflectiveFactory',