พื้นที่ทำงานที่ปรับขนาดได้

เว็บแอปพลิเคชันที่ดีจะปรับขนาด Blockly ให้เต็มพื้นที่ว่างบนหน้าจอแทนที่จะมีขนาดคงที่ คุณทำได้หลายวิธี รวมถึงการใช้ iframe, CSS และการจัดตำแหน่ง JavaScript หน้านี้แสดงแนวทางการซ้อนทับที่แข็งแกร่งและยืดหยุ่น

ซึ่งมี 3 ขั้นตอน ขั้นตอนแรกคือการกำหนดพื้นที่ ขั้นตอนที่ 2 คือการแทรก Blockly ขั้นตอนที่ 3 คือการวาง Blockly เหนือพื้นที่นี้

1. กำหนดพื้นที่

สร้างพื้นที่ว่างที่divด้วย CSS หรือใช้ตาราง HTML เพื่อสร้างพื้นที่ว่างที่ จัดวางใหม่เมื่อมีการปรับขนาดหน้าเว็บ ตรวจสอบว่าพื้นที่ดังกล่าวมีรหัส (ในหน้านี้เราจะเรียกว่า blocklyArea)

นี่คือการสาธิตแบบสด ของตารางเซลล์ที่เติมเต็มส่วนล่างของหน้าจอ

2. แทรกพื้นที่ทำงาน

การแทรก Blockly จะเหมือนกับกระบวนการที่อธิบายไว้ในการแทรก Blockly ขนาดคงที่ เพิ่มโค้ด องค์ประกอบ blocklyDiv กล่องเครื่องมือ และการเรียกใช้การแทรก

ตอนนี้ Blockly ควรจะทำงานในหน้าเว็บได้แล้ว แต่ไม่ได้อยู่ในตำแหน่งที่ควรจะเป็น (อาจอยู่นอกหน้าจอ)

3. จัดวางพื้นที่ทำงาน

ขั้นตอนสุดท้ายคือการวางองค์ประกอบ blocklyDiv ไว้เหนือองค์ประกอบ blocklyArea โดยให้นำรูปแบบ height และ width ออกจาก blocklyDiv และเพิ่มการวางตำแหน่งแบบสัมบูรณ์ ดังนี้

<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 ที่เติมเต็มส่วนล่างของหน้าจอ