TweetDeck Image Assistant

Download/Share Images Faster

当前为 2017-05-20 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name TweetDeck Image Assistant
  3. // @namespace http://ejew.in/
  4. // @version 0.9
  5. // @description Download/Share Images Faster
  6. // @author EntranceJew
  7. // @match https://tweetdeck.twitter.com/*
  8. // @require https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js
  9. // @require https://cdn.rawgit.com/kamranahmedse/jquery-toast-plugin/1105577ed71ef368f8aa3d96295857643dca43d7/dist/jquery.toast.min.js
  10. // @noframes
  11. // @resource toastCSS https://cdn.rawgit.com/kamranahmedse/jquery-toast-plugin/1105577ed71ef368f8aa3d96295857643dca43d7/dist/jquery.toast.min.css
  12. // @grant GM_addStyle
  13. // @grant GM_getResourceText
  14. // ==/UserScript==
  15. /*
  16. 0.9 - toast notifications, better clipboard access methods, better image sources, ctrl+click like/rt/download to follow from column owner, fixed errors in previewer
  17. 0.8 - added t.co link unmasking
  18. 0.7 - apparently getting gif sources works most reliably inside callbacks
  19. 0.6 - hotfix to prevent redundant page reloading with stream-media seek methods
  20. 0.5 - video links no longer destroy links, ctrl+click the timestamp to copy the tweet link, ctrl+click the link icon to prepare multi-image tweets for discord
  21. 0.4 - changed download icon, added copy links button, videos now don't flash their preview, videos no longer close your draft tweets panel
  22. 0.3 - gif support wasn't that hard
  23. 0.2 - removed debug prints, updated mimes, added video download link, instant-spice now grabs videos
  24. 0.1 - initial version
  25. */
  26.  
  27. (function() {
  28. 'use strict';
  29.  
  30. GM_addStyle( GM_getResourceText("toastCSS") );
  31.  
  32. var toast_prototype = {
  33. text: "Don't forget to star the repository if you like it.", // Text that is to be shown in the toast
  34. heading: 'Note', // Optional heading to be shown on the toast
  35. icon: 'success', // Type of toast icon
  36. showHideTransition: 'slide', // fade, slide or plain
  37. allowToastClose: true, // Boolean value true or false
  38. hideAfter: 1000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
  39. stack: 32, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
  40. position: 'bottom-left', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
  41.  
  42.  
  43.  
  44. textAlign: 'left', // Text alignment i.e. left, right or center
  45. loader: true, // Whether to show loader or not. True by default
  46. loaderBg: '#9EC600', // Background color of the toast loader
  47. beforeShow: function () {}, // will be triggered before the toast is shown
  48. afterShown: function () {}, // will be triggered after the toat has been shown
  49. beforeHide: function () {}, // will be triggered before the toast gets hidden
  50. afterHidden: function () {} // will be triggered after the toast has been hidden
  51. };
  52.  
  53. function toast( heading, text, icon ){
  54. return $.toast(jQuery.extend(true, toast_prototype, {
  55. heading: heading,
  56. text: text,
  57. icon: icon
  58. }));
  59. }
  60.  
  61. var toolbar_size = 6;
  62. var tool_icon_width = (1 / toolbar_size) * 100;
  63.  
  64. GM_addStyle( ".tweet-detail-action-item, .without-tweet-drag-handles .tweet-detail-action-item { width: " + tool_icon_width + "% !important; }" );
  65.  
  66. var tool_icon = '<li class="tweet-action-item pull-left margin-r--13 margin-l--1">';
  67. tool_icon += '<a class="js-show-tip tweet-action position-rel" href="#" rel="download" title="" data-original-title="Download">';
  68. tool_icon += '<i class="icon icon-attachment icon-attachment-toggle txt-center"></i> <span class="is-vishidden"> Download </span>';
  69. tool_icon += '</a> </li>';
  70.  
  71. var link_icon = '<li class="tweet-action-item clipboard pull-left margin-r--13 margin-l--1">';
  72. link_icon += '<a class="js-show-tip tweet-action position-rel" href="#" rel="hotlink" title="" data-original-title="Hotlink">';
  73. link_icon += '<i class="icon icon-link icon-link-toggle txt-center"></i> <span class="is-vishidden"> Hotlink </span>';
  74. link_icon += '</a> </li>';
  75.  
  76. var mime_db = {
  77. jpeg: "image/jpeg",
  78. jpg: "image/jpeg",
  79. gif: "image/gif",
  80. webp: "image/webp",
  81. mp4: "video/mp4",
  82. m3u8: "application/x-mpegURL",
  83. undefined: "text/plain"
  84. };
  85.  
  86. function clipboard_data( text ){
  87. var tc = $('.compose-text-container .js-compose-text');
  88. var orig = tc.val();
  89. var active = document.activeElement;
  90. tc.val( text );
  91. tc[0].focus();
  92. tc[0].setSelectionRange( 0, text.length );
  93. document.execCommand("copy");
  94. tc.val( orig );
  95. active.focus();
  96. toast("Copied <em>" + text.split(/\r*\n/).length + "</em> Lines!", text, "info");
  97. }
  98.  
  99. // http://stackoverflow.com/a/2091331
  100. function getQueryVariable(str, variable) {
  101. var query = str.substring(1);
  102. var vars = query.split('&');
  103. for (var i = 0; i < vars.length; i++) {
  104. var pair = vars[i].split('=');
  105. if (decodeURIComponent(pair[0]) == variable) {
  106. return decodeURIComponent(pair[1]);
  107. }
  108. }
  109. console.log('Query variable %s not found', variable);
  110. }
  111.  
  112. function detect_mime(url){
  113. return mime_db[ /(?:\.([^.]+))?$/.exec(url)[1] ];
  114. }
  115.  
  116. function get_img_data( url, on_load ) {
  117. var xhr = new XMLHttpRequest();
  118. xhr.open("GET", url);
  119. xhr.responseType = "blob";
  120. xhr.onload = on_load;
  121. xhr.send();
  122. }
  123.  
  124. function download_now( url ){
  125. if( url.length ){
  126. get_img_data( url, function( e ){
  127. var img_name = url.substring( url.lastIndexOf('/')+1 );
  128. var the_blob = new Blob([this.response], {type: detect_mime(url)});
  129. var save_file_name = img_name.replace(/:orig$/, "");
  130. saveAs( the_blob, save_file_name );
  131. if( save_file_name.endsWith('mp4') ){
  132. toast("Downloaded <em>1</em> Video!", save_file_name, "info");
  133. }
  134. });
  135. }
  136. }
  137.  
  138. function nice_url( url, replacement ){
  139. if( !replacement || replacement !== "" ){
  140. replacement = ":orig";
  141. }
  142. var bg = url;
  143. bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
  144. bg = bg.replace(/:thumb$/, replacement);
  145. bg = bg.replace(/:small$/, replacement);
  146. bg = bg.replace(/:medium$/, replacement);
  147. bg = bg.replace(/:large$/, replacement);
  148. return bg;
  149. }
  150.  
  151. // danger: this could potentially lockup if the element isn't guaranteed to appear.
  152. function lock_find( selector, context ){
  153. var results = $( selector, context );
  154. while( !results.length ){
  155. results = $( selector, context );
  156. }
  157. return results;
  158. }
  159.  
  160. // we have to do literal jungle japes in order to get to the follow button from here
  161. // strap in
  162. function follow_tweet( selector ){
  163. selector.find('ul.tweet-actions i.icon-more').click();
  164. var column_owner = selector.parents('.column-panel').find('h1.column-title span.attribution').text();
  165. var more = lock_find('.js-dropdown.dropdown-menu a[data-action="followOrUnfollow"]', selector);
  166. more.parent('li.is-selectable').addClass('is-selected');
  167. more.click();
  168. var follow_container = lock_find('div.js-modal-panel');
  169. var column_owner_follow = null;
  170.  
  171. // entrancejew only follows from his third account
  172. // entrancejew also refuses to implement settings yet
  173. if( column_owner == "@EntranceJew" ){
  174. column_owner_follow = lock_find('div.js-follow-from:nth-child(3)', follow_container);
  175. } else {
  176. follow_container.find('.js-from-username').each(function(){
  177. var this_name = $( this ).text();
  178. if( this_name.includes( column_owner ) ){
  179. column_owner_follow = $( this ).parent('.js-follow-from');
  180. }
  181. });
  182. }
  183.  
  184. var follow_button = null;
  185. var follow_seeker = setInterval(function(){
  186. follow_button = column_owner_follow.find('.js-action-follow[class*=" s-"]');
  187. if( follow_button.length ){
  188. if( follow_button.hasClass('s-not-following') ){
  189. var user_to_follow = $('.mdl-header-title a[rel="user"]').text();
  190. follow_button.find('button').click();
  191. toast("Followed <em>1</em> Users!", user_to_follow, "info");
  192. } else if( !follow_button.hasClass('s-following') ){
  193. var attrs = follow_button.attr('class');
  194. toast("I'm Confused!", "What is a <em>" + attrs + "</em>?", "error");
  195. }
  196. follow_container.find('.icon-close').click();
  197. clearInterval(follow_seeker);
  198. }
  199. },50);
  200. }
  201.  
  202. setInterval(function(){
  203. $('.stream-item:not([data-ejew])').each(function(){
  204. var grand_dad = $( this );
  205.  
  206. /*
  207. // for appending to the dropdown menu if we wanted that
  208. var tool_bar = grand_dad.find('.js-dropdown-content > ul');
  209. tool_bar.prepend('<li class="is-selectable"><a href="#" data-action="ejew">Spice it up</a></li>');
  210. */
  211.  
  212. // find all the images and store their links in data
  213. var sources = [];
  214. var media_type = 'idk';
  215. if( grand_dad.find('.is-video').length ){
  216. media_type = 'video';
  217. sources.push( function( e ){
  218. var anchor = grand_dad.find('.js-media-image-link');
  219. var o_target = anchor.attr('target');
  220. var o_src = anchor.attr('src');
  221. anchor.attr('target', '');
  222. anchor.attr('src', '#');
  223. anchor.click();
  224.  
  225. var embeds = lock_find('.js-embeditem');
  226.  
  227. var vid_url = '';
  228. embeds.each(function(){
  229. var iframe_src = $( this ).find( 'iframe' ).attr('src');
  230. if( iframe_src ){
  231. vid_url = getQueryVariable( iframe_src, 'video_url' );
  232. }
  233. $('.mdl-dismiss .icon-close').click();
  234. });
  235.  
  236. anchor.attr('target', o_target);
  237. anchor.attr('src', o_src);
  238.  
  239. if( vid_url.length ){
  240. return vid_url;
  241. }
  242. });
  243. } else if( grand_dad.find('.is-gif').length ){
  244. media_type = 'gif';
  245. sources.push( function(){
  246. return grand_dad.find('video.js-media-gif').attr('src');
  247. });
  248. } else {
  249. grand_dad.find('.js-media-image-link, .js-media .media-image').each( function(i, el){
  250. sources.push( nice_url( $( el ).css('background-image') ) );
  251. });
  252. if( sources.length ){
  253. media_type = 'image';
  254. }
  255. }
  256. var orig_link = grand_dad.find("a.txt-small.no-wrap[rel=\"url\"]");
  257. orig_link.on('click', function(e){
  258. if( e.ctrlKey ){
  259. e.preventDefault();
  260. clipboard_data( $( this ).attr("href") );
  261. }
  262. });
  263. grand_dad.data('ejew-sources', sources);
  264. grand_dad.data('direct-url', orig_link.attr("href"));
  265.  
  266. // enhance stock buttons with auto-follow
  267. grand_dad.find('.icon-retweet').on('click', function(e){
  268. if( e.ctrlKey ){
  269. follow_tweet( grand_dad );
  270. }
  271. });
  272. grand_dad.find('.icon-favorite').on('click', function(e){
  273. if( e.ctrlKey ){
  274. follow_tweet( grand_dad );
  275. }
  276. });
  277.  
  278. // add more buttons
  279. var new_link = $( link_icon );
  280. new_link.on('click', function(e){
  281. var sources = grand_dad.data('ejew-sources');
  282. for( var i = 0; i < sources.length; i++ ){
  283. if( typeof( sources[i] ) != "string" ){
  284. sources[i] = sources[i]( this );
  285. }
  286. }
  287.  
  288. var the_url = grand_dad.data('direct-url');
  289. if( e.ctrlKey && sources.length > 1){
  290. sources[0] = the_url;
  291. }
  292.  
  293. if( sources.length ){
  294. clipboard_data( sources.join("\n") );
  295. } else {
  296. clipboard_data( the_url );
  297. }
  298. });
  299.  
  300. // make an instance of the toolbar button
  301. var new_tool = $( tool_icon );
  302. new_tool.on('click', function(e){
  303. var sources = grand_dad.data('ejew-sources');
  304. for( var i = 0; i < sources.length; i++ ){
  305. var source = sources[i];
  306. if( typeof( source ) != "string" ){
  307. source = source( this );
  308. }
  309. download_now( source );
  310. }
  311.  
  312. if( sources.length > 1 || !sources[0].endsWith("mp4") ){
  313. toast("Downloaded <em>" + sources.length + "</em> Images!", sources.join("\n"), "info");
  314. }
  315.  
  316. if( e.ctrlKey ){
  317. follow_tweet( grand_dad );
  318. }
  319. });
  320.  
  321. // attach
  322. var attachment_point = grand_dad.find('ul.tweet-actions > li:nth-last-child(2)');
  323. attachment_point.before( new_tool );
  324. attachment_point.before( new_link );
  325.  
  326. // prevent loading up this element again
  327. grand_dad.attr('data-ejew', 'in');
  328. });
  329.  
  330. // unmask t.co links
  331. var links_to_unmask = $('a[href^="https://t.co/"][data-full-url]');
  332. links_to_unmask.each(function(){
  333. $( this ).attr('href', $( this ).data('full-url') );
  334. });
  335. if( links_to_unmask.length > 0 ){
  336. toast("Unmasked <em>" + links_to_unmask.length + "</em> Links!", "<em>That's a lot!</em>", "info");
  337. }
  338.  
  339. // make it so that you can copy image source from previews
  340. $('img.media-img:not([data-ejew])').each(function(){
  341. $( this ).attr('src', nice_url( $( this ).attr('src'), "" ) );
  342. $( this ).attr('boners', 'farts');
  343. $( this ).attr('data-ejew', 'in');
  344. });
  345.  
  346. // provide a download source link in zoomable previews for videos
  347. $('.js-embeditem:not([data-ejew])').each(function(){
  348. var iframe_src = $( this ).find( 'iframe' ).attr('src');
  349. if( iframe_src ){
  350. var vid_url = getQueryVariable( iframe_src, 'video_url' );
  351. var dl_link = $( '<a href="#">Download Source</a>' );
  352. dl_link.on('click', function(){
  353. download_now( vid_url );
  354. });
  355. $(".med-origlink").after( dl_link );
  356. }
  357. $( this ).attr('data-ejew', 'in');
  358. });
  359. }, 300);
  360. })();