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

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