Bookmarklets

README.md

My Bookmarklets

I use http://mrcoles.com/bookmarklet/ to create my bookmarklets, because it allows you to inject dependencies and such.

bkmk.OpenInSpotify.js

// Apens the spotify link in the Spotify desktop app by redirecting the window origin to the spotify:// application protocol

//
// COMPILED SOURCE
//

javascript:function()%7Bwindow.location.href%20%3D%20window.location.href.toString().replace(%2Fhttp.%2B.com%5C%2F%2F%2C%20'spotify%3A%2F%2F')%7D)()


//
// RAW SOURCE
//

window.location.href = window.location.href.toString().replace(/http.+.com\//, 'spotify://')

bkmk.RemoveAds.js

/**
 * Removes ad panels because they're really freaking annoying...
 * - look at the `qs` variable definition for a list of all the ads I hate
 */


//
// COMPILED
//

javascript:(function(){var e=['[id*="div-gpt-ad"]','[id*="taboola"]','[class*="adsbygoogle"]','[id*="col-promoted-"]'];for(var t=0;t<=e.length-1;t++){var n=document.querySelectorAll(e[t]);for(var r=0;r<=n.length-1;r++){var i=n[r];i.parentNode.removeChild(i)}}})()

//
// RAW SOURCE
//

javascript:(function(){
var qs = [
      '[id*="div-gpt-ad"]'      // page content ad space that interferes with content flow
    , '[id*="taboola"]'         // stupid "on the web" links with crap sensationalist titles...
    , '[class*="adsbygoogle"]'  // google remarketing panels...
    , '[id*="col-promoted-"]'   // disqus promoted ads...
    ]
  ;

for(var q = 0; q <= qs.length-1; q++) {
  var as = document.querySelectorAll(qs[q]);

  for(var a = 0; a <= as.length-1; a++) {
    var e = as[a];
    e.parentNode.removeChild(e);
  }
}
})()

bkmk.RemoveInterjections.js

/**
 * Bookmarklet: Remove Interjections
 *
 * This removes parenthetical interjections within the tags specified in the
 * ts[] array. I generally find them distracting, especically in opinion pieces,
 * so this simply replaces interjections (like this one) with an anchor
 * tag (<a>) tag, whose title is the parenthetical contents, which you
 * can hover at your liesure.
 *
 * sample: Some text (containing an interjection) would look like this.
 * result: Some text [...] would look like this.
 */

//
// COMPILED SOURCE
//
javascript:(function()%7Bvar%20ps%3Ddocument.querySelectorAll('p')%3Bfor(var%20i%3Dps.length-1%3Bi%3E%3D0%3Bi--)%7Bvar%20content%3Dps%5Bi%5D.innerHTML%3Bps%5Bi%5D.innerHTML%3Dcontent.replace(%2F((%5BsS%5D%2B%3F))%2Fg%2C'%3Cabbr%20title%3D%22%241%22%3E%5B...%5D%3C%2Fabbr%3E')%3B%7Dreturn%20null%3B%7D)()

//
// RAW SOURCE
//
javascript:
(function() {
    // naive perhaps, however this simplifies many convoluted articles and improves 
    // my reading comprehension drastically; YMMV.

    var ps = document.querySelectorAll('p');

    for (var i = ps.length - 1; i >= 0; i--) {
        var content = ps[i].innerHTML;
        ps[i].innerHTML = content.replace(/\(([\s\S]{2,}?)\)/g, '<abbr title="$1">[...]</abbr>');
    }
})()

bkmk.TFS-state-colors.js

//
// Adds colors to rows that match a given bug/feature state field in Microsoft's TFS bug tracking software
//


//
// COMPILED SOURCE
//
 
javascript:(function()%7Bvar%20%24rows%20%3D%20%24('.grid-canvas').find('.grid-row')%2C%20match%20%3D%20%7Bdone%3A%20%2FDone%2F%2Ccommitted%3A%20%2FCommitted%2F%2Cnew%3A%20%2FNew%2F%2Capproved%3A%20%2FApproved%2F%2Cremoved%3A%20%2FRemoved%2F%7D%3B%24rows.each(function(index%2C%20val)%20%7Bvar%20%24this%20%3D%20%24(this)%2C%20text%20%3D%20%24this.text()%3Bif%20(text.match(match.done))%20%7B%20%24this.attr('data-status'%2C%20'done')%3B%20%7Dif%20(text.match(match.committed))%20%7B%20%24this.attr('data-status'%2C%20'committed')%3B%20%7Dif%20(text.match(match.new))%20%7B%20%24this.attr('data-status'%2C%20'new')%3B%20%7Dif%20(text.match(match.removed))%20%7B%20%24this.attr('data-status'%2C%20'removed')%3B%20%7Dif%20(text.match(match.approved))%20%7B%20%24this.attr('data-status'%2C%20'approved')%3B%20%7D%7D)%7D)()



//
// DEV SOURCE
//

var $rows = $('.grid-canvas').find('.grid-row')
  , match = {
      done: /Done/,
      committed: /Committed/,
      new: /New/,
      approved: /Approved/,
      removed: /Removed/
    }
  ;


$rows.each(function(index, val) {

  var $this = $(this)
    , text = $this.text()
    ;

  if (text.match(match.done)) { $this.attr('data-status', 'done'); }
  if (text.match(match.committed)) { $this.attr('data-status', 'committed'); }
  if (text.match(match.new)) { $this.attr('data-status', 'new'); }
  if (text.match(match.removed)) { $this.attr('data-status', 'removed'); }
  if (text.match(match.approved)) { $this.attr('data-status', 'approved'); }

});

bkmk.VideoSpeed.js

//
// Youtube's [HTML5 videos](http://youtube.com/html5) allow you
// to set playback speed to 0.25x, 0.5x, 1x, 1.5x, and 2x.
// But that's not fine-grained enough.
// Let's add a slider allowing us to go from 0.1x - 4.0x.
// And have it work with HTML5 videos on Youtube and Vimeo.
//
// Because you haven't lived until you've seen
// http://youtu.be/5p0QtJMKt1s in 0.3x and 3.3x.
//
// Inspired by
// [Leif Wickland's](http://leifw.wickland.net/2013/03/truly-variable-rate-video-playback-in.html)
// bookmarklet.
//
// ＼(＾O＾)／＼(＾O＾)／＼(＾O＾)／
//
 
//
// COMPILED SOURCE
//
 
javascript:(function()%7Bvar vid %3D document.querySelectorAll('video')%3Bvar spd %3D window.prompt(%60Video speed (%24%7Bvid%5B0%5D.playbackRate%7D)%3A%60)%3Bif (spd !%3D%3D '') %7Bvid.forEach(function(video) %7Bvideo.playbackRate %3D parseFloat(spd%2C 10)%3B%7D)%3B%7D%7D)()
// TEST CASE: http://css-tricks.com/video-screencasts/133-figuring-responsive-images/
// Inspiration: https://vimeo.com/forums/feature_requests/topic:43742#comment_9512724 ... because f&@# matt...
var vid = document.querySelectorAll('video');
var spd = window.prompt(`Video speed (${vid[0].playbackRate}):`);
if (spd !== '') {
    vid.forEach(function(video) { 
      video.playbackRate = parseFloat(spd, 10);
    });
}