From 59b45f8d35a0baf324702054ebe940f92cf811b7 Mon Sep 17 00:00:00 2001 From: Hristo Deshev Date: Mon, 16 May 2016 17:30:51 +0300 Subject: [PATCH] Extract single style property resolution to an exported API. Used by CSS selectors, and now the Angular `setElementStyle` renderer API. --- ui/styling/css-selector.ts | 38 +++++++++++----------------------- ui/styling/style-property.d.ts | 5 ++++- ui/styling/style-property.ts | 26 ++++++++++++++++++++++- 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/ui/styling/css-selector.ts b/ui/styling/css-selector.ts index 15f6b2121..6eb8d9679 100644 --- a/ui/styling/css-selector.ts +++ b/ui/styling/css-selector.ts @@ -2,7 +2,7 @@ import observable = require("ui/core/dependency-observable"); import cssParser = require("css"); import * as trace from "trace"; -import * as styleProperty from "ui/styling/style-property"; +import {StyleProperty, ResolvedStylePropertyHandler, withStyleProperty} from "ui/styling/style-property"; import * as types from "utils/types"; import * as utils from "utils/utils"; import keyframeAnimation = require("ui/animation/keyframe-animation"); @@ -69,22 +69,24 @@ export class CssSelector { let modifier = valueSourceModifier || this.valueSourceModifier; this.eachSetter((property, value) => { if (types.isString(property)) { + const propertyName = property; let attrHandled = false; - let specialSetter = getSpecialPropertySetter(property); + let specialSetter = getSpecialPropertySetter(propertyName); if (!attrHandled && specialSetter) { specialSetter(view, value); attrHandled = true; } - if (!attrHandled && property in view) { - view[property] = utils.convertString(value); + if (!attrHandled && propertyName in view) { + view[propertyName] = utils.convertString(value); } } else { + const resolvedProperty = property; try { - view.style._setValue(property, value, modifier); + view.style._setValue(resolvedProperty, value, modifier); } catch (ex) { - trace.write("Error setting property: " + property.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error); + trace.write("Error setting property: " + resolvedProperty.name + " view: " + view + " value: " + value + " " + ex, trace.categories.Style, trace.messageType.error); } } }); @@ -102,29 +104,12 @@ export class CssSelector { } } - public eachSetter(callback: (property, resolvedValue: any) => void) { + public eachSetter(callback: ResolvedStylePropertyHandler) { for (let i = 0; i < this._declarations.length; i++) { let declaration = this._declarations[i]; let name = declaration.property; let resolvedValue = declaration.value; - - let property = styleProperty.getPropertyByCssName(name); - - if (property) { - // The property.valueConverter is now used to convert the value later on in DependencyObservable._setValueInternal. - callback(property, resolvedValue); - } - else { - let pairs = styleProperty.getShorthandPairs(name, resolvedValue); - if (pairs) { - for (let j = 0; j < pairs.length; j++) { - let pair = pairs[j]; - callback(pair.property, pair.value); - } - } else { - callback(declaration.property, declaration.value); - } - } + withStyleProperty(name, resolvedValue, callback); } } @@ -483,7 +468,8 @@ class InlineStyleSelector extends CssSelector { public apply(view: view.View) { this.eachSetter((property, value) => { - view.style._setValue(property, value, observable.ValueSource.Local); + const resolvedProperty = property; + view.style._setValue(resolvedProperty, value, observable.ValueSource.Local); }); } diff --git a/ui/styling/style-property.d.ts b/ui/styling/style-property.d.ts index 0169f9173..31d6ce0ee 100644 --- a/ui/styling/style-property.d.ts +++ b/ui/styling/style-property.d.ts @@ -2,6 +2,9 @@ import definition = require("ui/styling"); import observable = require("ui/core/dependency-observable"); + export type StyleProperty = Property; + export type ResolvedStylePropertyHandler = (property: Property | string, value: any) => void; + export function withStyleProperty(name: string, value: any, resolvedCallback: ResolvedStylePropertyHandler): void; export function getShorthandPairs(name: string, value: any): Array>; export function registerShorthandCallback(name: string, callback: (value: any) => Array>): void; @@ -25,4 +28,4 @@ property: K; value: V; } -} \ No newline at end of file +} diff --git a/ui/styling/style-property.ts b/ui/styling/style-property.ts index beb53d88f..14342e75b 100644 --- a/ui/styling/style-property.ts +++ b/ui/styling/style-property.ts @@ -20,6 +20,30 @@ function registerProperty(property: Property) { } } +export type StyleProperty = definition.Property; +export type ResolvedStylePropertyHandler = (property: definition.Property | string, value: any) => void; +export function withStyleProperty(name: string, value: any, resolvedCallback: ResolvedStylePropertyHandler): void { + let property = getPropertyByCssName(name); + + if (property) { + // The property.valueConverter is now used to convert the value later on in DependencyObservable._setValueInternal. + resolvedCallback(property, value); + } + else { + let pairs = getShorthandPairs(name, value); + if (pairs) { + for (let j = 0; j < pairs.length; j++) { + let pair = pairs[j]; + resolvedCallback(pair.property, pair.value); + } + } else { + //Fall back to the string property name as a last resort and let + //the callback handle it further. + resolvedCallback(name, value); + } + } +} + export function getShorthandPairs(name: string, value: any): Array> { var callback = callbackByShorthandName.get(name); if (callback) { @@ -106,4 +130,4 @@ export class Property extends observable.Property implements definition.Property entry.valueSource = observable.ValueSource.Default; return this.metadata.defaultValue; } -} \ No newline at end of file +}