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

Dobra aplikacja internetowa zamiast stałego rozmiaru zmienia rozmiar Blockly, aby wypełnić dostępną przestrzeń na ekranie. Można to zrobić na kilka sposobów, m.in. korzystając z elementów iframe, CSS i pozycjonowania JavaScriptu. Ta strona prezentuje solidne i elastyczne podejście do nakładania reklam.

Ten proces składa się z 3 etapów. Pierwszym krokiem jest zdefiniowanie obszaru. Drugim krokiem jest wstrzyknięcie Blockly. Trzecim krokiem jest umieszczenie Blockly w tym obszarze.

1. Zdefiniuj obszar

Użyj tabeli HTML lub elementu div z CSS, aby utworzyć pusty obszar, którego układ zmienia się po zmianie rozmiaru strony. Upewnij się, że obszar ma identyfikator (na tej stronie nazwiemy go blocklyArea).

Oto prezentacja komórki tabeli, która wypełnia dół ekranu.

2. Wstrzyknij obszar roboczy

Wstrzykiwanie Blockly o stałym rozmiarze przebiega tak samo jak w sekcji o wstrzykiwaniu Blockly o stałym rozmiarze. Dodaj kod, element blocklyDiv, zestaw narzędzi i wywołanie metody wstrzykiwania.

Element Blockly powinien teraz działać na stronie, ale nie w miejscu, w którym powinna być (prawdopodobnie poza ekranem).

3. Określ położenie obszaru roboczego

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

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

Następnie zastąp skrypt wstrzykiwania kodem, który również ustawia element „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 prezentacja na żywo Blockly, która wypełnia dół ekranu.