Интегрисање пребацивања УРЛ-ова ПДФ-а на основу падајућег менија у Вик-у помоћу ЈаваСцрипт порука

Побољшање функционалности ПДФ прегледача на сајту Вик библиотеке

Приказивање огромне архиве ПДФ датотека на организован начин и прилагођен кориснику је кључно за побољшање корисничког искуства на веб локацији јавне библиотеке. Циљ је да се посетиоцима понуди несметан приступ историјским записима као што су старе новине, које се чувају као ПДФ-ови. У овом пројекту, употреба Вик-а, Вело-а и ХТМЛ ембед елемента ствара основу за робустан систем.

Вик-ова платформа подржава уграђене елементе преко ифраме-ова, омогућавајући корисницима да додају интерактивне компоненте попут ПДФ прегледача. Овај ПДФ прегледач је уграђен помоћу ифраме-а, а тренутно статичка УРЛ адреса дефинише који документ се приказује. Међутим, потреба за динамичком променом ПДФ датотеке на основу корисничког уноса је од суштинског значаја за несметано искуство.

Изазов је омогућити корисницима да изаберу годину и месец из два падајућег менија, што ће онда покренути промену у приказаном ПДФ документу. Ово укључује интеграцију ЈаваСцрипт порука за комуникацију са ифраме-ом, омогућавајући да се УРЛ адреса документа промени у складу са избором из падајућег менија.

Овај приступ не само да смањује потребу за бројним статичним Вик страницама, већ и поједностављује приступ ПДФ архиви библиотеке. У наставку истражујемо кораке и решења потребна за имплементацију овога користећи Вело оквир и ЈаваСцрипт.

Динамичко учитавање ПДФ-а са падајућим избором у Вик-у

У овом решењу користимо пар падајућих елемената на Вик страници да динамички модификујемо УРЛ адресу ПДФ датотеке која се приказује унутар уграђеног иФраме-а. Овај систем је посебно користан за јавне библиотеке које желе да обезбеде лак приступ архивираним новинским ПДФ-овима. Основна функционалност се покреће ЈаваСцрипт порука, који шаље изборе корисника из падајућих менија у уграђени ПДФ прегледач. ПСПДФКит приказивач се користи за приказивање ПДФ-ова унутар иФраме-а, а ми манипулишемо приказивачем тако што мењамо УРЛ на основу корисниковог избора године и месеца. Ово пружа поједностављен начин за појављивање великих архива без креирања више статичних Вик страница.

Први падајући мени бира годину, а други месец. Када корисник изабере оба, систем конструише одговарајући УРЛ за одговарајућу ПДФ датотеку. Тхе ПСПДФКит.лоад() метода је централна за ово, јер учитава нови ПДФ у иФраме на основу ажуриране УРЛ адресе. Овај метод је део ПСПДФКит библиотеке, која је уграђена на страницу преко спољне скрипте. Тхе постМессаге() АПИ је такође критичан у алтернативном решењу, које омогућава размену порука између родитељске странице и ифраме-а. Слањем поруке која садржи нови ПДФ УРЛ у ифраме, ПДФ прегледач се динамички ажурира.

Да бисмо осигурали да се скрипта покреће само када је ДОМ потпуно учитан, користимо ДОМЦонтентЛоадед догађај. Ово осигурава да су елементи падајућег менија и ПСПДФКит контејнер доступни скрипти. Такође додајемо слушаоце догађаја у сваки падајући мени. Када корисник одабере годину или месец, одговарајући слушалац догађаја снима избор и позива функцију за поновно учитавање ПДФ прегледача са исправним УРЛ-ом. Ово се решава кроз једноставну функцију која користи литерале шаблона за конструисање УРЛ-а од изабраних вредности у падајућем менију. Овај метод није само једноставан за имплементацију, већ је и веома модуларан, омогућавајући лако ажурирање како се додају нове архиве.

У другом приступу користимо постМессаге() за комуникацију између родитељске странице и иФраме-а. Надређена страница ослушкује промене падајућег менија и шаље поруку која садржи нови ПДФ УРЛ иФраме-у, који прима поруку помоћу слушаоца догађаја. Овај метод је користан када се ради са изолованијим окружењима у којима ифраме не може директно да комуницира са ДОМ-ом родитељске странице. Обе методе обезбеђују ефикасне начине за динамичко ажурирање садржаја уграђеног ПДФ прегледача, смањујући потребу за више статичних страница и нудећи корисничко искуство прегледавања.

