flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - MDL Search-Expandable bead for TextField MDL control
Date Sat, 31 Dec 2016 16:40:20 GMT
Repository: flex-asjs
Updated Branches:
  refs/heads/develop 858d473f3 -> 48ba825ea


MDL Search-Expandable bead for TextField MDL control


Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/48ba825e
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/48ba825e
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/48ba825e

Branch: refs/heads/develop
Commit: 48ba825ea72eccd32e15477cb2fbb5f236836216
Parents: 858d473
Author: Carlos Rovira <carlosrovira@apache.org>
Authored: Sat Dec 31 17:40:12 2016 +0100
Committer: Carlos Rovira <carlosrovira@apache.org>
Committed: Sat Dec 31 17:40:12 2016 +0100

----------------------------------------------------------------------
 .../MDLExample/src/main/flex/TextFields.mxml    |  14 +++
 .../main/flex/org/apache/flex/mdl/TextField.as  |  14 ++-
 .../apache/flex/mdl/beads/ExpandableSearch.as   | 112 +++++++++++++++++++
 .../mdl/materialIcons/MaterialIconSearch.as     |  52 +++++++++
 .../flex/mdl/materialIcons/MaterialIconsType.as |   1 +
 .../src/main/resources/mdl-manifest.xml         |   2 +
 6 files changed, 194 insertions(+), 1 deletion(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
index 7c9b601..e53faaf 100644
--- a/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/TextFields.mxml
@@ -52,6 +52,20 @@ limitations under the License.
                 <mdl:Restrict pattern="-?[0-9]*(\.[0-9]+)?" error="Input is not a number!"/>
             </mdl:beads>
         </mdl:TextField>
+
+        <mdl:TextField>
+            <mdl:beads>
+                <mdl:TextPrompt prompt="Expandible..."/>
+                <mdl:ExpandableSearch/>
+            </mdl:beads>
+        </mdl:TextField>
+
+        <mdl:TextField>
+            <mdl:beads>
+                <mdl:TextPrompt prompt="Expandible..."/>
+                <mdl:ExpandableSearch/>
+            </mdl:beads>
+        </mdl:TextField>
     
     </mdl:Grid>
 

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as
index e84f058..8b43101 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextField.as
@@ -77,6 +77,18 @@ package org.apache.flex.mdl
             {
                 _input = value;
             }
+
+            private var _label:HTMLLabelElement;
+
+            public function get label():HTMLLabelElement
+            {
+                return _label;
+            }
+
+            public function set label(value:HTMLLabelElement):void
+            {
+                _label = value;
+            }
         }
 
         /**
@@ -102,7 +114,7 @@ package org.apache.flex.mdl
             //goog.events.listen(element, 'change', killChangeHandler);
             goog.events.listen(input, 'input', textChangeHandler);
             
-            var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
+            label = document.createElement('label') as HTMLLabelElement;
             label.className = "mdl-textfield__label";
 
             textNode = document.createTextNode('') as Text;

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ExpandableSearch.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ExpandableSearch.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ExpandableSearch.as
new file mode 100644
index 0000000..c853bdc
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ExpandableSearch.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flex.mdl.beads
+{	
+	import org.apache.flex.core.IBead;
+	import org.apache.flex.core.IStrand;
+	import org.apache.flex.core.UIBase;
+
+    import org.apache.flex.mdl.TextField;
+    import org.apache.flex.mdl.materialIcons.MaterialIconSearch;
+	
+	/**
+	 *  The ExpandableSearch bead class is a specialty bead that can be used to decorate a TextField
MDL control.
+     *  It makes the TextField to expand when user clicks the associated search icon.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion FlexJS 0.0
+	 */
+	public class ExpandableSearch implements IBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 */
+		public function ExpandableSearch()
+		{
+		}
+		
+        /**
+         * Provides unique name
+         */
+        public static var tfCounter:int = 0;
+
+		private var host:UIBase;
+
+		private var _strand:IStrand;		
+		/**
+		 *  @copy org.apache.flex.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion FlexJS 0.0
+		 *  @flexjsignorecoercion org.apache.flex.mdl.TextInput;
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			COMPILE::JS
+			{
+				host = value as UIBase;
+				
+				if (host is TextField)
+				{
+                    var searchId:String = '_searchId_' + ExpandableSearch.tfCounter++;
+
+					host.positioner.classList.add("mdl-textfield--expandable");
+
+                    var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
+                    label.className = "mdl-button mdl-js-button mdl-button--icon";
+                    label.setAttribute('for', searchId);
+                    
+                    var i:HTMLElement = document.createElement('i') as HTMLElement;
+                    i.className = "material-icons";
+                    i.innerHTML = "search";
+
+                    label.appendChild(i);
+
+                    host.positioner.appendChild(label);
+
+                    var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+                    div.className = "mdl-textfield__expandable-holder";
+
+                    host.positioner.appendChild(div);
+
+                    div.appendChild(TextField(host).input);
+                    div.appendChild(TextField(host).label);
+
+                    TextField(host).input.setAttribute('id', searchId);
+                    TextField(host).label.innerHTML = "Expandible...";
+				}
+				else
+				{
+					throw new Error("Host component must be an MDL TextField.");
+				}
+			}
+		}
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as
new file mode 100644
index 0000000..0a1cf5e
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconSearch.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.flex.mdl.materialIcons
+{
+    import org.apache.flex.mdl.supportClasses.MaterialIconBase;
+
+    /**
+     *  The MaterialIconSearch bead class is a specialty bead that add "search" icon
+     *  to component taken from "material-icons"
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion FlexJS 0.0
+     */
+    public class MaterialIconSearch extends MaterialIconBase
+    {
+        /**
+         *  constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion FlexJS 0.0
+         */
+        public function MaterialIconSearch()
+        {
+            super();
+        }
+        
+        override protected function get iconText():String
+        {
+            return MaterialIconsType.SEARCH;
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as
b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as
index 0f2fc1e..1174287 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/materialIcons/MaterialIconsType.as
@@ -28,5 +28,6 @@ package org.apache.flex.mdl.materialIcons
         public static const EVENT:String = "event";
         public static const FACE:String = "face";
         public static const MORE_VERT:String = "more_vert";
+        public static const SEARCH:String = "search";
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/48ba825e/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
index dec087f..8d6dd57 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -27,6 +27,7 @@
     <component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
     <component id="Switch" class="org.apache.flex.mdl.Switch"/>
     <component id="TextPrompt" class="org.apache.flex.mdl.beads.TextPrompt"/>
+    <component id="ExpandableSearch" class="org.apache.flex.mdl.beads.ExpandableSearch"/>
     <component id="Restrict" class="org.apache.flex.mdl.beads.Restrict"/>
     <component id="Disabled" class="org.apache.flex.mdl.beads.Disabled"/>
     <component id="Slider" class="org.apache.flex.mdl.Slider"/>
@@ -81,6 +82,7 @@
     <component id="MaterialIconEvent" class="org.apache.flex.mdl.materialIcons.MaterialIconEvent"/>
     <component id="MaterialIconFace" class="org.apache.flex.mdl.materialIcons.MaterialIconFace"/>
     <component id="MaterialIconMoreVert" class="org.apache.flex.mdl.materialIcons.MaterialIconMoreVert"/>
+    <component id="MaterialIconSearch" class="org.apache.flex.mdl.materialIcons.MaterialIconSearch"/>
     <component id="ContactChip" class="org.apache.flex.mdl.beads.ContactChip"/>
     <component id="ContactImageChip" class="org.apache.flex.mdl.beads.ContactImageChip"/>
     <component id="Tooltip" class="org.apache.flex.mdl.beads.Tooltip"/>


Mime
View raw message