Scalatura inattesa nel componente PhotoSwipeLightbox sperimentale che rompe il rapporto dell'immagine originale

UX
1

Il nuovo PhotoSwipeLightbox sperimentale (siteSettings.experimental_lightbox) contiene bug quando il link dell’immagine si trova in Discourse Solved o nel componente di caricamento in admin/config/logo. La causa principale è che PhotoSwipeLightbox necessita di larghezza e altezza dall’immagine già caricata, mentre Discourse Solved e il componente di caricamento non hanno questi attributi.

Senza questi attributi, l’immagine verrà estesa per riempire la finestra del browser, causando distorsioni, come mostrato nella figura allegata.

Questo commit aggiunge un meccanismo di precaricamento per le immagini senza dimensioni per ottenerne le dimensioni, in modo che possano essere visualizzate normalmente.

2 Mi Piace
2

Grazie per aver segnalato questo e per aver condiviso una correzione.

Ho aggiunto alcuni commenti/suggerimenti sulla PR, ma nel complesso penso che abbiamo bisogno di un fallback come questo per gestire i casi limite.

4

OK, grazie, quando avrò tempo aggiungerò le mie considerazioni nei commenti.

  context "when missing data attributes" do
    it "preloads images and sets dimensions" do
      upload_1.update(width: 400, height: 300)
      post.update(
        cooked:
          "<p><a href=\"#{upload_1.url}\" class=\"lightbox\" data-download-href=\"#{upload_1.url}\">[image]</a></p>",
      )

      topic_page.visit_topic(topic)
      lightbox_link = find("#post_1 a.lightbox")
      expect(lightbox_link["data-target-width"]).to be_nil
      expect(lightbox_link["data-target-height"]).to be_nil
      lightbox_link.click

      expect(lightbox).to be_visible

      expect(lightbox_link["data-target-width"]).to eq(upload_1.width.to_s)
      expect(lightbox_link["data-target-height"]).to eq(upload_1.height.to_s)
    end
  end

Sto aggiungendo questo al file lightbox_spec.rb come test unitario per quelle immagini senza dimensioni, ti sembra corretto?

5

Inoltre, ho apportato alcune modifiche alla logica di discriminazione per gestire quelli con meta ma senza meta che non contengono le informazioni sulle dimensioni. (ad esempio, il componente di caricamento)

const missingMetaData = !item
    .querySelector(".meta")
    ?.textContent.trim()
    .split(/x|×/)
    .every((v) => v && +v > 0);