Packages

phoenix_kit

1.7.112
1.7.210 1.7.209 1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
224 Versions
45 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web components media_viewer.html.heex
Raw

lib/phoenix_kit_web/components/media_viewer.html.heex 

<dialog

  id={@id}

  class="modal"

  phx-hook="MediaViewerDialog"

  phx-target={@myself}

  aria-labelledby={"#{@id}-title"}

>

  <% preview_variants = Map.get(@variants_map, @current_uuid, []) %>

  <% preview_idx = Enum.find_index(@files, &(&1 == @current_uuid)) %>

  <% has_prev = is_integer(preview_idx) and preview_idx > 0 %>

  <% has_next = is_integer(preview_idx) and preview_idx < length(@files) - 1 %>

  <% download_url = download_url_for(@current_uuid, preview_variants) %>

  <% file_name = file_name_for(@file_structs, @current_uuid) %>

  <div class="modal-box !fixed !inset-0 !w-auto !h-auto !min-w-0 !max-w-none !max-h-none !m-0 !rounded-none lg:!relative lg:!inset-auto lg:!w-[90vw] lg:!max-w-4xl lg:!h-auto lg:!rounded-2xl lg:!m-auto p-0 !overflow-hidden">

    <%!-- Close button --%>

    <button

      type="button"

      phx-click="close_viewer"

      phx-target={@myself}

      class="btn btn-ghost btn-sm btn-circle absolute top-3 right-3 z-30 bg-base-100 hover:bg-base-200 shadow-lg ring-1 ring-base-300"

      title={gettext("Close")}

    >

      <.icon name="hero-x-mark" class="w-4 h-4" />

    </button>



    <div class="flex flex-col lg:flex-row min-h-[60vh] lg:h-[80vh]">

      <%!-- Image area with prev/next chevrons --%>

      <div class="flex-[7] relative flex items-center justify-center bg-base-200 overflow-hidden p-4 min-h-[40vh] lg:min-h-0">

        <%!-- Prev chevron --%>

        <div :if={has_prev} class="absolute left-2 top-1/2 -translate-y-1/2 z-10">

          <button

            type="button"

            phx-click="step_viewer"

            phx-value-dir="prev"

            phx-target={@myself}

            class="btn btn-circle btn-ghost bg-base-100/80 hover:bg-base-100 shadow-md"

            title={gettext("Previous (←)")}

          >

            <.icon name="hero-chevron-left" class="w-5 h-5" />

          </button>

        </div>



        <%!-- Next chevron --%>

        <div :if={has_next} class="absolute right-2 top-1/2 -translate-y-1/2 z-10">

          <button

            type="button"

            phx-click="step_viewer"

            phx-value-dir="next"

            phx-target={@myself}

            class="btn btn-circle btn-ghost bg-base-100/80 hover:bg-base-100 shadow-md"

            title={gettext("Next (→)")}

          >

            <.icon name="hero-chevron-right" class="w-5 h-5" />

          </button>

        </div>



        <.image_set

          file_uuid={@current_uuid}

          variants={preview_variants}

          alt={file_name}

          class="max-w-full max-h-full object-contain"

          loading="eager"

        />

      </div>



      <%!-- Sidebar: filename + download --%>

      <div class="flex-[3] flex flex-col gap-3 p-4 overflow-y-auto lg:min-w-[220px] bg-base-100">

        <h2 id={"#{@id}-title"} class="text-base font-bold break-all leading-tight pr-10">

          {file_name}

        </h2>



        <a

          :if={download_url}

          href={download_url}

          download={file_name}

          target="_blank"

          rel="noopener"

          class="btn btn-primary btn-sm gap-2 self-start"

        >

          <.icon name="hero-arrow-down-tray" class="w-4 h-4" /> {gettext("Download")}

        </a>

      </div>

    </div>

  </div>



  <div class="modal-backdrop" phx-click="close_viewer" phx-target={@myself}></div>

</dialog>