Floating Panel · API

    <div class="layout__row">
  <.action phx-click={Corex.FloatingPanel.set_open("floating-panel-api-bind", true)} class="button button--sm">
    Open
  </.action>
  <.action phx-click={Corex.FloatingPanel.set_open("floating-panel-api-bind", false)} class="button button--sm">
    Close
  </.action>
</div>

<.floating_panel id="floating-panel-api-bind" class="floating-panel">
  <:trigger>
    <span data-closed>Open panel</span>
    <span data-open>Close panel</span>
  </:trigger>
  <:title>Panel</:title>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>Open and close via phx-click and Corex.FloatingPanel.set_open/2.</p>
  </:content>
</.floating_panel>


  

    <div class="layout__row">
  <button type="button" id="floating-panel-api-js-open" class="button button--sm">
    Open
  </button>
  <button type="button" id="floating-panel-api-js-close" class="button button--sm">
    Close
  </button>
</div>

<script :type={Phoenix.LiveView.ColocatedHook} name=".FloatingPanelApiClientJs">
  export default {
    mounted() {
      const panel = document.getElementById("floating-panel-api-js")
      document.getElementById("floating-panel-api-js-open")?.addEventListener("click", () => {
        panel?.dispatchEvent(
          new CustomEvent("corex:floating-panel:set-open", {
            detail: { open: true },
            bubbles: false,
          })
        )
      })
      document.getElementById("floating-panel-api-js-close")?.addEventListener("click", () => {
        panel?.dispatchEvent(
          new CustomEvent("corex:floating-panel:set-open", {
            detail: { open: false },
            bubbles: false,
          })
        )
      })
    },
  }
</script>

<.floating_panel id="floating-panel-api-js" class="floating-panel">
  <:trigger>
    <span data-closed>Open panel</span>
    <span data-open>Close panel</span>
  </:trigger>
  <:title>Panel</:title>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>Open and close by dispatching corex:floating-panel:set-open on the panel root.</p>
  </:content>
</.floating_panel>

  

    const panel = document.getElementById("floating-panel-api-js");
panel?.dispatchEvent(
  new CustomEvent("corex:floating-panel:set-open", { detail: { open: true }, bubbles: false })
);
panel?.dispatchEvent(
  new CustomEvent("corex:floating-panel:set-open", { detail: { open: false }, bubbles: false })
);

  

    const panel: HTMLElement | null = document.getElementById("floating-panel-api-js");
panel?.dispatchEvent(
  new CustomEvent("corex:floating-panel:set-open", { detail: { open: true }, bubbles: false })
);
panel?.dispatchEvent(
  new CustomEvent("corex:floating-panel:set-open", { detail: { open: false }, bubbles: false })
);

  

    <div class="layout__row">
  <.action phx-click="floating_panel_api_server_open" class="button button--sm">
    Open
  </.action>
  <.action phx-click="floating_panel_api_server_close" class="button button--sm">
    Close
  </.action>
</div>

<.floating_panel id="floating-panel-api-server" class="floating-panel">
  <:trigger>
    <span data-closed>Open panel</span>
    <span data-open>Close panel</span>
  </:trigger>
  <:title>Panel</:title>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>Open and close via LiveView push_event and Corex.FloatingPanel.set_open/3.</p>
  </:content>
</.floating_panel>


  

    def handle_event("floating_panel_api_server_open", _, socket) do
  {:noreply, Corex.FloatingPanel.set_open(socket, "floating-panel-api-server", true)}
end

def handle_event("floating_panel_api_server_close", _, socket) do
  {:noreply, Corex.FloatingPanel.set_open(socket, "floating-panel-api-server", false)}
end