পরিবর্তনযোগ্য কর্মক্ষেত্র

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

এটি একটি তিন ধাপের প্রক্রিয়া। প্রথম ধাপ হল এলাকা সংজ্ঞায়িত করা। দ্বিতীয় ধাপ হল ব্লকলি ইনজেকশন করা। তৃতীয় ধাপ হল এই এলাকায় ব্লকলি অবস্থান করা।

1. এলাকা সংজ্ঞায়িত করুন

একটি এইচটিএমএল টেবিল বা সিএসএস সহ একটি div ব্যবহার করে, একটি খালি এলাকা তৈরি করুন যা পৃষ্ঠাটির আকার পরিবর্তন করার সাথে সাথে পুনরায় প্রবাহিত হয়। নিশ্চিত করুন যে এলাকার একটি আইডি আছে (এই পৃষ্ঠায় আমরা এটিকে বলব blocklyArea )।

এখানে একটি টেবিল সেলের একটি লাইভ ডেমো যা স্ক্রিনের নীচে পূর্ণ করে।

2. ওয়ার্কস্পেস ইনজেক্ট করুন

ব্লকলি ইনজেকশনের প্রক্রিয়াটি নির্দিষ্ট আকারের ব্লকলি ইনজেকশনে বর্ণিত প্রক্রিয়ার মতোই। কোড, blocklyDiv উপাদান, একটি টুলবক্স এবং একটি ইনজেকশন কল যোগ করুন।

ব্লকলি এখন পৃষ্ঠায় চলমান হওয়া উচিত, যেখানে এটি থাকা উচিত সেখানে অবস্থিত নয় (সম্ভবত অফস্ক্রিন)।

3. কর্মক্ষেত্রে অবস্থান করুন

চূড়ান্ত ধাপ হল blocklyArea এলিমেন্টের উপর blocklyDiv এলিমেন্ট স্থাপন করা। এটি করার জন্য, blocklyDiv থেকে যেকোনো height এবং width শৈলী মুছে ফেলুন এবং পরম অবস্থান যোগ করুন:

<div id="blocklyDiv" style="position: absolute"></div>

তারপরে ইনজেকশন স্ক্রিপ্টটি এমন একটি দিয়ে প্রতিস্থাপন করুন যা 'blocklyArea'-এর উপরে 'blocklyDiv' অবস্থান করে:

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();

এখানে Blockly এর একটি লাইভ ডেমো রয়েছে যা স্ক্রিনের নীচে পূর্ণ করে।