├── LICENSE ├── README.md ├── demo ├── demo.css └── demo.html └── src └── twitter-timeline.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2013 Timothy E. Johansson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twitter Timeline Directive 2 | An AngularJS directive of Twitter's Embedded Timeline with support for custom CSS. Used at the [UserApp](https://www.userapp.io/) Dashboard. 3 | 4 | ## Demo 5 | [CSS Customized Twitter Timeline](http://userapp-io.github.io/twitter-timeline-angularjs/demo/demo.html) 6 | 7 | ## Requirements 8 | 9 | * AngularJS 10 | * jQuery 11 | * A Twitter Widget Id ([https://twitter.com/settings/widgets/new](https://twitter.com/settings/widgets/new)) 12 | 13 | ## Getting Started 14 | 15 | 1. Include the directive in your app 16 | 2. Go to [https://twitter.com/settings/widgets/new](https://twitter.com/settings/widgets/new) and create a new widget (timeline) 17 | 3. From the generated code, copy the Widget Id inside ``data-widget-id="XXXXXXXXXXXXX"`` 18 | 4. Add this line to your HTML 19 | 20 | > <div twitter-timeline="TWITTER-WIDGET-ID" auto-resize="true" css-url="path/to/custom.css" data-tweet-limit="5">Loading tweets...</div> 21 | 22 | ## Usage 23 | > <div twitter-timeline="TWITTER-WIDGET-ID" auto-resize="true" css-url="path/to/custom.css" data-tweet-limit="5">Loading tweets...</div> 24 | 25 | * ``twitter-timeline`` 26 | The Widget Id, get one here: [https://twitter.com/settings/widgets/new](https://twitter.com/settings/widgets/new). 27 | 28 | * ``auto-resize`` 29 | If true, the div will resize to the same height as the iframe's content (the timeline). 30 | 31 | * ``css-url`` 32 | The url to the CSS file that you want to apply on the timeline. 33 | 34 | * ``data-tweet-limit`` 35 | Max number of tweets to show. For more information on custom attributes, check out the documentation for Embedded Twitter Timelines: [https://dev.twitter.com/docs/embedded-timelines](https://dev.twitter.com/docs/embedded-timelines). 36 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | .tweet { 2 | padding-left: 68px !important; 3 | padding-right: 15px !important; 4 | } 5 | 6 | .var-narrow.var-chromeless .tweet { 7 | padding-left: 15px !important; 8 | } 9 | 10 | .var-narrow .tweet .header { 11 | padding-bottom: 10px !important; 12 | } 13 | 14 | .var-narrow .tweet .e-entry-content { 15 | margin-bottom: 10px !important; 16 | } 17 | 18 | .var-chromeless .tweet { 19 | color: #727272; 20 | background: #f9fafc; 21 | border-bottom: 1px solid #E9E9EB; 22 | border-radius: 10px; 23 | margin-bottom: 10px; 24 | } 25 | 26 | .var-chromeless .timeline-footer { 27 | display: none; 28 | } 29 | 30 | .var-chromeless button.load-more { 31 | width: 100% !important; 32 | box-sizing: border-box !important; 33 | -moz-box-sizing: border-box !important; 34 | margin: 0 !important; 35 | border-radius: 0 !important; 36 | border: none !important; 37 | box-shadow: none !important; 38 | display: none; 39 | } 40 | 41 | div.no-tweets-pane { 42 | margin-top: 90px; 43 | } 44 | 45 | .no-tweets-pane a.load-tweets, 46 | .no-tweets-pane a.load-tweets:hover, 47 | .no-tweets-pane a.load-tweets:active { 48 | background: #87D37C; 49 | color: white; 50 | text-shadow: none; 51 | border: none; 52 | padding: 10px 20px; 53 | -webkit-transition: background 0.1s linear; 54 | -moz-transition: background 0.1s linear; 55 | -o-transition: background 0.1s linear; 56 | transition: background 0.1s linear; 57 | } 58 | .no-tweets-pane a.load-tweets:hover, 59 | .no-tweets-pane a.load-tweets:active { 60 | background: #72B269 61 | } 62 | 63 | .header .avatar { 64 | border-radius: 25px !important; 65 | } 66 | 67 | .p-author .profile .p-name { 68 | color: #444 !important; 69 | } -------------------------------------------------------------------------------- /demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Twitter Timeline Directive - Demo 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 |

Twitter Timeline Directive - Demo

18 |

@timothyej

19 | 20 |
Loading tweets...
21 | 22 | -------------------------------------------------------------------------------- /src/twitter-timeline.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AngularJS Directive for Twitter's Embedded Timeline with support for custom CSS. 3 | * https://github.com/userapp-io/twitter-timeline-angularjs 4 | */ 5 | 6 | angular.module('twitter.timeline', []) 7 | .directive('twitterTimeline', [function() { 8 | return { 9 | restrict: 'A', 10 | scope: { 11 | cssUrl: "@", 12 | autoResize: "=" 13 | }, 14 | link: function (scope, element, attrs) { 15 | $('body').removeAttr('data-twttr-rendered'); 16 | 17 | element 18 | .attr('id', 'twitter-feed') 19 | .attr("width", "100%" || attrs.width) 20 | .attr('data-chrome', 'noheader transparent') 21 | .attr('data-widget-id', attrs.twitterTimeline) 22 | .addClass('twitter-timeline'); 23 | 24 | function render() { 25 | var body = $('.twitter-timeline').contents().find('body'); 26 | 27 | if (scope.cssUrl) { 28 | body.append($('', { rel: 'stylesheet', href: scope.cssUrl, type: 'text/css' })); 29 | } 30 | 31 | function setHeight() { 32 | if (body.find('.stream').length == 0) { 33 | setTimeout(setHeight, 100); 34 | } else { 35 | body.find('.stream').addClass('stream-new').removeClass('stream').css('height', 'auto'); 36 | $('.twitter-timeline').css('height', (body.height() + 20) + 'px'); 37 | } 38 | } 39 | 40 | if (scope.autoResize) { 41 | setHeight(); 42 | } 43 | } 44 | 45 | if (!$('#twitter-wjs').length) { 46 | $.getScript((/^http:/.test(document.location)?'http':'https') + '://platform.twitter.com/widgets.js', function() { 47 | render(); 48 | $('.twitter-timeline').load(render); 49 | }); 50 | } 51 | } 52 | }; 53 | }]); --------------------------------------------------------------------------------