साइज़ बदलने की सुविधा वाला फ़ाइल फ़ोल्डर

एक अच्छा वेब ऐप्लिकेशन, स्क्रीन पर उपलब्ध जगह के हिसाब से Blockly का साइज़ बदल देगा. ऐसा नहीं होगा कि उसका साइज़ तय हो. ऐसा करने के कई तरीके हैं. जैसे, iframe, सीएसएस, और JavaScript पोज़िशनिंग का इस्तेमाल करना. इस पेज पर, ओवरले का इस्तेमाल करने का तरीका बताया गया है. यह तरीका भरोसेमंद और आसान है.

यह तीन चरणों वाली प्रोसेस है. पहला चरण, इलाके को तय करना है. दूसरा चरण, Blockly को इंजेक्ट करना है. तीसरा चरण, Blockly को इस जगह पर रखना है.

1. जगह तय करना

एचटीएमएल टेबल या सीएसएस के साथ div का इस्तेमाल करके, एक खाली जगह बनाएं. पेज का साइज़ बदलने पर, यह जगह अपने-आप फिर से व्यवस्थित हो जाती है. पक्का करें कि इलाके का कोई आईडी हो. इस पेज पर हम इसे blocklyArea कहेंगे.

यहां स्क्रीन के सबसे नीचे मौजूद टेबल सेल का लाइव डेमो दिया गया है.

2. फ़ाइल फ़ोल्डर को इंजेक्ट करना

Blockly को इंजेक्ट करने की प्रोसेस, तय साइज़ वाले Blockly को इंजेक्ट करने में बताई गई प्रोसेस जैसी ही होती है. कोड, blocklyDiv एलिमेंट, टूलबॉक्स, और इंजेक्शन कॉल जोड़ें.

अब Blockly, पेज पर चल रहा होगा. हालांकि, यह उस जगह पर नहीं होगा जहां इसे होना चाहिए. ऐसा हो सकता है कि यह स्क्रीन पर न दिख रहा हो.

3. वर्कस्पेस को अपनी पसंद के मुताबिक व्यवस्थित करना

आखिरी चरण में, blocklyDiv एलिमेंट को blocklyArea एलिमेंट के ऊपर रखना है. इसके लिए, blocklyDiv से height और width स्टाइल हटाएं. इसके बाद, ऐब्सलूट पोज़िशनिंग जोड़ें:

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

इसके बाद, इंजेक्शन स्क्रिप्ट को ऐसी स्क्रिप्ट से बदलें जो blocklyDiv को blocklyArea के ऊपर भी रखती हो:

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 का लाइव डेमो दिया गया है.