Bricks Builder KBD Shortcits

Bricks_WPE_KBD_Shortcits.js

/*
 CTRL | CMD + SHIFT + < - toggles the settings panel.
 CTRL | CMD + SHIFT + > - toggles the structure panel.
 CTRL | CMD + SHIFT + ? - toggles both panels at the same time.
*/
(function () {
  if (window.__bricksHotkeyInit) return;
  window.__bricksHotkeyInit = true;

  function attachHotkeyListener(targetWindow) {
    targetWindow.addEventListener('keydown', function (e) {
      const accel = e.ctrlKey || e.metaKey;
      if (!accel || !e.shiftKey) return;

      const isLessThan = e.key === '<' || e.code === 'Comma';
      const isGreaterThan = e.key === '>' || e.code === 'Period';
      const isQuestion = e.key === '?' || e.code === 'Slash';
      if (!isLessThan && !isGreaterThan && !isQuestion) return;

      e.preventDefault();

      // Toggle settings panel
      if (isLessThan || isQuestion) {
        const btn = document.querySelector('#bricks-panel-toggle');
        if (btn) {
          if (typeof btn.click === 'function') btn.click();
          else btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
          console.log('[Bricks Hotkey] Clicked #bricks-panel-toggle');
        }
      }

      // Toggle structure panel
      if (isGreaterThan || isQuestion) {
        const structureBtn = document.querySelector('#bricks-toolbar .structure');
        if (structureBtn) {
          if (typeof structureBtn.click === 'function') structureBtn.click();
          else structureBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
          console.log('[Bricks Hotkey] Clicked #bricks-toolbar .structure');
        }
      }
    });
  }

  // Attach to main window immediately
  attachHotkeyListener(window);

  // Also attach to preview iframe when it’s available
  const iframe = document.querySelector('#bricks-builder-iframe');
  if (iframe && iframe.contentWindow) {
    attachHotkeyListener(iframe.contentWindow);
  } else {
    const iframeObserver = new MutationObserver(() => {
      const newIframe = document.querySelector('#bricks-builder-iframe');
      if (newIframe && newIframe.contentWindow) {
        iframeObserver.disconnect();
        attachHotkeyListener(newIframe.contentWindow);
      }
    });
    iframeObserver.observe(document.documentElement, { childList: true, subtree: true });
    setTimeout(() => iframeObserver.disconnect(), 5000);
  }
})();