Une bonne application Web redimensionne Blockly pour remplir l'espace disponible à l'écran plutôt que d'avoir une taille fixe. Vous pouvez le faire de plusieurs façons, y compris en utilisant un iframe, CSS et le positionnement JavaScript. Cette page présente une approche de 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'un tableau HTML ou d'un div avec CSS, créez une zone vide qui se réorganise lorsque la page est redimensionnée.
Assurez-vous que la zone possède un ID (nous l'appellerons blocklyArea sur cette page).
Voici une démonstration en direct d'une cellule de 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 Injection de Blockly à taille fixe.
Ajoutez le code, l'élément blocklyDiv, une boîte à outils et un appel d'injection.
Blockly devrait maintenant s'exécuter sur la page, mais pas à l'endroit où il devrait se trouver (probablement hors é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 au-dessus de 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.