Skip to main content

xnew.nest

xnew.nest create a new element as a child of the current element.
It replace unit.element.

xnew((self) => {
  const element = xnew.nest(attributes);

  self.element;
})

example 1​

xnew({ tagName: 'div', name: 'A'}, (self) =>{
  self.element; // div A
});

xnew((self) => {
  xnew.nest({ tagName: 'div', name: 'B' });
  self.element; // div B
}

xnew({ tagName: 'div', name: 'C' }, (self) => { 
  xnew.nest({ tagName: 'div', name: 'D' }); // inner div
  self.element; // div D
}

const unit4 = xnew({ tagName: 'div', name: 'E' }, 'aaa');
unit4.element; // div E

The above code leads to the following result.

<body>
  <div name="A"></div>
  <div name="B"></div>
  <div name="C">
    <div name="D"></div>
  </div>
  <div name="E">
    aaa
  </div>
</body>
note

The created elements are removed when the units finalize.

example 2​

<div id="main"></div>
<script>
  xnew('#main', (self) => {
    xnew(Div1);
    xnew(Div2);
    xnew(Div3);
    xnew(Div4);
  });

  function BaseDiv(self, name) {
    xnew.nest({ style: { margin: '4px', padding: '4px', border: 'solid 1px #222'} });
    xnew({ tagName: 'p' }, name);
  }

  function Div1(self) {
    xnew.extend(BaseDiv, 'my div');

    xnew({ style: { display: 'flex' } }, () => {
      xnew({ style: { width: '160px', height: '36px', background: '#d66' } }, '1');
      xnew({ style: { width: '160px', height: '36px', background: '#6d6' } }, '2');
      xnew({ style: { width: '160px', height: '36px', background: '#66d' } }, '3');
    });
  }

  function Div2(self) {
    xnew.extend(BaseDiv, 'my button');

    const button = xnew({ tagName: 'button' }, 'click me');

    let counter = 0;
    button.on('click', () => {
      button.element.textContent = `counter: ${counter++}`;
    })
  }

  function Div3(self) {
    xnew.extend(BaseDiv, 'my input text');

    const input = xnew({ tagName: 'input', type: 'text' });
    const span = xnew({ tagName: 'span' });

    input.on('change input', () => {
      span.element.textContent = input.element.value;
    })
  }

  function Div4(self) {
    xnew.extend(BaseDiv, 'my canvas');

    const canvas = xnew({ tagName: 'canvas', width: 200, height: 100 });
    
    const ctx = canvas.element.getContext('2d');
    const cx = canvas.element.width / 2;
    const cy = canvas.element.height / 2;
    const s = Math.min(cx, cy) * 0.5;

    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvas.element.width, canvas.element.height);

    ctx.fillStyle = "rgb(200,0,100)";
    ctx.fillRect(cx - 0.6 * cx - s, cy - s, s * 2, s * 2);

    ctx.fillStyle = "rgb(100,200,0)";
    ctx.fillRect(cx + 0.0 * cx - s, cy - s, s * 2, s * 2);

    ctx.fillStyle = "rgb(0,100,200)";
    ctx.fillRect(cx + 0.6 * cx - s, cy - s, s * 2, s * 2);
  }

</script>