x51 / projects // components

@kung-fu/components is a small, dependency-free vanilla JavaScript library for adding common UI behaviors to plain HTML — no framework required.

---// install

npm install @kung-fu/components

---// what's in it

---// usage // audio player

import { createAudioPlayer } from '@kung-fu/components';
      
      const player = createAudioPlayer('audio-container', 'default.mp3');
      player.withPlaylist('playlist-container');

Expected HTML structure:

<div id="audio-container">
        <audio></audio>
        <div id="audio-player-cover"></div>
        <div id="audio-player-title"></div>
        <div id="audio-player-date"></div>
        <div id="audio-player-summary"></div>
      </div>
      
      <dl id="playlist-container">
        <dt data-source="track1.mp3"
            data-cover-img="cover1.jpg"
            data-title="Track 1"
            data-pub="2023-01-01"
            data-summary="...">Track 1</dt>
      </dl>

---// usage // list style rotation

import { rotateListStyleType } from '@kung-fu/components';
      
      // Defaults applied to every list on the page:
      rotateListStyleType();
      
      // Custom rotation on a selector:
      rotateListStyleType('.content-list', ['decimal', 'lower-alpha', 'lower-roman']);

---// usage // figure wrapping

import { wrapImageWithFigure } from '@kung-fu/components';
      
      // Wrap every image:
      wrapImageWithFigure();
      
      // Or just a subset:
      wrapImageWithFigure('.article-image');
      
      // Skip images marked with a data-attribute:
      wrapImageWithFigure('img', 'data-no-figure');

---// source

npmjs.com/package/@kung-fu/components