1var VALID_CLASSNAME = /^[_a-zA-Z\- ]*$/ 2 3var constructCssPath = el => { 4 if (!(el instanceof Element)) return 5 let path = [] 6 while (el.nodeType === Node.ELEMENT_NODE) { 7 let selector = el.nodeName.toLowerCase() 8 if (el.id) { 9 selector += `#${el.id}` 10 path.unshift(selector) 11 break 12 } else if (el.className && VALID_CLASSNAME.test(el.className)) { 13 selector += `.${(el.className.trim()).replace(/\s+/g, '.')}` 14 } else { 15 let sib = el, 16 nth = 1 17 while ((sib = sib.previousElementSibling)) { 18 if (sib.nodeName.toLowerCase() == selector) nth++ 19 } 20 if (nth != 1) selector += ':nth-of-type(' + nth + ')' 21 } 22 path.unshift(selector) 23 el = el.parentNode 24 } 25 return path.join(' > ') 26} 27 28 29var defaultProps = { 30 root: 'body', 31 outlineStyle: '5px solid rgba(204, 146, 62, 0.3)', 32 onClick: el => console.log('Element was clicked:', constructCssPath(el)) 33} 34 35var Inspector = ((props = {}) => { 36 const {root, excluded, outlineStyle} = { 37 ...defaultProps, 38 ...props 39 } 40 let onClick = props.onClick || defaultProps.onClick 41 42 let selected, excludedElements 43 44 const removeHighlight = el => { 45 if (el) el.style.outline = 'none' 46 } 47 48 const highlight = el => { 49 el.style.outline = outlineStyle 50 el.style.outlineOffset = `-${el.style.outlineWidth}` 51 } 52 53 const shouldBeExcluded = ev => { 54 if (excludedElements && excludedElements.length && excludedElements.some(parent => (parent === ev.target || parent.contains(ev.target)))){ 55 return true 56 } 57 } 58 59 const handleMouseOver = ev => { 60 if (shouldBeExcluded(ev)){ 61 return 62 } 63 selected = ev.target 64 highlight(selected) 65 } 66 67 const handleMouseOut = ev => { 68 if (shouldBeExcluded(ev)){ 69 return 70 } 71 removeHighlight(ev.target) 72 } 73 74 const handleClick = ev => { 75 if (shouldBeExcluded(ev)){ 76 return 77 } 78 ev.preventDefault() 79 ev.stopPropagation() 80 onClick(ev.target) 81 return false 82 } 83 84 const prepareExcluded = (rootEl) => { 85 if (!excluded.length){ 86 return [] 87 } 88 const excludedNested = excluded.flatMap(element => { 89 if (typeof element === 'string' || element instanceof String){ 90 return Array.from(rootEl.querySelectorAll(element)) 91 } else if (element instanceof Element){ 92 return [element] 93 } else if (element.length>0 && element[0] instanceof Element){ 94 return Array.from(element) 95 } 96 }) 97 return Array.from(excludedNested).flat() 98 } 99 100 const enable = onClickCallback => { 101 const rootEl = document.querySelector(root) 102 if (!rootEl) 103 return 104 105 if (excluded){ 106 excludedElements = prepareExcluded(rootEl) 107 } 108 rootEl.addEventListener('mouseover', handleMouseOver, true) 109 rootEl.addEventListener('mouseout', handleMouseOut, true) 110 rootEl.addEventListener('click', handleClick, true) 111 if (onClickCallback){ 112 onClick = onClickCallback 113 } 114 } 115 const cancel = () => { 116 const rootEl = document.querySelector(root) 117 if (!rootEl) 118 return 119 rootEl.removeEventListener('mouseover', handleMouseOver, true) 120 rootEl.removeEventListener('mouseout', handleMouseOut, true) 121 rootEl.removeEventListener('click', handleClick, true) 122 removeHighlight(selected) 123 124 } 125 return { 126 enable, 127 cancel 128 } 129}) 130 131window.classStack = [] 132window.classNameMap = {} 133 134function processStack(){ 135 classStack.forEach(element => { 136 document.head.removeChild(element); 137 }); 138 classStack.forEach(element => { 139 document.head.appendChild(element) 140 }); 141} 142 143function pushToClassMap(classNames){ 144 if(window.classNameMap[wpdata['object_id']]!=undefined){ 145 window.classNameMap[wpdata['object_id']].push(classNames) 146 } 147 else window.classNameMap[wpdata['object_id']] = [classNames] 148 console.log(window.classNameMap) 149} 150 151var inspector = Inspector({ 152 onClick:(el)=>{ 153 console.log(el) 154 const styleElement = document.createElement('style'); 155 var css = "."+Array.from(el.classList).join(".")+"{display:none!important}" 156 var classNames = Array.from(el.classList).join(".") 157 styleElement.textContent = css; 158 pushToClassMap(classNames) 159 window.classStack.push(styleElement) 160 document.head.appendChild(styleElement) 161 window.parent.postMessage("removed") 162 } 163}) 164 165window.inspector = inspector 166window.inpectorData = wpdata
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.