Skip to main content

element

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@2.3.x/dist/xnew.js"></script>
</head>

<body>
  <div id="main" style="width: 100%; height: 100%;"></div>
  
  <script>
    xnew('#main', (self) => {
      xnew(Div1);
      xnew(Div2);
      xnew(Div3);
      xnew(Div4);
    });

    function BaseDiv(self, name) {
      xnew.nest({ tagName: 'div', 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>
</body>

</html>