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

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

تتكوّن هذه العملية من ثلاث خطوات. الخطوة الأولى هي تحديد المنطقة. والخطوة الثانية هي إدخال Injectly. الخطوة الثالثة هي وضع "حظر" على هذه المنطقة.

1- تحديد المنطقة

باستخدام جدول HTML أو جدول div مع CSS، يمكنك إنشاء مساحة فارغة تعاد التدفق عند تغيير حجم الصفحة. تأكد من أن المنطقة لها معرّف (سنطلق عليه في هذه الصفحة blocklyArea).

إليك عرض توضيحي مباشر لخلية جدول تملأ الجزء السفلي من الشاشة.

2. إضافة مساحة العمل

تؤدي عملية إدخال Blockly إلى تنفيذ العملية نفسها الموضّحة في إدخال جزء من حزمة Blockly. أضِف الرمز وعنصر blocklyDiv وصندوق أدوات واستدعاء حقن.

من المفترض أن يتم عرض المحتوى الآن على الصفحة، وليس في المكان الذي من المفترض أن يظهر فيه (على الأرجح خارج الشاشة).

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 يملأ أسفل الشاشة.