پاپ‌آپ‌ها: آنها در حال ظهور دوباره هستند!

Jhey Tompkins

هدف از ابتکار عمل رابط کاربری باز (Open UI) این است که ایجاد تجربیات کاربری عالی را برای توسعه‌دهندگان آسان‌تر کند. برای انجام این کار، ما در تلاشیم تا با الگوهای مشکل‌سازتری که توسعه‌دهندگان با آن مواجه هستند، مقابله کنیم. ما می‌توانیم این کار را با ارائه APIها و اجزای داخلی پلتفرم بهتر انجام دهیم.

یکی از این مشکلات، پنجره‌های بازشو (pop-up) هستند که در رابط کاربری باز (Open UI) با عنوان «Popovers» توصیف شده‌اند.

پاپ‌اوورها مدت‌هاست که شهرت نسبتاً متضادی داشته‌اند. این تا حدودی به دلیل نحوه ساخت و استقرار آنهاست. ساخت آنها الگوی آسانی نیست، اما می‌توانند با هدایت کاربران به موارد خاص یا آگاه کردن آنها از محتوای سایت شما - به خصوص هنگامی که به شیوه‌ای سلیقه‌ای استفاده شوند - ارزش زیادی به همراه داشته باشند.

اغلب دو نگرانی عمده هنگام ساخت پاپ‌اوورها وجود دارد:

• چگونه مطمئن شویم که در جای مناسب، بالاتر از بقیه محتوای شما قرار می‌گیرد.
• چگونه آن را در دسترس قرار دهیم (با کیبورد سازگار باشد، قابل تنظیم برای تمرکز و غیره).

API داخلی Popover اهداف متنوعی دارد که همگی هدف کلی یکسانی دارند و آن آسان کردن ساخت این الگو برای توسعه‌دهندگان است. از جمله این اهداف می‌توان به موارد زیر اشاره کرد:

• نمایش یک عنصر و فرزندان آن را در بالای بقیه سند آسان کنید.
• آن را قابل دسترس کنید.
• برای اکثر رفتارهای رایج (مانند light dismiss، singleton، stacking و غیره) نیازی به جاوا اسکریپت نیست.

می‌توانید مشخصات کامل پنجره‌های بازشو را در سایت OpenUI بررسی کنید.

سازگاری با مرورگرها

اکنون کجا می‌توانید از API داخلی Popover استفاده کنید؟ در زمان نگارش این مطلب، این API در Chrome Canary با علامت «ویژگی‌های پلتفرم وب آزمایشی» پشتیبانی می‌شود.

برای فعال کردن این پرچم، Chrome Canary را باز کنید و به chrome://flags بروید. سپس پرچم «ویژگی‌های پلتفرم وب آزمایشی» را فعال کنید.

یک نسخه آزمایشی Origin نیز برای توسعه‌دهندگانی که مایل به آزمایش این مورد در یک محیط عملیاتی هستند، وجود دارد.

در نهایت، یک polyfill برای API در دست توسعه است. حتماً مخزن آن را در github.com/oddbird/popup-polyfill بررسی کنید.

می‌توانید پشتیبانی از پاپ‌آپ را با موارد زیر بررسی کنید:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

راه‌حل‌های فعلی

در حال حاضر برای تبلیغ محتوای خود بیش از هر چیز دیگری چه کاری می‌توانید انجام دهید؟ اگر مرورگر شما از این قابلیت پشتیبانی می‌کند، می‌توانید از عنصر HTML Dialog استفاده کنید. باید از آن به صورت "Modal" استفاده کنید. و این کار نیاز به استفاده از جاوا اسکریپت دارد.

Dialog.showModal();

There are some accessibility considerations. It's advised to use a11y-dialog for example if catering for users of Safari below version 15.4.

همچنین می‌توانید از یکی از کتابخانه‌های مبتنی بر popover، alert یا tooltip که وجود دارند استفاده کنید. بسیاری از این کتابخانه‌ها معمولاً به روشی مشابه کار می‌کنند.

