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/12 09:07:27 UTC
[6/6] git commit: [flex-asjs] [refs/heads/feature/mdl] - Fix
classNames and typeNames to allow user to assign their own without remove MDL
ones
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/feature/mdl
Commit: ed6fdc913e0f00d3b9604af094d5d8a3187ec352
Parents: 4d6fa02
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 10 19:55:50 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
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" : "");
}
}
}