Uncaught (in promise) Error about wallop HOT 14 CLOSED

Hi @Wifsimster, when you say a component are you referring to a React component?
It was @honzabilek4 who said that maybe he has a better solution?

I may consider introducing a destroy method so when you need to unmount your component you can clean up the bound events.

Also, I'm seriously thinking about a cheeky re-write as I'm not entirely happy with how the code is structured... just need some time!

from wallop.

Hi, thanks for this awesome plugin. However, we have a similar problem.
We have a component which creates a new instance each time it's refreshed and so throw a new error.

@peduarte, you said

if the object already exists I'd only call my new method to refresh it's inner state on render

But if the selector is already in selectorPool, you directly throw a new error, see above :

if (selectorPool[i] === selector) {
        throw new Error('An instance of Wallop with this selector already exists.');
      }

I think it would be more handy returning the instance directly without any error.

If you have a better solution, i'm listening :)

from wallop.

Hi,
I'm not familiar with using FeatherJS but the idea is to instantiate the wallop object only once when page loads. Then, if the object already exists I'd only call my new method to refresh it's inner state on render. See the pending pull request #70.

from wallop.

That PR has been pending for almost a month. If I were to take the code inside and apply it to my code, would it work?

from wallop.

Yes, It should. It's just the reset method to be added.

from wallop.

Finally had the time to try out your fixes. I copied and pasted the minified code and overwrote my file and the issue wasn't fixed completely. There was a slight glitch effect and I'm getting those console errors again. However, the first image of my carousel didn't disappear.

from wallop.

Do you have some code samples or a project repository somewhere? This is too abstract to solve.

from wallop.

My project is closed-source for now, but here's the code for the entire page

  renderProducts();

  $(window).on("resize", function () {
    renderProducts();
  });



  function renderProducts() {
    productService.find(function (error, product) {
      var html = "";

      for (productItem of product) {
        if (productItem.Status === "Published") {
          html +=
            "<li id='" + productItem._id + "' class='home__product Wallop-item' style='background-image: url(/" + productItem.Images[0] + ");'>" +
              "<a href='" + window.location.protocol + "//" + window.location.host + "/shop/" + productItem.Slug + "'>" +
                "<h3 class='home__product__name'><span>" + productItem.Name + "</span></h3>" +
              "</a>" +
            "</li>";
        }
      }

      if (product.length > 0) {
        $(".home__products ul").html(html);
        $(".home__products ul li:first-of-type").addClass("Wallop-item--current");

        initWallop();
      }
    });
  }

  function initWallop() {
    var
      wallopEl = document.querySelector(".Wallop"),
      wallop = new Wallop(wallopEl),
      paginationDots = Array.prototype.slice.call(document.querySelectorAll(".Wallop-dot"));

    //
    //  P A G I N A T I O N
    //

    // Click dot
    paginationDots.forEach(function (dotEl, index) {
      dotEl.addEventListener("click", function () {
        wallop.goTo(index);
      });
    });

    // Update classes on change
    wallop.on("change", function (event) {
      removeClass(document.querySelector(".Wallop-dot--current"), "Wallop-dot--current");
      addClass(paginationDots[event.detail.currentItemIndex], "Wallop-dot--current");
    });

    // Helpers
    function addClass(element, className) {
      if (!element) {
        return;
      }

      element.className = element.className.replace(/\s+$/gi, "") + " " + className;
    }

    function removeClass(element, className) {
      if (!element) {
        return;
      }

      element.className = element.className.replace(className, "");
    }



    //
    //  A U T O P L A Y
    //

    autoplay(4000);

    function autoplay(interval) {
      var lastTime = 0;

      function frame(timestamp) {
        var update = timestamp - lastTime >= interval;

        if (update) {
          wallop.next();
          lastTime = timestamp;
        }

        requestAnimationFrame(frame);
      }

      requestAnimationFrame(frame);
    };
  }

from wallop.

Hey guys, here's the latest release 2.4.0 https://github.com/peduarte/wallop/releases/tag/v2.4.0

Sorry it took so long, hope this will help you.

from wallop.

Pushed 2.4.1 a small patch updating docs...

from wallop.

Thanks @peduarte! I hope it fixes my issue.

from wallop.

Hi,
I think @Wifsimster is right. It would be more handy to return directly the wallop instance. I cannot see any shortcomings. This would also solve #62.
I can create the PR If you agree.
Btw. @peduarte If you're thinking about a total overhaul, I can possibly help you.

from wallop.

@honzabilek4 Right now I don't have time – not even to review unfortunately. But let's try and make this happen at some point in the near future. Your help will definitely be appreciated.

from wallop.

@peduarte okay, let me know then. I'm definitely in. 🙂

from wallop.