You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ha...@apache.org on 2018/03/01 23:50:14 UTC
[royale-asjs] branch feature/type_names_class_name_issue124
updated: Alternate way to compute class names
This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch feature/type_names_class_name_issue124
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/type_names_class_name_issue124 by this push:
new 5a92085 Alternate way to compute class names
5a92085 is described below
commit 5a9208503cdcd1c9495f5191745caf4c98702ed2
Author: Harbs <ha...@in-tools.com>
AuthorDate: Fri Mar 2 01:50:06 2018 +0200
Alternate way to compute class names
There’s not much to gain in Card, but I think it simplifies Button and encapsulates a pattern for future cases
---
.../projects/Core/src/main/royale/CoreClasses.as | 2 +-
.../royale/org/apache/royale/core/CSSClassList.as | 93 ++++++++++++++++++++++
.../main/royale/org/apache/royale/mdl/Button.as | 47 ++++++-----
.../src/main/royale/org/apache/royale/mdl/Card.as | 15 +++-
4 files changed, 133 insertions(+), 24 deletions(-)
diff --git a/frameworks/projects/Core/src/main/royale/CoreClasses.as b/frameworks/projects/Core/src/main/royale/CoreClasses.as
index 0408118..627c783 100644
--- a/frameworks/projects/Core/src/main/royale/CoreClasses.as
+++ b/frameworks/projects/Core/src/main/royale/CoreClasses.as
@@ -119,7 +119,7 @@ internal class CoreClasses
}
import org.apache.royale.core.SimpleStatesImpl; SimpleStatesImpl;
-
+ import org.apache.royale.core.CSSClassList; CSSClassList;
import org.apache.royale.core.StyleChangeNotifier; StyleChangeNotifier;
import org.apache.royale.events.CustomEvent; CustomEvent;
import org.apache.royale.events.Event; Event;
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
new file mode 100644
index 0000000..80acd7d
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/CSSClassList.as
@@ -0,0 +1,93 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core
+{
+
+ /**
+ * The CSSClassList class is used to construct a list of class names to be applied.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ *
+ */
+ public class CSSClassList
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Royale 0.9.2
+ */
+ public function CSSClassList()
+ {
+ }
+
+ private var _list:Array;
+
+ /**
+ * Adds a className to the list of classes.
+ * It only adds a name once.
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Royale 0.9.2
+ */
+ public function add(className:String):void
+ {
+ if(!_list)
+ _list = [];
+ if(_list.indexOf(className) == -1)
+ _list.push(className);
+ }
+
+ /**
+ * Removes a className to the list of classes
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Royale 0.9.2
+ */
+ public function remove(className:String):void
+ {
+ if(_list)
+ {
+ var idx:int = _list.indexOf(className);
+ if(idx != -1)
+ _list.splice(idx,1);
+ }
+ }
+
+ /**
+ * returns the concatenated string of the class list
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Royale 0.9.2
+ */
+ public function compute():String
+ {
+ return _list ? _list.join(" ") + " " : "";
+ }
+ }
+}
+
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Button.as
index 84a8b42..bd1e186 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Button.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Button.as
@@ -27,6 +27,7 @@ package org.apache.royale.mdl
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.core.CSSClassList;
}
/**
@@ -54,8 +55,16 @@ package org.apache.royale.mdl
typeNames = "mdl-button mdl-js-button";
+ COMPILE::JS
+ {
+ _classList = new CSSClassList();
+ }
+
addBead(new UpgradeElement());
}
+
+ COMPILE::JS
+ private var _classList:CSSClassList;
/**
* @private
@@ -92,7 +101,6 @@ package org.apache.royale.mdl
}
private var _fab:Boolean = false;
- private var _fabClassName:String = "";
/**
* A boolean flag to activate "mdl-button--fab" effect selector.
@@ -112,17 +120,17 @@ package org.apache.royale.mdl
if (_fab != value)
{
_fab = value;
- _fabClassName = value ? "mdl-button--fab " : "";
-
COMPILE::JS
{
+ var classVal:String = "mdl-button--fab";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _raised:Boolean = false;
- private var _raisedClassName:String = "";
+ // private var _raisedClassName:String = "";
/**
* A boolean flag to activate "mdl-button--raised" effect selector.
@@ -143,17 +151,17 @@ package org.apache.royale.mdl
if (_raised != value)
{
_raised = value;
- _raisedClassName = value ? "mdl-button--raised " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--raised";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _colored:Boolean = false;
- private var _coloredClassName:String = "";
/**
* A boolean flag to activate "mdl-button--colored" effect selector.
@@ -174,17 +182,17 @@ package org.apache.royale.mdl
if (_colored != value)
{
_colored = value;
- _coloredClassName = value ? "mdl-button--colored " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--colored";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _accent:Boolean = false;
- private var _accentClassName:String = "";
/**
* A boolean flag to activate "mdl-button--accent" effect selector.
@@ -206,17 +214,17 @@ package org.apache.royale.mdl
if (_accent != value)
{
_accent = value;
- _accentClassName = value ? "mdl-button--accent " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--accent";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _primary:Boolean = false;
- private var _primaryClassName:String = "";
/**
* A boolean flag to activate "mdl-button--primary" effect selector.
@@ -238,17 +246,17 @@ package org.apache.royale.mdl
if (_primary != value)
{
_primary = value;
- _primaryClassName = value ? "mdl-button--primary " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--primary";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _minifab:Boolean = false;
- private var _miniFabClassName:String = "";
/**
* A boolean flag to activate "mdl-button--mini-fab" effect selector.
@@ -270,17 +278,17 @@ package org.apache.royale.mdl
if (_minifab != value)
{
_minifab = value;
- _miniFabClassName = value ? "mdl-button--mini-fab " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--mini-fab";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
private var _icon:Boolean = false;
- private var _iconClassName:String = "";
/**
* A boolean flag to activate "mdl-button--icon" effect selector.
@@ -302,17 +310,17 @@ package org.apache.royale.mdl
if (_icon != value)
{
_icon = value;
- _iconClassName = value ? "mdl-button--icon " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-button--icon";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
}
protected var _ripple:Boolean = false;
- private var _rippleClassName:String = "";
/**
* A boolean flag to activate "mdl-js-ripple-effect" effect selector.
@@ -332,10 +340,11 @@ package org.apache.royale.mdl
if (_ripple != value)
{
_ripple = value;
- _rippleClassName = value ? "mdl-js-ripple-effect " : "";
COMPILE::JS
{
+ var classVal:String = "mdl-js-ripple-effect";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
setClassName(computeFinalClassNames());
}
}
@@ -344,9 +353,7 @@ package org.apache.royale.mdl
COMPILE::JS
override protected function computeFinalClassNames():String
{
- return _rippleClassName + _iconClassName + _miniFabClassName
- + _primaryClassName + _accentClassName + _coloredClassName +
- _raisedClassName + _fabClassName + super.computeFinalClassNames();
+ return _classList.compute() + super.computeFinalClassNames();
}
}
}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
index c2bf697..f621393 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
@@ -23,6 +23,7 @@ package org.apache.royale.mdl
COMPILE::JS
{
import org.apache.royale.html.util.addOrReplaceClassName;
+ import org.apache.royale.core.CSSClassList;
}
/**
* The Card class is a self-contained pieces of paper with data.
@@ -50,10 +51,17 @@ package org.apache.royale.mdl
super();
typeNames = "mdl-card";
+
+ COMPILE::JS
+ {
+ _classList = new CSSClassList();
+ }
}
+ COMPILE::JS
+ private var _classList:CSSClassList;
+
protected var _shadow:Number = 0;
- private var _shadowClassName:String = "";
/**
* A boolean flag to activate "mdl-shadow--Xdp" effect selector.
@@ -83,7 +91,8 @@ package org.apache.royale.mdl
{
if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
{
- _shadowClassName = "mdl-shadow--" + value + "dp";
+ var classVal:String = "mdl-shadow--" + value + "dp";
+ value ? _classList.add(classVal) : _classList.remove(classVal);
_shadow = value;
setClassName(computeFinalClassNames());
@@ -95,7 +104,7 @@ package org.apache.royale.mdl
COMPILE::JS
override protected function computeFinalClassNames():String
{
- return _shadowClassName + " " + super.computeFinalClassNames();
+ return _classList.compute() + super.computeFinalClassNames();
}
}
}
--
To stop receiving notification emails like this one, please contact
harbs@apache.org.