This is an automated email from the ASF dual-hosted git repository. piotrz pushed a commit to branch feature/type_names_class_name_issue124 in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 75fa06d2853cf66008976d98899bd3c055917bcc Author: Piotr Zarzycki <piotrzarzyck...@gmail.com> AuthorDate: Fri Mar 2 18:13:05 2018 +0100 Apply computeFinalClassNames function to MDL classes (reference #124) --- .../projects/Basic/src/main/royale/BasicClasses.as | 1 - .../main/royale/org/apache/royale/core/UIBase.as | 2 +- .../royale/html/util/addOrReplaceClassName.as | 63 -------- .../src/main/royale/org/apache/royale/mdl/Card.as | 9 +- .../main/royale/org/apache/royale/mdl/CheckBox.as | 27 +++- .../royale/org/apache/royale/mdl/DialogActions.as | 26 +++- .../royale/org/apache/royale/mdl/DropDownList.as | 4 +- .../main/royale/org/apache/royale/mdl/Footer.as | 12 +- .../org/apache/royale/mdl/FooterBottomSection.as | 15 +- .../org/apache/royale/mdl/FooterLeftSection.as | 15 +- .../royale/org/apache/royale/mdl/FooterLinkList.as | 10 +- .../org/apache/royale/mdl/FooterMiddleSection.as | 9 +- .../org/apache/royale/mdl/FooterRightSection.as | 10 +- .../org/apache/royale/mdl/FooterSocialButton.as | 9 +- .../org/apache/royale/mdl/FooterTopSection.as | 9 +- .../src/main/royale/org/apache/royale/mdl/Grid.as | 25 ++- .../main/royale/org/apache/royale/mdl/GridCell.as | 167 +++++++++++++++------ .../main/royale/org/apache/royale/mdl/Header.as | 43 ++++-- .../royale/org/apache/royale/mdl/IconToggle.as | 24 ++- .../src/main/royale/org/apache/royale/mdl/Menu.as | 31 +++- .../org/apache/royale/mdl/NavigationLayout.as | 33 ++-- .../apache/royale/mdl/NavigationLayoutContent.as | 6 - .../royale/org/apache/royale/mdl/ProgressBar.as | 24 ++- .../royale/org/apache/royale/mdl/RadioButton.as | 31 ++-- .../main/royale/org/apache/royale/mdl/Spacer.as | 6 - .../main/royale/org/apache/royale/mdl/Spinner.as | 40 +++-- .../main/royale/org/apache/royale/mdl/Switch.as | 24 ++- .../main/royale/org/apache/royale/mdl/TabBar.as | 29 +++- .../royale/org/apache/royale/mdl/TabBarButton.as | 28 +++- .../royale/org/apache/royale/mdl/TabBarPanel.as | 26 +++- .../src/main/royale/org/apache/royale/mdl/Table.as | 33 +++- .../royale/org/apache/royale/mdl/TableColumn.as | 34 +++-- .../src/main/royale/org/apache/royale/mdl/Tabs.as | 24 ++- .../src/main/royale/org/apache/royale/mdl/Toast.as | 1 - .../apache/royale/mdl/supportClasses/CardInner.as | 33 ++-- .../royale/mdl/supportClasses/MaterialIconBase.as | 74 +++++---- .../supportClasses/TabBarButtonItemRendererBase.as | 24 ++- .../mdl/supportClasses/TabItemRendererBase.as | 24 ++- .../royale/mdl/supportClasses/TextFieldBase.as | 37 ++--- 39 files changed, 621 insertions(+), 421 deletions(-) diff --git a/frameworks/projects/Basic/src/main/royale/BasicClasses.as b/frameworks/projects/Basic/src/main/royale/BasicClasses.as index 6d73af9..d0d8e2b 100644 --- a/frameworks/projects/Basic/src/main/royale/BasicClasses.as +++ b/frameworks/projects/Basic/src/main/royale/BasicClasses.as @@ -31,7 +31,6 @@ internal class BasicClasses { import org.apache.royale.html.util.addElementToWrapper; addElementToWrapper; } - import org.apache.royale.html.util.addOrReplaceClassName; addOrReplaceClassName; import org.apache.royale.html.ToolTip; ToolTip; import org.apache.royale.html.accessories.NumericOnlyTextInputBead; NumericOnlyTextInputBead; import org.apache.royale.html.beads.DispatchInputFinishedBead; DispatchInputFinishedBead; diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as index 5937eb2..77ed10b 100644 --- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as +++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as @@ -1062,7 +1062,7 @@ package org.apache.royale.core COMPILE::JS protected function computeFinalClassNames():String { - return _className ? _className + " " : "" + typeNames ? typeNames : ""; + return (_className ? _className + " " : "") + (typeNames ? typeNames : ""); } COMPILE::JS diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as deleted file mode 100644 index e1a87e0..0000000 --- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as +++ /dev/null @@ -1,63 +0,0 @@ -//////////////////////////////////////////////////////////////////////////////// -// -// 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.html.util -{ - import org.apache.royale.utils.StringTrimmer; - - /** - * Adding or replacing css class in provided className. - * - * @param className The value of components className - * @param newName New css class name which will be added or replace the old one in className - * @param oldName Old css class name which will be replaced by newName - * - * @return The resulting className with added or replaced css class specified by newName - */ - public function addOrReplaceClassName(className:String, newName:String, oldName:String = null):String - { - if (!newName) - { - return className; - } - - if (newName && oldName && className) - { - var trimmedOldName:String = StringTrimmer.trim(oldName); - if (className.indexOf(trimmedOldName) > -1) - { - return className.replace(trimmedOldName, StringTrimmer.trim(newName)); - } - else - { - return className += " " + StringTrimmer.trim(newName); - } - } - - var isClassNameEmpty:Boolean = !className; - - if (isClassNameEmpty || !oldName) - { - if (isClassNameEmpty) className = ""; - - return className += " " + StringTrimmer.trim(newName); - } - - return className; - } -} 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 f621393..22633f3 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 @@ -22,7 +22,6 @@ package org.apache.royale.mdl COMPILE::JS { - import org.apache.royale.html.util.addOrReplaceClassName; import org.apache.royale.core.CSSClassList; } /** @@ -91,8 +90,12 @@ package org.apache.royale.mdl { if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16) { - var classVal:String = "mdl-shadow--" + value + "dp"; - value ? _classList.add(classVal) : _classList.remove(classVal); + var classVal:String = "mdl-shadow--" + _shadow + "dp"; + _classList.remove(classVal); + + classVal = "mdl-shadow--" + value + "dp"; + _classList.add(classVal); + _shadow = value; setClassName(computeFinalClassNames()); diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as index aa1ed97..e1610bb 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as @@ -28,7 +28,7 @@ package org.apache.royale.mdl import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.events.Event; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -61,12 +61,20 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-checkbox mdl-js-checkbox"; addBead(new UpgradeElement()); addBead(new UpgradeChildren(["mdl-checkbox__ripple-container"])); } - + + COMPILE::JS + private var _classList:CSSClassList; + COMPILE::JS protected var input:HTMLInputElement; @@ -117,6 +125,7 @@ package org.apache.royale.mdl { return _ripple; } + public function set ripple(value:Boolean):void { if (_ripple != value) @@ -125,11 +134,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -263,6 +270,12 @@ package org.apache.royale.mdl dispatchEvent(new Event(Event.CHANGE)); } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as index c72e876..34686cf 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -50,10 +50,19 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-dialog__actions"; } + COMPILE::JS + private var _classList:CSSClassList; + protected var _fullWidth:Boolean = false; + /** * A boolean flag to activate "mdl-dialog__actions--full-width" effect selector. * Modifies the actions to each take the full width of the container. @@ -69,6 +78,7 @@ package org.apache.royale.mdl { return _fullWidth; } + public function set fullWidth(value:Boolean):void { if (_fullWidth != value) @@ -77,13 +87,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-dialog__actions--full-width"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-dialog__actions--full-width"); - } + var classVal:String = "mdl-dialog__actions--full-width"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as index 00d7333..a4d3369 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as @@ -31,7 +31,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } [Event(name="change", type="org.apache.royale.events.Event")] @@ -207,8 +206,7 @@ package org.apache.royale.mdl { element = super.createElement(); - className = addOrReplaceClassName(className, "mdl-textfield--floating-label"); - + element.classList.add("mdl-textfield--floating-label"); return element; } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as index eb1c4e5..b111f5f 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as @@ -24,7 +24,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -75,6 +74,7 @@ package org.apache.royale.mdl { return _mini; } + public function set mini(value:Boolean):void { _mini = value; @@ -82,15 +82,11 @@ package org.apache.royale.mdl COMPILE::JS { element.classList.remove(typeNames); - if(!_mini) - { - element.classList.add("mdl-mega-footer"); - className = addOrReplaceClassName(className, "mdl-mega-footer"); - } - else + + if (_mini) { typeNames = "mdl-mini-footer"; - className = addOrReplaceClassName(className, "mdl-mini-footer"); + setClassName(computeFinalClassNames()); } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as index bc3e0d2..0f474e3 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -70,16 +69,12 @@ package org.apache.royale.mdl if(parent is Footer) { - element.classList.remove(typeNames); - if(!Footer(parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__bottom-section"); - } - else - { + element.classList.remove(typeNames); + if (Footer(parent).mini) + { typeNames = "mdl-mini-footer__bottom-section"; - className = addOrReplaceClassName(className, "mdl-mini-footer__bottom-section"); - } + setClassName(computeFinalClassNames()); + } } else { diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as index 8644d25..6bb90ea 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -70,16 +69,12 @@ package org.apache.royale.mdl if(parent is Footer) { - element.classList.remove(typeNames); - if(!Footer(parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__left-section"); - } - else - { + element.classList.remove(typeNames); + if (Footer(parent).mini) + { typeNames = "mdl-mini-footer__left-section"; - className = addOrReplaceClassName(className, "mdl-mini-footer__left-section"); - } + setClassName(computeFinalClassNames()); + } } else if(parent is IFooterSection) diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as index b4efb8f..a1eec49 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -85,15 +84,10 @@ package org.apache.royale.mdl if(UIBase(parentSection).parent is Footer) { element.classList.remove(typeNames); - if(!Footer(UIBase(parentSection).parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__link-list"); - - } - else + if (Footer(UIBase(parentSection).parent).mini) { typeNames = "mdl-mini-footer__link-list"; - className = addOrReplaceClassName(className, "mdl-mini-footer__link-list"); + setClassName(computeFinalClassNames()); } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as index 1d2026d..947ee2c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -71,14 +70,10 @@ package org.apache.royale.mdl if(parent is Footer) { element.classList.remove(typeNames); - if(!Footer(parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__middle-section"); - } - else + if (Footer(parent).mini) { typeNames = "mdl-mini-footer__middle-section"; - className = addOrReplaceClassName(className, "mdl-mini-footer__middle-section"); + setClassName(computeFinalClassNames()); } } else diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as index aff9704..aed81e6 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -71,15 +70,10 @@ package org.apache.royale.mdl if(parent is Footer) { element.classList.remove(typeNames); - if(!Footer(parent).mini) - { - element.classList.add("mdl-mega-footer__right-section"); - className = addOrReplaceClassName(className, "mdl-mega-footer__right-section"); - } - else + if (Footer(parent).mini) { typeNames = "mdl-mini-footer__right-section"; - className = addOrReplaceClassName(className, "mdl-mini-footer__right-section"); + setClassName(computeFinalClassNames()); } } else if(parent is IFooterSection) diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as index 6737630..1bd52eb 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as @@ -26,7 +26,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -74,14 +73,10 @@ package org.apache.royale.mdl if(UIBase(parentSection).parent is Footer) { element.classList.remove(typeNames); - if(!Footer(UIBase(parentSection).parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__social-btn"); - } - else + if (Footer(UIBase(parentSection).parent).mini) { typeNames = "mdl-mini-footer__social-btn"; - className = addOrReplaceClassName(className, "mdl-mini-footer__social-btn"); + setClassName(computeFinalClassNames()); } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as index 52e63d6..abd866d 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as @@ -25,7 +25,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; } /** @@ -71,14 +70,10 @@ package org.apache.royale.mdl if(parent is Footer) { element.classList.remove(typeNames); - if(!Footer(parent).mini) - { - className = addOrReplaceClassName(className, "mdl-mega-footer__top-section"); - } - else + if(Footer(parent).mini) { typeNames = "mdl-mini-footer__top-section"; - className = addOrReplaceClassName(className, "mdl-mini-footer__top-section"); + setClassName(computeFinalClassNames()); } } else diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as index 35a6664..d270bf0 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -63,9 +63,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-grid"; } + COMPILE::JS + private var _classList:CSSClassList; + protected var _nospacing:Boolean = false; /** * A boolean flag to activate "mdl-grid--no-spacing" effect selector. @@ -80,6 +88,7 @@ package org.apache.royale.mdl { return _nospacing; } + public function set nospacing(value:Boolean):void { if (_nospacing != value) @@ -88,13 +97,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-grid--no-spacing"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-grid--no-spacing"); - } + var classVal:String = "mdl-grid--no-spacing"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as index 623fe9f..163c360 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -52,9 +52,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-cell"; } + COMPILE::JS + private var _classList:CSSClassList; + protected var _column:Number = 4; /** * A boolean flag to activate "mdl-cell--N-col" effect selector. @@ -78,7 +86,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col", "mdl-cell--" + _column + "-col"); + var classVal:String = "mdl-cell--" + _column + "-col"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-col"; + _classList.add(classVal); + _column = value; } } @@ -100,6 +113,7 @@ package org.apache.royale.mdl { return _columnDesktop; } + public function set columnDesktop(value:Number):void { if (_columnDesktop != value) @@ -108,7 +122,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-desktop", "mdl-cell--" + _columnDesktop + "-col-desktop"); + var classVal:String = "mdl-cell--" + _columnDesktop + "-col-desktop"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-col-desktop"; + _classList.add(classVal); + _columnDesktop = value; } } @@ -130,6 +149,7 @@ package org.apache.royale.mdl { return _columnTablet; } + public function set columnTablet(value:Number):void { if (_columnTablet != value) @@ -138,7 +158,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-tablet", "mdl-cell--" + _columnTablet + "-col-tablet"); + var classVal:String = "mdl-cell--" + _columnTablet + "-col-tablet"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-col-tablet"; + _classList.add(classVal); + _columnTablet = value; } } @@ -160,6 +185,7 @@ package org.apache.royale.mdl { return _columnPhone; } + public function set columnPhone(value:Number):void { if (_columnPhone != value) @@ -168,7 +194,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 5) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-phone", "mdl-cell--" + _columnPhone + "-col-phone"); + var classVal:String = "mdl-cell--" + _columnPhone + "-col-phone"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-col-phone"; + _classList.add(classVal); + _columnPhone = value; } } @@ -190,6 +221,7 @@ package org.apache.royale.mdl { return _offset; } + public function set offset(value:Number):void { if (_offset != value) @@ -198,7 +230,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 12) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset", "mdl-cell--" + _offset + "-offset"); + var classVal:String = "mdl-cell--" + _offset + "-offset"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-offset"; + _classList.add(classVal); + _offset = value; } } @@ -220,6 +257,7 @@ package org.apache.royale.mdl { return _offsetDesktop; } + public function set offsetDesktop(value:Number):void { if (_offsetDesktop != value) @@ -228,7 +266,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 12) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-desktop", "mdl-cell--" + _offsetDesktop + "-offset-desktop"); + var classVal:String = "mdl-cell--" + _offsetDesktop + "-offset-desktop"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-offset-desktop"; + _classList.add(classVal); + _offsetDesktop = value; } } @@ -250,6 +293,7 @@ package org.apache.royale.mdl { return _offsetTablet; } + public function set offsetTablet(value:Number):void { if (_offsetTablet != value) @@ -258,7 +302,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 12) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-tablet", "mdl-cell--" + _offsetTablet + "-offset-tablet"); + var classVal:String = "mdl-cell--" + _offsetTablet + "-offset-tablet"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-offset-tablet"; + _classList.add(classVal); + _offsetTablet = value; } } @@ -280,6 +329,7 @@ package org.apache.royale.mdl { return _offsetPhone; } + public function set offsetPhone(value:Number):void { if (_offsetPhone != value) @@ -288,7 +338,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 12) { - className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-phone", "mdl-cell--" + _offsetPhone + "-offset-phone"); + var classVal:String = "mdl-cell--" + _offsetPhone + "-offset-phone"; + _classList.remove(classVal); + + classVal = "mdl-cell--" + value + "-offset-phone"; + _classList.add(classVal); + _offsetPhone = value; } } @@ -318,7 +373,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--order-" + value, "mdl-cell--order-" + _order); + var classVal:String = "mdl-cell--order-" + _order; + _classList.remove(classVal); + + classVal = "mdl-cell--order-" + value; + _classList.add(classVal); + _order = value; } } @@ -340,6 +400,7 @@ package org.apache.royale.mdl { return _orderDesktop; } + public function set orderDesktop(value:Number):void { if (_orderDesktop != value) @@ -348,7 +409,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-desktop", "mdl-cell--order-" + _orderDesktop + "-desktop"); + var classVal:String = "mdl-cell--order-" + _orderDesktop + "-desktop"; + _classList.remove(classVal); + + classVal = "mdl-cell--order-" + value + "-desktop"; + _classList.add(classVal); + _orderDesktop = value; } } @@ -378,7 +444,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-tablet", "mdl-cell--order-" + _orderTablet + "-tablet"); + var classVal:String = "mdl-cell--order-" + _orderTablet + "-tablet"; + _classList.remove(classVal); + + classVal = "mdl-cell--order-" + value + "-tablet"; + _classList.add(classVal); + _orderTablet = value; } } @@ -408,7 +479,12 @@ package org.apache.royale.mdl { if (value > 0 || value < 13) { - className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-phone", "mdl-cell--order-" + _orderPhone + "-phone"); + var classVal:String = "mdl-cell--order-" + _orderPhone + "-phone"; + _classList.remove(classVal); + + classVal = "mdl-cell--order-" + value + "-phone"; + _classList.add(classVal); + _orderPhone = value; } } @@ -429,6 +505,7 @@ package org.apache.royale.mdl { return _hideDesktop; } + public function set hideDesktop(value:Boolean):void { if (_hideDesktop != value) @@ -437,11 +514,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--hide-desktop"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--hide-desktop"); - } + var classVal:String = "mdl-cell--hide-desktop"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -460,6 +535,7 @@ package org.apache.royale.mdl { return _hideTablet; } + public function set hideTablet(value:Boolean):void { if (_hideTablet != value) @@ -468,11 +544,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--hide-tablet"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--hide-tablet"); - } + var classVal:String = "mdl-cell--hide-tablet"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -499,11 +573,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--hide-phone"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--hide-phone"); - } + var classVal:String = "mdl-cell--hide-phone"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -531,11 +603,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--stretch"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--stretch"); - } + var classVal:String = "mdl-cell--stretch"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -562,11 +632,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--top"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--top"); - } + var classVal:String = "mdl-cell--top"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -585,6 +653,7 @@ package org.apache.royale.mdl { return _alignMiddle; } + public function set alignMiddle(value:Boolean):void { if (_alignMiddle != value) @@ -593,11 +662,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--middle"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--middle"); - } + var classVal:String = "mdl-cell--middle"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -625,13 +692,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-cell--bottom"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-cell--bottom"); - } + var classVal:String = "mdl-cell--bottom"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as index 11816b6..e10622c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -51,9 +51,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-layout__header" } + COMPILE::JS + private var _classList:CSSClassList; + /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ @@ -77,6 +85,7 @@ package org.apache.royale.mdl { return _transparent; } + public function set transparent(value:Boolean):void { if (_transparent != value) @@ -85,11 +94,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-layout__header--transparent"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-layout__header--transparent"); - } + var classVal:String = "mdl-layout__header--transparent"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -108,6 +115,7 @@ package org.apache.royale.mdl { return _scrollable; } + public function set scrollable(value:Boolean):void { if (_scrollable != value) @@ -116,11 +124,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-layout__header--scroll"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-layout__header--scroll"); - } + var classVal:String = "mdl-layout__header--scroll"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -139,6 +145,7 @@ package org.apache.royale.mdl { return _waterfall; } + public function set waterfall(value:Boolean):void { if (_waterfall != value) @@ -147,13 +154,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-layout__header--waterfall"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-layout__header--waterfall"); - } + var classVal:String = "mdl-layout__header--waterfall"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as index c3241fd..2507e6c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as @@ -35,7 +35,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } //-------------------------------------- @@ -95,6 +95,11 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-icon-toggle mdl-js-icon-toggle"; COMPILE::SWF @@ -106,6 +111,9 @@ package org.apache.royale.mdl addBead(new UpgradeChildren(["mdl-icon-toggle__ripple-container"])); } + COMPILE::JS + private var _classList:CSSClassList; + [Bindable("change")] /** * <code>true</code> if the Button is selected. @@ -183,11 +191,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -273,5 +279,11 @@ package org.apache.royale.mdl { //selected = !selected; } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as index 07305b5..5652c04 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as @@ -26,7 +26,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -60,10 +60,18 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-menu mdl-js-menu"; addEventListener("beadsAdded", addUpgradeBead); } - + + COMPILE::JS + private var _classList:CSSClassList; + protected function addUpgradeBead(event:Event):void { addBead(new UpgradeElement()); @@ -138,6 +146,7 @@ package org.apache.royale.mdl { return _left; } + public function set left(value:Boolean):void { _left = value; @@ -148,7 +157,8 @@ package org.apache.royale.mdl { currentMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); className += currentMenuPosition; - } else + } + else { newMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right"); className = className.replace( "/(?:^|\s)" + currentMenuPosition + "(?!\S)/g" , newMenuPosition); @@ -194,6 +204,7 @@ package org.apache.royale.mdl { return _ripple; } + public function set ripple(value:Boolean):void { if (_ripple != value) @@ -202,13 +213,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as index 383525c..a469ea6 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as @@ -26,7 +26,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -53,9 +53,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-layout mdl-js-layout"; } + COMPILE::JS + private var _classList:CSSClassList; + private var _applicationModel:Object; [Bindable("modelChanged")] @@ -106,11 +114,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-layout--fixed-header"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-layout--fixed-header"); - } + var classVal:String = "mdl-layout--fixed-header"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -129,6 +135,7 @@ package org.apache.royale.mdl { return _fixedDrawer; } + public function set fixedDrawer(value:Boolean):void { if (_fixedDrawer != value) @@ -137,13 +144,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-layout--fixed-drawer"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-layout--fixed-drawer"); - } + var classVal:String = "mdl-layout--fixed-drawer"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as index 262a265..3a50e9c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as @@ -20,12 +20,6 @@ package org.apache.royale.mdl { import org.apache.royale.html.Group; - COMPILE::JS - { - import org.apache.royale.core.WrappedHTMLElement; - import org.apache.royale.html.util.addElementToWrapper; - } - /** * The NavigationLayoutContent class is a Container component capable of parenting * the content of the NavigationLayout parent. If the navigation uses a TabBar component diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as index 79c913d..8dbaa23 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as @@ -25,7 +25,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** * The ProgressBar indicate loading and progress states. @@ -47,9 +47,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-progress mdl-js-progress"; } + COMPILE::JS + private var _classList:CSSClassList; + private var materialProgress:Object; private var _currentProgress:Number; @@ -115,11 +123,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-progress__indeterminate"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-progress__indeterminate"); - } + var classVal:String = "mdl-progress__indeterminate"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -170,5 +176,11 @@ package org.apache.royale.mdl setCurrentProgress(_currentProgress); setCurrentBuffer(_currentBuffer); } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as index e74c289..ac1f4d0 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as @@ -30,12 +30,13 @@ package org.apache.royale.mdl import org.apache.royale.core.IStrand; import org.apache.royale.core.IValueToggleButtonModel; } + COMPILE::JS { import org.apache.royale.core.UIBase; import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } //-------------------------------------- @@ -295,6 +296,8 @@ package org.apache.royale.mdl { super(); + _classList = new CSSClassList(); + typeNames = "mdl-radio mdl-js-radio"; addBead(new UpgradeElement()); @@ -306,6 +309,8 @@ package org.apache.royale.mdl */ protected static var radioCounter:int = 0; + private var _classList:CSSClassList; + private var radio:HTMLSpanElement; private var icon:HTMLInputElement; private var label:HTMLLabelElement; @@ -343,9 +348,8 @@ package org.apache.royale.mdl (radio as WrappedHTMLElement).royale_wrapper = this; return element; - }; + } - COMPILE::JS override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void { if (type == MouseEvent.CLICK) @@ -358,7 +362,6 @@ package org.apache.royale.mdl } } - COMPILE::JS public function clickHandler(event:Event):void { selected = !selected; @@ -384,14 +387,9 @@ package org.apache.royale.mdl { _ripple = value; - COMPILE::JS - { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } @@ -399,6 +397,7 @@ package org.apache.royale.mdl { return icon.name as String; } + public function set groupName(value:String):void { icon.name = value; @@ -419,6 +418,7 @@ package org.apache.royale.mdl { return icon.checked; } + public function set selected(value:Boolean):void { if(icon.checked == value) @@ -479,6 +479,11 @@ package org.apache.royale.mdl } } } - } + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } + } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as index bed52ac..40e5f67 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as @@ -20,12 +20,6 @@ package org.apache.royale.mdl { import org.apache.royale.core.UIBase; - COMPILE::JS - { - import org.apache.royale.core.WrappedHTMLElement; - import org.apache.royale.html.util.addElementToWrapper; - } - /** * The Spacer class takes up space in the UI layout. * diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as index 24726a7..e9dff95 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as @@ -25,7 +25,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** * The Material Design Lite (MDL) spinner component is an enhanced replacement for @@ -50,12 +50,21 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-spinner mdl-js-spinner"; addBead(new UpgradeElement()); } + COMPILE::JS + private var _classList:CSSClassList; + private var _isActive:Boolean; + /** * Indicates whether Spinner is active and visible * @@ -68,9 +77,7 @@ package org.apache.royale.mdl { return _isActive; } - /** - * @private - */ + public function set isActive(value:Boolean):void { if (_isActive != value) @@ -79,16 +86,15 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("is-active"); - if (value) - { - className = addOrReplaceClassName(className, "is-active"); - } + var classVal:String = "is-active"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } - private var _singleColor:Boolean; + private var _singleColor:Boolean; + /** * Make Spinner in a single color * @@ -105,11 +111,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-spinner--single-color"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-spinner--single-color"); - } + var classVal:String = "mdl-spinner--single-color"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -124,5 +128,11 @@ package org.apache.royale.mdl { return addElementToWrapper(this,'div'); } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as index e521948..0a38132 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as @@ -32,7 +32,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } //-------------------------------------- @@ -98,12 +98,20 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-switch mdl-js-switch"; addBead(new UpgradeElement()); addBead(new UpgradeChildren(["mdl-switch__ripple-container"])); } + COMPILE::JS + private var _classList:CSSClassList; + /** * @copy org.apache.royale.html.Label#text * @@ -183,11 +191,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -238,5 +244,11 @@ package org.apache.royale.mdl input.checked = selected; label.classList.toggle("is-checked", selected); } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as index c7a23ff..4da4593 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as @@ -25,7 +25,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -62,9 +62,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-layout__tab-bar"; } + COMPILE::JS + private var _classList:CSSClassList; + /** * @copy org.apache.royale.core.IDataProviderModel#dataProvider * @@ -77,6 +85,7 @@ package org.apache.royale.mdl { return ITabModel(model).dataProvider; } + override public function set dataProvider(value:Object):void { ITabModel(model).dataProvider = value; @@ -94,6 +103,7 @@ package org.apache.royale.mdl { return ITabModel(model).labelField; } + override public function set labelField(value:String):void { ITabModel(model).labelField = value; @@ -149,7 +159,7 @@ package org.apache.royale.mdl element.classList.remove(typeNames); typeNames = "mdl-tabs__tab-bar"; - className = addOrReplaceClassName(className, "mdl-tabs__tab-bar"); + setClassName(computeFinalClassNames()); } if(parent is Tabs && _ripple) @@ -172,6 +182,7 @@ package org.apache.royale.mdl { return _ripple; } + public function set ripple(value:Boolean):void { if (_ripple != value) @@ -185,13 +196,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as index 620672b..2b07754 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -49,9 +49,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-layout__tab"; } - + + COMPILE::JS + private var _classList:CSSClassList; + private var _isActive:Boolean = false; /** @@ -75,11 +83,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("is-active"); - if (value) - { - className = addOrReplaceClassName(className, "is-active"); - } + var classVal:String = "is-active"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -117,9 +123,15 @@ package org.apache.royale.mdl element.classList.remove(typeNames); typeNames = "mdl-tabs__tab"; - className = addOrReplaceClassName(className, "mdl-tabs__tab"); + setClassName(typeNames); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as index 34eed6c..9d777b7 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -51,9 +51,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-layout__tab-panel"; } + COMPILE::JS + private var _classList:CSSClassList; + /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ @@ -81,7 +89,7 @@ package org.apache.royale.mdl element.classList.remove(typeNames); typeNames = "mdl-tabs__panel"; - className = addOrReplaceClassName(className, "mdl-tabs__panel"); + setClassName(computeFinalClassNames()); } } @@ -108,13 +116,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("is-active"); - if (value) - { - className = addOrReplaceClassName(className, "is-active"); - } + var classVal:String = "is-active"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as index 9bc0015..81915fe 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as @@ -27,7 +27,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -61,9 +61,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-data-table mdl-js-data-table"; } + COMPILE::JS + private var _classList:CSSClassList; + private var _columns:Array; /** * columns. Optional @@ -278,10 +286,17 @@ package org.apache.royale.mdl { COMPILE::JS { - className = addOrReplaceClassName(className, "mdl-shadow--" + value + "dp", "mdl-shadow--" + _shadow + "dp"); if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16) { + var classVal:String = "mdl-shadow--" + _shadow + "dp"; + _classList.remove(classVal); + + classVal = "mdl-shadow--" + value + "dp"; + _classList.add(classVal); + _shadow = value; + + setClassName(computeFinalClassNames()); } } } @@ -310,11 +325,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-data-table--selectable"); - COMPILE::JS - { - className = addOrReplaceClassName(className, "mdl-data-table--selectable"); - } + var classVal:String = "mdl-data-table--selectable"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -339,5 +352,11 @@ package org.apache.royale.mdl super.addElement(tbody); _isTbodyAddedToParent = true; } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as index cf3abbb..3c06c63 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as @@ -23,7 +23,7 @@ package org.apache.royale.mdl COMPILE::JS { import org.apache.royale.core.WrappedHTMLElement; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -51,9 +51,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-data-table__cell--non-numeric"; } + COMPILE::JS + private var _classList:CSSClassList; + private var _headerText:String = ""; /** @@ -102,6 +110,7 @@ package org.apache.royale.mdl { return _ascending; } + public function set ascending(value:Boolean):void { if (_ascending != value) @@ -110,11 +119,9 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-data-table__header--sorted-ascending"); - COMPILE::JS - { - className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-ascending"); - } + var classVal:String = "mdl-data-table__header--sorted-ascending"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -134,6 +141,7 @@ package org.apache.royale.mdl { return _descending; } + public function set descending(value:Boolean):void { if (_descending != value) @@ -142,13 +150,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-data-table__header--sorted-descending"); - COMPILE::JS - { - className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-descending"); - } + var classVal:String = "mdl-data-table__header--sorted-descending"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as index a85abd0..e677fd7 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as @@ -25,7 +25,7 @@ package org.apache.royale.mdl { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -59,9 +59,17 @@ package org.apache.royale.mdl { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "mdl-tabs mdl-js-tabs"; } + COMPILE::JS + private var _classList:CSSClassList; + /** * @copy org.apache.royale.core.IDataProviderModel#dataProvider * @@ -169,13 +177,17 @@ package org.apache.royale.mdl COMPILE::JS { - element.classList.remove("mdl-js-ripple-effect"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-js-ripple-effect"); - } + var classVal:String = "mdl-js-ripple-effect"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as index 057d242..73f222c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as @@ -110,7 +110,6 @@ package org.apache.royale.mdl var snackbarData:Object = IToastModel(model).snackbarData; snackbar.showSnackbar(snackbarData); } - //dispatchEvent(new Event("action")); } protected var snackbar:Object; diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as index 922da08..d5616c3 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -48,8 +48,16 @@ package org.apache.royale.mdl.supportClasses public function CardInner() { super(); + + COMPILE::JS + { + _classList = new CSSClassList(); + } } + COMPILE::JS + private var _classList:CSSClassList; + private var _border:Boolean = false; /** * A boolean flag to activate "mdl-card--border" effect selector. @@ -72,11 +80,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-card--border"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-card--border"); - } + var classVal:String = "mdl-card--border"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -96,6 +102,7 @@ package org.apache.royale.mdl.supportClasses { return _expand; } + public function set expand(value:Boolean):void { if (_expand != value) @@ -104,13 +111,17 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-card--expand"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-card--expand"); - } + var classVal:String = "mdl-card--expand"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as index d86db7b..5cc1aea 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as @@ -25,7 +25,7 @@ package org.apache.royale.mdl.supportClasses { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -54,10 +54,18 @@ package org.apache.royale.mdl.supportClasses { super(); + COMPILE::JS + { + _classList = new CSSClassList(); + } + typeNames = "material-icons"; } COMPILE::JS + private var _classList:CSSClassList; + + COMPILE::JS protected var textNode:Text; /** @@ -121,8 +129,15 @@ package org.apache.royale.mdl.supportClasses { COMPILE::JS { - className = addOrReplaceClassName(className, "md-" + value, "md-" + _size); + var classVal:String = "md-" + _size; + _classList.remove(classVal); + + classVal = "md-" + value; + _classList.add(classVal); + _size = value; + + setClassName(computeFinalClassNames()); } } } @@ -140,6 +155,7 @@ package org.apache.royale.mdl.supportClasses { return _dark; } + public function set dark(value:Boolean):void { if (_dark != value) @@ -148,11 +164,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("md-dark"); - if (value) - { - className = addOrReplaceClassName(className, "md-dark"); - } + var classVal:String = "md-dark"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -178,11 +192,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("md-light"); - if (value) - { - className = addOrReplaceClassName(className, "md-light"); - } + var classVal:String = "md-light"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -208,11 +220,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("md-inactive"); - if (value) - { - className = addOrReplaceClassName(className, "md-inactive"); - } + var classVal:String = "md-inactive"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -238,11 +248,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-list__item-icon"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-list__item-icon"); - } + var classVal:String = "mdl-list__item-icon"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -268,11 +276,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-list__item-avatar"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-list__item-avatar"); - } + var classVal:String = "mdl-list__item-avatar"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -298,13 +304,17 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-icon-toggle__label"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-icon-toggle__label"); - } + var classVal:String = "mdl-icon-toggle__label"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as index 3d766af..52e0a8c 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as @@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -49,9 +49,15 @@ package org.apache.royale.mdl.supportClasses { super(); - // className = ""; + COMPILE::JS + { + _classList = new CSSClassList(); + } } + COMPILE::JS + private var _classList:CSSClassList; + private var _tabIdField:String; /** * tabIdField. @@ -92,11 +98,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("is-active"); - if (value) - { - className = addOrReplaceClassName(className, "is-active"); - } + var classVal:String = "is-active"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -138,5 +142,11 @@ package org.apache.royale.mdl.supportClasses { return addElementToWrapper(this,'a'); } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as index bb666ab..b357c0a 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as @@ -22,7 +22,7 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -46,8 +46,16 @@ package org.apache.royale.mdl.supportClasses public function TabItemRendererBase() { super(); + + COMPILE::JS + { + _classList = new CSSClassList(); + } } + COMPILE::JS + private var _classList:CSSClassList; + private var _tabIdField:String; /** * @copy org.apache.royale.mdl.supportClasses.ITabItemRenderer#tabIdField @@ -89,11 +97,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("is-active"); - if (value) - { - className = addOrReplaceClassName(className, "is-active"); - } + var classVal:String = "is-active"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -124,5 +130,11 @@ package org.apache.royale.mdl.supportClasses } } } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as index a0c0cb8..91341a8 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as +++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as @@ -19,16 +19,15 @@ package org.apache.royale.mdl.supportClasses { import org.apache.royale.events.Event; import org.apache.royale.html.TextInput; - import org.apache.royale.mdl.beads.ExpandableSearch; import org.apache.royale.core.IBead; import org.apache.royale.mdl.supportClasses.ITextField; - + COMPILE::JS { import goog.events; import org.apache.royale.core.WrappedHTMLElement; - import org.apache.royale.html.util.addOrReplaceClassName; + import org.apache.royale.core.CSSClassList; } /** @@ -53,11 +52,15 @@ package org.apache.royale.mdl.supportClasses { super(); - // className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + COMPILE::JS + { + _classList = new CSSClassList(); + } } COMPILE::JS { + private var _classList:CSSClassList; private var _textNode:Text; /** * @copy org.apache.royale.mdl.supportClasses.ITextField#textNode @@ -152,11 +155,9 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("mdl-textfield--floating-label"); - if (value) - { - className = addOrReplaceClassName(className, "mdl-textfield--floating-label"); - } + var classVal:String = "mdl-textfield--floating-label"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } @@ -185,25 +186,17 @@ package org.apache.royale.mdl.supportClasses COMPILE::JS { - element.classList.remove("is-invalid"); - if (value) - { - className = addOrReplaceClassName(className, "is-invalid"); - } + var classVal:String = "is-invalid"; + value ? _classList.add(classVal) : _classList.remove(classVal); + setClassName(computeFinalClassNames()); } } } COMPILE::JS - override public function addedToParent():void + override protected function computeFinalClassNames():String { - super.addedToParent(); - - var expandableSearch:IBead = getBeadByType(ExpandableSearch); - if (expandableSearch) - { - className = addOrReplaceClassName(className, "mdl-textfield--expandable"); - } + return _classList.compute() + super.computeFinalClassNames(); } } } -- To stop receiving notification emails like this one, please contact pio...@apache.org.