This is an automated email from the ASF dual-hosted git repository. greg-dove pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 339cdffbe68674d4df50ffe057758e30881f08ee Author: greg-dove <[email protected]> AuthorDate: Wed Apr 29 17:18:59 2026 +1200 cumulative WIP on RadialProgress --- .../projects/Style/src/main/resources/defaults.css | 3 + .../Style/src/main/resources/style-manifest.xml | 2 + .../org/apache/royale/style/RadialProgress.as | 229 +++++++++++++++++++ .../royale/org/apache/royale/style/StyleUIBase.as | 17 ++ .../royale/style/beads/AdaptiveTooltipBead.as | 3 - .../org/apache/royale/style/beads/TooltipBead.as | 5 +- .../IRadialProgressSkin.as} | 45 ++-- .../royale/style/skins/RadialProgressSkin.as | 242 +++++++++++++++++++++ .../royale/style/stylebeads/LeafStyleBase.as | 5 + .../stylebeads/background/BackgroundRepeat.as | 2 +- .../org/apache/royale/style/util/StyleManager.as | 41 ++++ 11 files changed, 555 insertions(+), 39 deletions(-) diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css index 467add0004..f2e39963f4 100644 --- a/frameworks/projects/Style/src/main/resources/defaults.css +++ b/frameworks/projects/Style/src/main/resources/defaults.css @@ -237,3 +237,6 @@ Toast { Tooltip { IStyleSkin: ClassReference("org.apache.royale.style.skins.TooltipSkin"); } +RadialProgress { + IStyleSkin: ClassReference("org.apache.royale.style.skins.RadialProgressSkin"); +} \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml b/frameworks/projects/Style/src/main/resources/style-manifest.xml index 8ba4def654..9bde116884 100644 --- a/frameworks/projects/Style/src/main/resources/style-manifest.xml +++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml @@ -66,6 +66,7 @@ <component id="Tooltip" class="org.apache.royale.style.Tooltip"/> <component id="Group" class="org.apache.royale.style.Group"/> <component id="DataContainer" class="org.apache.royale.style.DataContainer"/> + <component id="RadialProgress" class="org.apache.royale.style.RadialProgress"/> <component id="List" class="org.apache.royale.style.List"/> <component id="MultiSelectionList" class="org.apache.royale.style.MultiSelectionList"/> <component id="Tree" class="org.apache.royale.style.Tree"/> @@ -332,6 +333,7 @@ <component id="MenuTitleSkin" class="org.apache.royale.style.skins.MenuTitleSkin"/> <component id="MenuDetailsSkin" class="org.apache.royale.style.skins.MenuDetailsSkin"/> <component id="IMenuDetailsSkin" class="org.apache.royale.style.skins.IMenuDetailsSkin"/> + <component id="RadialProgressSkin" class="org.apache.royale.style.skins.RadialProgressSkin"/> <component id="StepsSkin" class="org.apache.royale.style.skins.StepsSkin"/> <component id="StepSkin" class="org.apache.royale.style.skins.StepSkin"/> <component id="IStepSkin" class="org.apache.royale.style.skins.IStepSkin"/> diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/RadialProgress.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/RadialProgress.as new file mode 100644 index 0000000000..fb6e8cb788 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/RadialProgress.as @@ -0,0 +1,229 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style +{ + import org.apache.royale.style.elements.Span; + import org.apache.royale.style.skins.IRadialProgressSkin; + import org.apache.royale.utils.number.pinValue; + import org.apache.royale.debugging.assert; + import org.apache.royale.style.elements.Div; + COMPILE::JS{ + import org.apache.royale.core.WrappedHTMLElement; + } + + + + public class RadialProgress extends StyleUIBase + { + public function RadialProgress() + { + super(); + //defaults + value = 0; + thickness = 20; + } + + override protected function requiresView():Boolean{ + return false; + } + override protected function requiresController():Boolean{ + return false; + } + + private var bg:Div; + private var span:Span; + private var fg:Div; + + COMPILE::JS + override protected function createElement():WrappedHTMLElement{ + var elem:WrappedHTMLElement = super.createElement(); + bg = new Div(); + addElement(bg); + span = new Span(); + addElement(span); + fg = new Div(); + addElement(fg); + element.setAttribute('role','progressbar'); + return elem; + } + + + + override protected function applySkin():void + { + var skin:IRadialProgressSkin = this.skin as IRadialProgressSkin + assert(skin is IRadialProgressSkin, "RadialProgress requires a skin that implements IRadialProgressSkin"); + skin.processBackgroundRadialStyles(bg); + skin.processForegroundRadialStyles(fg); + } + + private var _value:Number; // this will be set in the constructor + public function get value():Number{ + return _value; + } + public function set value(value:Number):void{ + if (isNaN(value)) value = 0; + else value = pinValue(value,0,100); + if (_value != value) { + _value = value; + setAttribute('aria-valuenow',value); + span.text = value.toFixed(0) + '%' + if (skin) { + (skin as IRadialProgressSkin).processValue(); + } + } + } + + private var _customSize:Number; + public function get customSize():Number{ + return _customSize + } + + public function set customSize(value:Number):void{ + if (value<=0) value = NaN; //NaN or 0 or less than zero is 'this property is not applicable' + if (_customSize != value) { + _customSize = value; + if (skin) { + (skin as IRadialProgressSkin).setSize(); + } + } + } + + override public function set size(value:String):void{ + if (size != value) { + super.size = value; + if (skin) { + (skin as IRadialProgressSkin).setSize(); + } + } + } + + private var _thickness:uint; + public function get thickness():uint{ + return _thickness + } + + public function set thickness(value:uint):void{ + value = pinValue(value,0,100); + if (_thickness != value) { + _thickness = value; + if (skin) { + (skin as IRadialProgressSkin).applyThickNess(); + } + } + } + + private var _flavor:String = 'default'; + public function get flavor():String + { + return _flavor; + } + + [Inspectable(category="General", enumeration="base,primary,secondary,accent,info,success,warning,error,neutral", defaultValue="default")] + /** + * Set the flavor of the Toast + * One of info, success, positive and negative. warning also appears to be an option + * To set the Toast to the default, specify an empty string + */ + public function set flavor(value:String):void + { + if (!value) value = 'default'; + if(value != _flavor){ + switch(value){ + case "default": + case 'base': + case 'primary': + case 'secondary': + case 'accent': + case 'info': + case 'success': + case 'warning': + case 'error': + case 'neutral': + break; + default: + throw new Error("Unknown flavor: " + value); + } + _flavor = value; + if (skin) { + (skin as IRadialProgressSkin).setColors() + } + } + } + + + private var _background:String = 'default'; + public function get background():String + { + return _background; + } + + [Inspectable(category="General", enumeration="base,primary,secondary,accent,info,success,warning,error,neutral", defaultValue="default")] + public function set background(value:String):void + { + if (!value) value = 'default'; + if(value != _background){ + switch(value){ + case "default": + case 'base': + case 'primary': + case 'secondary': + case 'accent': + case 'info': + case 'success': + case 'warning': + case 'error': + case 'neutral': + break; + default: + throw new Error("Unknown background: " + value); + } + _background = value; + if (skin) { + (skin as IRadialProgressSkin).setColors() + } + } + } + + + /* + The following overrides are presumptive, but I assume something like this makes sense + Probably if width and height were both set in mxml, the last one set 'wins', + Another option might be to do some scaling transform from these setters... not sure what's best. + */ + override public function setWidth(value:Number, noEvent:Boolean = false):void{ + setWidthAndHeight(value,value); + } + + override public function setHeight(value:Number, noEvent:Boolean = false):void{ + setWidthAndHeight(value,value); + } + + override public function setWidthAndHeight(width:Number,height:Number, noEvent:Boolean = false):void{ + //if they arrive as different values, then this is arbitrary, but for now do this: + var value:Number = Math.min(width,height); + if (!isNaN(value) && value > 0) { + super.setWidthAndHeight(value,value,noEvent); + unit = 'px'; + customSize = value; + } + } + + } +} \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as index 56eaf4859f..d0d8ec5931 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as @@ -386,6 +386,23 @@ package org.apache.royale.style element.style[property] = value; } } + + /** + * set a style property (var) on the current element + * @param propertyName + * @param value + * + * @royaleignorecoercion String + */ + public function setStyleProperty(propertyName:String,value:Object):void{ + assert(propertyName && propertyName.indexOf('--') == 0, 'bad property name, must start with "--"') + COMPILE::JS + { + element.style.setProperty(propertyName,value as String); + } + } + + public function toggleAttribute(name:String, value:Boolean):void { COMPILE::JS diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/AdaptiveTooltipBead.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/AdaptiveTooltipBead.as index 17e706de3f..88383a1ea3 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/AdaptiveTooltipBead.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/AdaptiveTooltipBead.as @@ -26,9 +26,6 @@ package org.apache.royale.style.beads * Provides core functionality for managing display of Tooltips. * AdaptiveTooltipBead supports avoidance of browser edges when the tooltip is displayed * - * This file includes derived work from Spectrum Royale, - * also licensed under the Apache License, Version 2.0. - * */ public class AdaptiveTooltipBead extends TooltipBead { diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/TooltipBead.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/TooltipBead.as index 7774f0342b..4e55db4ab3 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/TooltipBead.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/beads/TooltipBead.as @@ -36,10 +36,7 @@ package org.apache.royale.style.beads } /** - * Provides core functionality for managing display of Tooltips. - * - * This file includes derived work from Spectrum Royale, - * also licensed under the Apache License, Version 2.0. + * Provides core functionality for managing display of Tooltips. * */ public class TooltipBead implements IBead diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IRadialProgressSkin.as similarity index 50% copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IRadialProgressSkin.as index 0a76e00797..89324e54ac 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/IRadialProgressSkin.as @@ -16,38 +16,21 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// -package org.apache.royale.style.stylebeads.background +package org.apache.royale.style.skins { - import org.apache.royale.style.stylebeads.LeafStyleBase; - import org.apache.royale.debugging.assert; - - public class BackgroundRepeat extends LeafStyleBase + import org.apache.royale.style.IStyleSkin; + import org.apache.royale.style.IStyleUIBase; + import org.apache.royale.style.StyleUIBase; + + public interface IRadialProgressSkin extends IStyleSkin { - public function BackgroundRepeat(value:* = null) - { - super("bg", "background-repeat", value); - } - override public function set value(value:*):void - { - assert(["repeat","repeat-x","x","repeat-y","y","space","round","no-repeat"].indexOf(value) >= 0, "Invalid value for background-attachment: " + value); - var ruleValue:String = value; - var selectorValue:String = value; - switch(value) - { - case "x": - selectorValue = ruleValue = "repeat-x"; - break; - case "y": - selectorValue = ruleValue = "repeat-y"; - break; - case "space": - case "round": - selectorValue = "repeat-" + value; - break; - } - calculatedRuleValue = ruleValue; - calculatedSelector = selectorValue; - _value = value; - } + function setSize():void; + function setColors():void; + function applyThickNess():void; + function processValue():void; + + function processBackgroundRadialStyles(background:StyleUIBase):void + function processForegroundRadialStyles(foreground:StyleUIBase):void + } } \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/RadialProgressSkin.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/RadialProgressSkin.as new file mode 100644 index 0000000000..0fe7b7a660 --- /dev/null +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/RadialProgressSkin.as @@ -0,0 +1,242 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.style.skins +{ + import org.apache.royale.style.RadialProgress; + import org.apache.royale.style.StyleSkin; + import org.apache.royale.core.IStrand; + import org.apache.royale.style.StyleUIBase; + import org.apache.royale.style.colors.ColorSwatch; + import org.apache.royale.style.colors.ThemeColorSet; + import org.apache.royale.style.stylebeads.anim.Transition; + import org.apache.royale.style.stylebeads.background.BackgroundPosition; + import org.apache.royale.style.stylebeads.background.BackgroundRepeat; + import org.apache.royale.style.stylebeads.border.BorderColor; + import org.apache.royale.style.stylebeads.flexgrid.PlaceContent; + import org.apache.royale.style.stylebeads.layout.BoxSizing; + import org.apache.royale.style.stylebeads.layout.Display; + import org.apache.royale.style.stylebeads.interact.UserSelect; + import org.apache.royale.style.stylebeads.layout.Inset; + import org.apache.royale.style.stylebeads.layout.Position; + import org.apache.royale.style.stylebeads.sizing.HeightStyle; + import org.apache.royale.style.stylebeads.sizing.WidthStyle; + import org.apache.royale.style.stylebeads.border.BorderRadius; + import org.apache.royale.style.stylebeads.typography.TextColor; + import org.apache.royale.style.stylebeads.typography.VerticalAlign; + import org.apache.royale.style.util.StyleManager; + import org.apache.royale.style.stylebeads.background.BackgroundColor; + import org.apache.royale.style.stylebeads.spacing.Padding; + import org.apache.royale.style.util.ThemeManager; + + + public class RadialProgressSkin extends StyleSkin implements IRadialProgressSkin + { + + private static const radialProgress:String = '--radialProgress'; //this will be a declared @property - for use in transitions + private static const thickness:String = '--rp_thickness'; + private static const size:String = '--rp_size'; + private static const value:String = '--rp_value'; + + private static const nominalPxSize:uint = 80; + + private static function cssVar(varName:String):String{ + return 'var('+varName+')' + } + + private static function standardiseTransition(transition:Transition):void{ + transition.duration = '300ms'; + transition.timingFunction = 'linear'; + } + + private static var propertyDefined:Boolean; + + /** + * this creates the custom rotation-centric property that is used in transitions. + */ + private static function createProperty():void{ + propertyDefined = StyleManager.addCustomProperty(radialProgress,'<angle>',true,'0deg'); //using angle instead of percentage to have common transition property + } + + public function RadialProgressSkin() + { + super(); + if (!propertyDefined) createProperty(); + } + + /** + * @royaleignorecoercion org.apache.royale.style.RadialProgress + */ + private function get host():RadialProgress + { + return _strand as RadialProgress; + } + override public function set strand(value:IStrand):void + { + super.strand = value; + applyStyles(); + } + + public function setColors():void{ + var foreground:String = host.flavor; + if (foreground == 'default') foreground = 'base'; + const colorSet:ThemeColorSet = ThemeManager.instance.activeTheme.themeColorSet; + const background:String = host.background; + const backgroundColor:BackgroundColor = new BackgroundColor(); + const borderColor:BorderColor = new BorderColor(); + const foregroundColor:TextColor = new TextColor(colorSet.getSwatch(foreground,900)) + + var styles:Array = [foregroundColor,backgroundColor,borderColor]; + //some arbitrary color rules - may need revision: + if (background != 'default') { + var color:ColorSwatch = colorSet.getSwatch(background,400); + backgroundColor.value = borderColor.value = color; + if (background == foreground) { + foregroundColor.value = colorSet.getSwatch(foreground,900); + } else { + foregroundColor.value = colorSet.getSwatch(foreground,600); + } + } else { + backgroundColor.value = borderColor.value = 'transparent'; + if (foreground == 'base') { + foregroundColor.value = colorSet.getSwatch(foreground,900); + } else { + foregroundColor.value = colorSet.getSwatch(foreground,500); + } + } + host.setStyles(styles,true); + } + + public function setSize():void{ + const nominalSize:uint = nominalPxSize; + const multiplier:Number= getMultiplier(); + var hostUnit:String = host.unit; + var calcSize:String; + var customSize:Number = host.customSize; + if (customSize) { + calcSize = customSize + hostUnit; + } else { + calcSize = computeSize(nominalSize * multiplier,hostUnit); + } + + host.setStyleProperty(size, calcSize); + } + + public function applyThickNess():void{ + var ratio:Number = host.thickness/200; + host.setStyleProperty(thickness,'calc('+cssVar(size) + ' * '+ratio+')'); + } + + public function processValue():void{ + var setVal:Number = host.value; + host.setStyleProperty(value,setVal); + } + + private function applyStyles():void + { + setSize(); + setColors(); + applyThickNess(); + processValue(); + + var transparentBorder:BorderColor = new BorderColor(); + transparentBorder.value = 'transparent'; + + var radialContainerStyles:Array = [ + new UserSelect('none'), + new Position('relative'), + new WidthStyle(cssVar(size)), + new HeightStyle(cssVar(size)), + new VerticalAlign('middle'), + new Display('inline-grid'), + new BoxSizing('content-box'), + new BorderRadius('full'), + new PlaceContent('center'), + transparentBorder //by default + ]; + _styles = radialContainerStyles; + //these are non-atomic, and unlikely to be shared for any other components anyway, so we will set it directly on the element.style: + host.setStyleProperty(radialProgress,'calc('+cssVar(value)+' * 3.6deg)'); + + //using this font size approach. alternate is to set to medium here, and scale inside setSize method + host.setStyle('font-size','calc('+cssVar(size) + ' * 0.2)'); + host.setStyle('border-width', 'calc('+cssVar(size) + ' * 0.05)') + + host.setStyles(_styles, true); + } + + public function processBackgroundRadialStyles(background:StyleUIBase):void{ + //the following seems like it does not suit the atomic declaration styling, so setting these directly on local styles: + background.setStyle('background-image','radial-gradient(farthest-side, currentColor 98%, #0000), conic-gradient(currentColor '+cssVar(radialProgress)+', #0000 0)'); + + background.setStyle('background-image','radial-gradient(farthest-side, currentColor 98%, #0000), conic-gradient(currentColor '+cssVar(radialProgress)+', #0000 0)'); + background.setStyle('background-position','top, center'); + background.setStyle('background-size',cssVar(thickness) + ' ' + cssVar(thickness) + ', cover') + background.setStyle('mask','radial-gradient(farthest-side, #0000 calc(100% - '+cssVar(thickness)+'), #000 calc(100% + .5px - '+cssVar(thickness)+'))') + + var transition:Transition = new Transition(radialProgress); + standardiseTransition(transition); + + //these appear more atomic/shareable: + background.setStyles([ + new BorderRadius('full'), + new BackgroundPosition('top,center'), + new BackgroundRepeat('no-repeat'), + new Position('absolute'), + new Inset('0'), + new Padding('0'), + transition + ]) + } + + public function processForegroundRadialStyles(foreground:StyleUIBase):void{ + foreground.setStyle('inset','calc(50% - ' + cssVar(thickness) + ' / 2)'); + foreground.setStyle('transform','rotate(calc(' + cssVar(radialProgress) + ' - 90deg)) translate(calc('+cssVar(size)+' / 2 - 50%))'); + var transition:Transition = new Transition(radialProgress); + standardiseTransition(transition); + + foreground.setStyles([ + new BorderRadius('full'), + new Position('absolute'), + new BackgroundColor('currentColor'), + transition + ]) + } + + private function getMultiplier():Number + { + switch(host.size) + { + case "xs": + return 0.6; + case "sm": + return 0.8; + case "md": + return 1; + case "lg": + return 1.2; + case "xl": + return 1.4; + default: + return 1; + } + } + + + } +} \ No newline at end of file diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as index 8124c70ce5..b6418e1874 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/LeafStyleBase.as @@ -267,6 +267,11 @@ package org.apache.royale.style.stylebeads } protected function computeSpacing(value:Number):String { + assert(!isNaN(value), "Cannot compute spacing from NaN."); + if (value == 0) { + //unit-less zero + return '0'; + } var pixelValue:Number = ThemeManager.instance.activeTheme.spacing * value; return CSSUnit.convert(pixelValue, CSSUnit.PX, unit) + unit; } diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as index 0a76e00797..4236798603 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/background/BackgroundRepeat.as @@ -29,7 +29,7 @@ package org.apache.royale.style.stylebeads.background } override public function set value(value:*):void { - assert(["repeat","repeat-x","x","repeat-y","y","space","round","no-repeat"].indexOf(value) >= 0, "Invalid value for background-attachment: " + value); + assert(["repeat","repeat-x","x","repeat-y","y","space","round","no-repeat"].indexOf(value) >= 0, "Invalid value for background-repeat: " + value); var ruleValue:String = value; var selectorValue:String = value; switch(value) diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as index 58450d0a0c..f5643c6784 100644 --- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as +++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleManager.as @@ -137,6 +137,47 @@ package org.apache.royale.style.util styleList.add(selector); } } + + + public static function addCustomProperty(propertyName:String,syntax:String,inherits:Boolean = true,initialValue:String = null):Boolean{ + assert(propertyName && propertyName.indexOf('--') == 0, "propertyName " + propertyName + " not correctly specified"); + assert(syntax && syntax.charAt(0) == "<" && syntax.charAt(syntax.length - 1) == ">", "syntax " + syntax + " not correctly specified"); + var uniquePropertyDeclaration:String = "@property " + propertyName ; + + var hasInitial:Boolean = initialValue != null && initialValue.replace(/\s+/g, "").length > 0; + var rule:String = uniquePropertyDeclaration + " {\n" + + " syntax: \"" + syntax + "\";\n" + + " inherits: " + (inherits ? "true" : "false") + ";\n" + + (hasInitial ? " initial-value: " + initialValue + ";\n" : "") + + "}"; + + var success:Boolean = false; + + COMPILE::JS + { + assert(!styleList.has(uniquePropertyDeclaration), "Custom Property " + uniquePropertyDeclaration + " already exists"); + try { + getStyleSheet().insertRule(rule, ruleIdx++); + styleList.add(uniquePropertyDeclaration); + success = true; + } catch (e:Error) {} + } + + return success + } + + public static function hasCustomProperty(propertyName:String):Boolean{ + COMPILE::JS + { + assert(propertyName && propertyName.indexOf('--') == 0, "propertyName " + propertyName + " not correctly specified"); + var uniquePropertyDeclaration:String = "@property " + propertyName ; + return styleList.has(uniquePropertyDeclaration); + } + COMPILE::SWF + { + return false; + } + } } } \ No newline at end of file
