জাভাস্ক্রিপ্ট মেসেজিং ব্যবহার করে Wix-এ ড্রপডাউন-চালিত পিডিএফ URL স্যুইচিং একীভূত করা

Wix লাইব্রেরি সাইটে পিডিএফ ভিউয়ার কার্যকারিতা উন্নত করা

একটি সংগঠিত এবং ব্যবহারকারী-বান্ধব পদ্ধতিতে PDF ফাইলগুলির একটি বিশাল সংরক্ষণাগার প্রদর্শন করা একটি পাবলিক লাইব্রেরির ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য অত্যন্ত গুরুত্বপূর্ণ। লক্ষ্য হল দর্শকদের পুরানো সংবাদপত্রের মতো ঐতিহাসিক রেকর্ডগুলিতে বিরামহীন অ্যাক্সেস অফার করা, যেগুলি পিডিএফ হিসাবে সংরক্ষণ করা হয়। এই প্রকল্পে, Wix, Velo এবং একটি HTML এম্বেড উপাদানের ব্যবহার একটি শক্তিশালী সিস্টেমের ভিত্তি তৈরি করে।

Wix-এর প্ল্যাটফর্ম আইফ্রেমের মাধ্যমে এমবেড করা উপাদানগুলিকে সমর্থন করে, ব্যবহারকারীদের পিডিএফ ভিউয়ারের মতো ইন্টারেক্টিভ উপাদান যোগ করতে দেয়। এই পিডিএফ ভিউয়ারটি একটি আইফ্রেম ব্যবহার করে এম্বেড করা হয়েছে এবং বর্তমানে একটি স্ট্যাটিক ইউআরএল নির্ধারণ করে যে কোন নথিটি প্রদর্শিত হবে। যাইহোক, একটি মসৃণ অভিজ্ঞতার জন্য ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে পিডিএফ ফাইলটি গতিশীলভাবে পরিবর্তন করার প্রয়োজনীয়তা অপরিহার্য।

চ্যালেঞ্জটি হল ব্যবহারকারীদের দুটি ড্রপডাউন থেকে এক বছর এবং এক মাস নির্বাচন করার অনুমতি দেওয়া, যা প্রদর্শিত পিডিএফ নথিতে একটি পরিবর্তন ট্রিগার করবে। এতে আইফ্রেমের সাথে যোগাযোগের জন্য জাভাস্ক্রিপ্ট মেসেজিংকে একীভূত করা, ড্রপডাউন নির্বাচন অনুযায়ী নথির URL পরিবর্তন করতে সক্ষম করা জড়িত।

এই পদ্ধতিটি শুধুমাত্র অসংখ্য স্ট্যাটিক Wix পৃষ্ঠার প্রয়োজনীয়তা কমায় না বরং লাইব্রেরির পিডিএফ সংরক্ষণাগারে অ্যাক্সেস সহজ করে। নীচে, আমরা Velo ফ্রেমওয়ার্ক এবং জাভাস্ক্রিপ্ট ব্যবহার করে এটি বাস্তবায়নের জন্য প্রয়োজনীয় পদক্ষেপ এবং সমাধানগুলি অন্বেষণ করি।

Wix এ ড্রপডাউন নির্বাচন সহ গতিশীল পিডিএফ লোড হচ্ছে

এই সমাধানে, আমরা একটি এম্বেডেড iFrame-এর মধ্যে প্রদর্শিত একটি PDF ফাইলের URL গতিশীলভাবে পরিবর্তন করতে Wix পৃষ্ঠায় এক জোড়া ড্রপডাউন উপাদান ব্যবহার করি। এই সিস্টেমটি বিশেষ করে পাবলিক লাইব্রেরিগুলির জন্য উপযোগী যারা আর্কাইভ করা সংবাদপত্রের পিডিএফগুলিতে সহজে অ্যাক্সেস প্রদান করতে চায়৷ মূল কার্যকারিতা দ্বারা চালিত হয় জাভাস্ক্রিপ্ট মেসেজিং, যা ড্রপডাউন থেকে এম্বেড করা PDF ভিউয়ারে ব্যবহারকারীর নির্বাচন পাঠায়। PSPDFKit ভিউয়ারটি iFrame-এর ভিতরে পিডিএফ রেন্ডার করতে ব্যবহৃত হয় এবং আমরা ব্যবহারকারীর বছর এবং মাসের পছন্দের উপর ভিত্তি করে ইউআরএল পরিবর্তন করে ভিউয়ারকে ম্যানিপুলেট করি। এটি একাধিক স্ট্যাটিক Wix পৃষ্ঠাগুলি তৈরি না করেই বৃহৎ আর্কাইভগুলিকে সারফেস করার একটি সুবিন্যস্ত উপায় প্রদান করে।

প্রথম ড্রপডাউন বছর নির্বাচন করে, এবং দ্বিতীয় ড্রপডাউন মাস নির্বাচন করে। যখন ব্যবহারকারী উভয়টি নির্বাচন করে, সিস্টেমটি সংশ্লিষ্ট পিডিএফ ফাইলের জন্য উপযুক্ত URL তৈরি করে। দ PSPDFKit.load() পদ্ধতিটি এর কেন্দ্রীয় কারণ এটি আপডেট করা URL এর উপর ভিত্তি করে iFrame-এ নতুন PDF লোড করে। এই পদ্ধতিটি PSPDFKit লাইব্রেরির অংশ, যা একটি বহিরাগত স্ক্রিপ্টের মাধ্যমে পৃষ্ঠায় এমবেড করা হয়। দ পোস্ট মেসেজ() এপিআই বিকল্প সমাধানেও গুরুত্বপূর্ণ, যা মূল পৃষ্ঠা এবং আইফ্রেমের মধ্যে বার্তা পাঠানোর অনুমতি দেয়। আইফ্রেমে নতুন PDF URL সম্বলিত একটি বার্তা পাঠানোর মাধ্যমে, PDF ভিউয়ার গতিশীলভাবে আপডেট হয়।

