From 1ac38bd69a9df4d7fbe6de1ee65657ebe89a9979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Fri, 29 Apr 2016 15:18:53 -0700 Subject: [PATCH] feat(renderer): add a `setElementStyles` method --- modules/@angular/core/src/debug/debug_renderer.ts | 4 ++++ modules/@angular/core/src/render/api.ts | 2 ++ .../@angular/platform-browser/src/dom/dom_renderer.ts | 7 +++++++ .../platform-browser/src/web_workers/ui/renderer.ts | 8 ++++++++ .../src/web_workers/worker/renderer.ts | 5 +++++ .../web_workers/worker/renderer_integration_spec.ts | 11 ++++++++++- tools/public_api_guard/public_api_spec.ts | 1 + 7 files changed, 37 insertions(+), 1 deletion(-) diff --git a/modules/@angular/core/src/debug/debug_renderer.ts b/modules/@angular/core/src/debug/debug_renderer.ts index ff2115aa81..66f72c0e3d 100644 --- a/modules/@angular/core/src/debug/debug_renderer.ts +++ b/modules/@angular/core/src/debug/debug_renderer.ts @@ -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); } diff --git a/modules/@angular/core/src/render/api.ts b/modules/@angular/core/src/render/api.ts index d2fb99e979..6ac86ceac9 100644 --- a/modules/@angular/core/src/render/api.ts +++ b/modules/@angular/core/src/render/api.ts @@ -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[]); diff --git a/modules/@angular/platform-browser/src/dom/dom_renderer.ts b/modules/@angular/platform-browser/src/dom/dom_renderer.ts index 550339cc9b..ef5e173e8b 100644 --- a/modules/@angular/platform-browser/src/dom/dom_renderer.ts +++ b/modules/@angular/platform-browser/src/dom/dom_renderer.ts @@ -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)); diff --git a/modules/@angular/platform-browser/src/web_workers/ui/renderer.ts b/modules/@angular/platform-browser/src/web_workers/ui/renderer.ts index f7269225dd..0a1700ec46 100644 --- a/modules/@angular/platform-browser/src/web_workers/ui/renderer.ts +++ b/modules/@angular/platform-browser/src/web_workers/ui/renderer.ts @@ -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); diff --git a/modules/@angular/platform-browser/src/web_workers/worker/renderer.ts b/modules/@angular/platform-browser/src/web_workers/worker/renderer.ts index dfb1f1091b..ce1b0032f3 100644 --- a/modules/@angular/platform-browser/src/web_workers/worker/renderer.ts +++ b/modules/@angular/platform-browser/src/web_workers/worker/renderer.ts @@ -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), diff --git a/modules/@angular/platform-browser/test/web_workers/worker/renderer_integration_spec.ts b/modules/@angular/platform-browser/test/web_workers/worker/renderer_integration_spec.ts index 63e29188ee..d5bba72386 100644 --- a/modules/@angular/platform-browser/test/web_workers/worker/renderer_integration_spec.ts +++ b/modules/@angular/platform-browser/test/web_workers/worker/renderer_integration_spec.ts @@ -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: ''})) @@ -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'); }; diff --git a/tools/public_api_guard/public_api_spec.ts b/tools/public_api_guard/public_api_spec.ts index de7900662c..5a6a722aa3 100644 --- a/tools/public_api_guard/public_api_spec.ts +++ b/tools/public_api_guard/public_api_spec.ts @@ -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',