• برای نمایش پاپ‌اوورها، یک کانتینر به بدنه اضافه کنید.
• آن را طوری طراحی کنید که بالاتر از هر چیز دیگری قرار گیرد.
• یک عنصر ایجاد کنید و آن را به کانتینر اضافه کنید تا یک پنجره popover نمایش داده شود.
• با حذف عنصر popover از DOM، آن را پنهان کنید.

این امر مستلزم وابستگی بیشتر و تصمیم‌گیری‌های بیشتر برای توسعه‌دهندگان است. همچنین نیاز به تحقیق برای یافتن پیشنهادی است که همه نیازهای شما را برآورده کند. API Popover قصد دارد سناریوهای بسیاری از جمله tooltipها را پوشش دهد. هدف این است که تمام آن سناریوهای رایج را پوشش دهد و توسعه‌دهندگان را از تصمیم‌گیری مجدد نجات دهد تا بتوانند بر ساخت تجربیات خود تمرکز کنند.

اولین پاپ‌آپ شما

این تمام چیزی است که نیاز دارید.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

اما، اینجا چه اتفاقی دارد می‌افتد؟

• لازم نیست عنصر popover را در یک ظرف یا چیز دیگری قرار دهید - به طور پیش فرض پنهان است.
• برای نمایش آن نیازی به نوشتن هیچ کد جاوا اسکریپتی ندارید. این کار توسط ویژگی popovertoggletarget انجام می‌شود.
• وقتی ظاهر می‌شود، به لایه بالایی ارتقا می‌یابد. این بدان معناست که در نمای دید، به بالای document ارتقا می‌یابد. لازم نیست z-index مدیریت کنید یا نگران محل قرارگیری popover خود در DOM باشید. می‌تواند در اعماق DOM با اجداد برش‌دهنده، تو در تو باشد. همچنین می‌توانید از طریق DevTools ببینید کدام عناصر در حال حاضر در لایه بالایی هستند. برای اطلاعات بیشتر در مورد لایه بالایی، این مقاله را بررسی کنید .

• شما از همان ابتدا «بستن سبک» را دارید. منظورمان این است که می‌توانید با یک علامت بستن، مانند کلیک کردن در خارج از پنجره، رفتن به عنصر دیگر با صفحه کلید یا فشار دادن کلید Esc ، پنجره بازشو را ببندید. دوباره آن را باز کنید و امتحان کنید!

با popover چه چیزهای دیگری به دست می‌آورید؟ بیایید مثال را بیشتر بررسی کنیم. این نسخه آزمایشی را با مقداری محتوا در صفحه در نظر بگیرید.

آن دکمه‌ی عملیاتی شناور، موقعیت ثابتی با z-index بالا دارد.

.fab {
  position: fixed;
  z-index: 99999;
}

محتوای پاپ‌اوور در DOM تودرتو است، اما وقتی پاپ‌اوور را باز می‌کنید، در بالای آن عنصر با موقعیت ثابت قرار می‌گیرد. نیازی به تنظیم هیچ استایلی ندارید.

همچنین ممکن است متوجه شده باشید که پنجره‌ی پاپ‌اوور اکنون یک شبه‌عنصر ::backdrop دارد. تمام عناصری که در لایه‌ی بالایی قرار دارند، یک شبه‌عنصر ::backdrop با قابلیت استایل‌دهی دریافت می‌کنند. این مثال ::backdrop با رنگ پس‌زمینه‌ی آلفای کاهش‌یافته و یک فیلتر پس‌زمینه استایل‌دهی می‌کند که محتوای زیرین را محو می‌کند.

استایل دادن به یک پاپ‌اوور

بیایید توجه خود را به استایل‌بندی پاپ‌اوور معطوف کنیم. به طور پیش‌فرض، یک پاپ‌اوور موقعیت ثابتی دارد و مقداری فاصله‌گذاری (padding) اعمال شده است. همچنین دارای display: none . می‌توانید این را برای نمایش پاپ‌اوور لغو کنید. اما، این کار آن را به لایه بالایی ارتقا نمی‌دهد.

[popover] { display: block; }

