Fix classNames and typeNames to allow user to assign their own without remove MDL ones
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/ed6fdc91 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/ed6fdc91 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/ed6fdc91 Branch: refs/heads/develop Commit: ed6fdc913e0f00d3b9604af094d5d8a3187ec352 Parents: 4d6fa02 Author: Carlos Rovira <[email protected]> Authored: Thu Nov 10 19:55:50 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Sat Nov 12 10:06:54 2016 +0100 ---------------------------------------------------------------------- .../src/main/flex/org/apache/flex/mdl/Button.as | 32 ++++++++++++++----- .../main/flex/org/apache/flex/mdl/CheckBox.as | 19 +++++++++-- .../flex/org/apache/flex/mdl/RadioButton.as | 22 +++++++++++-- .../src/main/flex/org/apache/flex/mdl/Slider.as | 26 ++++++++++++++- .../main/flex/org/apache/flex/mdl/TextInput.as | 33 +++++++++++++++++--- 5 files changed, 114 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as index e1fa441..bbac36a 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as @@ -47,6 +47,8 @@ package org.apache.flex.mdl public function Button() { super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; } /** @@ -56,20 +58,22 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { - element = document.createElement('button') as WrappedHTMLElement; + typeNames = "mdl-button mdl-js-button"; + element = document.createElement('button') as WrappedHTMLElement; + element.className = typeNames; + positioner = element; positioner.style.position = 'relative'; element.flexjs_wrapper = this; - className = "mdl-button mdl-js-button"; - return element; } private var _fab:Boolean = false; /** * A boolean flag to activate "mdl-button--fab" effect selector. + * Applies fab (circular) display effect. Mutually exclusive with raised, mini-fab, and icon. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -90,6 +94,7 @@ package org.apache.flex.mdl private var _raised:Boolean = false; /** * A boolean flag to activate "mdl-button--raised" effect selector. + * Applies raised display effect. Mutually exclusive with fab, mini-fab, and icon. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -110,6 +115,8 @@ package org.apache.flex.mdl private var _colored:Boolean = false; /** * A boolean flag to activate "mdl-button--colored" effect selector. + * Applies colored display effect (primary or accent color, depending on the type of button). + * Colors are defined in material.min.css * * @langversion 3.0 * @playerversion Flash 10.2 @@ -130,7 +137,9 @@ package org.apache.flex.mdl private var _accent:Boolean = false; /** * A boolean flag to activate "mdl-button--accent" effect selector. - * + * Applies accent color display effect. + * Colors are defined in material.min.css. + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -150,7 +159,9 @@ package org.apache.flex.mdl private var _primary:Boolean = false; /** * A boolean flag to activate "mdl-button--primary" effect selector. - * + * Applies primary color display effect. + * Colors are defined in material.min.css + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -170,7 +181,9 @@ package org.apache.flex.mdl private var _minifab:Boolean = false; /** * A boolean flag to activate "mdl-button--mini-fab" effect selector. - * + * Applies mini-fab (small fab circular) display effect. + * Mutually exclusive with raised, fab, and icon + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -190,7 +203,9 @@ package org.apache.flex.mdl private var _icon:Boolean = false; /** * A boolean flag to activate "mdl-button--icon" effect selector. - * + * Applies icon (small plain circular) display effect. + * Mutually exclusive with raised, fab, and mini-fab + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 @@ -210,7 +225,8 @@ package org.apache.flex.mdl protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. - * + * Applies ripple click effect. May be used in combination with any other classes + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as index b8f1194..6a30449 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as @@ -76,6 +76,20 @@ package org.apache.flex.mdl COMPILE::JS public class CheckBox extends UIBase { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CheckBox() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } private var input:HTMLInputElement; private var checkbox:HTMLSpanElement; @@ -91,6 +105,8 @@ package org.apache.flex.mdl */ override protected function createElement():WrappedHTMLElement { + typeNames = "mdl-checkbox mdl-js-checkbox"; + label = document.createElement('label') as HTMLLabelElement; element = label as WrappedHTMLElement; @@ -112,14 +128,13 @@ package org.apache.flex.mdl (checkbox as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; - className = 'mdl-checkbox mdl-js-checkbox'; - return element; }; protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes * * @langversion 3.0 * @playerversion Flash 10.2 http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as index 2ebd9fe..46eb8cc 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as @@ -77,6 +77,21 @@ package org.apache.flex.mdl public class RadioButton extends UIBase { /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function RadioButton() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** * Provides unique name */ public static var radioCounter:int = 0; @@ -94,7 +109,9 @@ package org.apache.flex.mdl * @flexjsignorecoercion Text */ override protected function createElement():WrappedHTMLElement - { + { + typeNames = "mdl-radio mdl-js-radio"; + icon = new RadioButtonIcon(); icon.className = 'mdl-radio__button'; icon.id = '_radio_' + RadioButton.radioCounter++; @@ -121,14 +138,13 @@ package org.apache.flex.mdl (icon.element as WrappedHTMLElement).flexjs_wrapper = this; (radio as WrappedHTMLElement).flexjs_wrapper = this; - className = 'mdl-radio mdl-js-radio'; - return element; }; protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes * * @langversion 3.0 * @playerversion Flash 10.2 http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as index 126ea12..cb5dbaf 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as @@ -20,6 +20,7 @@ package org.apache.flex.mdl { import org.apache.flex.core.IRangeModel; import org.apache.flex.core.UIBase; + import org.apache.flex.events.Event; COMPILE::JS { @@ -56,6 +57,8 @@ package org.apache.flex.mdl public function Slider() { super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; IRangeModel(model).value = 0; IRangeModel(model).minimum = 0; @@ -191,12 +194,14 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { + typeNames = "mdl-slider mdl-js-slider"; + var p:HTMLElement = document.createElement('p') as HTMLElement; p.style.width = '300px'; input = document.createElement('input') as HTMLInputElement; input.type = "range"; - input.className = 'mdl-slider mdl-js-slider'; + input.className = typeNames; input.value = IRangeModel(model).value.toString(); input.min = IRangeModel(model).minimum.toString(); @@ -222,6 +227,25 @@ package org.apache.flex.mdl return element; } + private var _className:String; + + /** + * since we have a div surronding the main input, we need to + * route the class assignaments to div + */ + override public function set className(value:String):void + { + if (_className != value) + { + COMPILE::JS + { + positioner.className = typeNames ? value + ' ' + typeNames : value; + } + _className = value; + dispatchEvent(new Event("classNameChanged")); + } + } + /** */ COMPILE::JS http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed6fdc91/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as index fac0607..3730cf5 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as @@ -49,6 +49,8 @@ package org.apache.flex.mdl public function TextInput() { super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; } COMPILE::JS @@ -76,12 +78,14 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { + typeNames = "mdl-textfield mdl-js-textfield"; + var div:HTMLDivElement = document.createElement('div') as HTMLDivElement; - div.className = "mdl-textfield mdl-js-textfield"; + div.className = typeNames; var input:HTMLInputElement = document.createElement('input') as HTMLInputElement; input.setAttribute('type', 'text'); - input.className = 'mdl-textfield__input'; + input.className = "mdl-textfield__input"; //attach input handler to dispatch flexjs change event when user write in textinput //goog.events.listen(element, 'change', killChangeHandler); @@ -107,9 +111,29 @@ package org.apache.flex.mdl return element; } + private var _className:String; + + /** + * since we have a div surronding the main input, we need to + * route the class assignaments to div + */ + override public function set className(value:String):void + { + if (_className != value) + { + COMPILE::JS + { + positioner.className = typeNames ? value + ' ' + typeNames : value; + } + _className = value; + dispatchEvent(new Event("classNameChanged")); + } + } + private var _floatingLabel:Boolean = false; /** * A boolean flag to activate "mdl-textfield--floating-label" effect selector. + * Applies floating label effect. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -126,13 +150,14 @@ package org.apache.flex.mdl COMPILE::JS { - positioner.className += (_floatingLabel ? " mdl-textfield--floating-label" : ""); + className += (_floatingLabel ? " mdl-textfield--floating-label" : ""); } } protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes * * @langversion 3.0 * @playerversion Flash 10.2 @@ -149,7 +174,7 @@ package org.apache.flex.mdl COMPILE::JS { - positioner.className += (_ripple ? " mdl-js-ripple-effect" : ""); + className += (_ripple ? " mdl-js-ripple-effect" : ""); } } }
