فضای کاری قابل تغییر اندازه

یک برنامه وب خوب، اندازه Blockly را تغییر می دهد تا فضای موجود روی صفحه را پر کند تا اینکه اندازه ثابتی داشته باشد. راه های مختلفی برای انجام این کار وجود دارد، از جمله استفاده از iframe، CSS و موقعیت یابی جاوا اسکریپت. این صفحه یک رویکرد همپوشانی را نشان می دهد که قوی و انعطاف پذیر است.

این یک فرآیند سه مرحله ای است. اولین قدم این است که منطقه را تعریف کنید. مرحله دوم تزریق Blockly است. مرحله سوم قرار دادن Blockly روی این ناحیه است.

1. منطقه را تعریف کنید

با استفاده از یک جدول HTML یا یک div با CSS، یک ناحیه خالی ایجاد کنید که با تغییر اندازه صفحه دوباره جریان پیدا کند. اطمینان حاصل کنید که منطقه دارای شناسه است (در این صفحه آن را 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 است که پایین صفحه را پر می کند.