pqina / flip

⏳ The online version of the classic flip clock
https://pqina.nl/flip/
MIT License
893 stars 87 forks source link

Value transform method `preset` has no docs #17

Closed adas172002 closed 4 years ago

adas172002 commented 4 years ago

I am not able to find documentation for transform component preset, which is used eg. in flip example flip-master/example/index.html. There are many methods in the docs on https://pqina.nl/tick/#value-transforms, but this one is missing.

rikschennink commented 4 years ago

It's used to create an easier way to apply a certain transform to a value.

This is the handler for the abs transform.

export default () => (value, cb) => cb(Math.abs(value));

This is the handler for the preset transform.

export default (...presets) => (value, cb, instance) => 
    cb(
        value.map(
            (v, index) => instance.getPreset(presets[index])(v, instance.getConstants(), instance)
        )
    );
  1. It receives all the defined presets in the transform (for example 'd', 'h', 'm', 's').
  2. Then in the order of the value array it'll get the preset for that value from the Tick instance preset array.

The value would be something like [0, 11, 3, 20] where 0 is days, 11 is hours, etc.

It'll thus load preset 'd' for 0, which is this preset:

d:(value, constants) => (
        transformDurationUnit(
            value,
            constants.DAY_SINGULAR,
            constants.DAY_PLURAL,
            365
        )
),

The value returned is passed on to the next node.

You can add your own presets with setPreset(key, value) and then you can use it in your tick template.

Honestly the preset/constant functions were only added to make creating date timers more easy. So that's kinda why they're not documented at this point.

adas172002 commented 4 years ago

Thanks, it seems preset is specific to how flip is handling date timers. I was looking for documentation because example file is using preset(d, h, m, s) and for my project I just needed hour, minute and second. I removed d and it didn't work, so I tried to the docs and found nothing. Only after reading about option object format: ['h', 'm', 's'] I managed to make it work.

rikschennink commented 4 years ago

@adas172002 Yes it maps directly to the format, so both should have the same keys.

adas172002 commented 4 years ago

Great, I hope others will benefit from this information.

Closing the issue, thanks.