mirror of
https://github.com/alexadam/save-as-ebook.git
synced 2025-09-07 16:09:11 +00:00
127 lines
4.2 KiB
JavaScript
127 lines
4.2 KiB
JavaScript
var lastTargetElem = null
|
|
var lastElementData = {}
|
|
var lastParentElem = null
|
|
var lastParentData = {}
|
|
|
|
|
|
let bodyElem = document.getElementsByTagName('body')[0]
|
|
let bodyInner = bodyElem.innerHTML
|
|
bodyElem.innerHTML = ''
|
|
|
|
let container = document.createElement('div')
|
|
container.style.display = "flex"
|
|
container.style.flexFlow = "row"
|
|
let menuContainer = document.createElement('div')
|
|
menuContainer.style.width = '300px'
|
|
menuContainer.style.minWidth = '300px'
|
|
menuContainer.style.height = '600px'
|
|
menuContainer.style.minHeight = '600px'
|
|
let page = document.createElement('div')
|
|
page.id= 'super-selector'
|
|
page.style.width = '100%'
|
|
page.style.height = '100%'
|
|
page.innerHTML = bodyInner
|
|
|
|
let menu = document.createElement('div')
|
|
menu.id = "slector-main-menu"
|
|
menu.style.width = '300px'
|
|
menu.style.minWidth = '300px'
|
|
menu.style.height = '600px'
|
|
menu.style.minHeight = '600px'
|
|
menu.style.backgroundColor = 'black'
|
|
menu.style.position = 'fixed'
|
|
menu.style.top = '0'
|
|
|
|
|
|
container.appendChild(menuContainer)
|
|
container.appendChild(page)
|
|
bodyElem.appendChild(container)
|
|
bodyElem.appendChild(menu)
|
|
|
|
document.getElementById('super-selector').addEventListener('mousemove', (e) => {
|
|
// document.getElementsByTagName('body')[0].addEventListener('mousemove', (e) => {
|
|
e.preventDefault()
|
|
|
|
if (lastTargetElem) {
|
|
lastTargetElem.style.backgroundColor = lastElementData.backgroundColor
|
|
}
|
|
|
|
let targetElem = document.elementFromPoint(e.clientX, e.clientY);
|
|
|
|
let targetParent = targetElem.parentNode
|
|
lastElementData.backgroundColor = targetElem.style.backgroundColor
|
|
|
|
targetElem.style.backgroundColor = 'rgba(255,0,0,0.25)'
|
|
targetElem.dataset.excluded = 'true'
|
|
|
|
targetElem.onclick = (e) => {
|
|
e.preventDefault() // FIXME except for my menu
|
|
e.stopPropagation();
|
|
|
|
let originalClickedElem = e.target
|
|
let clickedElem = e.target
|
|
|
|
if (!clickedElem) {
|
|
return
|
|
}
|
|
|
|
// console.log(createXPathFromElement(clickedElem));
|
|
|
|
let clickedElemParent = clickedElem.parentNode;
|
|
let foundClickedEleme = false
|
|
while (clickedElemParent) {
|
|
if (!clickedElemParent || !clickedElemParent.style) {
|
|
break
|
|
}
|
|
if (clickedElemParent.id === 'slector-main-menu') {
|
|
// ignore main menu
|
|
return
|
|
}
|
|
if (clickedElemParent.style.opacity === '0.1') {
|
|
foundClickedEleme = true
|
|
clickedElem = clickedElemParent
|
|
break
|
|
}
|
|
clickedElemParent = clickedElemParent.parentNode;
|
|
}
|
|
|
|
if (!clickedElem.style.opacity || clickedElem.style.opacity > 0.2) {
|
|
clickedElem.style.opacity = 0.1
|
|
clickedElem.style.border = 'solid 3px black'
|
|
}
|
|
else {
|
|
clickedElem.style.opacity = 1
|
|
clickedElem.style.border = 'none'
|
|
}
|
|
}
|
|
|
|
lastTargetElem = targetElem
|
|
})
|
|
|
|
// src https://stackoverflow.com/questions/2661818/javascript-get-xpath-of-a-node
|
|
function createXPathFromElement(elm) {
|
|
var allNodes = document.getElementsByTagName('*');
|
|
for (var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode)
|
|
{
|
|
if (elm.hasAttribute('id')) {
|
|
var uniqueIdCount = 0;
|
|
for (var n=0;n < allNodes.length;n++) {
|
|
if (allNodes[n].hasAttribute('id') && allNodes[n].id == elm.id) uniqueIdCount++;
|
|
if (uniqueIdCount > 1) break;
|
|
};
|
|
if ( uniqueIdCount == 1) {
|
|
segs.unshift('id("' + elm.getAttribute('id') + '")');
|
|
return segs.join('/');
|
|
} else {
|
|
segs.unshift(elm.localName.toLowerCase() + '[@id="' + elm.getAttribute('id') + '"]');
|
|
}
|
|
} else if (elm.hasAttribute('class')) {
|
|
segs.unshift(elm.localName.toLowerCase() + '[@class="' + elm.getAttribute('class') + '"]');
|
|
} else {
|
|
for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
|
|
if (sib.localName == elm.localName) i++; };
|
|
segs.unshift(elm.localName.toLowerCase() + '[' + i + ']');
|
|
};
|
|
};
|
|
return segs.length ? '/' + segs.join('/') : null;
|
|
};
|