You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/10 18:55:56 UTC
git commit: [flex-asjs] [refs/heads/feature/mdl] - Fix classNames and
typeNames to allow user to assign their own without remove MDL ones
Repository: flex-asjs
Updated Branches:
refs/heads/feature/mdl 1cb8e192b -> 2f1169eef
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/2f1169ee
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/2f1169ee
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/2f1169ee
Branch: refs/heads/feature/mdl
Commit: 2f1169eef85f35227c9bb040d2d8aa165fa68273
Parents: 1cb8e19
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 10 19:55:50 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 10 19:55:50 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/2f1169ee/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/2f1169ee/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/2f1169ee/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/2f1169ee/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/2f1169ee/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" : "");
}
}
}