DOM সম্পূর্ণরূপে লোড হলেই স্ক্রিপ্টটি চলে তা নিশ্চিত করতে, আমরা ব্যবহার করি DOMContentLoaded ঘটনা এটি নিশ্চিত করে যে ড্রপডাউন উপাদান এবং PSPDFKit কন্টেইনার স্ক্রিপ্টে অ্যাক্সেসযোগ্য। এছাড়াও আমরা প্রতিটি ড্রপডাউনে ইভেন্ট শ্রোতাদের যোগ করি। যখন ব্যবহারকারী একটি বছর বা মাস নির্বাচন করে, তখন সংশ্লিষ্ট ইভেন্ট শ্রোতা নির্বাচনটি ক্যাপচার করে এবং সঠিক URL দিয়ে PDF ভিউয়ারকে পুনরায় লোড করার জন্য একটি ফাংশন কল করে। এটি একটি সাধারণ ফাংশনের মাধ্যমে পরিচালিত হয় যা ড্রপডাউনগুলিতে নির্বাচিত মানগুলি থেকে URL তৈরি করতে টেমপ্লেট লিটারেল ব্যবহার করে। এই পদ্ধতিটি শুধুমাত্র বাস্তবায়ন করা সহজ নয় বরং এটি অত্যন্ত মডুলারও, যা নতুন আর্কাইভ যোগ করার সাথে সাথে সহজে আপডেট করার অনুমতি দেয়।

দ্বিতীয় পদ্ধতিতে, আমরা ব্যবহার করি পোস্ট মেসেজ() মূল পৃষ্ঠা এবং iFrame-এর মধ্যে যোগাযোগ করতে। মূল পৃষ্ঠাটি ড্রপডাউন পরিবর্তনের জন্য শোনে এবং iFrame-এ নতুন PDF URL সম্বলিত একটি বার্তা পাঠায়, যা একটি ইভেন্ট লিসেনার ব্যবহার করে বার্তাটি গ্রহণ করে। আরও বিচ্ছিন্ন পরিবেশের সাথে কাজ করার সময় এই পদ্ধতিটি কার্যকর যেখানে 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 এবং জাভাস্ক্রিপ্ট মেসেজিং এর মাধ্যমে পিডিএফ আর্কাইভ অ্যাক্সেসযোগ্যতা উন্নত করা

Wix এ এমবেডেড পিডিএফ ইউআরএলকে গতিশীলভাবে পরিবর্তন করতে ড্রপডাউন উপাদানগুলি ব্যবহার করার সময় আরেকটি গুরুত্বপূর্ণ বিবেচনা নিশ্চিত করা হচ্ছে iFrame এবং মূল পৃষ্ঠাটি কার্যকর। যদিও জাভাস্ক্রিপ্ট মেসেজিং আমাদের এই দুটি উপাদানের মধ্যে ডেটা পাঠাতে দেয়, নির্বাচন কীভাবে আপডেটগুলিকে ট্রিগার করে তা অপ্টিমাইজ করে কর্মক্ষমতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যেতে পারে। এটি ইনপুট ডিবাউন্স করে করা যেতে পারে, যার অর্থ প্রতিটি পরিবর্তনের পরিবর্তে ব্যবহারকারী তাদের নির্বাচন সম্পূর্ণ করার পরে সিস্টেমটি শুধুমাত্র PDF ভিউয়ার আপডেট করে।

আরেকটি দিক যা এখনো কভার করা হয়নি ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS). যেহেতু পিডিএফগুলি একটি বাহ্যিক সার্ভারে (যেমন ডিজিটাল মহাসাগর) হোস্ট করা হয়, তাই Wix ডোমেন থেকে অ্যাক্সেসের অনুমতি দেওয়ার জন্য সার্ভারটি কনফিগার করা হয়েছে তা নিশ্চিত করা অত্যন্ত গুরুত্বপূর্ণ। সার্ভারের CORS সেটিংস সঠিকভাবে কনফিগার করা না থাকলে, PDF ভিউয়ার ডকুমেন্টটি লোড করতে সক্ষম নাও হতে পারে, যার ফলে ত্রুটি দেখা দেয়। পিডিএফ ফাইলগুলি হোস্ট করা সার্ভারে সঠিক CORS শিরোনাম দুটি প্ল্যাটফর্মের মধ্যে বিরামহীন একীকরণের জন্য অপরিহার্য।

অতিরিক্তভাবে, আপনি লোড হওয়ার সময় কমাতে ঘন ঘন অ্যাক্সেস করা PDF ফাইলগুলি প্রিলোড করে সিস্টেমটিকে উন্নত করতে পারেন। প্রিলোডিং কৌশলগুলি কার্যকর হয় যখন ব্যবহারকারী একাধিক মাস বা বছরের মধ্যে পরিবর্তন করতে পারে। ব্রাউজারের ক্যাশে এই ফাইলগুলি সংরক্ষণ করে, পরবর্তী নথি লোড দ্রুত হবে, একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে। এটি পরিষেবা কর্মী বা অন্যান্য ক্যাশিং প্রক্রিয়া ব্যবহার করে করা যেতে পারে, যা ব্যবহারকারী উপলব্ধ বিকল্পগুলির মাধ্যমে নেভিগেট করার সাথে সাথে পিডিএফগুলি প্রিলোড করার জন্য সেট আপ করা যেতে পারে।