├── demo
├── demo.html
└── demo.css
├── LICENSE
├── src
└── twitter-timeline.js
└── README.md
/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 |
19 |
20 | Loading tweets...
21 |
22 |
--------------------------------------------------------------------------------
/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.
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 | }]);
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------