جاوا اسکرپٹ میسجنگ کا استعمال کرتے ہوئے ویکس میں ڈراپ ڈاؤن سے چلنے والے پی ڈی ایف یو آر ایل کو انٹیگریٹ کرنا

Wix لائبریری سائٹ پر پی ڈی ایف ویور کی فعالیت کو بڑھانا

عوامی لائبریری کی ویب سائٹ پر صارف کے تجربے کو بہتر بنانے کے لیے پی ڈی ایف فائلوں کے وسیع ذخیرہ کو منظم اور صارف دوست انداز میں ڈسپلے کرنا بہت ضروری ہے۔ مقصد یہ ہے کہ زائرین کو تاریخی ریکارڈز جیسے پرانے اخبارات تک بغیر کسی رکاوٹ کے رسائی کی پیشکش کی جائے، جو پی ڈی ایف کے طور پر محفوظ ہیں۔ اس پروجیکٹ میں، Wix، Velo، اور ایک HTML ایمبیڈ عنصر کا استعمال ایک مضبوط نظام کی بنیاد بناتا ہے۔

Wix کا پلیٹ فارم iframes کے ذریعے ایمبیڈڈ عناصر کو سپورٹ کرتا ہے، جس سے صارفین کو پی ڈی ایف ویورز جیسے انٹرایکٹو اجزاء شامل کرنے کی اجازت ملتی ہے۔ یہ پی ڈی ایف ویور ایک iframe کا استعمال کرتے ہوئے سرایت کرتا ہے، اور فی الحال، ایک جامد یو آر ایل اس بات کی وضاحت کرتا ہے کہ کون سی دستاویز دکھائی جاتی ہے۔ تاہم، صارف کے ان پٹ کی بنیاد پر پی ڈی ایف فائل کو متحرک طور پر تبدیل کرنے کی ضرورت ایک ہموار تجربے کے لیے ضروری ہے۔

چیلنج یہ ہے کہ صارفین کو دو ڈراپ ڈاؤنز میں سے ایک سال اور ایک ماہ کا انتخاب کرنے کی اجازت دی جائے، جو اس کے بعد دکھائی جانے والی پی ڈی ایف دستاویز میں تبدیلی کو متحرک کرے گا۔ اس میں iframe کے ساتھ بات چیت کرنے کے لیے JavaScript پیغام رسانی کو مربوط کرنا، دستاویز کے URL کو ڈراپ ڈاؤن انتخاب کے مطابق تبدیل کرنے کے قابل بنانا شامل ہے۔

یہ نقطہ نظر نہ صرف متعدد جامد Wix صفحات کی ضرورت کو کم کرتا ہے بلکہ لائبریری کے پی ڈی ایف آرکائیو تک رسائی کو بھی آسان بناتا ہے۔ ذیل میں، ہم Velo فریم ورک اور JavaScript کا استعمال کرتے ہوئے اسے نافذ کرنے کے لیے درکار اقدامات اور حل تلاش کرتے ہیں۔

Wix میں ڈراپ ڈاؤن انتخاب کے ساتھ متحرک PDF لوڈنگ

اس حل میں، ہم Wix صفحہ پر ڈراپ ڈاؤن عناصر کا ایک جوڑا استعمال کرتے ہیں تاکہ ایک ایمبیڈڈ iFrame کے اندر دکھائی جانے والی PDF فائل کے URL کو متحرک طور پر تبدیل کیا جا سکے۔ یہ نظام خاص طور پر ان پبلک لائبریریوں کے لیے مفید ہے جو آرکائیو شدہ اخباری PDFs تک آسان رسائی فراہم کرنا چاہتے ہیں۔ بنیادی فعالیت کی طرف سے طاقت ہے جاوا اسکرپٹ پیغام رسانی، جو صارف کے انتخاب کو ڈراپ ڈاؤن سے ایمبیڈڈ پی ڈی ایف ویور کو بھیجتا ہے۔ PSPDFKit ویور کا استعمال iFrame کے اندر PDFs کو رینڈر کرنے کے لیے کیا جاتا ہے، اور ہم صارف کے سال اور مہینے کے انتخاب کی بنیاد پر یو آر ایل کو تبدیل کر کے ناظر کو جوڑ توڑ کرتے ہیں۔ یہ متعدد جامد Wix صفحات بنائے بغیر بڑے آرکائیوز کو سطح پر لانے کا ایک ہموار طریقہ فراہم کرتا ہے۔

