Dashing-Widget that displays a list of tweets

README.md

Twitter-List

Description

Shows a list of tweets, basically it can show any list of comments. We use it to display our Twitter account's latest "saved search" - results.

Dependencies

• Twitter for Ruby: gem install twitter (of course only if you want do display tweets.)

Usage

• Copy comment_list.html, comment_list.coffee, comment_list.scss into the /widgets/comment_list/ directory.
• Put the file twitter_search.rb into the /jobs/ directory.
• Add your Twitter API credentials to twitter_search.rb
• Customize the twitter-search as needed. E.g. add language, change number of tweets to grab. tweets = client.search(search+ ' -RT', {result_type: 'recent', lang: 'de' }).take(10)

Of course you can display any information. Just create a job to fetch the data. Currently, these fields are used:

• name The username
• body The comment body. Hashtags and twitter-handles (@username) are highlighted by javascript.
• avatar The user's avatar
• time Creation time of the tweet
• image An image can be displayed under the comment.

##Example widget:

<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
    <div data-id="twitter_search" data-view="CommentList" ></div>
</li>

comment-list.html

<div class="wrap">
    <h1 class="title" data-bind="title"></h1>

    <div class="comment-list">
        <div data-foreach-comment='comments' class="comment-container">
          <h3><img class="avatar" data-bind-src='comment.avatar'/><span data-bind='comment.name' class="name"></span></h3>
          <p class="comment" data-bind='comment.body | raw | parseHashTag | parseTwitterUser | fixAmp | raw'></p>
          <span class="time" data-bind='comment.time'></span>
          <div class="tweet-img-wrapper">
            <img class="tweet-img" data-showif="comment.img" data-bind-src="comment.img" alt="">
          </div>
        </div>
    </div>


    <p class="more-info" data-bind="moreinfo"></p>
    <p class="updated-at" data-bind="updatedAtMessage"></p>
</div>

comment_list.coffee

