OneAuth/oa/front/t.js

(function () {
  const style = document.createElement('style');

  // 定义 CSS 文本
  const cssText = `
.selected {
  outline: 2px solid #44f;
  opacity: 1;
  pointer-events: auto;
}
.panel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 300px;
  height: 100%;
  background-color: #f4f4f4;
  border-left: 1px solid #ccc;
  padding: 10px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  display: none;
  resize: both;
  overflow: auto;
}
.resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  cursor: se-resize;
  background-color: #aaa;
}
.domline {
  width: 100%;
}
.domline:hover {
  opacity: 0.7;
}
`;

  style.innerHTML = cssText;
  let selectedElement = null;
  const panel = document.createElement('div');
  panel.classList.add('panel');


  const treeContainer = document.createElement('div');
  treeContainer.style.marginBottom = '10px';

  const htmlEditor = document.createElement('textarea');
  htmlEditor.style.width = '100%';
  htmlEditor.rows = '10';
  htmlEditor.cols = '30';
  htmlEditor.placeholder = 'Edit element innerHTML here...';

  const header = document.createElement('div');
  header.style.cursor = 'move';
  header.style.backgroundColor = '#ddd';
  header.style.padding = '5px';
  header.textContent = 'DOM Inspector';

  panel.appendChild(style);
  panel.appendChild(header);
  panel.appendChild(treeContainer);
  panel.appendChild(htmlEditor);

  document.body.appendChild(panel);

  function createTree(node, parent, iter = 0) {
    if (!node || node.nodeType !== Node.ELEMENT_NODE) return;

    if (iter > 3) {
      return;
    }
    const item = document.createElement('div');
    item.style.cursor = 'pointer';
    item.style.marginLeft = '10px';

    const line = document.createElement('div');
    line.textContent = node.tagName.toLowerCase();
    line.classList.add('domline');
    line.addEventListener('click', (e) => {
      console.log(node)
      e.preventDefault();
      selectElement(node);
    });

    item.appendChild(line);
    parent.appendChild(item);

    Array.from(node.children).forEach(child => {
      createTree(child, item, iter + 1);
    });
  }

  function selectElement(element) {
    if (selectedElement) {
      selectedElement.classList.remove('selected')
      // document.querySelectorAll('.blurred').forEach(el => el.classList.remove('blurred'));
    }
    selectedElement = element;
    selectedElement.classList.add('selected')

    updatePanel(selectedElement);

    // let pele = element.parentElement
    // while (pele && pele !== document.documentElement) {
    //   pele.classList.add('blurred');
    //   pele = pele.parentElement;
    // }
  }

  function updatePanel(element) {

    treeContainer.innerHTML = '';
    if (element.parentElement) {
      const parentItem = document.createElement('div');
      parentItem.textContent = `parent (${element.parentElement.tagName.toLowerCase()})`;
      parentItem.style.cursor = 'pointer';
      parentItem.style.color = 'blue';
      parentItem.style.fontWeight = 'bold';

      parentItem.addEventListener('click', () => {
        selectElement(element.parentElement);
      });

      treeContainer.appendChild(parentItem);
    }

    createTree(element, treeContainer);

    htmlEditor.value = element.outerHTML || '';

    htmlEditor.oninput = () => {
      element.outerHTML = htmlEditor.value;
    };
  }

  document.addEventListener('keydown', event => {
    if (event.key === 'Control') {
      document.addEventListener('mousedown', mouseDownHandler);
    }
  });

  document.addEventListener('keyup', event => {
    if (event.key === 'Control') {
      document.removeEventListener('mousedown', mouseDownHandler);
    }
  });

  function mouseDownHandler(event) {
    if (event.button === 0 && event.ctrlKey) {
      event.preventDefault();
      selectElement(event.target);
      panel.style.display = 'block';
    }
  }

  // Add draggable functionality to the sidebar
  let isDragging = false;
  let dragOffsetX, dragOffsetY;

  header.addEventListener('mousedown', (e) => {
    isDragging = true;
    dragOffsetX = e.clientX - panel.offsetLeft;
    dragOffsetY = e.clientY - panel.offsetTop;
  });
  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      let top = e.clientY - dragOffsetY;
      if (top < 0) top = 0;
      let left = e.clientX - dragOffsetX;
      if (left < 0) left = 0;
      panel.style.left = `${left}px`;
      panel.style.top = `${top}px`;
    }
  });
  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
})();