Una buona applicazione web ridimensiona Blockly in modo da riempire lo spazio disponibile sullo schermo anziché avere dimensioni fisse. Esistono diversi modi per farlo, tra cui l'utilizzo di un iframe, CSS e il posizionamento di JavaScript. Questa pagina mostra un approccio in overlay solido e flessibile.
Si tratta di un processo in tre fasi. Il primo passaggio consiste nel definire l'area. Il secondo passaggio consiste nell'iniettare Blockly. Il terzo passaggio consiste nel posizionare Blockly su quest'area.
1. Definisci l'area
Utilizzando una tabella HTML o un div con CSS, crea un'area vuota che si ridimensiona quando la pagina viene ridimensionata.
Assicurati che l'area abbia un ID (lo chiameremo blocklyArea in questa pagina).
Ecco una demo dal vivo di una cella di tabella che riempie la parte inferiore dello schermo.
2. Inserisci lo spazio di lavoro
L'inserimento di Blockly è lo stesso processo descritto in Inserire Blockly con dimensioni fisse.
Aggiungi il codice, l'elemento blocklyDiv, una cassetta degli attrezzi e una chiamata di inserimento.
Blockly dovrebbe essere in esecuzione nella pagina, ma non dove dovrebbe essere (probabilmente fuori dallo schermo).
3. Posiziona lo spazio 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 aggiungere il posizionamento assoluto:
<div id="blocklyDiv" style="position: absolute"></div>
Quindi sostituisci lo script di inserimento con uno che posizioni anche "blocklyDiv" sopra '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 Blockly, che riempie la parte inferiore dello schermo.