Last active
August 20, 2021 17:59
-
-
Save hestenet/0d34742072d9ab330a6e to your computer and use it in GitHub Desktop.
A javascript hack for JIRA that allows resizing of RapidBoard columns and toggling their display on/off - just add to your Announcement Banner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript"> | |
| ///////////////////// | |
| // | |
| // DO NOT DELETE ME! | |
| // Please take care when editing the announcement banner - it contains custom Javascript/CSS to improve Jira's UI. | |
| // | |
| ///////////////////// | |
| ///////////////////// | |
| // Inspired by | |
| // https://jira.atlassian.com/browse/GHS-3690?focusedCommentId=693585&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-693585 | |
| ///////////////////// | |
| ///////////////////// | |
| // Helper Function to Add CSS to <head> | |
| // Source: http://stackoverflow.com/questions/3922139/add-css-to-head-with-javascript | |
| ///////////////////// | |
| function addCSS(id, css) { | |
| var head = document.getElementsByTagName('head')[0]; | |
| var s = document.createElement('style'); | |
| s.setAttribute('type', 'text/css'); | |
| s.setAttribute('id', id); | |
| if (s.styleSheet) { // IE | |
| s.styleSheet.cssText = css; | |
| } else { // the world | |
| s.appendChild(document.createTextNode(css)); | |
| } | |
| head.appendChild(s); | |
| } | |
| ///////////////////// | |
| // Helper Function to remove CSS from <head> | |
| // Source: http://stackoverflow.com/questions/3387427/remove-element-by-id | |
| ///////////////////// | |
| function removeElement(id){ | |
| var trash = document.getElementById(id); | |
| trash.parentNode.removeChild(trash); | |
| } | |
| ///////////////////// | |
| // Function to collapse columns | |
| ///////////////////// | |
| function toggleColumn(col, column_short) { | |
| var child_index = col + 1; | |
| var css = '.ghx-zone-overlay-column:nth-child(' + child_index + '), .ghx-column:nth-child(' + child_index + ') { display: none; }' | |
| + '.column-toggle:nth-child(' + child_index + ') {background: #656060 none repeat scroll 0% 0%; color: silver; }'; | |
| if(document.getElementById('hidden-column-' + column_short)) { | |
| removeElement('hidden-column-' + column_short); | |
| localStorage.removeItem('hide-column-' + column_short); | |
| } else { | |
| addCSS('hidden-column-' + column_short, css); | |
| localStorage.setItem('hide-column-' + column_short, 'TRUE'); | |
| } | |
| } | |
| ///////////////////// | |
| // Function to enable/disable automatic column width sizing - Work in Progress | |
| ///////////////////// | |
| function toggleBreakWidth() { | |
| var col_width = 350; | |
| if (localStorage.getItem('col_width')) { | |
| col_width = localStorage.getItem('col_width'); | |
| } | |
| if(document.getElementById('col-width')) { | |
| removeElement('col-width'); | |
| removeElement('width-button') | |
| removeElement('colWidth'); | |
| removeElement('colRange'); | |
| localStorage.removeItem('break_width'); | |
| } else { | |
| colAlter(col_width); | |
| addCSS('width-button', '.width-button, .width-button:hover {background: #656060 none repeat scroll 0% 0%; color: silver; }') | |
| localStorage.setItem('break_width', 'TRUE'); | |
| workspace = document.querySelector("#collapse-controls"); | |
| workspace.insertAdjacentHTML('beforeend', '<input type="range" id="colWidth" min="200" max="800" step="10" value="' + col_width + '" oninput="showValue(this.value); colAlter(this.value);" onchange="showValue(this.value); colAlter(this.value);"/>'); | |
| workspace.insertAdjacentHTML('beforeend', '<span id="colRange">' + col_width + 'px </span>'); | |
| } | |
| } | |
| ///////////////////// | |
| // Helper function for toggleBreakWidth() to update the CSS for the column width | |
| ///////////////////// | |
| function colAlter(col_width){ | |
| localStorage.setItem('col_width', col_width); | |
| if (document.getElementById('col-width')) { | |
| removeElement('col-width'); | |
| } | |
| addCSS('col-width', '.ghx-column, .ghx-column-headers, .ghx-zone-overlay-column { width:' + col_width + 'px !important;}'); | |
| } | |
| ////////////// | |
| // Create Buttons for Every Column on The Board | |
| // Source: http://stackoverflow.com/questions/16949443/get-contents-of-h1-convert-them-it-to-text-and-set-as-a-title-of-the-page | |
| ////////////// | |
| function createButtons() { | |
| var text = "textContent" in document.body ? "textContent" : "innerText"; | |
| var workspace = document.querySelector('.ghx-controls-work'); | |
| var columnNames = document.querySelectorAll('.ghx-column-headers h2'); | |
| //var col_width = 350; | |
| cssAlter(); | |
| workspace.insertAdjacentHTML('beforeend', '<br>' + '<div id="collapse-controls">'); | |
| workspace = document.querySelector("#collapse-controls"); | |
| //Create buttons for each column - also look for local storage and set state if local storage exists. | |
| for (var i = 0; i < columnNames.length; i++) { | |
| var column_name = columnNames[i][text]; | |
| var column_short = column_name.replace(/[^A-Z0-9]+/ig, "_"); | |
| if (localStorage.getItem('hide-column-' + column_short)) { | |
| toggleColumn(i, column_short); | |
| } | |
| workspace.insertAdjacentHTML('beforeend', '<input type="button" class="aui-button column-toggle" value="' + column_name + '" onclick="toggleColumn(' + i + ', \'' + column_short + '\' ); " />'); | |
| } | |
| workspace.insertAdjacentHTML('beforeend', ' | '); | |
| workspace.insertAdjacentHTML('beforeend', '<input type="button" class="aui-button width-button" value="Break Width" onclick="toggleBreakWidth();" />'); | |
| if (localStorage.getItem('break_width')) { | |
| col_width = localStorage.getItem('col_width'); | |
| toggleBreakWidth(col_width); | |
| } | |
| } | |
| ///////////////////// | |
| // Show Value of the Range Slider | |
| // Source: http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/ | |
| ///////////////////// | |
| function showValue(newValue) | |
| { | |
| document.getElementById("colRange").innerHTML = newValue + 'px'; | |
| } | |
| ///////////////////// | |
| // Trigger Button Creation after the Page Has Loaded | |
| ///////////////////// | |
| // Create Buttons on Load - not working :( :( :( | |
| // window.onLoad(createButtons()); | |
| // https://gist.github.com/blainesch/7532458 | |
| function waitCreateButtons(milliseconds) { | |
| window.setTimeout(createButtons,milliseconds); | |
| } | |
| ///////////////////// | |
| // Alter the Page CSS for better display of the cards | |
| // Script source: https://jira.atlassian.com/browse/GHS-5200 | |
| ///////////////////// | |
| function cssAlter(){ | |
| addCSS('css-alters', '.aui-button { font-size: small; } ' | |
| + '.ghx-issue .ghx-avatar { top: 5px !important;}' | |
| + '.ghx-avatar-img { height:25px; line-height:25px; width:25px; }' | |
| //+ '.ghx-type { display: none; }' | |
| //+ '.ghx-type { left:6px !important; top:5px !important; }' | |
| + '.ghx-flags { display: none; }' | |
| //+ '.ghx-flags { left:6px !important; }' | |
| //+ '.ghx-flagged { background: #FFB2B2 none repeat scroll 0% 0%; }' | |
| + '.ghx-issue .ghx-issue-content { min-height:20px; }' | |
| //+ '.ghx-issue .ghx-issue-content { padding:5px 5px 5px 25px; }' | |
| + '.ghx-issue-fields .ghx-summary .ghx-inner { display: block; font-size: 1.3em; line-height: 1.1; max-height: 6.5em; overflow: hidden; overflow-x: hidden; overflow-y: hidden; word-wrap: break-word; }' | |
| //+ '.ghx-issue-fields { padding-right: 0; }' | |
| + '.ghx-issue .ghx-extra-fields .ghx-fa { display: none; }' | |
| + '.ghx-issue.ghx-has-avatar .ghx-issue-fields { padding-right: 0; }' | |
| //+ '.ghx-issue { float:left; width:49%; font-size: .8em; }' // columns two cards wide | |
| //+ '.ghx-key { font-size: 1em; }' | |
| //+ '.ghx-key { display: none !important; }' | |
| //+ ('.ghx-parent-group { float:left; width:100%; font-size: .8em;}' // columns two cards wide | |
| + '#ghx-operations { padding: 0px 0px 10px 10px; } ' | |
| + '#ghx-board-name { display: none; } ' | |
| + '#ghx-header { padding: 3px 20px; } ' | |
| + '#ghx-modes-tools { position:relative; z-index: 1; } ' | |
| + '#ghx-pool { padding-top: 10px !important;}' | |
| + '#ghx-column-header-group {position: initial !important;}' // Would like to fix the y but not x, can't do that without Jquery right now. | |
| + '#colRange {font-size: small;}' | |
| + '#js-swimlane-header-stalker {display: none !important;}'); | |
| } | |
| ///////////////////// | |
| // Recreate the Buttons if a User Clicks on an Agile Board work link from another tab | |
| // | |
| // This is not yet working. | |
| // | |
| ///////////////////// | |
| //function workLink() { | |
| // document.querySelectorAll('[data-link-id=com.pyxis.greenhopper.jira:project-sidebar-work-scrum]')[0].addEventListener("click", waitCreateButtons); | |
| //} | |
| // Specify with (rapidView=16|rapidView=7|etc) | |
| if(window.location.href.match("(rapidView)")) { | |
| waitCreateButtons(3000); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment