JIRA Toggle Filter

installation.md

Installation instructions

1. Change your JIRA domain on line 7
2. Install with Greasmonkey for Firefox or Tampermonkey for Chrome

Ctrl+click to revert to the original behaviour

jira-toggle-filter.js

// ==UserScript==
// @name         JIRA Toggle Filter
// @namespace    http://mattstow.com/
// @version      0.3
// @description  Makes the filter in JIRA boards an actual on/off toggle
// @author       Matt Stow
// @match        http://jira/secure/RapidBoard.jspa*
// @grant        none
// ==/UserScript==

var css = '<style>z {} .aui-nav-item > .aui-icon { pointer-events: none; } .ghx-controls-filters dd { position: relative; } .ms-faux-button { position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; width: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; border: none; padding: 0; outline: none; } .js-quickfilter-button { pointer-events: none; }';
var style = document.createElement('style');

style.type = 'text/css';
style.appendChild(document.createTextNode(css));

document.getElementsByTagName('head')[0].appendChild(style);

var filterButtons;

function fauxButtons (duration) {
    window.setTimeout(function () {
        var fauxButton = document.createElement('button');
        var clone;
        
        filterButtons = document.querySelectorAll('.js-quickfilter-button:not(.has-ms-faux-button)');
        fauxButton.className = 'ms-faux-button';

        for (var i = 0; i < filterButtons.length; i++) {
            filterButtons[i].setAttribute('tabindex', -1);
            clone = fauxButton.cloneNode();
            clone.setAttribute('aria-label', filterButtons[i].textContent);
            filterButtons[i].parentElement.appendChild(clone);
            filterButtons[i].classList.add('has-ms-faux-button');
        }
    }, duration);
}

document.addEventListener('click', function (event) {
    if (event.target.classList.contains('aui-nav-item')) {
        fauxButtons(500);
    }
}, false);

document.addEventListener('click', function () {
    if (event.target.className === 'ms-faux-button') {
        event.stopPropagation();

        if (event.ctrlKey) {
            event.target.previousElementSibling.click();
        }
        else {
            for (var i = 0; i < filterButtons.length; i++) {
                if (filterButtons[i].classList.contains('ghx-active')) {
                    filterButtons[i].click();
                }
            }

            event.target.previousElementSibling.click();
        }
    }
}, false);

fauxButtons(10);