סביבת עבודה שניתן לשנות את הגודל שלה

אפליקציית אינטרנט טובה תשנה את גודלה של blockly כדי למלא את השטח הזמין במסך במקום להיות בגודל קבוע. יש כמה דרכים לעשות זאת, כולל שימוש במיקום ב-iframe, CSS ו-JavaScript. דף זה מדגים גישה של שכבת-על חזקה וגמישה.

זהו תהליך בן שלושה שלבים. השלב הראשון הוא הגדרת האזור. השלב השני הוא להזריק אתBlockly. בשלב השלישי, מציבים את "Blockly" מעל האזור הזה.

1. הגדרת האזור

באמצעות טבלת HTML או div עם CSS, יוצרים אזור ריק שמתעדכן באופן אוטומטי כשמשנים את גודל הדף. מוודאים שלאזור יש מזהה (בדף הזה נקרא blocklyArea).

לפניכם הדגמה בשידור חי של תא בטבלה שממלא את החלק התחתון של המסך.

2. החדרת סביבת העבודה

האפשרות להזרקת בלוקly זהה לתהליך שמתואר במאמר החדרת בלוקly בגודל קבוע. מוסיפים את הקוד, את האלמנט 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 שממלאת את החלק התחתון של המסך.