صرف نظر از اینکه چگونه پاپ‌اوور خود را تبلیغ می‌کنید، وقتی یک پاپ‌اوور را به لایه بالایی تبلیغ می‌کنید، ممکن است لازم باشد آن را طرح‌بندی یا موقعیت‌دهی کنید. شما نمی‌توانید لایه بالایی را هدف قرار دهید و کاری مانند این انجام دهید

:open {
  display: grid;
  place-items: center;
}

به طور پیش‌فرض، یک پاپ‌اوور با استفاده از margin: auto در مرکز صفحه نمایش قرار می‌گیرد. اما در برخی موارد، ممکن است بخواهید موقعیت قرارگیری آن را به طور واضح مشخص کنید. برای مثال:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

اگر می‌خواهید محتوای درون پاپ‌اوور خود را با استفاده از CSS grid یا flexbox چیدمان کنید، بهتر است آن را در یک عنصر قرار دهید. در غیر این صورت، باید یک قانون جداگانه تعریف کنید که display پس از قرار گرفتن پاپ‌اوور در لایه بالایی تغییر دهد. تنظیم آن به صورت پیش‌فرض، باعث می‌شود که به صورت پیش‌فرض با override کردن display: none نمایش داده شود.

[popover]:open {
 display: flex;
}

If you tried that demo out, you'll notice that the popover is now transitioning in and out. You can transition popovers in and out by using the :open pseudo-selector. The :open pseudo-selector matches popovers that are showing (and therefore in the top layer).

این مثال از یک ویژگی سفارشی برای هدایت گذار استفاده می‌کند. و شما می‌توانید یک گذار را به ::backdrop مربوط به popover نیز اعمال کنید.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

نکته‌ای که در اینجا وجود دارد این است که انتقال‌ها و انیمیشن‌ها را تحت یک کوئری رسانه‌ای برای حرکت گروه‌بندی کنید. این می‌تواند به حفظ زمان‌بندی‌های شما نیز کمک کند. دلیل این امر این است که شما نمی‌توانید مقادیر را بین popover و ::backdrop از طریق ویژگی سفارشی به اشتراک بگذارید.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

تا این مرحله، شما استفاده از popovertoggletarget را برای نمایش یک popover دیده‌اید. برای رد کردن آن، از "Light dismiss" استفاده می‌کنیم. اما، شما همچنین ویژگی‌های popovershowtarget و popoverhidetarget را دارید که می‌توانید از آنها استفاده کنید. بیایید یک دکمه به popover اضافه کنیم که آن را پنهان کند و دکمه‌ی تغییر وضعیت را به popovershowtarget تغییر دهیم.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

همانطور که قبلاً اشاره شد، API مربوط به Popover چیزی بیش از مفهوم قدیمی پاپ‌آپ‌ها را پوشش می‌دهد. شما می‌توانید برای انواع سناریوها مانند اعلان‌ها، منوها، راهنماهای ابزار و غیره، پاپ‌آپ بسازید.

برخی از این سناریوها به الگوهای تعاملی متفاوتی نیاز دارند. تعاملاتی مانند شناور شدن (hover). استفاده از ویژگی popoverhovertarget آزمایش شده است اما در حال حاضر پیاده‌سازی نشده است.

<div popoverhovertarget="hover-popover">Hover for Code</div>

ایده این است که شما روی یک عنصر شناور می‌شوید تا هدف نمایش داده شود. این رفتار می‌تواند از طریق ویژگی‌های CSS پیکربندی شود. این ویژگی‌های CSS، بازه زمانی برای شناور شدن روی و خاموش شدن یک عنصر را تعریف می‌کنند که یک popover به آن واکنش نشان می‌دهد. رفتار پیش‌فرض آزمایش شده این بود که یک popover پس از 0.5s مشخص از :hover نمایش داده می‌شد. سپس برای غیرفعال شدن به یک حذف سبک یا باز کردن یک popover دیگر نیاز بود (در ادامه بیشتر در این مورد صحبت خواهیم کرد). این به دلیل تنظیم مدت زمان پنهان شدن popover روی Infinity بود.

در عین حال، می‌توانید از جاوا اسکریپت برای چندمنظوره کردن آن قابلیت استفاده کنید.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