پہلا ڈراپ ڈاؤن سال کا انتخاب کرتا ہے، اور دوسرا ڈراپ ڈاؤن مہینے کا انتخاب کرتا ہے۔ جب صارف دونوں کو منتخب کرتا ہے، تو سسٹم متعلقہ پی ڈی ایف فائل کے لیے مناسب یو آر ایل بناتا ہے۔ دی PSPDFKit.load() طریقہ اس میں مرکزی حیثیت رکھتا ہے، کیونکہ یہ اپ ڈیٹ شدہ URL کی بنیاد پر iFrame میں نئی ​​PDF لوڈ کرتا ہے۔ یہ طریقہ PSPDFKit لائبریری کا حصہ ہے، جو ایک بیرونی اسکرپٹ کے ذریعے صفحہ پر سرایت کرتا ہے۔ دی پوسٹ میسج() متبادل حل میں API بھی اہم ہے، جو پیرنٹ پیج اور iframe کے درمیان پیغام رسانی کی اجازت دیتا ہے۔ iframe پر نئے PDF URL پر مشتمل پیغام بھیجنے سے، PDF ویور کو متحرک طور پر اپ ڈیٹ کیا جاتا ہے۔

اس بات کو یقینی بنانے کے لیے کہ اسکرپٹ صرف اس وقت چلتا ہے جب DOM مکمل طور پر لوڈ ہو، ہم استعمال کرتے ہیں۔ DOMContentloaded واقعہ یہ یقینی بناتا ہے کہ ڈراپ ڈاؤن عناصر اور PSPDFKit کنٹینر اسکرپٹ تک قابل رسائی ہیں۔ ہم ہر ڈراپ ڈاؤن میں ایونٹ کے سننے والوں کو بھی شامل کرتے ہیں۔ جب صارف ایک سال یا مہینے کا انتخاب کرتا ہے، تو متعلقہ واقعہ سننے والا انتخاب کو پکڑتا ہے اور پی ڈی ایف ویور کو درست URL کے ساتھ دوبارہ لوڈ کرنے کے لیے ایک فنکشن کو کال کرتا ہے۔ یہ ایک سادہ فنکشن کے ذریعے سنبھالا جاتا ہے جو ڈراپ ڈاؤن میں منتخب اقدار سے یو آر ایل بنانے کے لیے ٹیمپلیٹ لٹریلز کا استعمال کرتا ہے۔ یہ طریقہ نہ صرف لاگو کرنا آسان ہے بلکہ انتہائی ماڈیولر بھی ہے، جو کہ نئے آرکائیوز کے شامل ہونے پر آسان اپ ڈیٹس کی اجازت دیتا ہے۔

دوسرے نقطہ نظر میں، ہم استعمال کرتے ہیں پوسٹ میسج() پیرنٹ پیج اور iFrame کے درمیان بات چیت کرنے کے لیے۔ بنیادی صفحہ ڈراپ ڈاؤن تبدیلیوں کو سنتا ہے اور iFrame کو نئے پی ڈی ایف یو آر ایل پر مشتمل ایک پیغام بھیجتا ہے، جو واقعہ سننے والے کا استعمال کرتے ہوئے پیغام وصول کرتا ہے۔ یہ طریقہ کارآمد ہے جب زیادہ الگ تھلگ ماحول سے نمٹنے کے لیے جہاں iframe براہ راست پیرنٹ پیج کے DOM کے ساتھ تعامل نہیں کر سکتا۔ دونوں طریقے ایمبیڈڈ پی ڈی ایف ویور کے مواد کو متحرک طور پر اپ ڈیٹ کرنے کے موثر طریقے فراہم کرتے ہیں، متعدد جامد صفحات کی ضرورت کو کم کرتے ہیں اور صارف کے لیے براؤزنگ کا تجربہ پیش کرتے ہیں۔

