Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Project moved to https://github.com/ivanistheone/ccss_bookmarklet

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:

Dev notes

  • Running jQuery('div.window-wrapper>.clearfix').data('events') is instructive.
.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;
}
<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"/>
jQuery('.window-wrapper').get(0).addEventListener('click', function(e) {
if(e.altKey) {
console.log("alt clicked2", e);
e.stopPropagation();
return false;
}
}, true);
(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);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment