Rotating Tweets (Twitter widget and shortcode) - Version 1.4.1

Version Description

Works with responsive templates.

Download this release

Release Info

Developer mpntod
Plugin Icon wp plugin Rotating Tweets (Twitter widget and shortcode)
Version 1.4.1
Comparing to
See all releases

Code changes from version 1.4.0 to 1.4.1

Files changed (3) hide show
  1. js/rotating_tweet.js +101 -3
  2. readme.txt +22 -6
  3. rotatingtweets.php +2 -2
js/rotating_tweet.js CHANGED
@@ -17,13 +17,24 @@ jQuery(document).ready(function() {
17
  if(rotate_fx == null){rotate_fx = 'scrollUp'};
18
  var rt_height_px = 'auto';
19
  /* Now find the widget container width */
 
 
 
 
 
 
 
 
20
  // Get the size of the parent box and subtract any padding
21
- var rt_target_width = jQuery(this).parent().innerWidth() - parseFloat(jQuery(this).parent().css('padding-left')) - parseFloat(jQuery(this).parent().css('padding-right'));
22
  var rt_fit = 1;
23
  if( rt_target_width == null ) {
24
  rt_fit = 0;
25
  }
26
  if(rotate_wp_debug) {
 
 
 
27
  console.log('rt_target_width = '+rt_target_width);
28
  console.log('rotate_timeout = '+rotate_timeout);
29
  };
@@ -76,6 +87,7 @@ jQuery(document).ready(function() {
76
  fx: rotate_fx
77
  });
78
  }
 
79
  /* Only do this if we're showing the official tweets - the first select is the size of the info box at the top of the tweet */
80
  var rt_children_id = rotate_id + ' .rtw_info';
81
  /* This shows the width of the icon on 'official version 2' - i.e. the one where the whole tweet is indented */
@@ -83,6 +95,7 @@ jQuery(document).ready(function() {
83
  /* This shows the width of the block containing the icon on 'official version 2' - i.e. the one where the whole tweet is indented */
84
  var rt_block_id = rotate_id + ' .rtw_wide_block';
85
  var rt_official_num = jQuery(rt_children_id).length;
 
86
  if(rt_official_num > 0) {
87
  /* Now run through and make sure all the boxes are the right size */
88
  if(jQuery(rt_icon_id).length > 0) {
@@ -102,9 +115,12 @@ jQuery(document).ready(function() {
102
  console.log('- Width of the icon: '+rt_icon_width);
103
  };
104
  if(rt_icon_width > 0) {
 
105
  jQuery(rt_block_id).each( function() {
106
  jQuery(this).css('padding-left', ( rt_icon_width + 10 ) + 'px');
107
  });
 
 
108
  }
109
  }
110
  /* Now get the padding-left dimension (if it exists) and subtract it from the max width */
@@ -125,15 +141,97 @@ jQuery(document).ready(function() {
125
  console.log('- rt_max_width: ' + rt_max_width);
126
  };
127
  /* Go through the tweets - and set the minimum width */
 
128
  jQuery(rt_children_id).each(function() {
129
  jQuery(this).width(rt_max_width);
130
  });
131
- var rt_children_id = rotate_id + ' .rtw_meta';
 
132
  /* Go through the tweets - and set the minimum width */
133
- jQuery(rt_children_id).each(function() {
 
134
  jQuery(this).width(rt_max_width);
135
  });
 
 
136
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  });
138
  // Script to show mouseover effects when going over the Twitter intents
139
  jQuery('.rtw_intents a').hover(function() {
17
  if(rotate_fx == null){rotate_fx = 'scrollUp'};
18
  var rt_height_px = 'auto';
19
  /* Now find the widget container width */
20
+ // Take the smaller of the parent and grandparent
21
+ rt_parent = jQuery(this).parent();
22
+ rt_grandparent = rt_parent.parent();
23
+ var rt_target_container_width = Math.min (
24
+ rt_parent.innerWidth() - parseFloat(rt_parent.css('padding-left')) - parseFloat(rt_parent.css('padding-right')),
25
+ rt_grandparent.innerWidth() - parseFloat(rt_grandparent.css('padding-left')) - parseFloat(rt_grandparent.css('padding-right')) - parseFloat(rt_parent.css('padding-left')) - parseFloat(rt_parent.css('padding-right')) - parseFloat(rt_parent.css('margin-left')) - parseFloat(rt_parent.css('margin-right'))
26
+ );
27
+
28
  // Get the size of the parent box and subtract any padding
29
+ var rt_target_width = rt_target_container_width - parseFloat(jQuery(this).css('padding-left')) - parseFloat(jQuery(this).css('padding-right')) - parseFloat(jQuery(this).css('margin-left')) - parseFloat(jQuery(this).css('margin-right')) - parseFloat(jQuery(this).css('border-left')) - parseFloat(jQuery(this).css('border-right'));
30
  var rt_fit = 1;
31
  if( rt_target_width == null ) {
32
  rt_fit = 0;
33
  }
34
  if(rotate_wp_debug) {
35
+ console.log('parent_width = '+rt_parent.innerWidth());
36
+ console.log('grandparent_width = '+rt_grandparent.innerWidth());
37
+ console.log('rt_target_container_width = '+rt_target_container_width);
38
  console.log('rt_target_width = '+rt_target_width);
39
  console.log('rotate_timeout = '+rotate_timeout);
40
  };
87
  fx: rotate_fx
88
  });
89
  }
90
+
91
  /* Only do this if we're showing the official tweets - the first select is the size of the info box at the top of the tweet */
92
  var rt_children_id = rotate_id + ' .rtw_info';
93
  /* This shows the width of the icon on 'official version 2' - i.e. the one where the whole tweet is indented */
95
  /* This shows the width of the block containing the icon on 'official version 2' - i.e. the one where the whole tweet is indented */
96
  var rt_block_id = rotate_id + ' .rtw_wide_block';
97
  var rt_official_num = jQuery(rt_children_id).length;
98
+ var rt_children_meta_id = rotate_id + ' .rtw_meta';
99
  if(rt_official_num > 0) {
100
  /* Now run through and make sure all the boxes are the right size */
101
  if(jQuery(rt_icon_id).length > 0) {
115
  console.log('- Width of the icon: '+rt_icon_width);
116
  };
117
  if(rt_icon_width > 0) {
118
+ /*
119
  jQuery(rt_block_id).each( function() {
120
  jQuery(this).css('padding-left', ( rt_icon_width + 10 ) + 'px');
121
  });
122
+ */
123
+ jQuery(rt_block_id).css('padding-left', ( rt_icon_width + 10 ) + 'px');
124
  }
125
  }
126
  /* Now get the padding-left dimension (if it exists) and subtract it from the max width */
141
  console.log('- rt_max_width: ' + rt_max_width);
142
  };
143
  /* Go through the tweets - and set the minimum width */
144
+ /*
145
  jQuery(rt_children_id).each(function() {
146
  jQuery(this).width(rt_max_width);
147
  });
148
+ */
149
+ jQuery(rt_children_id).width(rt_max_width);
150
  /* Go through the tweets - and set the minimum width */
151
+ /*
152
+ jQuery(rt_children_meta_id).each(function() {
153
  jQuery(this).width(rt_max_width);
154
  });
155
+ */
156
+ jQuery(rt_children_meta_id).width(rt_max_width);
157
  };
158
+ // Now the resizing
159
+ var rt_resize_width_old = Math.min (
160
+ rt_parent.innerWidth(),
161
+ rt_grandparent.innerWidth()
162
+ );
163
+ var rt_resize_target_width = jQuery(rotate_id).width();
164
+ var rt_resize_target_main = jQuery(rotate_id + ' .rtw_main').width();
165
+ var rt_resize_target_tweet = jQuery(rotate_id + ' .rotatingtweet').width
166
+ jQuery(window).resize(function() {
167
+ rt_parent = jQuery(rotate_id).parent();
168
+ rt_grandparent = rt_parent.parent();
169
+ var rt_resize_width_new = Math.min (
170
+ rt_parent.innerWidth(),
171
+ rt_grandparent.innerWidth()
172
+ );
173
+ if(rotate_wp_debug) {
174
+ console.log('Old width: '+rt_resize_width_old);
175
+ console.log('New width: '+rt_resize_width_new);
176
+ console.log('Old box width: '+rt_resize_target_width);
177
+ console.log('New target width: '+ (rt_resize_target_width + rt_resize_width_new - rt_resize_width_old));
178
+ console.log('rt_max_width: '+ (rt_resize_target_width + rt_resize_width_new - rt_resize_width_old));
179
+ }
180
+ if(rt_max_width == null) {
181
+ rt_max_width = rt_resize_target_tweet;
182
+ }
183
+ if(rt_resize_width_new != null && rt_resize_width_old != null && rt_resize_width_new != rt_resize_width_old) {
184
+ var rt_oldheight = 0;
185
+ var rt_oldcontainerheight = jQuery(rotate_id).height();
186
+ jQuery(rotate_id + ' .rotatingtweet').height('auto');
187
+ jQuery(rotate_id + ' .rotatingtweet').each( function() {
188
+ var rt_test_height = jQuery(this).height();
189
+ if(rotate_wp_debug) {
190
+ console.log('Old tweet height: '+ rt_test_height);
191
+ }
192
+ if(rt_test_height > rt_oldheight ) {
193
+ rt_oldheight = rt_test_height;
194
+ };
195
+ });
196
+ if(rotate_wp_debug) {
197
+ console.log('Old container height: '+ rt_oldcontainerheight);
198
+ console.log('Old height: '+ rt_oldheight);
199
+ }
200
+ var rt_old_box_height = jQuery(rotate_id).height();
201
+ if(rotate_wp_debug) {
202
+ console.log('Old container height' + rt_old_box_height )
203
+ }
204
+ jQuery(rt_children_id).width(rt_max_width + rt_resize_width_new - rt_resize_width_old );
205
+ jQuery(rt_children_meta_id).width(rt_max_width + rt_resize_width_new - rt_resize_width_old );
206
+ jQuery(rotate_id + ' .rtw_main').width(rt_resize_target_main + rt_resize_width_new - rt_resize_width_old );
207
+ jQuery(rotate_id + ' .rotatingtweet').width(rt_resize_target_tweet + rt_resize_width_new - rt_resize_width_old );
208
+ jQuery(rotate_id).width(rt_resize_target_width + rt_resize_width_new - rt_resize_width_old );
209
+ // Now update the variables
210
+ rt_resize_target_width = rt_resize_target_width + rt_resize_width_new - rt_resize_width_old;
211
+ rt_resize_target_main = rt_resize_target_main + rt_resize_width_new - rt_resize_width_old;
212
+ rt_resize_target_tweet = rt_resize_target_tweet + rt_resize_width_new - rt_resize_width_old;
213
+ rt_max_width = rt_max_width + rt_resize_width_new - rt_resize_width_old;
214
+ rt_resize_width_old = rt_resize_width_new;
215
+ // Now we need to fix the heights
216
+ var rt_newheight = 0;
217
+ jQuery(rotate_id + ' .rotatingtweet').height('auto');
218
+ jQuery(rotate_id + ' .rotatingtweet').each( function() {
219
+ var rt_test_height = jQuery(this).height();
220
+ if(rotate_wp_debug) {
221
+ console.log('New tweet height: '+ rt_test_height);
222
+ }
223
+ if(rt_test_height > rt_newheight ) {
224
+ rt_newheight = rt_test_height;
225
+ };
226
+ });
227
+ if(rotate_wp_debug) {
228
+ console.log('New height: '+ rt_newheight);
229
+ }
230
+ if(rt_newheight > 0) {
231
+ jQuery(rotate_id).height(rt_oldcontainerheight + rt_newheight - rt_oldheight);
232
+ }
233
+ }
234
+ });
235
  });