// 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>

Wix اور JavaScript پیغام رسانی کے ساتھ PDF آرکائیو کی رسائی کو بڑھانا

Wix میں ایمبیڈڈ پی ڈی ایف یو آر ایل کو متحرک طور پر تبدیل کرنے کے لیے ڈراپ ڈاؤن عناصر کا استعمال کرتے وقت ایک اور اہم غور اس بات کو یقینی بنا رہا ہے کہ iFrame اور مرکزی صفحہ موثر ہے۔ جب کہ JavaScript پیغام رسانی ہمیں ان دو اجزاء کے درمیان ڈیٹا بھیجنے کی اجازت دیتی ہے، لیکن کارکردگی اور صارف کے تجربے کو بہتر بنا کر بہتر بنایا جا سکتا ہے کہ انتخاب کس طرح اپ ڈیٹس کو متحرک کرتا ہے۔ یہ ان پٹ کو ڈیباؤن کر کے کیا جا سکتا ہے، مطلب یہ ہے کہ سسٹم ہر تبدیلی کے بجائے پی ڈی ایف ویور کو صارف کے انتخاب مکمل کرنے کے بعد ہی اپ ڈیٹ کرتا ہے۔

ایک اور پہلو جس کا ابھی تک احاطہ نہیں کیا گیا ہے۔ کراس اوریجن ریسورس شیئرنگ (CORS). چونکہ PDFs ایک بیرونی سرور (جیسے ڈیجیٹل اوشین) پر ہوسٹ کی جاتی ہیں، اس لیے یہ یقینی بنانا بہت ضروری ہے کہ سرور کو Wix ڈومین سے رسائی کی اجازت دینے کے لیے ترتیب دیا گیا ہو۔ اگر سرور کی CORS سیٹنگز کو صحیح طریقے سے کنفیگر نہیں کیا گیا ہے تو، PDF ویور دستاویز کو لوڈ کرنے کے قابل نہیں ہوسکتا ہے، جس کے نتیجے میں خرابیاں پیدا ہوتی ہیں۔ پی ڈی ایف فائلوں کی میزبانی کرنے والے سرور پر مناسب CORS ہیڈر دونوں پلیٹ فارمز کے درمیان ہموار انضمام کے لیے ضروری ہیں۔

مزید برآں، آپ لوڈنگ کے اوقات کو کم کرنے کے لیے اکثر رسائی کی جانے والی پی ڈی ایف فائلوں کو پہلے سے لوڈ کرکے سسٹم کو بہتر بنا سکتے ہیں۔ پری لوڈنگ کی حکمت عملی اس وقت کارآمد ہوتی ہے جب صارف کے متعدد مہینوں یا سالوں کے درمیان تبدیل ہونے کا امکان ہو۔ ان فائلوں کو براؤزر کے کیش میں ذخیرہ کرنے سے، بعد میں دستاویز کا بوجھ تیز تر ہو جائے گا، جو صارف کو ایک ہموار تجربہ فراہم کرے گا۔ یہ سروس ورکرز یا دیگر کیشنگ میکانزم کا استعمال کرتے ہوئے کیا جا سکتا ہے، جو پی ڈی ایف کو پہلے سے لوڈ کرنے کے لیے سیٹ اپ کیا جا سکتا ہے کیونکہ صارف دستیاب اختیارات کے ذریعے تشریف لے جاتا ہے۔