|
(function () { |
|
var colourHex = '#add8e6'; |
|
|
|
var style = document.createElement("style"); |
|
style.appendChild(document.createTextNode("")); |
|
document.head.appendChild(style); |
|
style.sheet.insertRule("body:after {content:\" \";position:fixed;display:var(--dsp);pointer-events:none;background-color:"+colourHex+"80;border:"+colourHex+" solid 2px;top:var(--y);left:var(--x);width:var(--width);height:var(--height);z-index:9999;}"); |
|
|
|
var generator = null; |
|
let enabled = false; |
|
|
|
if (typeof SelectorGenerator !== 'undefined') |
|
generator = new SelectorGenerator(); |
|
|
|
const localKey = 'selector-info-message'; |
|
if (localStorage.getItem(localKey) !== "hidden") { |
|
if (confirm( |
|
'Disable and Enable the outline using ScrollLock\n' + |
|
'Use Ctrl + click to get the highlighted element\'s css selector\n' + |
|
'Press okay to not see this message again... on this site :/' |
|
)) { |
|
localStorage.setItem(localKey, "hidden") |
|
} |
|
} |
|
|
|
document.body.style.setProperty("--x", "0px"); |
|
document.body.style.setProperty("--y", "0px"); |
|
document.body.style.setProperty("--height", "0px"); |
|
document.body.style.setProperty("--width", "0px"); |
|
document.body.style.setProperty("--dsp", "none"); |
|
|
|
document.addEventListener('click', e => { |
|
if (!e.ctrlKey || !enabled || generator === null) return; |
|
|
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
|
|
let selector; |
|
let next = e.target; |
|
let current = null; |
|
|
|
let track = ''; |
|
|
|
do { |
|
selector = generator.getSelector(next) + track; |
|
current = next; |
|
next = current.parentElement; |
|
|
|
track = ' > ' + |
|
current.tagName.toLowerCase() + ':nth-child(' + ( |
|
[].indexOf.call(next.children, current) + 1 |
|
) + ')' + track; |
|
|
|
} while (document.querySelectorAll(selector).length > 1); |
|
|
|
prompt('You just selected:', selector); |
|
}, true); |
|
|
|
document.addEventListener('keydown', e => { |
|
enabled = e.getModifierState('ScrollLock'); |
|
document.body.style.setProperty("--dsp", enabled ? "block" : "none"); |
|
}); |
|
// Add event listener |
|
document.addEventListener('mousemove', e => { |
|
enabled = e.getModifierState('ScrollLock'); |
|
document.body.style.setProperty("--dsp", enabled ? "block" : "none"); |
|
|
|
if (!e.target.getBoundingClientRect) return; |
|
var box = e.target.getBoundingClientRect(); |
|
document.body.style.setProperty("--x", box.x + "px"); |
|
document.body.style.setProperty("--y", box.y + "px"); |
|
document.body.style.setProperty("--height", box.height + "px"); |
|
document.body.style.setProperty("--width", box.width + "px"); |
|
}) |
|
})() |
