Không gian làm việc có thể thay đổi kích thước

Một ứng dụng web tốt sẽ đổi kích thước Blockly để lấp đầy không gian có sẵn trên màn hình thay vì có kích thước cố định. Có một số cách để thực hiện việc này, bao gồm cả việc sử dụng iframe, CSS và định vị JavaScript. Trang này minh hoạ một phương pháp lớp phủ mạnh mẽ và linh hoạt.

Đây là quy trình gồm 3 bước. Bước đầu tiên là xác định khu vực. Bước thứ hai là chèn Blockly. Bước thứ ba là đặt Blockly lên trên khu vực này.

1. Xác định khu vực

Sử dụng bảng HTML hoặc div có CSS, hãy tạo một vùng trống sẽ được sắp xếp lại khi trang được đổi kích thước. Đảm bảo rằng khu vực này có một mã nhận dạng (trên trang này, chúng ta sẽ gọi mã nhận dạng đó là blocklyArea).

Sau đây là bản minh hoạ trực tiếp về một ô trong bảng lấp đầy phần dưới cùng của màn hình.

2. Chèn không gian làm việc

Việc chèn Blockly cũng giống như quy trình được mô tả trong phần chèn Blockly có kích thước cố định. Thêm mã, phần tử blocklyDiv, hộp công cụ và lệnh gọi chèn.

Giờ đây, Blockly sẽ chạy trên trang, chỉ là không nằm ở vị trí mà nó phải nằm (có thể là ngoài màn hình).

3. Định vị không gian làm việc

Bước cuối cùng là đặt phần tử blocklyDiv lên trên phần tử blocklyArea. Để thực hiện việc này, hãy xoá mọi kiểu height và width khỏi blocklyDiv rồi thêm vị trí tuyệt đối:

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

Sau đó, hãy thay thế tập lệnh chèn bằng một tập lệnh cũng định vị blocklyDiv trên 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();

Sau đây là bản minh hoạ trực tiếp về Blockly lấp đầy phần dưới cùng của màn hình.