On Mon, Jan 9, 2017 at 12:21 AM, Piotr Zarzycki <piotrzarzyck...@gmail.com> wrote:
> Hi Om, > > If I change "pulse" in Animation class using binding I think it won't > change element.classList.toggle('fa-pulse',_pulse);. Maybe it would be > good to have this line inside set ? > Yes, I was wondering about this. I dint see that pattern in the other (MDL) classes, so I thought we don't need this. I will go ahead and make the change. I think this is where we are missing an invalidation mechanism. We are updating properties on the fly and that will interfere with the browser's layout invalidation system. Thanks, Om > > Thanks, > Piotr > > 2017-01-09 9:14 GMT+01:00 <bigosma...@apache.org>: > >> Repository: flex-asjs >> Updated Branches: >> refs/heads/feature/fontawesome b7a3da36c -> 5c227d430 >> >> >> Add Animate bead for FontAwesomeIcon >> >> >> Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo >> Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/5c227d43 >> Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5c227d43 >> Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5c227d43 >> >> Branch: refs/heads/feature/fontawesome >> Commit: 5c227d4302f123c023e0f073caf4438d7c89f36f >> Parents: b7a3da3 >> Author: OmPrakash Muppirala <bigosma...@gmail.com> >> Authored: Mon Jan 9 00:13:53 2017 -0800 >> Committer: OmPrakash Muppirala <bigosma...@gmail.com> >> Committed: Mon Jan 9 00:13:53 2017 -0800 >> >> ---------------------------------------------------------------------- >> .../flex/itemRenderers/MemberItemRenderer.mxml | 25 +++++- >> .../flex/org/apache/flex/fa/beads/Animate.as | 95 >> ++++++++++++++++++++ >> .../src/main/resources/fa-manifest.xml | 1 + >> 3 files changed, 118 insertions(+), 3 deletions(-) >> ---------------------------------------------------------------------- >> >> >> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c227d >> 43/examples/flexjs/FlexTeamPage_MDL/src/main/flex/ >> itemRenderers/MemberItemRenderer.mxml >> ---------------------------------------------------------------------- >> diff --git a/examples/flexjs/FlexTeamPage_MDL/src/main/flex/ >> itemRenderers/MemberItemRenderer.mxml b/examples/flexjs/FlexTeamPage >> _MDL/src/main/flex/itemRenderers/MemberItemRenderer.mxml >> index d32fc78..3d47333 100644 >> --- a/examples/flexjs/FlexTeamPage_MDL/src/main/flex/ >> itemRenderers/MemberItemRenderer.mxml >> +++ b/examples/flexjs/FlexTeamPage_MDL/src/main/flex/ >> itemRenderers/MemberItemRenderer.mxml >> @@ -80,11 +80,30 @@ limitations under the License. >> <mdl:Button colored="true" fab="true" ripple="true" >> raised="false"> >> <mdl:materialIcon> >> <fa:FontAwesomeIcon iconType="{FontAwesomeIconType >> .GLASS}" >> - fixedWidth="true" >> - showBorder="true" >> - /> >> + showBorder="true"> >> + </fa:FontAwesomeIcon> >> </mdl:materialIcon> >> </mdl:Button> >> + <mdl:Button colored="true" fab="true" ripple="true" >> raised="false"> >> + <mdl:materialIcon> >> + <fa:FontAwesomeIcon iconType="{FontAwesomeIconType >> .COG}"> >> + <fa:beads> >> + <fa:Animate /> >> + </fa:beads> >> + </fa:FontAwesomeIcon> >> + </mdl:materialIcon> >> + </mdl:Button> >> + >> + <mdl:Button colored="true" fab="true" ripple="true" >> raised="false"> >> + <mdl:materialIcon> >> + <fa:FontAwesomeIcon iconType="{FontAwesomeIconType >> .SPINNER}"> >> + <fa:beads> >> + <fa:Animate pulse="true"/> >> + </fa:beads> >> + </fa:FontAwesomeIcon> >> + </mdl:materialIcon> >> + </mdl:Button> >> + >> </mdl:CardActions> >> </mdl:Card> >> </mdl:ListItemRenderer> >> >> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c227d >> 43/frameworks/projects/FontAwesome/src/main/flex/org/apache/ >> flex/fa/beads/Animate.as >> ---------------------------------------------------------------------- >> diff --git >> a/frameworks/projects/FontAwesome/src/main/flex/org/apache/flex/fa/beads/Animate.as >> b/frameworks/projects/FontAwesome/src/main/flex/org/apache/ >> flex/fa/beads/Animate.as >> new file mode 100644 >> index 0000000..4185b0f >> --- /dev/null >> +++ b/frameworks/projects/FontAwesome/src/main/flex/org/apache/ >> flex/fa/beads/Animate.as >> @@ -0,0 +1,95 @@ >> +/////////////////////////////////////////////////////////// >> ///////////////////// >> +// >> +// 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.fa.beads { >> +import org.apache.flex.core.IBead; >> +import org.apache.flex.core.IStrand; >> +import org.apache.flex.core.UIBase; >> +import org.osmf.elements.HTMLElement; >> + >> +public class Animate implements IBead { >> + /** >> + * constructor. >> + * >> + * @langversion 3.0 >> + * @playerversion Flash 10.2 >> + * @playerversion AIR 2.6 >> + * @productversion FlexJS 0.0 >> + */ >> + public function Animate() { >> + } >> + >> + private var _strand:IStrand; >> + private var _spin:Boolean = true; >> + private var _pulse:Boolean = false; >> + >> + /** >> + * Rotate the icon >> + * >> + * @langversion 3.0 >> + * @playerversion Flash 10.2 >> + * @playerversion AIR 2.6 >> + * @productversion FlexJS 0.0 >> + */ >> + public function get spin():Boolean >> + { >> + return _spin; >> + } >> + >> + public function set spin(value:Boolean):void >> + { >> + _spin = value; >> + } >> + /** >> + * Pulse the icon, i.e. rotate with 8 steps >> + * >> + * @langversion 3.0 >> + * @playerversion Flash 10.2 >> + * @playerversion AIR 2.6 >> + * @productversion FlexJS 0.0 >> + */ >> + public function get pulse():Boolean >> + { >> + return _pulse; >> + } >> + >> + public function set pulse(value:Boolean):void >> + { >> + _pulse = value; >> + } >> + >> + /** >> + * @flexjsignorecoercion HTMLElement >> + * >> + * @param value >> + */ >> + public function set strand(value:IStrand):void >> + { >> + _strand = value; >> + >> + COMPILE::JS >> + { >> + var host:UIBase = value as UIBase; >> + var element:HTMLElement = host.element as HTMLElement; >> + element.classList.toggle('fa-spin',_spin); >> + element.classList.toggle('fa-pulse',_pulse); >> + } >> + } >> + >> +} >> +} >> >> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5c227d >> 43/frameworks/projects/FontAwesome/src/main/resources/fa-manifest.xml >> ---------------------------------------------------------------------- >> diff --git >> a/frameworks/projects/FontAwesome/src/main/resources/fa-manifest.xml >> b/frameworks/projects/FontAwesome/src/main/resources/fa-manifest.xml >> index a6fe235..04f263c 100644 >> --- a/frameworks/projects/FontAwesome/src/main/resources/fa-manifest.xml >> +++ b/frameworks/projects/FontAwesome/src/main/resources/fa-manifest.xml >> @@ -21,4 +21,5 @@ >> >> <componentPackage> >> <component id="FontAwesomeIcon" class="org.apache.flex.fa.Font >> AwesomeIcon"/> >> + <component id="Animate" class="org.apache.flex.fa.beads.Animate"/> >> </componentPackage> >> >> > > > -- > > Greetings > Piotr Zarzycki > > Flex/AIR/.NET Developer > > mobile: +48 880 859 557 > e-mail: piotrzarzyck...@gmail.com > skype: zarzycki10 > > LinkedIn: http://www.linkedin.com/piotrzarzycki > <https://pl.linkedin.com/in/piotr-zarzycki-92a53552> >