236
  // Script to show mouseover effects when going over the Twitter intents
237
  jQuery('.rtw_intents a').hover(function() {
readme.txt CHANGED
@@ -1,10 +1,10 @@
1
  === Rotating Tweets (Twitter widget and shortcode) ===
2
  Contributors: mpntod
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9XCNM4QSVHYT8
4
- Tags: shortcode,widget,twitter,rotating,rotate,rotator,tweet,tweets,animation,jquery,jquery cycle,cycle,multilingual
5
  Requires at least: 2.6
6
  Tested up to: 3.5.1
7
- Stable tag: 1.4.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -16,6 +16,7 @@ Twitter widget and shortcode to show your latest tweets one at a time an animate
16
  * **Space efficient** - instead of showing all your tweets at once, shows one at a time and then smoothly replaces it with the next one. After showing all your tweets, loops back to the beginning again.
17
  * **Reliable** - keeps showing your latest Tweets even if the Twitter website is down.
18
  * **Customisable** - you decide whose tweets to show, how many to show, whether to include retweets and replies, and whether to show a follow button. You can also decide how quickly the tweets rotate and what type of animation to use.
 
19
  * Gives you the option to show a fully customisable Twitter 'follow' button
20
  * Replaces [t.co](http://t.co) links with the original link
21
  * Caches the most recent data from Twitter to avoid problems with rate limiting
@@ -77,8 +78,8 @@ Possible variables for the shortcode include:
77
  * `show_meta_via` = `'0'` or `'1'` - show how each tweet was posted - optional - default is `'1'`
78
  * `show_meta_reply_retweet_favorite` = `'0'` or `'1'` - show 'reply', 'retweet' and 'favorite' buttons - optional - default is `'0'`
79
  * `show_meta_prev_next` = `'0'` or `'1'` - show 'next', 'prev' links - optional - default is `'0'`
80
- * `next` = content for the next button (default `'next'`)
81
  * `prev` = content for the prev button (default `'prev'`)
 
82
  * `middot` = content for the space between the buttons (default `' · '`)
83
  * `np_pos` = position for 'next' and 'prev' buttons - `'top'` or `'bottom'` (default `'top'`)
84
  * **Twitter follow button**
@@ -91,6 +92,7 @@ Most of this is my own work, but special thanks are owed to:
91
 
92
  * The [jQuery](http://jquery.com/) team
93
  * [Mike Alsup](http://jquery.malsup.com/cycle/) for [jQuery.Cycle](http://jquery.malsup.com/cycle/)
 
94
  * [Abraham Williams](http://abrah.am) for [TwitterOAuth](https://github.com/abraham/twitteroauth)
95
  * [Liam Gaddy](http://profiles.wordpress.org/lgladdy/) at [Storm Consultancy](http://www.stormconsultancy.co.uk/) for [his work](http://www.stormconsultancy.co.uk/blog/development/tools-plugins/oauth-twitter-feed-for-developers-library-and-wordpress-plugin/) on [oAuth Twitter Feed for Developers](http://wordpress.org/extend/plugins/oauth-twitter-feed-for-developers/) (although I ended up using it for inspiration rather than plugging it in directly).
96
  * All the people who have given advice and suggested improvements
@@ -100,7 +102,16 @@ Most of this is my own work, but special thanks are owed to:
100
  In most cases, each use (or "instance") of this plug-in gets data from Twitter every 2 minutes. The exception is when two or more instances share the same settings (screen name etc.), in which case they share the same data rather than each calling it separately.
101
 
102
  = How can I pull information from two accounts into one widget =
103
- The easiest way is to use a search term like 'from:account1 OR from:account2'.
 
 
 
 
 
 
 
 
 
104
 
105
  = How can I add a Twitter bird to the left of my tweets? =
106
  You can do this by going to the `rotatingtweets/css` directory and renaming `rotatingtweets-sample.css` to `rotatingtweets.css` and putting it in the `wp-content/uploads/` directory. This displays a Twitter bird to the left of your tweets. Any CSS you put into `rotatingtweets.css` won't be overwritten when the plug-in is upgraded to the latest version.
@@ -130,13 +141,18 @@ If there is only one copy of `jquery` and of `jquery.cycle` on your page, the be
130
  1. Read the diagnostics and look for any problems that relate to JavaScript. This will normally tell you which JavaScript (if any) is having problems.
131
 
132
  == Upgrade notice ==
133
- = 1.4.0 =
134
- * Access search, favorites and lists through Rotating Tweets widgets.
135
 
136
  = 0.700 (1.3.0) =
137
  * Upgrade needed for Rotating Tweets to keep working after May 2013. Supports version 1.1 of the Twitter API.
138
 
139
  == Changelog ==
 
 
 
 
 
140
  = 1.4.0 =
141
  * Support for search, favorites and lists via Rotating Tweets widgets.
142
 
1
  === Rotating Tweets (Twitter widget and shortcode) ===
2
  Contributors: mpntod
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=9XCNM4QSVHYT8
4
+ Tags: shortcode,widget,twitter,rotating,rotate,rotator,tweet,tweets,animation,jquery,jquery cycle,cycle,multilingual,responsive
5
  Requires at least: 2.6
6
  Tested up to: 3.5.1
7
+ Stable tag: 1.4.1
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
16
  * **Space efficient** - instead of showing all your tweets at once, shows one at a time and then smoothly replaces it with the next one. After showing all your tweets, loops back to the beginning again.
17
  * **Reliable** - keeps showing your latest Tweets even if the Twitter website is down.
18
  * **Customisable** - you decide whose tweets to show, how many to show, whether to include retweets and replies, and whether to show a follow button. You can also decide how quickly the tweets rotate and what type of animation to use.
19
+ * **Responsive** - resizes as your page resizes
20
  * Gives you the option to show a fully customisable Twitter 'follow' button
21
  * Replaces [t.co](http://t.co) links with the original link
22
  * Caches the most recent data from Twitter to avoid problems with rate limiting
78
  * `show_meta_via` = `'0'` or `'1'` - show how each tweet was posted - optional - default is `'1'`
79
  * `show_meta_reply_retweet_favorite` = `'0'` or `'1'` - show 'reply', 'retweet' and 'favorite' buttons - optional - default is `'0'`
80
  * `show_meta_prev_next` = `'0'` or `'1'` - show 'next', 'prev' links - optional - default is `'0'`
 
81
  * `prev` = content for the prev button (default `'prev'`)
82
+ * `next` = content for the next button (default `'next'`)
83
  * `middot` = content for the space between the buttons (default `' · '`)
84
  * `np_pos` = position for 'next' and 'prev' buttons - `'top'` or `'bottom'` (default `'top'`)
85
  * **Twitter follow button**
92
 
93
  * The [jQuery](http://jquery.com/) team
94
  * [Mike Alsup](http://jquery.malsup.com/cycle/) for [jQuery.Cycle](http://jquery.malsup.com/cycle/)
95
+ * [Syd Lawrence](http://sydlawrence.com/) for introducing me to jQuery and jQuery.Cycle
96
  * [Abraham Williams](http://abrah.am) for [TwitterOAuth](https://github.com/abraham/twitteroauth)
97
  * [Liam Gaddy](http://profiles.wordpress.org/lgladdy/) at [Storm Consultancy](http://www.stormconsultancy.co.uk/) for [his work](http://www.stormconsultancy.co.uk/blog/development/tools-plugins/oauth-twitter-feed-for-developers-library-and-wordpress-plugin/) on [oAuth Twitter Feed for Developers](http://wordpress.org/extend/plugins/oauth-twitter-feed-for-developers/) (although I ended up using it for inspiration rather than plugging it in directly).
98
  * All the people who have given advice and suggested improvements
102
  In most cases, each use (or "instance") of this plug-in gets data from Twitter every 2 minutes. The exception is when two or more instances share the same settings (screen name etc.), in which case they share the same data rather than each calling it separately.
103
 
104
  = How can I pull information from two accounts into one widget =
105
+ The easiest way is to use a search term like `'from:account1 OR from:account2'`.
106
+
107
+ = My widget is too wide! =
108
+ Try putting:
109
+ `
110
+ div.widget_rotatingtweets_widget, div.rotatingtweet, div.widget_rotatingtweets_widget div.widget-title {
111
+ max-width: 123px;
112
+ }
113
+ `
114
+ into your CSS - changing `123px;` to the width you're aiming at - either via putting `rotatingtweets.css` into `wp-content/uploads` or by editing your own template files.
115
 
116
  = How can I add a Twitter bird to the left of my tweets? =
117
  You can do this by going to the `rotatingtweets/css` directory and renaming `rotatingtweets-sample.css` to `rotatingtweets.css` and putting it in the `wp-content/uploads/` directory. This displays a Twitter bird to the left of your tweets. Any CSS you put into `rotatingtweets.css` won't be overwritten when the plug-in is upgraded to the latest version.
141
  1. Read the diagnostics and look for any problems that relate to JavaScript. This will normally tell you which JavaScript (if any) is having problems.
142
 
143
  == Upgrade notice ==
144
+ = 1.4.1 =
145
+ Works with responsive templates.
146
 
147
  = 0.700 (1.3.0) =
148
  * Upgrade needed for Rotating Tweets to keep working after May 2013. Supports version 1.1 of the Twitter API.
149
 
150
  == Changelog ==
151
+ = 1.4.1 =
152
+ * Now works with responsive formats
153
+ * Adjusted width overflow issues
154
+ * Added [instructions on how to deal with width issues](http://wordpress.org/extend/plugins/rotatingtweets/faq/)
155
+
156
  = 1.4.0 =
157
  * Support for search, favorites and lists via Rotating Tweets widgets.
158
 
rotatingtweets.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: Rotating Tweets (Twitter widget & shortcode)
4
  Description: Replaces a shortcode such as [rotatingtweets screen_name='your_twitter_name'], or a widget, with a rotating tweets display
5
- Version: 1.4.0
6
  Text Domain: rotatingtweets
7
  Author: Martin Tod
8
  Author URI: http://www.martintod.org.uk
@@ -1223,7 +1223,7 @@ function rotating_tweets_display($json,$args,$print=TRUE) {
1223
  $shortenvariables = '';
1224
  if($args['no_show_count']) $shortenvariables = ' data-show-count="false"';
1225
  if($args['no_show_screen_name']) $shortenvariables .= ' data-show-screen-name="false"';
1226
- $followUserText = sprintf(__('Follow @%s','rotatingtweets'),remove_accents($args['screen_name']));
1227
  $result .= "\n<div class='rtw_follow follow-button'><a href='http://twitter.com/".$args['screen_name']."' class='twitter-follow-button'{$shortenvariables} title='".$followUserText."' data-lang='{$twitterlocale}'>".$followUserText."</a></div>";
1228
  endif;
1229
  rotatingtweets_enqueue_scripts();
2
  /*
3
  Plugin Name: Rotating Tweets (Twitter widget & shortcode)
4
  Description: Replaces a shortcode such as [rotatingtweets screen_name='your_twitter_name'], or a widget, with a rotating tweets display
5
+ Version: 1.4.1
6
  Text Domain: rotatingtweets
7
  Author: Martin Tod
8
  Author URI: http://www.martintod.org.uk
1223
  $shortenvariables = '';
1224
  if($args['no_show_count']) $shortenvariables = ' data-show-count="false"';
1225
  if($args['no_show_screen_name']) $shortenvariables .= ' data-show-screen-name="false"';
1226
+ $followUserText = sprintf(__('Follow @%s','rotatingtweets'),remove_accents(str_replace('@','',$args['screen_name'])));
1227
  $result .= "\n<div class='rtw_follow follow-button'><a href='http://twitter.com/".$args['screen_name']."' class='twitter-follow-button'{$shortenvariables} title='".$followUserText."' data-lang='{$twitterlocale}'>".$followUserText."</a></div>";
1228
  endif;
1229
  rotatingtweets_enqueue_scripts();