// HTML structure for the dropdowns and embed element
<div>
  <label for="yearSelect">Select Year:</label>
  <select id="yearSelect">
    <option value="">--Year--</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <!-- Add other years dynamically or manually -->
  </select>
  <label for="monthSelect">Select Month:</label>
  <select id="monthSelect">
    <option value="">--Month--</option>
    <option value="January">January</option>
    <option value="February">February</option>
    <!-- Add other months dynamically or manually -->
  </select>
</div>
// Embedded PDF viewer in iframe
<div id="pspdfkit" style="width: 100%; height: 100%; max-width: 1920px;"></div>
<script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@2024.5.2/pspdfkit.js"></script>
// JavaScript to update URL based on dropdown selection
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  function loadPDF(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      PSPDFKit.load({
        container: "#pspdfkit",
        document: url,
      }).catch((error) => {
        console.error("Failed to load PDF:", error);
      });
    }
  }
  yearSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    loadPDF(yearSelect.value, monthSelect.value);
  });
});
</script>

// HTML structure remains the same for dropdowns
// Here, we use iframe with a postMessage-based communication system
<iframe id="pdfViewer" src="about:blank" style="width: 100%; height: 100%;"></iframe>
// JavaScript for sending messages to iframe
<script>
document.addEventListener("DOMContentLoaded", () => {
  const yearSelect = document.getElementById("yearSelect");
  const monthSelect = document.getElementById("monthSelect");
  const iframe = document.getElementById("pdfViewer");
  function updatePDFViewer(year, month) {
    if (year && month) {
      const url = `https://domain.tld/${year}_${month}_etc.pdf`;
      iframe.contentWindow.postMessage({
        type: "updatePDF",
        url: url
      }, "*");
    }
  }
  yearSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
  monthSelect.addEventListener("change", () => {
    updatePDFViewer(yearSelect.value, monthSelect.value);
  });
});
</script>
// Inside iframe, use this script to receive the message
<script>
window.addEventListener("message", (event) => {
  if (event.data.type === "updatePDF" && event.data.url) {
    PSPDFKit.load({
      container: "#pspdfkit",
      document: event.data.url,
    });
  }
});
</script>

Побољшање приступачности ПДФ архиве уз Вик и ЈаваСцрипт поруке

Још једно важно питање када се користе падајући елементи за динамичку модификацију уграђеног ПДФ УРЛ-а у Вик-у је осигурање да интеракција између иФраме а главна страница је ефикасна. Док нам ЈаваСцрипт порука омогућава да шаљемо податке између ове две компоненте, перформансе и корисничко искуство се могу побољшати оптимизацијом начина на који избор покреће ажурирања. Ово се може урадити одбијањем уноса, што значи да систем ажурира ПДФ прегледач само након што корисник заврши свој избор, а не при свакој промени.

Још један аспект који још није обрађен је дељење ресурса са више извора (ЦОРС). Пошто се ПДФ-ови хостују на екстерном серверу (као што је Дигитал Оцеан), кључно је осигурати да је сервер конфигурисан да дозвољава приступ са Вик домена. Ако ЦОРС поставке сервера нису исправно конфигурисане, ПДФ прегледач можда неће моћи да учита документ, што ће резултирати грешкама. Правилна ЦОРС заглавља на серверу који хостује ПДФ датотеке су неопходна за беспрекорну интеграцију између две платформе.

Поред тога, можете побољшати систем унапред учитавањем ПДФ датотека којима се често приступа да бисте смањили време учитавања. Стратегије претходног учитавања су корисне када је вероватно да ће корисник прећи између више месеци или година. Чувањем ових датотека у кеш претраживача, накнадно учитавање докумената биће брже, пружајући лакше корисничко искуство. Ово се може урадити помоћу сервисера или других механизама за кеширање, који се могу подесити да унапред учитавају ПДФ-ове док се корисник креће кроз доступне опције.