@@ -21,13 +21,14 @@ package fb.util { // Simple util builds an html link out of a string and a url public static function linkify(str:String, url:String, - bold:Boolean=true):String { + bold:Boolean=true, + color:String='3b5998'):String { if (empty(str)) return ''; var link:String = '<a href="' + url + '">' + str + '</a>'; if (bold) { link = '<b>' + link + '</b>'; } - return colorize(link, '3b5998'); + return colorize(link, color); } // Wrap some text in a font color tag fb/util/StringUtil.as @@ -13,35 +13,20 @@ See the License for the specific language governing permissions and limitations under the License. --> -<!-- This HBox acts shows who Likes an entry in the Stream. - There's exactly one of these in every NileRenderer --> -<util:AnimatedCanvas xmlns:mx="http://www.adobe.com/2006/mxml" - xmlns:util="fbair.util.display.*" - animateOut="true" - animateOnce="true" > +<!-- Sentence of who likes this. + eg. "Bobby, Mary, You and 14 others like this." --> +<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml" + styleName="likeText" + htmlText="{data.likes.likeText}" > - <mx:HBox width="100%" - styleName="likesRenderer" > - - <mx:Image source="@Embed('../../assets/like.png')" /> - - <!-- Sentence of who likes this. - eg. "Bobby, Mary, You and 14 others like this." --> - <mx:Text id="likeText" - htmlText="{data.likes.likeText}" - width="100%" /> - - </mx:HBox> <mx:Script><![CDATA[ import fb.FBEvent; import fb.util.StringUtil; + import fb.util.Output; import fbair.nile.Nile; import fbair.util.ProfileCache; - // Total explicit names provided (friends + others) - private var totalNames:int = 0; - // "data" in this context is stream.likes override public function set data(new_data:Object):void { if (data && data.likes.likeText) @@ -56,7 +41,6 @@ liked_ids = liked_ids.concat(data.likes.friends); if (data.likes.sample is Array) liked_ids = liked_ids.concat(data.likes.sample); - totalNames = liked_ids.length; // Fetch the names we need, or just update asap if none if (liked_ids.length > 0) { @@ -81,67 +65,64 @@ // Function painstakingly applies the logic of // english to our "Likes" sentence. private function buildLikeText():String { - var remaining:int = totalNames; + var builtText:String = ""; + var likePeople:Array = new Array(); + + if (data.likes.friends is Array) + for each (var friend:int in data.likes.friends) + likePeople.push(friend); + + if (data.likes.sample is Array) + for each (var sample:int in data.likes.sample) + likePeople.push(sample); + + var numToShow:int = data.likes.user_likes ? 1 : 2; + if (likePeople.length > numToShow) + likePeople = likePeople.slice(-numToShow); + + var remaining:int = likePeople.length; if (data.likes.user_likes) remaining++; var others:int = data.likes.count - remaining; if (others > 0) remaining++; - var builtText:String = ""; - if (data.likes.user_likes) { - builtText += "You"; remaining--; - if (remaining == 1) builtText += " and "; - else if (remaining >= 2) builtText += ", "; - } - - if (data.likes.friends is Array) { - for each (var friend:int in data.likes.friends) { - remaining--; - if (ProfileCache.hasProfile(String(friend))) { - builtText += StringUtil.linkify( - ProfileCache.cache[String(friend)].name, - ProfileCache.cache[String(friend)].url); - if (remaining == 1) builtText += " and "; - else if (remaining >= 2) builtText += ", "; - } - } + builtText += 'You'; + if (remaining == 1) builtText += ' and '; + else if (remaining >= 2) builtText += ', '; } - if (data.likes.sample is Array) { - for each (var sample:int in data.likes.sample) { - remaining--; - if (ProfileCache.hasProfile(String(sample))) { - builtText += StringUtil.linkify( - ProfileCache.cache[String(sample)].name, - ProfileCache.cache[String(sample)].url); - if (remaining == 1) builtText += " and "; - else if (remaining >= 2) builtText += ", "; - } + for each (var person:int in likePeople) { + remaining--; + if (ProfileCache.hasProfile(String(person))) { + var prof:Object = ProfileCache.cache[String(person)]; + builtText += + StringUtil.linkify(prof.name, prof.url, false, '808080'); + if (remaining == 1) builtText += ' and '; + else if (remaining >= 2) builtText += ', '; } } if (others > 0) { var othersText:String; - if (builtText != "") { - othersText = others + " other" + (others == 1 ? "" : "s"); - } else { - othersText = others + (others == 1 ? " person" : " people"); - } - if (data.permalink) { - builtText += StringUtil.linkify(othersText, data.permalink); - } else { + if (builtText.length > 0) + othersText = StringUtil.pluralize('other', others); + else + othersText = others + (others == 1 ? ' person' : ' people'); + + if (data.permalink) + builtText += + StringUtil.linkify(othersText, data.permalink, false, '808080'); + else builtText += othersText; - } } - if (totalNames == 1 && others == 0 && !data.user_likes) { - builtText += " likes this."; - } else { - builtText += " like this."; - } + if (likePeople.length == 1 && others == 0 && !data.user_likes) + builtText += ' likes this'; + else + builtText += ' like this'; return builtText; } ]]></mx:Script> -</util:AnimatedCanvas> +</mx:Text> fbair/nile/renderers/LikesRenderer.mxml @@ -17,9 +17,9 @@ use on facebook for getting and displaying likes and comments about stories, photos, and other content --> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" - xmlns:renderer="fbair.nile.renderers.*" - xmlns:util="fbair.util.display.*" - creationComplete="creationComplete(event)" > + xmlns:renderer="fbair.nile.renderers.*" + xmlns:util="fbair.util.display.*" + creationComplete="creationComplete(event)" > <!-- We use these fades when replacing the preview with the renderer --> <mx:Fade id="fadeOut" @@ -32,9 +32,9 @@ <!-- The UFI Preview displays if there is any feedback to a stream story. Clicking the preview replaces it with the UFI renderer --> - <mx:HBox width="100%" - id="ufiPreview" - styleName="ufiPreview" > + <util:FlowBox width="100%" + id="ufiPreview" + styleName="ufiPreview" > <!-- Display number of comments, or add a comment --> <util:FBButton autoStyle="true" @@ -64,19 +64,10 @@ </util:FBButton> <!-- Show how many people like this in the preview --> - <mx:HBox id="likesPreview" - styleName="likesPreview" - visible="{data.likes.count > 0}" - includeInLayout="{data.likes.count > 0}" - showEffect="fadeIn" - click="{ufiMode = ufiMode == UFI_PREVIEW ? - UFI_DETAIL : UFI_PREVIEW}" > - <util:LinkLabel styleName="likesPreviewLabel" - text="{likeTitle(data.likes.count, - data.likes.user_likes)}" /> - </mx:HBox> - - </mx:HBox> + <renderer:LikesRenderer id="likesRenderer" + maxWidth="{width}" + data="{data}" /> + </util:FlowBox> <!-- The UFI renderer displays the actual likes and comments --> <util:AnimatedCanvas id="ufiDetail" @@ -89,12 +80,7 @@ <mx:VBox width="100%" id="ufiRenderers" styleName="ufiRenderers" > - <!-- These renderers show the Likes and Comments for this entry --> - <renderer:LikesRenderer id="likesRenderer" - width="100%" - data="{data}" - animateIn="{ufiRevealed}" /> - + <!-- These renderers show the Comments for this entry --> <renderer:CommentsRenderer id="commentsRenderer" width="100%" data="{data}" /> @@ -167,13 +153,6 @@ }); } - private function likeTitle(number:int, userLikes:Boolean):String { - if (number == 1 && userLikes) - return 'You like this'; - return number + ((number == 1) ? ' person likes this' - : ' people like this'); - } - private function commentTitle(comments:Number, mode:int):String { if (comments == 0) { return mode == UFI_PREVIEW ? 'Comment' : 'Cancel'; @@ -253,7 +232,7 @@ // Called when we deleted a comment private function commentRemoved(event:FBEvent):void { // If not revealed, or not us, then don't care - if (!commentsRenderer.revealed || + if (!commentsRenderer.revealed || event.data.post_id != data.post_id) return; commentsRenderer.removeLocalComment(event.data.id); @@ -284,7 +263,7 @@ // Mark latest update commentsRenderer.markLatestUpdate(); - + // Reveal us, if needed if (data.filter_key == NileContainer.CurrentFilter) ufiMode = UFI_DETAIL; fbair/nile/renderers/UFI.mxml @@ -103,6 +103,12 @@ paddingBottom: 2; } +.likeText { + paddingTop: 2; + paddingLeft: 2; + color: #aaaaaa; +} + .mediaImage { bottom: 1; top: 1; @@ -180,6 +186,7 @@ paddingTop: -6; paddingLeft: -6; horizontalGap: -2; + verticalGap: -4; } .ufiRenderers { fbair/styles/renderers.css @@ -18,12 +18,14 @@ package fbair.util.display { private var _childrenChanged:Boolean = false; public function FlowBox() { - this.addEventListener(ResizeEvent.RESIZE, resizeHanlder); + this.addEventListener(ResizeEvent.RESIZE, resizeHandler); } // If this component is resized, the child // components must be laid out again - private function resizeHanlder(e:Event):void { + private function resizeHandler(event:Event):void { + //invalidateSize(); + validateNow(); relayoutChildren(); } @@ -144,7 +146,7 @@ package fbair.util.display { // Flag that the children of this control have changed, // and should be redrawn at the next convenient time - private function relayoutChildren():void { + public function relayoutChildren(event:Event = null):void { _childrenChanged = true; invalidateProperties(); } @@ -174,37 +176,43 @@ package fbair.util.display { public override function addChild(child:DisplayObject):DisplayObject { _children.addItem(child); relayoutChildren(); + child.addEventListener(ResizeEvent.RESIZE, relayoutChildren); return child; } - + override public function addChildAt(child:DisplayObject, index:int):DisplayObject { _children.addItemAt(child, index); relayoutChildren(); + child.addEventListener(ResizeEvent.RESIZE, relayoutChildren); return child; } - + override public function removeChild(child:DisplayObject):DisplayObject { var tmp:DisplayObject = _children.removeItemAt( _children.getItemIndex(child)) as DisplayObject; + tmp.removeEventListener(ResizeEvent.RESIZE, relayoutChildren); relayoutChildren(); return tmp; } - + override public function removeChildAt(index:int):DisplayObject { var tmp:DisplayObject = _children.removeItemAt(index) as DisplayObject; + tmp.removeEventListener(ResizeEvent.RESIZE, relayoutChildren); relayoutChildren(); return tmp; } - + override public function removeAllChildren():void { + for each (var child:DisplayObject in _children) + child.removeEventListener(ResizeEvent.RESIZE, relayoutChildren); _children.removeAll(); relayoutChildren(); } - + override public function getChildren():Array { return _children.toArray(); } - + override public function getChildIndex(child:DisplayObject):int { return _children.getItemIndex(child); } @@ -219,8 +227,10 @@ package fbair.util.display { var tmp:Array = value as Array; _children = new ArrayCollection(); - for each (var child:DisplayObject in tmp) - _children.addItem( child ); + for each (var child:DisplayObject in tmp) { + _children.addItem(child); + child.addEventListener(ResizeEvent.RESIZE, relayoutChildren); + } } relayoutChildren(); } fbair/util/display/FlowBox.as 0b9e3fa457d87ff086bc8faa753447062cfd5d29 Lee Byron leebyron@lbyron.wan http://github.com/jubishop/Facebook-for-Adobe-AIR/commit/fa25a7b8e40027597a29af5cb2cee4d432f9e960 fa25a7b8e40027597a29af5cb2cee4d432f9e960 2009-05-28T01:51:48-07:00 2009-05-28T01:51:48-07:00 more subtle likes renderer. not quite perfect yet, but getting there cdc4fd5e813bbf687eec7e6a78bcef822818cd2e Lee Byron leebyron@lbyron.wan