Add MdlColor bead - it's apply mdl color to strand
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/6fd44828 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/6fd44828 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/6fd44828 Branch: refs/heads/feature/mdl Commit: 6fd4482879c1145a8ff58d1777c8b276d7948963 Parents: 0fb5b00 Author: piotrz <[email protected]> Authored: Thu Dec 15 07:52:29 2016 +0100 Committer: piotrz <[email protected]> Committed: Thu Dec 15 07:52:29 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Chips.mxml | 5 +- .../org/apache/flex/mdl/beads/ContactChip.as | 108 ++++--------- .../flex/org/apache/flex/mdl/beads/MdlColor.as | 156 +++++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 1 + 4 files changed, 192 insertions(+), 78 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fd44828/examples/flexjs/MDLExample/src/main/flex/Chips.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml index e03b4c7..0f27ec5 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml @@ -45,11 +45,12 @@ limitations under the License. <mdl:GridCell column="5"> <mdl:Chip text="Contact Chip"> <mdl:beads> - <mdl:ContactChip contactText="A" color="teal" textColor="white" /> + <mdl:MdlColor color="teal" /> + <mdl:ContactChip contactText="A" /> </mdl:beads> </mdl:Chip> </mdl:GridCell> - <mdl:GridCell column="5"> + <mdl:GridCell column="5"> <mdl:Chip text="Contact Chip"> <mdl:beads> <mdl:ContactChip contactText="A" color="teal" textColor="white"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fd44828/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as index 27da3ec..13b5cd2 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as @@ -20,11 +20,17 @@ 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.html.Span; import org.apache.flex.mdl.supportClasses.IMdlColor; import org.apache.flex.mdl.supportClasses.IMdlTextColor; + import org.apache.flex.utils.StrandUtils; - + COMPILE::JS + { + import org.apache.flex.core.UIHTMLElementWrapper; + import org.apache.flex.core.UIBase; + import org.apache.flex.core.WrappedHTMLElement; + } /** * The ContactChip bead class is a specialty bead that can be used to add additional * button to Chip MDL control. @@ -35,10 +41,8 @@ package org.apache.flex.mdl.beads * @productversion FlexJS 0.0 */ COMPILE::SWF - public class ContactChip implements IMdlColor, IMdlTextColor + public class ContactChip implements IMdlTextColor { - private var _color:String; - private var _colorWeight:String; private var _textColor:String; private var _textColorWeight:String; @@ -57,32 +61,6 @@ package org.apache.flex.mdl.beads /** * @inheritDoc */ - public function get color():String - { - return _color; - } - - public function set color(value:String):void - { - _color = value; - } - - /** - * @inheritDoc - */ - public function get colorWeight():String - { - return _colorWeight; - } - - public function set colorWeight(value:String):void - { - _colorWeight = value; - } - - /** - * @inheritDoc - */ public function get textColor():String { return _textColor; @@ -108,7 +86,7 @@ package org.apache.flex.mdl.beads } COMPILE::JS - public class ContactChip implements IBead, IMdlColor, IMdlTextColor + public class ContactChip implements IBead, IMdlTextColor { /** * constructor. @@ -122,13 +100,11 @@ package org.apache.flex.mdl.beads { } - private var _color:String = ""; - private var _colorWeight:String = ""; private var _textColor:String = ""; private var _textColorWeight:String = ""; private var _contactText:String = ""; - private var contact:HTMLSpanElement; + private var contact:Span; private var textNode:Text; private var _strand:IStrand; @@ -138,6 +114,7 @@ package org.apache.flex.mdl.beads * @flexjsignorecoercion HTMLSpanElement * @flexjsignorecoercion Text * @flexjsignorecoercion HTMLButtonElement + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement * * @param value */ @@ -155,19 +132,19 @@ package org.apache.flex.mdl.beads textNode = document.createTextNode('') as Text; textNode.nodeValue = _contactText; - - contact = document.createElement("span") as HTMLSpanElement; - contact.classList.add("mdl-chip__contact"); - - var contactColor:String = getContactColor(); + + contact = new Span(); + contact.element.classList.add("mdl-chip__contact"); + + loadColorBead(); + var contactTextColor:String = getContactTextColor(); - contact.classList.toggle(contactColor, _color); - contact.classList.toggle(contactTextColor, _textColor); + contact.element.classList.toggle(contactTextColor, _textColor); - contact.appendChild(textNode); + contact.element.appendChild(textNode); - element.insertBefore(contact, host["chipTextSpan"]); + element.insertBefore(contact.element, host["chipTextSpan"]); } else { @@ -175,35 +152,21 @@ package org.apache.flex.mdl.beads } } - public function set contactText(value:String):void - { - _contactText = value; - } - - /** - * @inheritDoc - */ - public function get color():String - { - return _color; - } - - public function set color(value:String):void + private function loadColorBead():void { - _color = value; - } + var mdlColorBead:IBead = StrandUtils.loadBead(MdlColor, "MdlColor", _strand); - /** - * @inheritDoc - */ - public function get colorWeight():String - { - return _colorWeight; + if (mdlColorBead != null) + { + //Maybe removing also css manually from strand is a solution ? + _strand.removeBead(mdlColorBead); + contact.addBead(mdlColorBead); + } } - public function set colorWeight(value:String):void + public function set contactText(value:String):void { - _colorWeight = value; + _contactText = value; } /** @@ -231,14 +194,7 @@ package org.apache.flex.mdl.beads { _textColorWeight = value; } - - private function getContactColor():String - { - return _colorWeight ? - "mdl-color--".concat(_color, "-", _colorWeight) : - "mdl-color--".concat(_color); - } - + private function getContactTextColor():String { return _textColorWeight ? http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fd44828/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MdlColor.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MdlColor.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MdlColor.as new file mode 100644 index 0000000..5cc6912 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MdlColor.as @@ -0,0 +1,156 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.supportClasses.IMdlColor; + + + /** + * The MdlColor bead apply color and colorWeight provided by google style color. + * + * https://material.google.com/style/color.html#color-color-palette + * https://gitlab.com/material/colors/blob/master/colors.html + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::SWF + public class MdlColor implements IMdlColor + { + private var _color:String; + private var _colorWeight:String; + + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function MdlColor() + { + + } + + /** + * @inheritDoc + */ + public function get color():String + { + return _color; + } + + public function set color(value:String):void + { + _color = value; + } + + /** + * @inheritDoc + */ + public function get colorWeight():String + { + return _colorWeight; + } + + public function set colorWeight(value:String):void + { + _colorWeight = value; + } + } + + COMPILE::JS + public class MdlColor implements IBead, IMdlColor + { + public function MdlColor() + { + } + + private var _color:String = ""; + private var _colorWeight:String = ""; + + private var _strand:IStrand; + + /** + * @flexjsignorecoercion HTMLElement + * + * @param value + */ + public function set strand(value:IStrand):void + { + _strand = value; + + var host:UIBase = value as UIBase; + var element:HTMLElement = host.element as HTMLElement; + + var elementColor:String = getMdlElementColor(); + element.classList.toggle(elementColor, hasColor || hasColorWeight); + } + + public function get color():String + { + return _color; + } + + public function set color(value:String):void + { + _color = value; + } + + public function get colorWeight():String + { + return _colorWeight; + } + + public function set colorWeight(value:String):void + { + _colorWeight = value; + } + + private function get hasColor():Boolean + { + return _color != null && _color != ""; + } + + private function get hasColorWeight():Boolean + { + return _colorWeight != null && _colorWeight != ""; + } + + private function getMdlElementColor():String + { + if (hasColor && hasColorWeight) + { + return "mdl-color--".concat(_color, "-", _colorWeight); + } + else if (hasColor) + { + return "mdl-color--".concat(_color); + } + + return ""; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6fd44828/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 19820c4..ee56195 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -80,4 +80,5 @@ <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"/> + <component id="MdlColor" class="org.apache.flex.mdl.beads.MdlColor"/> </componentPackage>
