trello-alt-click.bookmarklet.js

_trello-alt-click.bookmarklet.md

About

Demonstrates use of event capture phase (as opposed to bubble phase, used by jQuery's bind) to prevent default trello click events if ALT key is depressed.

Installation:

Visit http://bl.ocks.org/dergachev/5571933 to install this bookmarklet.

Resources:

• http://www.quirksmode.org/js/events_order.html
• http://stackoverflow.com/a/11972730/9621
• http://stackoverflow.com/a/2518441/9621

Dev notes

• Running jQuery('div.window-wrapper>.clearfix').data('events') is instructive.

demo.css

.button-wrapper {
        margin: 2em 0;
      }
      .inline-button,
      .button {
        /* base64 encoder: http://www.greywyvern.com/code/php/binary2base64 */
        /* Source image: http://tiny.cc/public/images/default-favicon.ico */
        background-image: url(data:image/vnd.microsoft.icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAAAAAAA+/v8APn3+QCeTWQAcmh+APj5+gBVKksA9/X3APb29gD08vMA9/j5APT09gD7/PwA8/HyAPPz9QD6+/sA9fP1AGcwWQDy8vQAOB07APn6+gD49vcA2eryAPX19gCckqgA8/HzAPb19gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMTExMTExMTExMTExMAAAAGDQ0NDQ0NDQ0NDQ0GAAAAERkZGRkZGRkZGRkZEQAAAAMJCQkJCQkJCQkJCQMAAAADEg4SDhISEg4ODg4DAAAAAxAQEBAQEBAQEBAQAwAAAAMaGhoaGhoLFxcXGgMAAAADBwcHBwcHBwcHBwcDAAAAAxUVFRUVFRUVFRUVAwAAAAMCAgICAgICAgICAgMAAAAECgUKBQoKCgUWFhYEAAAABAUUBRQFBQUYGBgYBAAAAAQUDxQPFBQUGAgIFhgAAAAEDwEPAQ8PDxgIFhgAAAAABAEMAQwBAQEYFhgAAAAAABgYGBgYGBgYGBgAAAAAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACAAwAAgAMAAIADAACABwAAgA8AAIAfAAA=);
        background-repeat: no-repeat;
        background-color: #65a9d7;
        background-position: 10px center;
        padding: 10px 20px 10px 32px;
        border-radius: 8px;
        color: white;
        font-size: 18px;
        font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
        text-decoration: none;
      }
      .inline-button {
        display: inline;
        background-color: transparent;
        padding-right: 3px;
        padding-left: 28px;
        font-size: 1em;
        background-size: 13px 13px;
      }
      .inline-button a {
        text-decoration: none;
        color: #65a9d7;
      }

index.html

<p>The following bookmarklet are available:</p>

<div class="button-wrapper"><a class="button" href="javascript:(function()%7Bvar s %3D document.createElement(%27script%27)%3Bs.src%3D%27https://gist.github.com/dergachev/5571933/raw/trello-alt-click.bookmarklet.js%27%3Bdocument.body.appendChild(s)%3B%7D)()%3B">trello-alt-click</a></div>
<div class="button-wrapper"><a class="button" href="javascript:(function()%7Bvar s %3D document.createElement(%27script%27)%3Bs.src%3D%27https://gist.github.com/dergachev/5571933/raw/trello-lookup.bookmarklet.js%27%3Bdocument.body.appendChild(s)%3B%7D)()%3B">trello-lookup</a></div>

<link rel="stylesheet" href="demo.css"/>

trello-alt-click.bookmarklet.js

jQuery('.window-wrapper').get(0).addEventListener('click', function(e) {
  if(e.altKey) { 
    console.log("alt clicked2", e);
    e.stopPropagation();
    return false;
  }
}, true);

trello-lookup.bookmarklet.js

(function(){
    var done = false;
    var script = document.createElement("script");
    script.src = "//cdnjs.cloudflare.com/ajax/libs/yepnope/1.5.4/yepnope.min.js";
    script.onload = script.onreadystatechange = function(){
      if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
        done = true;
        requireDeps();
      }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
})();

function requireDeps() {
  yepnope([{
      test: typeof(window.jQuery) === 'undefined' || jQuery.fn.jquery.match(/^1\.[0-9]+/) <= 1.4,
      yep: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js'
    },
    {
      test: typeof(window.jQuery) === 'undefined' || typeof(jQuery.fn.highlighter) === 'undefined',
      yep: ['https://raw.github.com/huffpostlabs/highlighter.js/master/jQuery.highlighter.js'],
      complete: function (url, result, key) {
        initMyBookmarklet(jQuery);
      }
    }
  ]);
}

function initMyBookmarklet($) {
  $(function() { 
    console.log("Highlighter.js should be available:", $.fn.highlighter)
    $('.window-wrapper').get(0).addEventListener('click', function(e) {
      if(e.altKey) { 
        console.log("alt clicked2", e);
        e.stopPropagation();
        return false;
      }
    }, true);
  });
}