مزیت تنظیم یک پنجره شناور صریح این است که تضمین می‌کند عمل کاربر عمدی است (برای مثال، کاربر نشانگر خود را روی یک هدف قرار می‌دهد). ما نمی‌خواهیم پاپ‌آپ را نمایش دهیم مگر اینکه قصد آنها این باشد.

این نسخه آزمایشی را امتحان کنید که در آن می‌توانید هدف را با پنجره تنظیم شده روی 0.5s معلق نگه دارید.

قبل از بررسی برخی موارد استفاده و مثال‌های رایج، بیایید چند نکته را مرور کنیم.

انواع پاپ‌اوور

ما رفتار تعاملی غیر جاوا اسکریپتی را پوشش داده‌ایم. اما در مورد رفتار کلی popover چطور؟ اگر نخواهید "Light dismiss" را فعال کنید، چه؟ یا بخواهید یک الگوی singleton را روی popover های خود اعمال کنید؟

API مربوط به Popover به شما امکان می‌دهد سه نوع Popover را مشخص کنید که از نظر رفتار متفاوت هستند.

[popover=auto]/[popover] :

• پشتیبانی از تودرتو. این فقط به معنای تودرتو بودن در DOM نیست. تعریف یک popover اجدادی به این صورت است:
  • مرتبط با موقعیت DOM (فرزند).
  • با فعال کردن ویژگی‌هایی روی عناصر فرزند مانند popovertoggletarget ، popovershowtarget و غیره مرتبط هستند.
  • مرتبط با ویژگی anchor (در حال توسعه CSS Anchoring API).
• نور را دفع کنید.
• باز کردن، سایر پاپ‌اورهایی که پاپ‌اورهای اجدادی نیستند را رد می‌کند. با دموی زیر که نحوه‌ی عملکرد پاپ‌اورهای اجدادی را نشان می‌دهد، بازی کنید. ببینید که تغییر برخی از نمونه‌های popoverhidetarget / popovershowtarget به popovertoggletarget چگونه همه چیز را تغییر می‌دهد.
• اگر یکی را رد کنیم، همه را رد می‌کنیم، اما اگر یکی را در پشته رد کنیم، فقط آنهایی را که در بالای آن قرار دارند رد می‌کنیم.

[popover=manual] :

• سایر پنجره‌های بازشو را نمی‌بندد.
• بدون رد شدن نور.
• نیاز به رد صریح از طریق عنصر trigger یا جاوا اسکریپت دارد.

رابط برنامه‌نویسی جاوا اسکریپت

وقتی به کنترل بیشتری روی پاپ‌اوورهای خود نیاز دارید، می‌توانید با جاوا اسکریپت به این موارد بپردازید. شما هم متد showPopover و هم متد hidePopover را دریافت می‌کنید. همچنین رویدادهای popovershow و popoverhide را برای گوش دادن دارید:

نمایش یک پنجره پاپ‌اوور js popoverElement.showPopover() ‎ مخفی کردن یک پنجره پاپ‌اوور:

popoverElement.hidePopover()

به نمایش یک پنجره‌ی پاپ‌اور گوش دهید:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

به نمایش یک popover گوش دهید و نمایش آن را لغو کنید:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

به پنهان شدن یک پنجره‌ی پاپ‌اوور گوش دهید:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

شما نمی‌توانید پنهان بودن یک پاپ‌اوور را لغو کنید:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

بررسی کنید که آیا یک popover در لایه بالایی وجود دارد یا خیر:

popoverElement.matches(':open')

این قابلیت، قدرت بیشتری برای برخی سناریوهای کمتر رایج فراهم می‌کند. برای مثال، نمایش یک پنجره‌ی پاپ‌اوور پس از یک دوره عدم فعالیت.

این دمو دارای پاپ‌اوورهایی با پاپ‌های صوتی است، بنابراین برای پخش صدا به جاوا اسکریپت نیاز داریم. با کلیک، پاپ‌اوور را پنهان می‌کنیم، صدا را پخش می‌کنیم و سپس دوباره آن را نمایش می‌دهیم.

