Une bonne application Web redimensionnera Blockly pour remplir l'espace disponible sur plutôt que sur une taille fixe. Pour ce faire, vous pouvez utiliser plusieurs méthodes, y compris 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
En utilisant un tableau HTML ou un div avec CSS, créez une zone vide qui
s'adapte à mesure que la page est redimensionnée.
Assurez-vous que la zone dispose d'un ID (nous l'appellerons blocklyArea sur cette page).
Voici une démonstration en direct d'une cellule de tableau qui occupe 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 maintenant s'exécuter sur la page, mais pas à l'endroit où il devrait être (probablement hors écran).
3. Positionner l'espace de travail
La dernière étape consiste à positionner l'élément blocklyDiv au-dessus de l'élément blocklyArea. Pour ce faire, supprimez les styles height et width de blocklyDiv.
et ajouter un positionnement absolu:
<div id="blocklyDiv" style="position: absolute"></div>
Remplacez ensuite le script d'injection par un script qui positionne également "blocklyDiv". plus 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 occupe le bas de l'écran.