مساحة عمل يمكن تغيير حجمها

سيعمل تطبيق الويب الجيد على تغيير حجم Blockly لملء المساحة المتاحة على الشاشة بدلاً من أن يكون بحجم ثابت. هناك عدة طرق لتنفيذ ذلك، بما في ذلك استخدام إطار iframe وتحديد المواضع في CSS وJavaScript. توضّح هذه الصفحة أسلوبًا متينًا ومرنًا للعرض فوق المحتوى.

تتكوّن هذه العملية من ثلاث خطوات. الخطوة الأولى هي تحديد المنطقة. الخطوة الثانية هي إدخال 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 يملأ أسفل الشاشة.