دسترسی‌پذیری

Accessibility is at the forefront of thinking with the Popover API. Accessibility mappings associate the popover with its trigger element, as needed. This means you don't need to declare aria-* attributes such as aria-haspopup , assuming you use one of the triggering attributes like popovertoggletarget .

For focus management, you can use the autofocus attribute to move focus to an element inside a popover. This is the same as for a Dialog, but the difference comes when returning focus, and that's because of light dismiss. In most cases, closing a popover returns focus to the previously focused element. But focus gets moved to a clicked element on light dismiss, if it can get focus. Check out the section about focus management in the explainer.

برای دیدن نحوه‌ی کار آن، باید « نسخه‌ی تمام صفحه » این نسخه‌ی نمایشی را باز کنید.

در این نسخه آزمایشی، عنصری که فوکوس روی آن قرار دارد، یک خط سبز رنگ پیدا می‌کند. سعی کنید با کیبورد خود در رابط کاربری حرکت کنید. توجه داشته باشید که وقتی یک پنجره بازشو بسته می‌شود، فوکوس به کجا برمی‌گردد. همچنین ممکن است متوجه شوید که اگر با حرکت تب، پنجره بازشو بسته شود. این طراحی از پیش تعیین شده است. اگرچه پنجره‌های بازشو قابلیت مدیریت فوکوس دارند، اما فوکوس را به دام نمی‌اندازند. و ناوبری کیبورد، هنگامی که فوکوس از پنجره بازشو خارج می‌شود، یک سیگنال بسته شدن را شناسایی می‌کند.

لنگر انداختن (در دست توسعه)

وقتی صحبت از پاپ‌اوورها می‌شود، یک الگوی پیچیده برای رسیدگی، اتصال عنصر به تریگر آن است. برای مثال، اگر یک راهنمای ابزار طوری تنظیم شده باشد که بالای تریگر خود نمایش داده شود اما سند اسکرول شود، آن راهنمای ابزار می‌تواند توسط نمای دید قطع شود. در حال حاضر، جاوا اسکریپت‌هایی مانند " رابط کاربری شناور " برای مقابله با این مشکل وجود دارد. آن‌ها راهنمای ابزار را برای شما تغییر موقعیت می‌دهند تا از این اتفاق جلوگیری شود و به ترتیب موقعیت دلخواه تکیه کنند.

اما، ما می‌خواهیم شما بتوانید این را با استایل‌های خود تعریف کنید. یک API همراه در کنار API Popover در حال توسعه است تا این مشکل را حل کند. API « موقعیت‌یابی لنگر CSS » به شما امکان می‌دهد عناصر را به عناصر دیگر متصل کنید و این کار را به گونه‌ای انجام می‌دهد که عناصر را مجدداً موقعیت‌یابی کند تا توسط viewport قطع نشوند.

این نسخه آزمایشی از API لنگر انداختن (Anchoring API) در وضعیت فعلی خود استفاده می‌کند. موقعیت قایق به موقعیت لنگر در نمای دید (viewport) پاسخ می‌دهد.

در اینجا قطعه کد CSS که این نسخه آزمایشی را اجرا می‌کند، آورده شده است. نیازی به جاوا اسکریپت نیست.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

می‌توانید مشخصات را اینجا بررسی کنید. همچنین یک polyfill برای این API وجود خواهد داشت.

مثال‌ها

حالا که با امکانات و نحوه‌ی کار popover آشنا شدید، بیایید چند مثال بزنیم.

اعلان‌ها

این نسخه آزمایشی، اعلان «کپی در کلیپ‌بورد» را نشان می‌دهد.

• از [popover=manual] استفاده می‌کند.
• نمایش پاپ‌اوور در حالت اکشن با showPopover .
• پس از گذشت زمان 2000ms ، آن را با استفاده از hidePopover پنهان کنید.

نان تست ها

این نسخه آزمایشی از لایه بالایی برای نمایش اعلان‌های سبک toast استفاده می‌کند.

