படத்தில் உள்ள ஆவணப் பட API ஐப் பயன்படுத்தி வலை விட்ஜெட்களை உருவாக்குதல் | CSS-தந்திரங்கள்

Firefox 151 சமீபத்தில் Picture-in-Picture Document API ஐ அனுப்பியது. இது (சாதாரண?) Picture-in-Picture API போன்றது அல்ல, இது உலாவி தாவல்கள் அல்லது OS விண்டோக்களை மாற்றிய பிறகும் காணக்கூடிய மறுஅளவிடக்கூடிய சாளரத்தில் வீடியோக்களை தள்ளும். இல்லை, செய்ய ஆவணம் பிக்சர்-இன்-பிக்ச்சர் ஏபிஐ நம்மை வைக்க அனுமதிக்கிறது ஏதோ ஒன்று ஜன்னலுக்கு

இந்த விண்டோக்களை நாம் இணைய விட்ஜெட்டுகளாக நினைக்கலாம் என்று நினைக்கிறேன். ஃப்ளோட்டிங் ஸ்டாக் டிக்கர்ஸ், லைவ் அரட்டை உரையாடல்கள், பிளேலிஸ்ட்கள், செய்ய வேண்டிய பட்டியல்கள், குறிப்புகள், அட்டவணைகள் – எல்லா நேரங்களிலும் திரையில் வைத்திருக்க விரும்பும் எதையும் அவற்றைப் பயன்படுத்தலாம்.

பொதுவான யோசனை என்னவென்றால், படத்தில் ஒரு ஆவணப் பட சாளரத்தை உருவாக்குகிறோம் (டிபிஐபி சாளரம்) பின்னர் HTML, CSS மற்றும் JavaScript ஐ அதில் வைக்கிறோம். நீங்கள் இதைப் பற்றி நினைக்கும் போது இது மிகவும் எளிமையானது, ஆனால் Picture-in-Picture Document API எவ்வாறு செயல்படுகிறது என்பதை நாங்கள் ஆராயும்போது, ​​நீங்கள் சந்திக்கும் சற்று சிக்கலான சூழ்நிலையை நாங்கள் கையாள்வோம்.

முக்கிய ஆவணத்திலிருந்து ஒரு பங்கு டிக்கரை குளோன் செய்கிறோம் செய்ய DPIP சாளரம். DPIP சாளரத்திற்கான தனிப்பயன் CSS ஐ எழுதுவதற்கு நாங்கள் பயன்படுத்தும் சில மீடியா தொடர்பான வினவல்கள் மற்றும் போலி வகுப்புகளைப் பற்றி பேசுவதற்கு இது எங்களை அனுமதிப்பது மட்டுமல்லாமல், சூழலில் இருந்து HTML உறுப்பை எடுத்துக்கொள்வது CSS ஐ உடைக்கும் என்பதை இது ஒரு வலுவான நினைவூட்டலாகும், எனவே நீங்கள் அதை மனதில் கொள்ள வேண்டும்.

பங்கு சொல்வது இதுதான்:

ஆனால் அது வேலை செய்ய, நீங்கள் டெமோவை பிழைத்திருத்த பயன்முறையில் திறக்க வேண்டும். ஏனென்றால், கோட்பென் போன்ற உள்ளமை பார்க்கும் சூழல்களில் பிக்சர்-இன்-பிக்ச்சர் வேலை செய்யாது கள்.

கூடுதலாக, Safari இன்னும் DPIP API ஐ ஆதரிக்கவில்லை, எனவே நீங்கள் Chrome அல்லது Firefox ஐப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்தவும்.

தொடங்குவதற்கு தயாரா?

அனைத்து ஜாவாஸ்கிரிப்ட்

முதலில், பிக்சர்-இன்-பிக்சர் டாகுமெண்ட் API ஐ உலாவி ஆதரிக்கிறதா என்பதைச் சரிபார்க்க வேண்டும். இது ஒரு நல்ல அம்சமாக இருக்கும் என்று நான் கற்பனை செய்கிறேன், எனவே சஃபாரி ஆதரவிற்காக ஏன் காத்திருக்க வேண்டும்? ஆனால், துரதிர்ஷ்டவசமாக, கேட்கவோ கேட்கவோ வழி இல்லை @media (display-mode: picture-in-picture) அம்ச கோரிக்கைகளைப் பயன்படுத்தி ஆதரிக்கப்படுகிறது (@supports) ஏனெனில் at-rule() செயல்பாடு Chrome மற்றும் எந்த முன்னுரை ஆதரவு திட்டங்களால் மட்டுமே ஆதரிக்கப்படுகிறது (இது பிரிவு: (display-mode: picture-in-picture)) எப்படியும் கைவிடப்பட்டது.

இது சிறப்பாக இருக்கும்:

@supports at-rule(@media; display-mode: picture-in-picture) {
  /* DPIP supported */
}

கருத்து: Safari Technology Preview 251 வெளியீட்டு குறிப்புகளில் விதிகளை வரையறுப்பதற்கான ஆதரவு @supports ஆனால் எப்போது தொடங்கப்படும் என்று தெரியவில்லை. மேலும் Firefox 155 வெளியான ஒரு நாளுக்குப் பிறகு ஆதரிக்கப்பட்டது.

அதற்கு பதிலாக, ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி உலாவியின் ஆதரவைச் சரிபார்க்க வேண்டும், DPIP ஆதரிக்கப்படாவிட்டால் பொத்தானை அகற்றவும் அல்லது ஆதரிக்கப்பட்டால் DPIP சாளரமாக மாற்றவும்:

