Une bonne application Web redimensionnera Blockly pour remplir l'espace disponible à l'écran au lieu d'avoir une taille fixe. Il existe plusieurs façons de le faire, y compris à l'aide d'un iFrame, d'un CSS ou d'un positionnement JavaScript. Cette page illustre une approche en superposition, robuste et flexible.
Il s'agit d'un processus en trois étapes. La première étape consiste à définir la zone. La deuxième étape consiste à injecter Blockly. La troisième étape consiste à positionner Blockly sur cette zone.
1. Définir la zone
À l'aide d'une table HTML ou d'un div avec CSS, créez une zone vide qui s'ajuste à mesure que la page est redimensionnée.
Assurez-vous que la zone est associée à un identifiant (sur cette page, nous l'appellerons blocklyArea).
Voici une démonstration en direct d'une cellule du tableau qui remplit le bas de l'écran.
2. Injecter l'espace de travail
L'injection de Blockly est identique au processus décrit dans la section Injecter Blockly de taille fixe.
Ajoutez le code, l'élément blocklyDiv, une boîte à outils et un appel d'injection.
Blockly devrait désormais s'exécuter sur la page, mais sans être à sa place (probablement hors de l'écran).
3. Positionner l'espace de travail
La dernière étape consiste à positionner l'élément blocklyDiv sur l'élément blocklyArea. Pour ce faire, supprimez tous les styles height et width de blocklyDiv et ajoutez un positionnement absolu:
<div id="blocklyDiv" style="position: absolute"></div>
Remplacez ensuite le script d'injection par un script qui positionne également "blocklyDiv" sur "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();
Voici une démonstration en direct de Blockly qui remplit le bas de l'écran.