{"id":595,"date":"2023-03-03T03:16:36","date_gmt":"2023-03-03T03:16:36","guid":{"rendered":"https:\/\/www.toolkit.keywordfinder.us\/?page_id=595"},"modified":"2023-03-03T03:16:36","modified_gmt":"2023-03-03T03:16:36","slug":"mouse-debugger","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/de\/mouse-debugger\/","title":{"rendered":"Mouse Debugger"},"content":{"rendered":"<main>\n \n  <h1>Mouse Debugger<\/h1>\n  \n  <p>Use this tool to debug your mouse and resolve problems (like I did).<\/p>\n  \n  <div class=\"container\">\n    <div class=\"mouse\">\n      <div class=\"middle\"><\/div>\n    <\/div>\n    <div class=\"log\">\n      <div class=\"logger\"><\/div>\n      <button type=\"button\">clear<\/button>\n    <\/div>\n  <\/div>\n<\/main>\n  <script>\n    const $logger = document.querySelector('.logger')\nconst $mouse = document.querySelector('.mouse')\n\nconst log = (msg) => {\n  const shouldScroll = $logger.scrollHeight - $logger.scrollTop <= $logger.offsetHeight\n  $logger.innerHTML += `&gt; ${msg}<br \/>`\n  if (shouldScroll) {\n    $logger.scrollTop = $logger.scrollHeight\n  }\n}\n\nconst press = (type) => {\n  log(`${type} mouse button pressed`)\n  $mouse.classList.add(type)\n}\n\nconst release = (type) => {\n  log(`${type} mouse button released`)\n  $mouse.classList.remove(type)\n}\n\ndocument.addEventListener('mousedown', (event) => {\n  switch (event.button) {\n    case 0:\n      press('left')\n      break;\n    case 1:\n      press('middle')\n      event.preventDefault()\n      event.stopPropagation()\n      return false\n      break;\n    case 2:\n      press('right')\n      break;\n    default:\n      log('Unknown mouse button pressed')\n  }\n})\n\ndocument.addEventListener('mouseup', (event) => {\n  switch (event.button) {\n    case 0:\n      release('left')\n      break;\n    case 1:\n      release('middle')\n      break;\n    case 2:\n      release('right')\n      break;\n    default:\n      log('Unknown mouse button released')\n  }\n})\n\ndocument.addEventListener('wheel', (event) => {\n  if (event.deltaY !== 0) {\n    log(event.deltaY < 0 ? 'scroll wheel up' : 'scroll wheel down')\n  } else if (event.deltaX !== 0) {\n    log(event.deltaX < 0 ? 'scroll wheel left' : 'scroll wheel right')\n  }\n})\n\ndocument.querySelector('.log button').addEventListener('click', function () {\n  $logger.innerHTML = ''\n})\n\ndocument.addEventListener('contextmenu', (e) => {\n  e.preventDefault()\n  e.stopPropagation()\n  return false\n})\n\nlog('Initializing logger....')\n\n<\/script>\n<style>\n  body {\n  font-family: Helvetica, Arial, \"sans-serif\";\n}\n\nmain {\n  background-color: #ccc;\n  margin: 10px auto;\n  max-width: 800px;\n  padding: 25px;\n  box-sizing: border-box;\n  \n  h1 {\n    font-size: 1.5em;\n  }\n  \n  h1, p {\n    margin-bottom: 0.5em;\n  }\n  \n  .container {\n    margin-top: 20px;\n    display: flex;\n    width: 80%;\n    margin: 30px auto;\n  }\n  \n  .mouse {\n    width: 120px;\n    height: 150px;\n    background-color: #a00;\n    position: relative;\n    border-radius: 15px;\n    overflow: hidden;\n    \n    &::before, &::after {\n      content: ' ';\n      display: block;\n      width: 49%;\n      height: 50%;\n      position: absolute;\n      top: 0;\n      left: 0;\n      background-color: #000;\n      opacity: 0.2\n    }\n    \n    &::after {\n      left: auto;\n      right: 0;\n    }\n    \n    &.left::before {\n      opacity: 0.1;\n    }\n    \n    &.right::after {\n      opacity: 0.1;\n    }\n    \n    .middle {\n      position: absolute;\n      height: 25%;\n      background-color: #000;\n      opacity: 0.5;\n      width: 1em;\n      left: 50%;\n      top: 15%;\n      border-radius: 5px;\n      margin-left: -0.5em;\n    }\n    \n    &.middle .middle {\n      opacity: 0.7;\n    }\n  }\n  \n  .log {\n    background-color: #222;\n    width: 60%;\n    margin-left: auto;\n    color: #ccc;\n    padding: 10px;\n    box-sizing: border-box;\n    font: menu;\n    \/\/ font-family: 'Courier New';\n    font-size: 1em;\n    position: relative;\n    \n    .logger {\n      height: 10em;\n      overflow: auto;\n    }\n    \n    button {\n      position: absolute;\n      top: 10px;\n      right: 35px;\n      border: none;\n      opacity: 0.5;\n      cursor: pointer;\n      outline: none;\n      z-index: 2;\n      \n      &:hover {\n        opacity: 0.8;\n      }\n    }\n  }\n}\n  <\/style>","protected":false},"excerpt":{"rendered":"<p>Mouse Debugger Use this tool to debug your mouse and resolve problems (like I did). clear<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-595","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/de\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/595\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/media?parent=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}