DOCSEARCHbyAlgolia
Submit Docs

FlipClock.js Documentation

repository·master·Indexed 25 days ago

https://github.com/objectivehtml/flipclock

A themeable, type-safe library for creating clocks, timers, counters, and flipboards. Version 1.0.0 features a modular architecture consisting of Clock, Face, FaceValue, and Theme components. It includes specialized components like Alphanumeric for text-based flip animations, ElapsedTime for durations, and CounterCountdown for timers. The library supports custom theme creation using SolidJS and provides a built-in CSS-in-JS solution for styling.

Tokens
13.4K
Snippets
39
Records
91
Agent score
84%

What's inside FlipClock.js

  4. Understand FlipClock core concepts

    master

    FlipClock.js is built on a modular architecture consisting of four primary components:

    • Clock: The main FlipClock instance. It acts as the central controller, housing the internal timer and managing the overall interface and functions.
    • Face: Defines the behavior and functionality (e.g., 12-hour vs 24-hour format, stopwatch, or alphanumeric displays).
    • FaceValue: Responsible for digitizing the data used by the Face. Each face type implements its own FaceValue logic.
    • Theme: Handles the visual rendering. A Theme manages the DOM structure, markup, animations, and CSS for the clock.

  5. Customize FlipClock styling via CSS and Themes

    master

    You can style your FlipClock using several methods:

    1. Themes: Since a Theme controls the DOM markup and animations, you can create a new Theme to completely change how the clock is rendered.
    2. CSS-in-JS: FlipClock.js provides a built-in CSS-in-JS solution for creating new themes.
    3. CSS Overrides: You can extend existing CSS or use traditional CSS to override the default styles of a theme.

  6. Start, stop, and toggle the FlipClock

    master

    The clock starts automatically by default. If autoStart is set to false in your configuration, you must manage the clock state manually using start(), stop(), or toggle(). These methods accept an optional callback function that executes when the state change occurs.

    import { flipClock, clock, theme, css } from 'flipclock';

const clock = flipClock({
    // your options here...
});

// Start the clock
clock.start(() => {
    console.log('The clock started!')
});

// Stop the clock
clock.stop(() => {
    console.log('The clock stopped!')
});

// Toggle starts the clock if stopped, and stops if started.
clock.toggle(() => {
    console.log(`Status:`, clock.timer.isStopped)
});

  7. Use the Counter component

    master

    The Counter component is used to increment or decrement a numerical face by one or more steps at a time. It is a Vue component designed for use within a <script setup> environment.

    <script setup lang="ts">
import Counter from '../components/Counter.vue';
</script>

<template>
  <Counter />
</template>

  8. Listen to FlipClock lifecycle events

    master

    You can subscribe to specific lifecycle events using the .on(eventName, callback) method or .once(eventName, callback) for a single execution. The callback receives the FlipClock instance as its argument. Common events include afterMount, beforeInterval, and afterInterval.

    import { flipClock, counter, theme, css } from 'flipclock';

const clock = flipClock({
    parent: document.querySelector('#clock')!,
    face: counter(0),
    theme: theme({
        css: css()
    })
});

clock.on('afterMount', (instance: FlipClock) => {
    console.log('After the clock mounts.')
});

clock.on('beforeInterval', (instance: FlipClock) => {
    console.log('Before the timer ticks.')
});

clock.on('afterInterval', (instance: FlipClock) => {
    console.log('After the timer ticks.')
});

clock.once('afterInterval', (instance: FlipClock) => {
    console.log('Called once after the timer ticks.')
});

  10. Extend an existing CSS declaration

    master

    To build upon an existing CSS declaration, use the .extend() method on the object returned by css(). The callback function receives props which you can use to apply conditional or dynamic overrides.

    import { css } from 'flipclock';

const declaration = css({
    animationDuration: '100ms',
    fontSize: '3rem'
}).extend((props) => ({
    // your CSS overrides here.
}));

  11. Understand the Face interface in FlipClock.js

    master
    In FlipClock.js, a Face defines the specific functionality of a clock (e.g., a stopwatch vs. a lunar clock). While each face has unique options and methods, they all implement a minimal unified API. To be considered a valid face, an implementation must provide the faceValue() and interval() methods.