Option and theme updates v2

[mattosaurus]

Hi, I really like this project. I've added a couple of features that I've included in this PR which I think could come in handy for others.

• Option to hide period headers
• Option to hide empty empty rotors if they're not needed
• Theme option updated to accept multiple themes
• Small theme

The multiple theme option just accepts a comma seperated string and splits it, possibly this should take a string or an arroay of strings?

I'm not a native javascript developer so there may well be better ways of adding some of the functionality above so feel free to change if you think it can be improved.

I've also added an hasOccurred event in in my local brance in addition to your hasEnded event so I'll create a seperate PR for that once we're happy with this one if you think it would be useful.

[PButcher]

Thanks for cleaning this up. I have a question regarding the Occurence UTS to count down to, this naming is confusing me a bit. Was your intention to be able to fire an event at one or more timestamps during the countdown? Currently this only allows for one event during the countdown. Perhaps we can come up with a better name and allow this method to be chained multiple times for multiple events during the countdown.

Also, the showEmptyRotors opt seems to be bugged currently when I try timestamps that are less than a day away. The hour rotor does not appear and the day rotor shows 00. I will investigate.

[mattosaurus]

Ah yes, I think the issue is here.

https://github.com/PButcher/flipdown/pull/24/commits/c0b3dedf6abcffdb70f091a383010bc84f678a26#diff-995524a2f71c68dc4e564cb1c358aee9R391

This should be dayRotor.style.display = 'none';

Yes, the occurnce event is intended to fire an event at a specified time during the countdown. I agree that it would be better to allow multiple target times to be chained together though I wasn't sure how best to implement this.

I'm happy to rename this if you've got a less confusing suggestion, I picked hasOccured to fit with the existing hasEnded but maybe this can just be an event method.

[PButcher]

That was it, thanks. There's definitely value in being able to trigger events during the countdown so I'll put some thought into how to name that feature and how best to allow multiple events during the countdown. Perhaps something like this?:

.events([
  {
    at: 10, // Could be a UTS or a number in seconds after the UTS value flipdown was initialised with
    func: () => { /* Do something */ }
  }, 
/* More events here */ ])

This would open up some interesting possibilities:

every:

...
{
  every: 60000,
  func: () => {}
}

[mattosaurus]

Yes, that looks good :)

I like the idea of the every functionality as well, perhaps it would be possible to do using cron, though maybe that's making things too complicated.

[DominikTV]

Regarding the

showEmptyRotors: false,

option: Maby adapt the CSS, so that the whole div is centered in itself? Otherwise, everything will be pushed to the left and since the hard-coded width will always create a container with the full size.

[PButcher]

The problem there is that the element does not resize to reflect the number of visible rotors. The containing element should be resized based on the number of visible rotors. I'd appreciate a PR for that if you're up for it. Once this current PR is ready, that centring feature should be added with it though.

[haideralipunjabi]

Check if this works

.flipdown {
  overflow: visible;
  /*width: 510px;*/
  width: max-content;  
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

[tsummerall]

My current brute-force approach to hiding unneeded rotors is a couple of small modifications to the flipdown code. This obviously not a general solution.

1. In _createRotorGroup() I set the rotorGroup.style.display to "none"
2. In _init I selectively set the styles to "inherit" for the rotors I want shown

[tsummerall]

As far as countdown events, another nice one would be to trigger things at certain points, like when only 30 seconds remain or when each day/hour/minute/second finishes.