Obszar roboczy, którego rozmiar można zmienić

Dobra aplikacja internetowa zmieni rozmiar Blockly, aby wypełnić dostępną przestrzeń na ekranie, zamiast mieć stały rozmiar. Można to zrobić na kilka sposobów, m.in. za pomocą elementu iframe, CSS i pozycjonowania JavaScript. Na tej stronie pokazujemy podejście oparte na nakładkach, które jest solidne i elastyczne.

Ten proces składa się z 3 etapów. Pierwszym krokiem jest określenie obszaru. Drugi krok to wstrzyknięcie Blockly. Trzeci krok to umieszczenie Blockly w tym obszarze.

1. Określanie obszaru

Za pomocą tabeli HTML lub elementu div z CSS utwórz pusty obszar, który będzie się dopasowywać do rozmiaru strony. Upewnij się, że obszar ma identyfikator (na tej stronie będziemy go nazywać blocklyArea).

Oto demonstracja na żywo komórki tabeli, która wypełnia dolną część ekranu.

2. Wstrzykiwanie obszaru roboczego

Wstrzykiwanie Blockly jest takie samo jak proces opisany w artykule wstrzykiwanie Blockly o stałym rozmiarze. Dodaj kod, element blocklyDiv, przybornik i wywołanie wstrzykiwania.

Blockly powinien być teraz uruchomiony na stronie, ale nie w odpowiednim miejscu (prawdopodobnie poza ekranem).

3. Ustawianie obszaru roboczego

Ostatnim krokiem jest umieszczenie elementu blocklyDiv nad elementem blocklyArea. Aby to zrobić, usuń style height i width z blocklyDiv i dodaj pozycjonowanie bezwzględne:

<div id="blocklyDiv" style="position: absolute"></div>

Następnie zastąp skrypt wstrzykiwania skryptem, który również umieszcza blocklyDiv nad 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();

Oto demonstracja na żywo Blockly, która wypełnia dolną część ekranu.