15 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/js/better-jira.js:
--------------------------------------------------------------------------------
1 | import DetailResizer from './components/DetailResizer';
2 | import BetterJira from './components/BetterJira';
3 |
4 | let betterJira = BetterJira.initialize();
5 | DetailResizer.run();
6 |
7 | document.addEventListener('better-jira:updated', (event) => {
8 | console.log('🔧: ', event.detail);
9 | betterJira.update(event);
10 | });
11 |
--------------------------------------------------------------------------------
/src/js/components/BetterJira.js:
--------------------------------------------------------------------------------
1 | import Standup from './Standup';
2 | import Jira from './Jira';
3 | import OpenGithubInNewTab from './OpenGithubInNewTab';
4 |
5 | export default class BetterJira {
6 | static initialize() {
7 | return new this();
8 | }
9 |
10 | constructor() {
11 | this.data = {};
12 | this.Storage = chrome.storage.sync;
13 | this.running = true;
14 | this.instructionsCssClass = 'BetterJira-instructions';
15 |
16 | if (Jira.isNotPresent()) {
17 | this.running = false;
18 | return;
19 | }
20 |
21 | this._initialColumnResize();
22 | this.Storage.get('standup', (storage) => {
23 | this._initiateStandup(storage.standup);
24 | });
25 | this._openGithubLinksInNewTabs();
26 | }
27 |
28 | update(event) {
29 | this._updateColumnWidths(event.detail);
30 | this._initiateStandup(event.detail.standup);
31 | }
32 |
33 | _updateColumnWidths(detail) {
34 | if (!this.running) {
35 | return;
36 | }
37 |
38 | if (!detail.enabled) {
39 | document.body.classList.remove('better-jira');
40 | document.getElementById('ghx-pool-wrapper').style.width = 'auto';
41 | return;
42 | }
43 | document.body.classList.add('better-jira');
44 | this._getPreferredWidth(detail);
45 | }
46 |
47 | _ifEnabled(enabledCallback, disabledCallback = () => {}) {
48 | if (!this.running) {
49 | return;
50 | }
51 |
52 | this.Storage.get('enabled', (storage) => {
53 | if (!storage.enabled) {
54 | disabledCallback();
55 | return;
56 | }
57 |
58 | enabledCallback();
59 | });
60 | }
61 |
62 | _initialColumnResize() {
63 | if (!this.running) {
64 | return;
65 | }
66 |
67 | setTimeout(() => {
68 | if (Jira.hasNotLoadedSwimlanes()) {
69 | // console.log('🔧: Swimlanes not present, waiting 100ms.');
70 | return this._initialColumnResize();
71 | }
72 | // console.log('🔧: Swimlanes are present, resizing now.');
73 |
74 | let enabled = () => {
75 | document.body.classList.add('better-jira');
76 | this.Storage.get('columnWidth', this._getPreferredWidth.bind(this));
77 | this._protectAgainstReactBoardReloading();
78 | };
79 |
80 | //-- Disallow setting columns if the plugin is not enabled
81 | let disabled = () => {
82 | document.body.classList.remove('better-jira');
83 | document.getElementById('ghx-pool-wrapper').style.width = 'auto';
84 | };
85 | this._ifEnabled(enabled, disabled);
86 | }, 100);
87 | }
88 |
89 | _getPreferredWidth(storage) {
90 | if (!this.running) {
91 | return;
92 | }
93 |
94 | this.data.columnWidth = storage.columnWidth;
95 |
96 | if (!this.data.columnWidth) {
97 | this.data.columnWidth = 'sm';
98 | }
99 |
100 | this._setPreferredWidth();
101 | }
102 |
103 | _setPreferredWidth() {
104 | if (!this.running) {
105 | return;
106 | }
107 |
108 | let preferredWidth;
109 |
110 | preferredWidth = this.data.columnWidth;
111 |
112 | try {
113 | let items = { poolWidth: preferredWidth };
114 | this.Storage.set(items);
115 |
116 | this._setPoolWidth(preferredWidth);
117 | } catch (e) {
118 | console.error(e);
119 | }
120 | }
121 |
122 | _setPoolWidth(width) {
123 |
124 | //-- Define sizes
125 | const columnWidths = {
126 | sm: 'auto',
127 | md: '150%',
128 | lg: '200%',
129 | xl: '250%'
130 | }
131 |
132 | if (width === 'sm') {
133 | document.getElementById('ghx-pool-wrapper').style.width = 'auto';
134 | } else {
135 | document.getElementById('ghx-pool-wrapper').style.width = 'var(--viewport-width)';
136 | document.documentElement.style.setProperty(
137 | '--viewport-width',
138 | `${columnWidths[width]}`
139 | );
140 | }
141 | }
142 |
143 | _setDetailViewWidth(width) {
144 | document.documentElement.style.setProperty('--detail-view-width', width);
145 | }
146 |
147 | _initiateStandup(config) {
148 | Standup.run(config);
149 | }
150 |
151 | _protectAgainstReactBoardReloading() {
152 | var mutationObserver = new MutationObserver((mutations) => {
153 | let contentHasBeenDeleted = mutations.find((mutation) => {
154 | if (mutation.removedNodes < 1) {
155 | return false;
156 | }
157 |
158 | let removedNodes = [...mutation.removedNodes];
159 | return removedNodes.find((node) => {
160 | return node.id === 'ghx-pool-column';
161 | });
162 | });
163 |
164 | if (contentHasBeenDeleted) {
165 | mutationObserver.disconnect();
166 | this._initialColumnResize();
167 | }
168 | });
169 | mutationObserver.observe(Jira.content(), {
170 | childList: true,
171 | subtree: true
172 | });
173 | }
174 |
175 | _openGithubLinksInNewTabs() {
176 | OpenGithubInNewTab.initialize();
177 | }
178 | }
179 |
--------------------------------------------------------------------------------
/src/js/components/DetailResizer.js:
--------------------------------------------------------------------------------
1 | import Jira from './Jira';
2 |
3 | class DetailResizer {
4 | constructor() {
5 | this.id = 'ghx-detail-view';
6 | this.Storage = chrome.storage.sync;
7 | this.listening = false;
8 | this.running = true;
9 | this.manageMouseListener = this.manageMouse.bind(this);
10 | }
11 |
12 | run() {
13 | if (Jira.isNotPresent()) {
14 | this.running = false;
15 | return;
16 | }
17 |
18 | let detailView = document.getElementById(this.id);
19 | if (!detailView) {
20 | this.running = false;
21 | return;
22 | }
23 | detailView.addEventListener('mouseenter', () => {
24 | if (detailView.querySelector('.better-resize') !== null) {
25 | return;
26 | }
27 |
28 | let resizer = document.createElement('div');
29 | resizer.classList.add('better-resize');
30 | detailView.appendChild(resizer);
31 |
32 | detailView
33 | .querySelector('.better-resize')
34 | .addEventListener('mousedown', (event) => {
35 | event.preventDefault();
36 | if (event.button === 2) {
37 | return;
38 | }
39 |
40 | document.addEventListener('mousemove', this.manageMouseListener);
41 | this.listening = true;
42 | });
43 |
44 | document.addEventListener('mouseup', (event) => {
45 | if (!this.listening) {
46 | return;
47 | }
48 |
49 | document.removeEventListener('mousemove', this.manageMouseListener);
50 | this.listening = false;
51 |
52 | this.saveDetailViewWidth();
53 | });
54 | });
55 |
56 | // detailView.addEventListener('mouseleave', () => {
57 | // console.log('You are now exiting');
58 | // detailView.querySelector('.better-resize').remove();
59 | // });
60 | }
61 |
62 | manageMouse(event) {
63 | if (!this.running) {
64 | return;
65 | }
66 |
67 | let width = window.innerWidth - event.pageX + 2;
68 |
69 | document.documentElement.style.setProperty(
70 | '--detail-view-width',
71 | `${width}px`
72 | );
73 | }
74 |
75 | saveDetailViewWidth() {
76 | if (!this.running) {
77 | return;
78 | }
79 |
80 | console.log(
81 | '🔧: Detail Width',
82 | document.documentElement.style.getPropertyValue('--detail-view-width')
83 | );
84 | this.Storage.set({
85 | detailViewWidth: document.documentElement.style.getPropertyValue(
86 | '--detail-view-width'
87 | )
88 | });
89 | }
90 | }
91 |
92 | export default new DetailResizer();
93 |
--------------------------------------------------------------------------------
/src/js/components/Jira.js:
--------------------------------------------------------------------------------
1 | class Jira {
2 | constructor() {
3 | this._isPresent = null;
4 | }
5 |
6 | isPresent() {
7 | if (this._isPresent !== null) {
8 | return this._isPresent;
9 | }
10 |
11 | try {
12 | let jira = document.querySelector('meta[name="application-name"]');
13 | return (this._isPresent = jira.content === 'JIRA');
14 | } catch (e) {
15 | return (this._isPresent = false);
16 | }
17 | }
18 |
19 | isNotPresent() {
20 | return !this.isPresent();
21 | }
22 |
23 | hasLoadedSwimlanes() {
24 | return !!document.querySelector(
25 | '.ghx-swimlane, #ghx-mapping, #jira-board > div > div'
26 | );
27 | }
28 |
29 | hasNotLoadedSwimlanes() {
30 | return !this.hasLoadedSwimlanes();
31 | }
32 |
33 | columnsContainer() {
34 | return document.querySelector(
35 | '.ghx-swimlane > .ghx-columns, #ghx-mapping, .aui-page-panel-content > #jira-board'
36 | );
37 | }
38 |
39 | columns() {
40 | return this.columnsContainer().querySelectorAll(
41 | '.ghx-column, .ghx-column-wrapper, [class*="hook__column"]'
42 | );
43 | }
44 |
45 | content() {
46 | return document.getElementById('content');
47 | }
48 | }
49 |
50 | export default new Jira();
51 |
--------------------------------------------------------------------------------
/src/js/components/OpenGithubInNewTab.js:
--------------------------------------------------------------------------------
1 | export default class OpenGithubInNewTab {
2 | static initialize() {
3 | return new this();
4 | }
5 |
6 | constructor() {
7 | document.addEventListener('click', (click) => {
8 | let githubLink = click.target.closest(
9 | '.pullrequest-link, .repository-link, .branch-link, .create-pullrequest-link, .changesetid, .filename a, .filerow a.more-files-info'
10 | );
11 | if (!githubLink) {
12 | return;
13 | }
14 |
15 | click.preventDefault();
16 |
17 | let newWindow = window.open(githubLink.href, '_blank');
18 | newWindow.opener = null;
19 | });
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/js/components/Standup.js:
--------------------------------------------------------------------------------
1 | import Jira from './Jira';
2 |
3 | class Standup {
4 | constructor() {
5 | this.cssClass = 'standup';
6 | this.instructionsCssClass = 'BetterJira-instructions';
7 | this.data = {};
8 | this.running = true;
9 | }
10 |
11 | run(state) {
12 | if (Jira.isNotPresent()) {
13 | this.running = false;
14 | return;
15 | }
16 |
17 | // Open standup listener
18 | this._listener = (click) => {
19 | let standupButton = click.target.closest('[data-standup-open]');
20 | if (!standupButton) {
21 | return;
22 | }
23 |
24 | chrome.storage.sync.set({ standup: true }, () => {
25 | this.initializeStandup(true);
26 | });
27 | };
28 | document.addEventListener('click', this._listener);
29 |
30 | //-- Add open Standup Mode button element
31 | var openStandupModeBtn = document.createElement('div');
32 | openStandupModeBtn.setAttribute('data-standup-open', '');
33 | openStandupModeBtn.classList.add(this.instructionsCssClass);
34 | openStandupModeBtn.innerHTML = '