class Dashing.CommentList extends Dashing.Widget

  Batman.Filters.parseHashTag = (str) ->
    str.replace(/(?:[^&])([#]+[A-Za-z0-9-_öäüéß]+)/gi, (a,t) ->

      tag = t.replace("#","%23")
      '<span class="hashtag">'+t.link("https://twitter.com/search?q="+tag)+'</span>'
    ).replace(/^([#]+[A-Za-z0-9-_öäüéß]+)/gi, (a,t) ->
      tag = t.replace("#","%23")
      '<span class="hashtag">'+t.link("https://twitter.com/search?q="+tag)+'</span>'
    )

  Batman.Filters.parseTwitterUser = (str) ->
    str.replace(/[@]+[A-Za-z0-9-_]+/g, (t) ->

      '<span class="twitter-user">'+t.link("https://twitter.com/"+t)+'</span>'
    )

  Batman.Filters.fixAmp = (str) ->
    str.replace(/&amp;amp;/g, '&amp;')

  @accessor 'updatedAtMessage', ->
    if updatedAt = @get('updatedAt')
      timestamp = new Date(updatedAt * 1000)
      hours = timestamp.getHours()
      minutes = ("0" + timestamp.getMinutes()).slice(-2)
      seconds = ("0" + timestamp.getSeconds()).slice(-2)
      "Last updated: #{hours}:#{minutes}:#{seconds}"

  ready: ->

    $node = $(@node)
    $wrap = $node.find('.wrap')
    $commentList = $node.find('.comment-list')
    $title = $node.find('.title')
    $moreInfo = $node.find('.more-info')
    $updatedAt = $node.find('.updated-at')
    container = $node.parent()

    dimensions = Dashing.widget_base_dimensions
    margins = Dashing.widget_margins
    paddings = parseInt($node.css('padding-top'), 10) + parseInt($node.css('padding-bottom'), 10)

    moreInfoHeight= parseInt($moreInfo.outerHeight(true), 10) || 0;
    updatedAtHeight = parseInt($updatedAt.outerHeight(true), 10) || 0;
    titleHeight = parseInt($title.outerHeight(true), 10) || 0;
    listMargin = parseInt($commentList.css('margin-top'), 10) + parseInt($commentList.css('margin-bottom'), 10) || 0;

    wrapperHeight = (container.data('sizey') * dimensions[1]) + (2 * Dashing.widget_margins[1]) - paddings
    listHeight = wrapperHeight - moreInfoHeight - updatedAtHeight - titleHeight - listMargin;


    # console.log("listHeight: #{listHeight} MoreInfoHeight: #{moreInfoHeight} TitleHeight: #{titleHeight} UpdatedAtHeight: #{updatedAtHeight}")

    $wrap.css({height: wrapperHeight+'px', overflow: 'hidden'})
    $commentList.css({ height: listHeight+'px'})



  onData: (data) ->
    console.log('OnData:', data)

comment_list.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:   darken(#eb9c3c, 5%);

$comment-color: 	   rgba(255, 255, 255, 1);
$hashtag-bg: 		     rgba(adjust-hue(darken($background-color, 10%), -60deg), 0.2);
$twitter-user-bg:    rgba(adjust-hue(darken($background-color, 10%), -150deg), 0.2);
$title-color:        rgba(255, 255, 255, 0.7);
$moreinfo-color:     rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-comment styles
// ----------------------------------------------------------------------------
.widget-comment-list {
	overflow: hidden;
	height: 100%;
  background-color: $background-color;

  .title {
    color: $title-color;
    margin-bottom: 15px;
  }

  .comment-list {
		overflow: hidden;
		margin-bottom: 15px;
  }

  .comment-container {
  	color: $comment-color;
		text-align: left;
		border-bottom: 1px solid rgba(255,255,255,0.25);
		padding-bottom: 5px;
		padding-top: 5px;
		position: relative;
		&:first-child {
			border-top: 1px solid rgba(255,255,255,0.25);
		}
		h3 {
			font-size: 16px;
		}
		.comment {
			font-size: 15px;
			font-weight: 200;
			line-height: 20px;
			margin-left: 45px;
		}
		.hashtag {
			padding-left: 2px;
			padding-right: 2px;
			background-color: $hashtag-bg;
			font-weight: 500;
			display: inline-block;
			&:hover{
				background-color: rgba(darken($hashtag-bg, 25%), 0.5);
			}
		}

		.twitter-user {
			padding-left: 2px;
			padding-right: 2px;
			background-color: $twitter-user-bg;
			font-weight: 500;
			display: inline-block;
			&:hover{
				background-color: rgba(darken($twitter-user-bg, 25%), 0.5);
			}
		}
		.tweet-img {
			margin-left: 45px;
			display: block;
			max-width: 100%;
			height: auto;
			margin-top: 5px;
		}
		.avatar {
			width: 40px;
			margin-right: 5px;
		}
		.time {
			position: absolute;
			right: 0px;
			top: 2px;
			letter-spacing: 1px;
			font-size: 10px;
			color: $comment-color;
		}
  }


  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
  }

}

twitter-list.png

twitter_search.rb

require 'twitter'


client = Twitter::REST::Client.new do |config|
  config.consumer_key        = ""
  config.consumer_secret     = ""
  config.access_token        = ""
  config.access_token_secret = ""
end


SCHEDULER.every '180s', :first_in => 0 do |job|
    begin
        searches = client.saved_searches()
        search = searches.last.query
        tweets = client.search(search+ ' -RT', { result_type: 'recent' }).take(10)
        tweets.map! do |tweet|

                result = { 
                  name: tweet.user.name, 
                  time: tweet.created_at.strftime("%d.%m.%Y %H:%M:%S"), 
                  body: html_escape(tweet.text), 
                  avatar: tweet.user.profile_image_url_https.to_s
                }

                if tweet.media.size > 0
                    photomedia = tweet.media.select{|media| media.is_a? Twitter::Media::Photo }.first
                    result['img'] = photomedia.media_url_https.to_s + ":medium"
                end

                result
        end
        send_event('twitter_search', {
          comments: tweets, 
          title: search, 
          moreinfo: "Twitter-Search: #{search}"
        })
    rescue Twitter::Error
      puts "\e[33mFor the twitter widget to work, you need to put in your twitter API keys in the jobs/twitter.rb file.\e[0m"
    end
end

yeah no kidding... Please upload the HTML !! :)

Thank you @bastibeckr

Would be nice if you upload comment_list.html without it widget doesn't work.

Sorry : ) didnt read the comments. I uploaded the HTML, hope that helps.

Update: So I see I am not the first one missing comments on gists... here and here... Does anyone know how to get around this without manually checking for new comments on the gist page?

@placyd @MartynKeigher @jmmarino @cpoissonnier

I had to do some modifications before I could get this working. If you're using smashing install [this gist id], the html file is put into the wrong directory. Put it in the same directory as the scss and coffee file. 2nd, the html_escape(tweet.text) method is an erb method. I removed it and things were fine.