if (!("documentPictureInPicture" in window)) {
  /* DPIP not supported (remove button) */
  document.querySelector("button").remove();
} else {
  /* DPIP supported (listen for button click) */
  document.querySelector("button").addEventListener("click", async () => {
    /* ... */
  });
}

Document Picture-in-Picture API என்பது டெஸ்க்டாப் மட்டுமே என்பதை நினைவில் கொள்ளவும், எனவே மேலே உள்ள சோதனை அதையும் கணக்கில் எடுத்துக்கொள்கிறது மற்றும் முழு அம்சம் கொண்ட ஆப்ஸ் ஏன் என்பதைக் காட்டுகிறது at-rule() செயல்பாடு மிகவும் பயனுள்ளதாக இருக்கும்.

ஒரு DPIP சாளரத்தை உருவாக்குவதற்கு, நாம் முதலில் செய்யக்கூடிய ஒன்று உள்ளது – ஏற்கனவே உள்ள DPIP சாளரத்தைத் திருத்தவும். DPIP சாளரங்கள் ஏற்கனவே உள்ள DPIP சாளரங்களை மாற்றுகின்றன, எனவே அந்த பகுதியைப் பற்றி நாம் கவலைப்பட வேண்டியதில்லை, ஆனால் பொத்தானை இரண்டாவது முறை அழுத்தினால் என்ன ஆகும் என்பதை நாங்கள் தீர்மானிக்க வேண்டும். கீழே உள்ள குறியீடு DPIP சாளரம் ஏற்கனவே திறந்திருந்தால் அதை மூடுகிறது, இதனால் பட்டனை மாற்று பொத்தானாக மாற்றுகிறது:

document.querySelector("button").addEventListener("click", async () => {
  /* If the DPIP window is open, close it */
  if (window.documentPictureInPicture.window) {
    window.documentPictureInPicture.window.close();
  }
});

சிக்கல் என்னவென்றால், கவனம் எப்போதும் DPIP சாளரத்திற்கு நகர்கிறது, எனவே DPIP சாளரத்தை அணைக்க இரண்டு கிளிக்குகள் தேவைப்படலாம். DPIP சாளரத்தில் உள்ள பொத்தானை குளோன் செய்வது ஒரு தீர்வாகும், ஆனால் DPIP சாளரத்தில் ஏற்கனவே “மூடு” பொத்தான் உள்ளது, அதனால் எந்த அர்த்தமும் இல்லை. தனிப்பட்ட முறையில், நான் எதுவும் செய்ய மாட்டேன், அதனால் அடுத்தடுத்த பொத்தான்கள் DPIP சாளரத்தை மீண்டும் உருவாக்கும். உண்மையில், பயனர் DPIP சாளரத்தை நகர்த்தினால் அல்லது அளவை மாற்றினால், அடுத்தடுத்த விசை அழுத்தங்கள் அதை அதன் அசல் நிலை மற்றும் அளவு (சரியான விருப்பங்களுடன்) மீட்டமைக்கும்.

அந்த குறிப்பில், டிபிஐபி சாளரங்களை உருவாக்குவது பற்றி பேசலாம் மற்றும் விருப்பங்களை கூறினார். என்ன என்பது மிகவும் தெளிவாக உள்ளது width மற்றும் height விருப்பங்கள் செய்யப்படுகின்றன, ஆனால் ஒன்றை இல்லாமல் மற்றொன்றை அமைக்க முடியாது என்பதை நினைவில் கொள்ளவும், இரண்டையும் அமைக்கவில்லை என்றால், உலாவி தேர்ந்தெடுக்கும். இல் preferInitialWindowPlacement அதை அமைத்தால் விருப்பம் trueDPIP சாளரத்தின் நிலை மற்றும் அளவைச் சேமிப்பதில் இருந்து உலாவியைத் தடுக்கிறது. இல் disallowReturnToOpener அமைக்கப்பட்டால் விருப்பம் (இங்கே பயன்படுத்தப்படவில்லை). true“Back to Tab” ஐகான் பட்டனை மறைக்கிறது (இது “மூடு” ஐகான் பொத்தானைப் போலவே செய்கிறது, ஆனால் பயனரை அசல் தாவலுக்குத் திருப்புகிறது).

/* Create the DPIP window */
const DPIP = await window.documentPictureInPicture.requestWindow({
  width: 600,
  height: 400,
  preferInitialWindowPlacement: true
});

இல் requestWindow() முறை DocumentPictureInPicture இடைமுகம் ஒரு வாக்குறுதியை அளிக்கிறது (எனவே நாங்கள் async மற்றும் await), அதாவது சாளரத்தைத் தயாரிக்கும் போது எல்லாவற்றையும் நாம் கவனித்துக் கொள்ளலாம்.

டிபிஐபி விண்டோவில் HTML ஐ இப்படி குளோன் செய்யலாம்:

/* Select the component */
const stock = document.querySelector("#stock");

/* Clone the component and append it to the DPIP  */
DPIP.document.body.append(stock.cloneNode(true));

ஆனால் பல கூறுகளை குளோன் செய்ய, நாம் வேறு அணுகுமுறையை எடுக்க வேண்டும். இதைத்தான் நாம் அனைவரும் குளோன் செய்கிறோம் s and கள் (மற்றும்