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/feature/fontawesome Commit: 48ba825ea72eccd32e15477cb2fbb5f236836216 Parents: 858d473 Author: Carlos Rovira <[email protected]> Authored: Sat Dec 31 17:40:12 2016 +0100 Committer: Carlos Rovira <[email protected]> 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"/>
