Una buona applicazione web ridimensionerà Blockly per riempire lo spazio disponibile sullo schermo anziché avere dimensioni fisse. Esistono diversi modi per farlo, tra cui utilizzare un posizionamento iframe, CSS e JavaScript. Questa pagina mostra un approccio in overlay che è solido e flessibile.
Si tratta di una procedura in tre passaggi. Il primo passaggio consiste nel definire l'area. Il secondo passaggio consiste nell'inserire Blockly. Il terzo passaggio consiste nel posizionare Blockly sopra quest'area.
1. Definisci l'area
Utilizzando una tabella HTML o un elemento div con CSS, crea un'area vuota che ripete il flusso quando la pagina viene ridimensionata.
Verifica che l'area abbia un ID (in questa pagina lo chiameremo blocklyArea).
Ecco una demo dal vivo di una cella della tabella che riempie la parte inferiore dello schermo.
2. Inserisci l'area di lavoro
L'inserimento di Blockly è la stessa della procedura descritta in
inserimento di Blockly a dimensioni fisse.
Aggiungi il codice, l'elemento blocklyDiv, una casella degli strumenti e una chiamata di inserimento.
Blockly ora dovrebbe essere in esecuzione nella pagina, ma non nel punto in cui dovrebbe essere (probabilmente fuori schermo).
3. Posizionare l'area di lavoro
Il passaggio finale consiste nel posizionare l'elemento blocklyDiv sopra l'elemento blocklyArea. Per farlo, rimuovi tutti gli stili height e width da blocklyDiv e aggiungi il posizionamento assoluto:
<div id="blocklyDiv" style="position: absolute"></div>
Quindi, sostituisci lo script di inserimento con uno che posizioni "blocklyDiv" in "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();
Ecco una demo dal vivo di Blockly che riempie la parte inferiore dello schermo.