Ruang kerja yang dapat diubah ukurannya

Aplikasi web yang baik akan mengubah ukuran Blockly untuk mengisi ruang yang tersedia di layar, bukan ukuran tetap. Ada beberapa cara untuk melakukannya, termasuk menggunakan pemosisian iframe, CSS, dan JavaScript. Halaman ini menunjukkan pendekatan overlay yang kuat dan fleksibel.

Ini adalah proses tiga langkah. Langkah pertama adalah menentukan area. Langkah kedua adalah memasukkan Blockly. Langkah ketiga adalah memosisikan Blockly di atas area ini.

1. Menentukan area

Dengan menggunakan tabel HTML atau div dengan CSS, buat area kosong yang dapat berubah posisi/geometrinya saat ukuran halaman diubah. Pastikan area tersebut memiliki ID (di halaman ini kita akan menyebutnya blocklyArea).

Berikut adalah demo langsung sel tabel yang mengisi bagian bawah layar.

2. Memasukkan ruang kerja

Memasukkan Blockly sama dengan proses yang dijelaskan dalam memasukkan Blockly berukuran tetap. Tambahkan kode, elemen blocklyDiv, toolbox, dan panggilan injeksi.

Sekarang Blockly seharusnya berjalan di halaman, hanya saja tidak berada di tempat yang seharusnya (mungkin di luar layar).

3. Memosisikan ruang kerja

Langkah terakhir adalah memosisikan elemen blocklyDiv di atas elemen blocklyArea. Untuk melakukannya, hapus gaya height dan width dari blocklyDiv dan tambahkan pemosisian absolut:

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

Kemudian ganti skrip injeksi dengan skrip yang juga memosisikan 'blocklyDiv' di atas '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();

Berikut adalah demo langsung Blockly yang memenuhi bagian bawah layar.