feat(renderer): add a setElementStyles method

angular · May 25, 2016 · 1ac38bd · 1ac38bd
1 parent 982fad0
commit 1ac38bd
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');
                };

diff --git 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',