feat(renderer): add a `setElementStyles` method
This commit is contained in:
parent
982fad0c45
commit
1ac38bd69a
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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[]);
|
||||
|
|
|
@ -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');
|
||||
};
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue