Last active
May 29, 2020 18:19
-
-
Save xcv58/c0ed6b0335c00f1d5c0063f187351652 to your computer and use it in GitHub Desktop.
Add a toggle collapse to enable one click collapse/expand.
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
const mouseEvent = document.createEvent('MouseEvents') | |
mouseEvent.initEvent('click', true, true) | |
const COLLAPSE_FILE = 'Hide Changeset' | |
const EXPAND_FILE = 'Expand File' | |
const getOptionsButton = (element) => { | |
const links = [...element.getElementsByTagName('a')].filter(link => link.innerHTML.search('View Options') > -1) | |
if (links.length <= 0) { | |
throw new Error('Now Option Button Found!') | |
} | |
return links[0] | |
} | |
const filterButton = (dropdownButtons, target) => { | |
const buttons = dropdownButtons.filter(({ innerHTML }) => innerHTML.includes(target)) | |
if (buttons.length) { | |
return buttons[0] | |
} | |
} | |
const getToggleButton = (element) => { | |
const dropdownButtons = [...document.getElementsByClassName('phuix-dropdown-menu')[0].getElementsByTagName('a')] | |
return { | |
collapse: filterButton(dropdownButtons, COLLAPSE_FILE), | |
expand: filterButton(dropdownButtons, EXPAND_FILE) | |
} | |
} | |
const getClickFunc = (element, button) => () => { | |
const optionButton = getOptionsButton(element) | |
optionButton.dispatchEvent(mouseEvent) | |
const { collapse, expand } = getToggleButton() | |
console.log({ collapse, expand }) | |
if (!collapse && !expand) { | |
return optionButton.dispatchEvent(mouseEvent) | |
} | |
(collapse || expand).dispatchEvent(mouseEvent) | |
button.innerHTML = collapse ? EXPAND_FILE : COLLAPSE_FILE | |
} | |
const getButton = (element) => { | |
const button = document.createElement('button') | |
button.innerHTML = COLLAPSE_FILE | |
button.addEventListener('click', getClickFunc(element, button)) | |
return button | |
} | |
const insertButtons = () => { | |
[...document.getElementsByClassName('differential-changeset-buttons')].map((element) => { | |
element.insertAdjacentElement('afterbegin', getButton(element)) | |
}) | |
} | |
insertButtons() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment