Uncaught TypeError: this.addNonEnumerableProperties is not a function #54

bobwatcherx · 2023-07-05T02:29:05Z

why get errror from code this .

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Radi.js - SinWave</title>
  <script src="https://unpkg.com/radi@latest/dist/radi.min.js"></script>
  <style>
    .animated-sin-wave {
      position: relative;
      height: 150px;
      width: 100%;
      overflow: hidden;
    }

    .animated-sin-wave>.bar {
      position: absolute;
      height: 100%;
      border-radius: 50%;
      max-width: 10px;
      transform: scale(0.8, .5) translateY(0%) rotate(0deg)
    }

    .animated-sin-wave-description {
      width: 100%;
      text-align: center;
      font-size: 0.8em;
      color: #747678;
      padding: 2em;
    }

    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  
  <script>
    const { r, Component, list, link, mount } = Radi;

    const sinWave = Component({
      name: 'sin-wave',
      view: function () {
        return r('div',
          { class: 'animated-sin-wave' },
          list(l(this.bars), function (bar, i) {
            return r('div',
              {
                class: 'bar',
                style: {
                  width: this.barWidth + '%',
                  left: (this.barWidth * i) + '%',
                  transform: l('scale(0.8,.5) translateY(' + bar.translateY + '%) rotate(' + bar.rotation + 'deg)'),
                  // transform: ll(function() {return 'scale(0.8,.5) translateY(' + bar.translateY + '%) rotate(' + bar.rotation + 'deg)';}, [[bar, 'rotation']], 'bar.rotation'),
                  // transform: l(this.rotation),
                  // transform: l(bar.transform),
                  backgroundColor: l(bar.color)
                }
              }
            );
          })
        );
      },
      state: {
        barWidth: 1,
        barCount: 100,
        active: false,
        count: 0,
        step: 0.5,
        translateY: 0,
        rotation: 0,
        bars: []
      },
      actions: {
        onMount() {
          console.log('Mounted');

          this.active = true;
          this.bars = this.getColors();

          this.nextFrame();
        },
        onDestroy() {
          console.log('Destroyed');

          this.active = false;
          this.bars.splice(0, this.bars.length);
        },
        getColors() {
          var arr = [];
          for (var i = 0; i < this.barCount; i++) {
            var hue = (360 / this.barCount * i - this.count) % 360;
            arr.push({
              id: i,
              color: 'hsl(' + hue + ',95%,55%)',
              translateY: Math.sin(this.count / 10 + i / 5) * 100 * .5,
              rotation: (this.count + i) % 360,
            });
          }
          return arr;
        },
        nextFrame() {
          if (this.active) {
            this.count += this.step;

            this.bars = this.getColors();

            window.requestAnimationFrame(() => {
              this.nextFrame();
            });
          }
        }
      }
    });

    mount(r('div',
      new sinWave(),
      // new sinWave(),
      // new sinWave(),
    ), 'app');
  </script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught TypeError: this.addNonEnumerableProperties is not a function #54

Uncaught TypeError: this.addNonEnumerableProperties is not a function #54

bobwatcherx commented Jul 5, 2023

Uncaught TypeError: this.addNonEnumerableProperties is not a function #54

Uncaught TypeError: this.addNonEnumerableProperties is not a function #54

Comments

bobwatcherx commented Jul 5, 2023