• یک منوی پاپ‌اوور با نوع manual به عنوان ظرف (container) عمل می‌کند.
• اعلان‌های جدید به پنجره‌ی بازشو اضافه می‌شوند و پنجره‌ی بازشو نمایش داده می‌شود.
• آنها با کلیک روی API انیمیشن‌های وب حذف می‌شوند و از DOM حذف می‌شوند.
• اگر هیچ Toast برای نمایش وجود نداشته باشد، popover پنهان می‌شود.

منوی تو در تو

این دمو نشان می‌دهد که چگونه یک منوی ناوبری تو در تو می‌تواند کار کند.

• از [popover=auto] استفاده کنید زیرا امکان نمایش پاپ‌اوورهای تو در تو را فراهم می‌کند.
• برای پیمایش با کیبورد، از autofocus روی اولین لینک هر منوی کشویی استفاده کنید.
• این یک کاندیدای عالی برای CSS Anchoring API است. اما، برای این نسخه آزمایشی می‌توانید از مقدار کمی جاوا اسکریپت برای به‌روزرسانی موقعیت‌ها با استفاده از ویژگی‌های سفارشی استفاده کنید.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

به یاد داشته باشید، از آنجایی که این نسخه آزمایشی autofocus استفاده می‌کند، برای پیمایش با صفحه‌کلید، باید در حالت « تمام صفحه » باز شود.

پنجره بازشو رسانه

این نسخه آزمایشی نشان می‌دهد که چگونه می‌توانید رسانه‌ها را به صورت پاپ‌آپ نمایش دهید.

• از [popover=auto] برای حذف سریع استفاده می‌کند.
• جاوا اسکریپت به رویداد play ویدیو گوش می‌دهد و ویدیو را نمایش می‌دهد.
• رویداد popoverhide در تابع popovers، ویدیو را متوقف می‌کند.

پاپ‌اوورهای سبک ویکی

این دمو نشان می‌دهد که چگونه می‌توانید تول‌تیپ‌های محتوای درون‌خطی حاوی رسانه ایجاد کنید.

• از [popover=auto] استفاده می‌کند. نمایش یکی، بقیه را پنهان می‌کند زیرا آنها اجدادی نیستند.
• نمایش روی pointerenter با جاوا اسکریپت.
• یکی دیگر از کاندیداهای ایده‌آل برای API انکوریج CSS.

کشوی ناوبری

این نسخه آزمایشی با استفاده از یک پنجره پاپ‌اوور، یک کشوی ناوبری ایجاد می‌کند.

• از [popover=auto] برای حذف سریع استفاده می‌کند.
• از autofocus برای فوکوس روی اولین مورد ناوبری استفاده می‌کند.

مدیریت پس‌زمینه‌ها

این نسخه آزمایشی نشان می‌دهد که چگونه می‌توانید پس‌زمینه‌ها را برای چندین پنجره پاپ‌اوور مدیریت کنید، در حالی که فقط می‌خواهید یک ::backdrop قابل مشاهده باشد.

• از جاوا اسکریپت برای نگهداری لیستی از پاپ‌اوورهای قابل مشاهده استفاده کنید.
• یک نام کلاس را به پایین‌ترین پنجره‌ی پاپ‌اوور در لایه‌ی بالایی اعمال کنید.

نشانگر سفارشی برای نمایش پاپ‌اور

این نسخه آزمایشی نحوه استفاده از popover برای انتقال یک canvas به لایه بالا و استفاده از آن برای نمایش یک مکان‌نمای سفارشی را نشان می‌دهد.

• با استفاده از showPopover و [popover=manual] canvas به لایه بالایی منتقل کنید.
• وقتی پنجره‌های بازشو دیگر باز می‌شوند، پنجره بازشو canvas را پنهان و آشکار کنید تا مطمئن شوید که در بالا قرار دارد.

پنجره پاپ‌اور اکشن‌شیت

این نسخه آزمایشی نشان می‌دهد که چگونه می‌توانید از یک پنجره بازشو به عنوان یک برگه اقدام استفاده کنید.

