Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/19341.js

Last active August 22, 2019 21:36
Show Gist options
  • Save mattborn/3f2a2ad86af5403e6dc9b16ebaa9533a to your computer and use it in GitHub Desktop.
Save mattborn/3f2a2ad86af5403e6dc9b16ebaa9533a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
19341.js
if (location.hostname.split('.')[1] !== 'artemishealth') {
alert('This bookmarklet only works on *.artemishealth.com')
} else {
console.log('Bookmarketlet ran', Date.now())
}
(() => {
const benchmarkColor = '#f68'
const menu = document.querySelector('.lib-metric-chooser-categories .component__group').cloneNode(true)
document.querySelector('.lib-metric-chooser-categories').insertBefore(menu, document.querySelector('.lib-metric-chooser-categories .component__group'))
document.querySelector('.lib-metric-chooser-categories .component__group--subject').style.backgroundColor = benchmarkColor
document.querySelector('.lib-metric-chooser-categories .component__group--subject p').textContent = 'Benchmarks'
document.querySelector('.lib-metric-chooser-categories .component__group--subject span').style.color = benchmarkColor
const iconMap = ['icon-book', 'icon-milliman', 'icon-home']
const renameMap = ['Custom', 'Milliman', 'Parent']
document.querySelector('.lib-metric-chooser-categories .component__group').querySelectorAll('.component__group--item').forEach((item, i) => {
const icon = document.createElement('i')
icon.className = iconMap[i]
icon.style.marginRight = '4px'
icon.style.width = '16px'
item.prepend(icon)
item.style.borderColor = benchmarkColor
item.style.color = benchmarkColor
item.querySelector('p').style.flex = 1
item.querySelector('p').textContent = renameMap[i]
item.querySelector('span').style.backgroundColor = benchmarkColor
})
})()
Raw
19342.js
if (!location.hostname.split('.')[0].startsWith('zeus')) {
alert('This bookmarklet only works on zeus-*.internal-artemishealth.com')
} else {
console.log('Bookmarketlet ran', Date.now())
}
/**
* injectColumn
*
* @param {Array} targetTables
* @param {Array} columns // expects name, index + data function forEach
*/
function injectColumns (targetTables, columns) {
targetTables.forEach(table => {
const firstRow = table.querySelector('.mat-header-row')
columns.forEach(column => {
const columnHeader = firstRow.querySelector('.mat-header-cell').cloneNode(true)
columnHeader.textContent = column.name
firstRow.appendChild(columnHeader)
table.querySelectorAll('.mat-row').forEach((row, i) => {
const cell = row.querySelector('.mat-cell').cloneNode(true)
cell.innerHTML = column.data()
row.appendChild(cell)
})
})
})
}
function randomJobStatus() {
const statuses = [
'<span style="color:#2be">Staging<span> <i class="material-icons">timelapse</i>',
'<span style="color:#e32">Failed Stage<span>',
'Staged',
'<span style="color:#fa4">Rejected<span> <i class="material-icons">block</i>',
'<span style="color:#5c2">Deployed<span> <i class="material-icons">cloud_done</i>',
]
return statuses[Math.floor(Math.random() * statuses.length)]
}
function timestamp() {
return Date.now() - Math.floor(Math.random() * 3600)
}
(() => {
injectColumns(document.querySelectorAll('.mat-table'), [
{
name: 'Last Job Status',
index: -1,
data: randomJobStatus,
},
{
name: 'Last Job Run On',
index: -1,
data: timestamp,
},
])
})()
Raw
README.md

dom-prototypes

An index of bookmarklets that manipulate the DOM.

Raw
index.html
<!doctype html>
<html>
<head>
<meta charSet="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DOM Prototypes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>💡Bookmarklets</h1>
<p>Drag any of the following to your bookmarks bar and click when viewing the specified app and location to run the script.</p>
<table>
<tr>
<th>Platform</th>
<th>Location</th>
<th>Description</th>
<th>Bookmarklet</th>
<th>Date</th>
</tr>
<tr>
<td>Artemis</td>
<td>Measure Chooser</td>
<td>Adds pink Benchmarks filters to right side</td>
<td><a class="bookmarklet" href="javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='https://gist.githack.com/mattborn/3f2a2ad86af5403e6dc9b16ebaa9533a/raw/19341.js?v='+Date.now();document.body.appendChild(s);})();
">💡 Benchmarks Filters</a></td>
<td>Aug 21</td>
</tr>
<tr>
<td>Zeus</td>
<td>Customer Integrations</td>
<td>Adds new table columns</td>
<td><a class="bookmarklet" href="javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='https://gist.githack.com/mattborn/3f2a2ad86af5403e6dc9b16ebaa9533a/raw/19342.js?v='+Date.now();document.body.appendChild(s);})();
">💡 Integration Columns</a></td>
<td>Aug 22</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Raw
styles.css
@import url('https://fonts.googleapis.com/css?family=Karla');
@import url('https://use.fontawesome.com/releases/v5.10.1/css/all.css');
body {
color: #345;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.3;
margin: 0 auto;
max-width: 960px;
padding: 2em;
text-align: left;
}
table { width: 100%; }
th,
td {
border-bottom: 1px solid #f1f3f5;
font-size: 14px;
padding: 1em;
vertical-align: top;
}
th:first-child,
td:first-child { padding-left: 0; }
th:last-child,
td:last-child { padding-right: 0; }
.bookmarklet {
background: #f1f3f5;
border-radius: 4px;
border: 1px solid #bcd;
color: #345;
display: inline-block;
font-weight: bold;
padding: .5em;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment