How to set multiple instances and theme opt?

[Martyn Bissett]

Just having a look at your code, and seems I'm unable to do this(?)

class FlipDown {
  constructor(uts, el = "flipdown", opt = {}) {
    ...
    // If opt is specified, but not el
    if (typeof el === "object") {
      opt = el;
      el = "flipdown";
    }
    ...

However, I suppose I could do the following:

var flipdown = new FlipDown(timestamp, {
  theme: "orange"
});

flipdown.element = document.getElementById("flipdown")

// Start the countdown
flipdown.start()

Seems like opts could do with an el property? Or document the above? Perhaps this is a feature request, I dunno. Anyway, just wanted to raise it as I'm having to work out how to do this.

Great timer btw, getting me lots of brownie points ;)

[Peter Butcher]

Is this what you were looking for? https://github.com/PButcher/flipdown#multiple-instances

You can specify the DOM element that a FlipDown instance should be attached to in the constructor, and that should let you pass the opt object (to specify the theme) as the third argument. Or did I misunderstand the question? Happy to hear you're getting some brownie points :D

[Martyn Bissett]

Yes, but I also want to pass options (e.g. theme) which I'm not sure is possible.

This is what I currently have:

const flipdown = new FlipDown(timestamp, {
  theme: "orange"
})

  .start()

  // Do something when the countdown ends
  .ifEnded(() => {
    console.log('The countdown has ended!');
  });

According to https://github.com/PButcher/flipdown#multiple-instances the second argument ought to be the ID string, but I'm already using the second argument as the options for the theme.

So I'm unsure how to do both: multiple instances, and pass options.

[Peter Butcher]

I updated my earlier comment. GitHub wasn't updating comments briefly (probably to do with the downtime earlier).

You should be able to do the following:

const flipdown = new FlipDown(timestamp, 'myDOMElement', {
  theme: "orange"
})

FlipDown can take:

• 3 args: timestamp, el and opts
• 2 args: timestamp, opts (el inferred as flipdown -> #flipdown)
• 1 arg: timestamp (el inferred as flipdown -> #flipdown, default opts)

Does that help?

[Martyn Bissett]

Thanks, that works great.

[Martyn Bissett]

Yeh I couldn't reply either. Glad I waited for your second response though :)

[Peter Butcher]

Awesome, enjoy!