compileAnimationList.js

TLDR

This file contains a function called compileAnimationlist that reads a CSS file, extracts animation names, categorizes them, and compiles them into HTML lists.

Methods

compileAnimationlist(dir = '../source', file = 'animate.css')

This method takes in two optional parameters: dir (the directory containing the CSS file) and file (the CSS file name). It reads the CSS file specified by dir and file, extracts animation names, categorizes them into groups, and compiles them into HTML lists. The function returns the compiled HTML lists as a string.

Classes

None

const fs = require('fs');
const path = require('path');

/**
 * Get and categorize all the animation names and compile
 * to HTML lists
 * @param {string} dir - directory containing the css file
 * @param {string} file - css file name
 */

function compileAnimationlist(dir = '../source', file = 'animate.css') {
  const filePath = path.join(__dirname, dir, file);
  const content = fs.readFileSync(filePath, 'utf8');
  const globalRegex = /\/(.*)\w/g;
  const itemRegex = /(\/)(.*)(\.)/;

  const rawList = content.match(globalRegex);
  let currentGroup;
  let list = {};

  rawList.forEach((i) => {
    const item = i.match(itemRegex);

    if (item == null) {
      const title = i.replace('/* ', '');
      currentGroup = title;
      list[title] = [];

      return currentGroup;
    }

    return list[currentGroup].push(item[2]);
  }, {});

  const itemTemplate = (item) => `
    <li class="animation-item" data-animation="${item}">
      <span class="animation-item--title">${item}</span>
      <button class="copy-icon" type="button">
        <span class="tooltip">Copy class name to clipboard</span>
      </button>
    </li>`;

  const listTemplate = (title, items) => {
    const parsedTitle = title.toLowerCase().replace(' ', '_');

    return `
      <section class="${parsedTitle}" id="${parsedTitle}">
        <h3 class="animation-title">${title}</h3>
        <ul class="animation-group">${items.join('\n')}</ul>
      </section>
    `;
  };

  const compile = (list) => {
    const titles = Object.keys(list);

    return titles.map((title) => {
      const items = list[title].map((item) => itemTemplate(item));
      return listTemplate(title, items);
    });
  };

  return compile(list).join('\n');
}

module.exports = compileAnimationlist;