✦ Product Design Panel

PDP — vrstva pro popis prototypu

Samostatná knihovna, která ZVENČÍ obohatí hotový markup o plovoucí panel s popisem a o zvýraznění prvků na stránce (rámeček + šipka + popisek). Nezasahuje do chování stránky. Tahle stránka je živé demo — panel vpravo dole je skutečné PDP.

Vyzkoušej hned: najeď myší na podtržené odkazy v panelu vpravo dole („kartu", „tlačítko"…) — na stránce se rozsvítí příslušný prvek se šipkou a popiskem. Panel jde minimalizovat křížkem a zase otevřít chipem.

Živé cíle

Na tyhle prvky míří odkazy v panelu:

Módy stránky (rozšiřující modul)

Pod textem panelu je přepínač „Ukázkový mód" — to přidává rozšiřující modul pdp.module-switch.js (registruje se přes PDP.use(...)). Přepnutím se deklarativně přepíná obsah níže: jeden blok je vidět jen když je mód zapnutý, druhý jen když je vypnutý.

Titulek přepínače „Ukázkový mód" je navíc podtržený jako spouštěč zvýraznění (data-pdp-switch-target) — najetím na něj se rozsvítí karta „Mód je ZAPNUTÝ". Když je mód vypnutý, je karta skrytá, takže jádro ji přeskočí a nezvýrazní nic.

Výběr stavu (rozšiřující modul)

Pod přepínačem je „Stav serveru" — jednovýběrový radio seznam z modulu pdp.module-select.js (registruje se přes PDP.use(...)). Vyber volbu a níže se deklarativně přepne jen ten blok, který má danou hodnotu v data-pdp-show-for. Volba „Žádná migrace" má navíc podtržený label jako spouštěč zvýraznění (data-pdp-option-target).

Kontext podle modalu

Když se otevře modal, panel umí přepnout text na popis daného modalu (a anotace pak míří dovnitř modalu). Otevři ukázkový modal — panel se přepne a odkaz „pole" zvýrazní prvek uvnitř:

Otevřít ukázkový modal

(Demo si Bootstrap eventy show.bs.modal / hidden.bs.modal posílá ručně — PDP žádný Bootstrap nepotřebuje.)

Jak to funguje — data-atributy

Atribut	Význam
data-pdp-panel	Označí panel a dá mu výchozí vzhled. Umožní minimalizaci.
data-pdp-minimize	Tlačítko, které panel skryje; objeví se launcher pro znovuotevření.
data-pdp-tag	Chip/štítek v hlavičce (volitelné).
data-pdp-title	Zvýrazněný titulek uvnitř těla (volitelné).
data-pdp-body	Vyměnitelné tělo — jen tohle se mění při otevření modalu.
class="pdp-link"	Spouštěč zvýraznění (podtržený text v panelu).
data-pdp-target="<sel>"	CSS selektor cíle. Smí mířit i na víc prvků (zvýrazní se všechny).
data-pdp-note="<text>"	Text popisku u šipky (volitelné).
<template data-pdp-content-for="#idModalu">	Náhradní obsah těla, když se otevře daný modal.

Minimální použití

<!-- 1. připoj knihovnu -->
<script src="../core/pdpanel/pdp.js"></script>

<!-- 2. vlož panel — vzhled si PDP nastyluje samo -->
<aside data-pdp-panel>
  <button data-pdp-minimize aria-label="Minimalizovat">×</button>
  <span data-pdp-tag>✦ Product Design Panel</span>
  <div data-pdp-body>
    <p data-pdp-title>Titulek</p>
    <p>Najeď na
      <span class="pdp-link"
            data-pdp-target="#demo-card"
            data-pdp-note="Tahle karta…">kartu</span>.
    </p>
  </div>
</aside>