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

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

यह तीन चरणों वाली प्रक्रिया है. पहला कदम क्षेत्र तय करना है. दूसरा चरण है, Blockly को इंजेक्ट करना. तीसरा चरण, इस इलाके के ऊपर ब्लॉकली को पोज़ीशन करना है.

1. क्षेत्रफल तय करें

एचटीएमएल टेबल या CSS के साथ div का इस्तेमाल करके, एक खाली क्षेत्र बनाएं जो पेज का साइज़ बदलने पर फिर से फ़्लो करता हो. पक्का करें कि इलाके का आईडी मौजूद हो (इस पेज पर हम इसे blocklyArea कहेंगे).

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

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

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

अब ब्लॉकली पेज पर चलना चाहिए, न कि उस जगह पर होना चाहिए जहां इसे होना चाहिए (शायद ऑफ़स्क्रीन).

3. फ़ाइल फ़ोल्डर को सही जगह पर रखें

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

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

इसके बाद, इंजेक्शन स्क्रिप्ट को ऐसी किसी स्क्रिप्ट से बदलें जिसमें 'blocklyDiv' के बजाय '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 का लाइव डेमो दिया गया है, जो स्क्रीन पर सबसे नीचे दिखता है.