This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 001f4e224b animation
001f4e224b is described below
commit 001f4e224bb5417de5a520b271cbab4dbb1d4d96
Author: Harbs <[email protected]>
AuthorDate: Wed Feb 25 13:37:35 2026 +0200
animation
---
frameworks/projects/Style/README.md | 11 +++
.../royale/style/stylebeads/anim/Animation.as | 87 ++++++++++++++++++++
.../BoxShadow.as => anim/TransitionBehavior.as} | 27 +++----
.../BoxShadow.as => anim/TransitionDelay.as} | 30 +++----
.../BoxShadow.as => anim/TransitionDuration.as} | 29 ++++---
.../style/stylebeads/anim/TransitionProperty.as | 45 +++++++++++
.../stylebeads/anim/TransitionTimingFunction.as | 62 +++++++++++++++
.../royale/style/stylebeads/effects/BoxShadow.as | 5 ++
.../effects/{BoxShadow.as => RingEffect.as} | 39 ++++++---
.../royale/style/stylebeads/effects/TextShadow.as | 5 ++
.../BoxShadow.as => tables/BorderCollapse.as} | 23 +++---
.../style/stylebeads/tables/BorderSpacing.as | 92 ++++++++++++++++++++++
.../BoxShadow.as => tables/CaptionSide.as} | 23 +++---
.../BoxShadow.as => tables/TableLayout.as} | 23 +++---
.../BoxShadow.as => util/AnimationManager.as} | 43 +++++++---
.../org/apache/royale/style/util/StyleTheme.as | 49 ++++++++++--
16 files changed, 478 insertions(+), 115 deletions(-)
diff --git a/frameworks/projects/Style/README.md
b/frameworks/projects/Style/README.md
index 81ec16d4e2..ab42099664 100644
--- a/frameworks/projects/Style/README.md
+++ b/frameworks/projects/Style/README.md
@@ -72,6 +72,17 @@ SVG icons are created at runtime as well, enabling:
- This allows for dynamic color generation and usage without needing to
pre-generate static CSS classes for each color variant.
- Anywhere colors are applied, the string name of the color should be used, ,
but the nmes must be registered by CSSLookup first.
+### Arbitrary CSS Values
+- Any style bead which acepts a `value` should support names registered with
CSSLookup. This enables specifying specific styling used in theming such as
custom box-shadows or filters, etc. without needing to create a new style bead
for each unique value.
+
+### Animations
+- Style includes the prebuilt standard animations inclused in Tailwind.
+- Those standard settings can be customized in the StyleTheme.
+- If custom keyframes are needed, they must be registered in the
AnimationManager.
+- Keyframes are registered with a `name` and an array of the keyframe steps.
+- Animation variables can be defined as any other CSS variable definition. The
rule should use the keyframe name as necessary.
+- All keyframe names must be unique across the application to avoid conflicts.
+
## Why this project
Traditional styling in large component systems can become rigid over time.
This project aims to keep Royale styling lightweight, composable, and
application-driven by combining:
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/Animation.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/Animation.as
new file mode 100644
index 0000000000..f4a0fd4083
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/Animation.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads.anim
+{
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.style.util.CSSLookup;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.util.StyleTheme;
+ import org.apache.royale.style.util.ThemeManager;
+
+ public class Animation extends SingleStyleBase
+ {
+ public function Animation()
+ {
+ super("animate", "animation");
+ }
+
+// need to figure out how to register keyframes, etc.
+
+//animate-bounce
+//animation: var(--animate-bounce); /* bounce 1s infinite */
+
+/**
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateY(-25%);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ transform: none;
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
+ */
+
+ override public function set value(value:*):void
+ {
+ var isVar:Boolean = CSSLookup.has(value);
+ assert(
+ isVar ||
["spin","ping","pulse","bounce","none"].indexOf(value) != -1,
+ "animation only accepts 'spin', 'ping',
'pulse', 'bounce', or a CSS variable referencing a valid animation"
+ );
+ calculatedRuleValue = calculatedSelector = _value =
value;
+ if(isVar)
+ {
+ calculatedRuleValue =
CSSLookup.getProperty(value);
+ }
+ else
+ {
+ var theme:StyleTheme =
ThemeManager.instance.activeTheme;
+ switch(value)
+ {
+ case "spin":
+ calculatedRuleValue =
theme.animateSpin;
+ break;
+ case "ping":
+ calculatedRuleValue =
theme.animatePing;
+ break;
+ case "pulse":
+ calculatedRuleValue =
theme.animatePulse;
+ break;
+ case "bounce":
+ calculatedRuleValue =
theme.animateBounce;
+ break;
+ case "none":
+ break;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionBehavior.as
similarity index 62%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionBehavior.as
index 7148e58102..5408f2c169 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionBehavior.as
@@ -16,27 +16,22 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.anim
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
- public class BoxShadow extends StyleBeadBase
+ public class TransitionBehavior extends SingleStyleBase
{
- public function BoxShadow()
+ public function TransitionBehavior()
{
- super();
+ super("transition", "transition-behavior");
}
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
+ override public function set value(value:*):void
{
- return [];
- }
-
- override public function get rules():Array
- {
- return [];
- }
+ assert(value == "normal" || value == "allow-discrete",
"transition-behavior only accepts 'normal' or 'allow-discrete'");
+ calculatedRuleValue = _value = value;
+ calculatedSelector = value == "normal" ? "normal" :
"discrete";
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDelay.as
similarity index 57%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDelay.as
index 7148e58102..34337edc9a 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDelay.as
@@ -16,27 +16,27 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.anim
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.util.CSSLookup;
- public class BoxShadow extends StyleBeadBase
+ public class TransitionDelay extends SingleStyleBase
{
- public function BoxShadow()
+ public function TransitionDelay()
{
- super();
- }
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
- return [];
+ super("delay", "transition-delay");
}
- override public function get rules():Array
+
+ override public function set value(value:*):void
{
- return [];
- }
+ var isInt:Boolean = int(value) == value;
+ var isVar:Boolean = CSSLookup.has(value);
+ assert(isVar || (isInt && value >= 0),
"transition-delay only accepts valid CSS variables or non-negative integers
representing milliseconds");
+ calculatedSelector = _value = value;
+ calculatedRuleValue = isInt ? value + "ms" :
CSSLookup.getProperty(value);
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as
similarity index 56%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as
index 7148e58102..3b945935e0 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionDuration.as
@@ -16,27 +16,26 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.anim
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.util.CSSLookup;
- public class BoxShadow extends StyleBeadBase
+ public class TransitionDuration extends SingleStyleBase
{
- public function BoxShadow()
+ public function TransitionDuration()
{
- super();
- }
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
- return [];
+ super("duration", "transition-duration");
}
- override public function get rules():Array
+ override public function set value(value:*):void
{
- return [];
- }
+ var isInt:Boolean = int(value) == value;
+ var isVar:Boolean = CSSLookup.has(value);
+ assert(isVar || (isInt && value >= 0),
"transition-duration only accepts valid CSS variables or non-negative integers
representing milliseconds");
+ calculatedSelector = _value = value;
+ calculatedRuleValue = isInt ? value + "ms" :
CSSLookup.getProperty(value);
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as
new file mode 100644
index 0000000000..0413e0de49
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionProperty.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads.anim
+{
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+
+ public class TransitionProperty extends SingleStyleBase
+ {
+ public function TransitionProperty()
+ {
+ super("transition", "transition-property");
+ }
+
+// transition
+// transition-property: color, background-color, border-color, outline-color,
text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
--tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility,
overlay, pointer-events;
+// transition-timing-function: var(--default-transition-timing-function); /*
cubic-bezier(0.4, 0, 0.2, 1) */
+// transition-duration: var(--default-transition-duration); /* 150ms */
+
+// transition-all:
+// transition-property: all;
+// transition-timing-function: var(--default-transition-timing-function); /*
cubic-bezier(0.4, 0, 0.2, 1) */
+// transition-duration: var(--default-transition-duration); /* 150ms */
+
+ override public function set value(value:*):void
+ {
+ //TODO implement.
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as
new file mode 100644
index 0000000000..8445ccbc74
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/anim/TransitionTimingFunction.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads.anim
+{
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.style.util.StyleTheme;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSLookup;
+ import org.apache.royale.debugging.assert;
+
+ public class TransitionTimingFunction extends SingleStyleBase
+ {
+ public function TransitionTimingFunction()
+ {
+ super("ease", "transition-timing-function");
+ }
+ override public function set value(value:*):void
+ {
+ var ruleValue:String = value;
+ var selectorValue:String = value;
+ var theme:StyleTheme =
ThemeManager.instance.activeTheme;
+ switch(value)
+ {
+ case "in":
+ ruleValue = theme.easeIn;
+ break;
+ case "out":
+ ruleValue = theme.easeOut;
+ break;
+ case "in-out":
+ ruleValue = theme.easeInOut;
+ break;
+ case "linear":
+ case "initial":
+ break;
+ default:
+ ruleValue =
CSSLookup.getProperty(value);
+ break;
+ }
+ assert(ruleValue, "transition-timing-function only
accepts 'linear', 'in', 'out', 'in-out', 'initial', or a valid CSS timing
function value");
+ _value = value;
+ calculatedSelector = selectorValue;
+ calculatedRuleValue = ruleValue;
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
index 7148e58102..6c76229ca5 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
@@ -29,6 +29,11 @@ package org.apache.royale.style.stylebeads.effects
/**
* TODO: Figure this out
*/
+ public var size:String;
+
+ // none is special
+ public var color:String;
+ public var inset:Boolean;
override public function get selectors():Array
{
return [];
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
similarity index 53%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
index 7148e58102..cdbac6b614 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
@@ -20,22 +20,41 @@ package org.apache.royale.style.stylebeads.effects
{
import org.apache.royale.style.stylebeads.StyleBeadBase;
- public class BoxShadow extends StyleBeadBase
+ public class RingEffect extends StyleBeadBase
{
- public function BoxShadow()
+ public function RingEffect()
{
super();
}
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
+
+ public var color:String;
+ public var inset:Boolean;
+ public var weight:Number;
+ // --tw-ring-color:initial;
+ // --tw-ring-shadow:0 0 #0000;
+ // --tw-inset-ring-color:initial;
+ // --tw-inset-ring-shadow:0 0 #0000;
+ // --tw-ring-inset:initial;
+ // --tw-ring-offset-width:0px;
+ // --tw-ring-offset-color:#fff;
+ // --tw-ring-offset-shadow:0 0 #0000;
+
+/**
+ * Should be something like this:
+ * box-shadow: inset 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-inset-ring-color, currentcolor),
+--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px +
var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+ box-shadow:
+ var(--tw-inset-shadow),
+ var(--tw-inset-ring-shadow),
+ var(--tw-ring-offset-shadow),
+ var(--tw-ring-shadow),
+ var(--tw-shadow);
+ */
+ //TODO: Figure this out
+ override public function get selectors():Array{
return [];
}
-
- override public function get rules():Array
- {
+ override public function get rules():Array{
return [];
}
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/TextShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/TextShadow.as
index c42f32ca7c..a3e69917ee 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/TextShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/TextShadow.as
@@ -29,6 +29,11 @@ package org.apache.royale.style.stylebeads.effects
/**
* TODO: Figure this out
*/
+ public var size:String;
+
+ // none is special
+ public var color:String;
+
override public function get selectors():Array
{
return [];
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderCollapse.as
similarity index 66%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderCollapse.as
index 7148e58102..760ff65380 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderCollapse.as
@@ -16,27 +16,22 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.layout
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
- public class BoxShadow extends StyleBeadBase
+ public class BorderCollapse extends SingleStyleBase
{
- public function BoxShadow()
+ public function BorderCollapse()
{
- super();
- }
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
- return [];
+ super("border", "border-collapse");
}
- override public function get rules():Array
+ override public function set value(value:*):void
{
- return [];
+ assert(value == "collapse" || value == "separate",
"border-collapse only accepts 'collapse' or 'separate'");
+ calculatedRuleValue = calculatedSelector = _value =
value;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderSpacing.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderSpacing.as
new file mode 100644
index 0000000000..ea180963da
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/BorderSpacing.as
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.stylebeads.layout
+{
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
+ import org.apache.royale.style.util.CSSLookup;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
+
+ public class BorderSpacing extends SingleStyleBase
+ {
+ public function BorderSpacing()
+ {
+ super("border-spacing", "border-spacing");
+ }
+ public var unit:String = "px";
+ private var _x:*;
+ public function set x(value:*):void
+ {
+ _x = value;
+ validateVals([_x, _y]);
+ }
+ private var _y:*;
+ public function set y(value:*):void
+ {
+ _y = value;
+ validateVals([_x, _y]);
+ }
+ override public function set value(value:*):void
+ {
+ _x = _y = undefined;
+ _value = value;
+ validateVals([value]);
+ }
+ private function validateVals(vals:Array):void
+ {
+ var selectorValue:Array = value;
+ var ruleValue:Array = value;
+ for(var i:int = 0; i < vals.length; i++)
+ {
+ var validated:Boolean = false;
+ var val:* = vals[i];
+ if(!val)
+ {
+ selectorValue[i] = "0";
+ ruleValue[i] = "0";
+ continue;
+ }
+ var isInt:Boolean = int(val) == val;
+ if(isInt)
+ {
+ validated = true;
+ var pixelValue:Number =
ThemeManager.instance.activeTheme.spacing * val;
+ selectorValue[i] = "" + Math.abs(val);
+ ruleValue[i] =
CSSUnit.convert(pixelValue, CSSUnit.PX, unit) + unit;
+ }
+ else if(CSSLookup.has(val))
+ {
+ validated = true;
+ ruleValue[i] =
CSSLookup.getProperty(val);
+ }
+ }
+ if(vals.length == 1)
+ {
+ calculatedRuleValue = ruleValue[0];
+ calculatedSelector =
sanitizeSelector(selectorValue[0]);
+ }
+ else
+ {
+ calculatedRuleValue = ruleValue.join(" ");
+ calculatedSelector =
sanitizeSelector(selectorValue.join("-"));
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/CaptionSide.as
similarity index 67%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/CaptionSide.as
index 7148e58102..36d6767f65 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/CaptionSide.as
@@ -16,27 +16,22 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.layout
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
- public class BoxShadow extends StyleBeadBase
+ public class CaptionSide extends SingleStyleBase
{
- public function BoxShadow()
+ public function CaptionSide()
{
- super();
- }
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
- return [];
+ super("caption", "caption-side");
}
- override public function get rules():Array
+ override public function set value(value:*):void
{
- return [];
+ assert(value == "top" || value == "bottom" ,
"caption-side only accepts 'top' or 'bottom'");
+ calculatedRuleValue = calculatedSelector = _value =
value;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/TableLayout.as
similarity index 67%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/TableLayout.as
index 7148e58102..9d1f5a6e3a 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/tables/TableLayout.as
@@ -16,27 +16,22 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.stylebeads.layout
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.style.stylebeads.SingleStyleBase;
+ import org.apache.royale.debugging.assert;
- public class BoxShadow extends StyleBeadBase
+ public class TableLayout extends SingleStyleBase
{
- public function BoxShadow()
+ public function TableLayout()
{
- super();
- }
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
- {
- return [];
+ super("table", "table-layout");
}
- override public function get rules():Array
+ override public function set value(value:*):void
{
- return [];
+ assert(value == "auto" || value == "fixed",
"table-layout only accepts 'auto' or 'fixed'");
+ calculatedRuleValue = calculatedSelector = _value =
value;
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/AnimationManager.as
similarity index 51%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/AnimationManager.as
index 7148e58102..7e9d8454b1 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/AnimationManager.as
@@ -16,27 +16,46 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads.effects
+package org.apache.royale.style.util
{
- import org.apache.royale.style.stylebeads.StyleBeadBase;
+ import org.apache.royale.debugging.assert;
- public class BoxShadow extends StyleBeadBase
+ public class AnimationManager
{
- public function BoxShadow()
+ private function AnimationManager()
{
- super();
+
}
- /**
- * TODO: Figure this out
- */
- override public function get selectors():Array
+ COMPILE::JS
+ private static const keyframeSet:Set = new Set();
+
+ public static function registerKeyframes(name:String,
keyframes:Array):void
{
- return [];
+ COMPILE::JS
+ {
+ assert(name.indexOf("--") != 0, "Keyframes does
not support CSS variables. The name should not start with '--': " + name);
+ // Only add once. "has" is much faster than
running "set" again.
+ if(keyframeSet.has(name))
+ return;
+
+ keyframeSet.add(name);
+ // Should we check that it's not being added
twice?
+ // Shouldn't be necessary unless something went
wrong...
+ StyleManager.addStyle("@keyframes " + name,
keyframes.join("\n"));
+ }
}
- override public function get rules():Array
+
+ public static function has(name:String):Boolean
{
- return [];
+ COMPILE::JS
+ {
+ return keyframeSet.has(name);
+ }
+ COMPILE::SWF
+ {
+ return false;
+ }
}
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
index e3e10507c1..ab166a06f0 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
@@ -127,11 +127,50 @@ package org.apache.royale.style.util
public var easeOut:String = "cubic-bezier(0,0,.2,1)";
public var easeInOut:String = "cubic-bezier(.4,0,.2,1)";
- // TODO: Add keyframes for these animations.
- public var animateSpin:String = "spin 1s linear infinite"
- public var animatePing:String = "ping 1s cubic-bezier(0,0,.2,1)
infinite";
- public var animatePulse:String = "pulse 2s cubic-bezier(0.4, 0,
0.6, 1) infinite";
- public var animateBounce:String = "bounce 1s infinite";
+ public function get animateSpin():String
+ {
+ if(!AnimationManager.has("spin"))
+ {
+ AnimationManager.registerKeyframes("spin", [
+ "to {transform: rotate(360deg);}"
+ ]);
+ }
+ return "spin 1s linear infinite";
+ }
+ public function get animatePing():String
+ {
+ if(!AnimationManager.has("ping"))
+ {
+ AnimationManager.registerKeyframes("ping", [
+ "75%, 100% {transform: scale(2);
opacity: 0;}"
+ ]);
+ }
+ return "ping 1s cubic-bezier(0,0,.2,1) infinite";
+ }
+
+
+ public function get animatePulse():String
+ {
+ if(!AnimationManager.has("pulse"))
+ {
+ AnimationManager.registerKeyframes("pulse", [
+ "50% {opacity: 0.5;}"
+ ]);
+ }
+ return "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+ }
+
+ public function get animateBounce():String
+ {
+ if(!AnimationManager.has("bounce"))
+ {
+ AnimationManager.registerKeyframes("bounce", [
+ "0%, 100% {transform:
translateY(-25%);animation-timing-function: cubic-bezier(0.8, 0, 1, 1);}",
+ "50% {transform:
none;animation-timing-function: cubic-bezier(0, 0, 0.2, 1);}"
+ ]);
+ }
+ return "bounce 1s infinite";
+ }
public var blurXS:String = "4px";
public var blurSM:String = "8px";
