Eine gute Webanwendung passt die Größe von Blockly an den verfügbaren Bildschirmbereich an, anstatt eine feste Größe zu haben. Dafür gibt es mehrere Möglichkeiten, z. B. die Verwendung eines iFrames, von CSS und von JavaScript-Positionierung. Auf dieser Seite wird ein Overlay-Ansatz vorgestellt, der robust und flexibel ist.
Der Vorgang umfasst drei Schritte. Im ersten Schritt definieren Sie den Bereich. Der zweite Schritt besteht darin, Blockly einzufügen. Im dritten Schritt wird Blockly über diesem Bereich positioniert.
1. Bereich definieren
Erstellen Sie mit einer HTML-Tabelle oder einem div mit CSS einen leeren Bereich, der sich beim Ändern der Seitengröße neu anpasst.
Achten Sie darauf, dass der Bereich eine ID hat (auf dieser Seite nennen wir sie blocklyArea).
Hier finden Sie eine Live-Demo einer Tabellenzelle, die den unteren Bildschirmrand ausfüllt.
2. Arbeitsbereich einfügen
Das Einfügen von Blockly entspricht dem Verfahren, das unter Blockly mit fester Größe einfügen beschrieben wird.
Fügen Sie den Code, das blocklyDiv-Element, eine Toolbox und einen Einfügeaufruf hinzu.
Blockly sollte jetzt auf der Seite ausgeführt werden, aber nicht an der richtigen Stelle (wahrscheinlich außerhalb des Bildschirms).
3. Arbeitsbereich positionieren
Im letzten Schritt positionieren Sie das blocklyDiv-Element über dem blocklyArea-Element. Entfernen Sie dazu alle height- und width-Stile aus blocklyDiv und fügen Sie die absolute Positionierung hinzu:
<div id="blocklyDiv" style="position: absolute"></div>
Ersetzen Sie dann das Einfügungsskript durch ein Skript, das blocklyDiv auch über blocklyArea positioniert:
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();
Hier finden Sie eine Live-Demo von Blockly, die den unteren Bildschirmbereich ausfüllt.