• نمایش پاپ‌اوور به صورت پیش‌فرض، جایگزین display می‌شود.
• اکشن‌شیت با ماشه پاپ‌اوور باز می‌شود.
• وقتی پاپ‌اوور نمایش داده می‌شود، به لایه بالایی منتقل شده و به حالت نمایش درمی‌آید.
• برای برگرداندن آن می‌توان از Light dismiss استفاده کرد.

پنجره‌ی بازشو فعال‌شده با کیبورد

این نسخه آزمایشی نشان می‌دهد که چگونه می‌توانید از popover برای رابط کاربری به سبک پالت فرمان استفاده کنید.

• برای نمایش پنجره‌ی پاپ‌اوور از cmd + j استفاده کنید.
• input با autofocus فوکوس شده است.
• کادر ترکیبی، دومین popover است که زیر ورودی اصلی قرار دارد.
• اگر منوی کشویی وجود نداشته باشد، Light dismiss پالت را می‌بندد.
• کاندیدای دیگری برای API انکوریج

پاپ‌اوور زمان‌بندی‌شده

این دمو، یک پنجره‌ی عدم فعالیت را پس از چهار ثانیه نشان می‌دهد. این یک الگوی رابط کاربری است که اغلب در برنامه‌هایی که اطلاعات امنیتی کاربر را نگهداری می‌کنند، برای نمایش پنجره‌ی خروج استفاده می‌شود.

• از جاوا اسکریپت برای نمایش پاپ‌اوور پس از یک دوره عدم فعالیت استفاده کنید.
• در نمایش پاپ‌اوور، تایمر را دوباره تنظیم کنید.

محافظ صفحه نمایش

مشابه نسخه آزمایشی قبلی، می‌توانید کمی جذابیت به سایت خود اضافه کنید و یک محافظ صفحه نمایش اضافه کنید.

• از جاوا اسکریپت برای نمایش پاپ‌اوور پس از یک دوره عدم فعالیت استفاده کنید.
• برای مخفی کردن و تنظیم مجدد تایمر، چراغ را خاموش کنید.

دنبال کردن

این نسخه آزمایشی نشان می‌دهد که چگونه می‌توانید یک پنجره پاپ‌اوور (popover) بعد از یک نشانگر ورودی داشته باشید.

• نمایش پنجره‌ی پاپ‌اوور بر اساس انتخاب، رویداد کلیدی یا ورودی کاراکتر ویژه.
• از جاوا اسکریپت برای به‌روزرسانی موقعیت پاپ‌اوور با ویژگی‌های سفارشیِ محدود استفاده کنید.
• این الگو نیاز به توجه ویژه به محتوای نمایش داده شده و دسترسی‌پذیری دارد.
• اغلب در رابط کاربری ویرایش متن و برنامه‌هایی که می‌توانید تگ کنید، دیده می‌شود.

منوی دکمه عملیاتی شناور

این دمو نشان می‌دهد که چگونه می‌توانید از popover برای پیاده‌سازی یک منوی دکمه‌ای شناور بدون جاوا اسکریپت استفاده کنید.

• با استفاده از متد showPopover یک پاپ‌اوور manual ایجاد کنید. این دکمه اصلی است.
• منو یک پاپ‌اوور دیگر است که هدف دکمه اصلی است.
• منو با popovertoggletarget باز می‌شود.
• autofocus برای فوکوس روی اولین مورد از منو که نمایش داده می‌شود استفاده کنید.
• خاموش کردن با نور، منو را می‌بندد.
• پیچش آیکون از :has() استفاده می‌کند. می‌توانید در این مقاله درباره :has() بیشتر بخوانید.

همین!

خب، این مقدمه‌ای بر popover است که به عنوان بخشی از ابتکار رابط کاربری باز (Open UI) در آینده نزدیک ارائه خواهد شد. اگر به درستی استفاده شود، یک افزونه فوق‌العاده برای پلتفرم وب خواهد بود.

حتماً Open UI را بررسی کنید. توضیحات مربوط به پاپ‌اوور با تکامل API به‌روز می‌شود. و در اینجا مجموعه‌ای از تمام نسخه‌های نمایشی وجود دارد.

ممنون که سر زدی!