{"id":1240,"date":"2025-09-09T10:27:23","date_gmt":"2025-09-09T02:27:23","guid":{"rendered":"https:\/\/depedsdoromblon.com\/?page_id=1240"},"modified":"2025-09-09T15:06:28","modified_gmt":"2025-09-09T07:06:28","slug":"organizational-chart","status":"publish","type":"page","link":"https:\/\/depedsdoromblon.com\/index.php\/organizational-chart\/","title":{"rendered":"Organizational Chart"},"content":{"rendered":"\n<style>\n  html, body { \n    height: 100%; \n    margin: 0; \n    padding: 0; \n    \/* allow scrolling *\/\n    overflow: auto;  \n  }\n  .zoom-drag-container {\n    width: 100%;\n    height: 100vh; \/* takes full viewport height *\/\n    position: relative;\n    overflow: hidden;\n    touch-action: none;\n    background: #f3f3f3;\n    cursor: grab;\n  }\n  .zoom-drag-container img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform-origin: 0 0;\n    user-select: none;\n    -webkit-user-drag: none;\n    pointer-events: none;\n    max-width: none;\n    will-change: transform;\n  }\n<\/style>\n\n<div id=\"zoomContainer\" class=\"zoom-drag-container\">\n  <img decoding=\"async\" id=\"zoomImage\" src=\"https:\/\/depedsdoromblon.com\/wp-content\/uploads\/2025\/09\/ORD-02-1-scaled.png\" alt=\"Document\">\n<\/div>\n\n<script>\n(function () {\n  const container = document.getElementById(\"zoomContainer\");\n  const img = document.getElementById(\"zoomImage\");\n\n  let scale = 1, fitScale = 1;\n  let posX = 0, posY = 0;\n  let isDragging = false, startX = 0, startY = 0;\n\n  function getRect() { return container.getBoundingClientRect(); }\n\n  function fitImage() {\n    const r = getRect();\n    fitScale = Math.min(r.width \/ img.naturalWidth, r.height \/ img.naturalHeight);\n    scale = fitScale;\n\n    const imgW = img.naturalWidth * scale;\n    const imgH = img.naturalHeight * scale;\n\n    posX = (r.width - imgW) \/ 2;\n    posY = (r.height - imgH) \/ 2;\n\n    updateTransform();\n  }\n\n  function constrainPosition() {\n    const r = getRect();\n    const imgW = img.naturalWidth * scale;\n    const imgH = img.naturalHeight * scale;\n\n    if (imgW <= r.width) {\n      posX = (r.width - imgW) \/ 2;\n    } else {\n      posX = Math.min(Math.max(posX, r.width - imgW), 0);\n    }\n\n    if (imgH <= r.height) {\n      posY = (r.height - imgH) \/ 2;\n    } else {\n      posY = Math.min(Math.max(posY, r.height - imgH), 0);\n    }\n  }\n\n  function updateTransform() {\n    constrainPosition();\n    img.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;\n  }\n\n  \/\/ Mouse drag\n  container.addEventListener(\"mousedown\", (e) => {\n    if (scale <= fitScale) return;\n    isDragging = true;\n    startX = e.clientX - posX;\n    startY = e.clientY - posY;\n    container.style.cursor = \"grabbing\";\n  });\n\n  document.addEventListener(\"mouseup\", () => {\n    isDragging = false;\n    container.style.cursor = \"grab\";\n  });\n\n  document.addEventListener(\"mousemove\", (e) => {\n    if (!isDragging) return;\n    posX = e.clientX - startX;\n    posY = e.clientY - startY;\n    updateTransform();\n  });\n\n  \/\/ Wheel zoom\n  container.addEventListener(\"wheel\", (e) => {\n    e.preventDefault();\n    const zoomFactor = Math.exp(-e.deltaY * 0.0015);\n    const r = getRect();\n    const mouseX = e.clientX - r.left;\n    const mouseY = e.clientY - r.top;\n\n    const newScale = Math.max(fitScale, Math.min(scale * zoomFactor, 5));\n    posX = mouseX - (mouseX - posX) * (newScale \/ scale);\n    posY = mouseY - (mouseY - posY) * (newScale \/ scale);\n    scale = newScale;\n    updateTransform();\n  }, { passive: false });\n\n  \/\/ Double-click zoom toggle\n  container.addEventListener(\"dblclick\", (e) => {\n    const r = getRect();\n    const mouseX = e.clientX - r.left;\n    const mouseY = e.clientY - r.top;\n\n    if (scale === fitScale) {\n      scale = fitScale * 2;\n      posX = mouseX - (mouseX - posX) * 2;\n      posY = mouseY - (mouseY - posY) * 2;\n    } else {\n      fitImage();\n    }\n    updateTransform();\n  });\n\n  img.addEventListener(\"load\", fitImage);\n  if (img.complete) fitImage();\n  window.addEventListener(\"resize\", fitImage);\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1240","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/depedsdoromblon.com\/index.php\/author\/admin_ictu\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/pages\/1240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/comments?post=1240"}],"version-history":[{"count":17,"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/pages\/1240\/revisions"}],"predecessor-version":[{"id":1263,"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/pages\/1240\/revisions\/1263"}],"wp:attachment":[{"href":"https:\/\/depedsdoromblon.com\/index.php\/wp-json\/wp\/v2\/media?parent=1240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}