@eclipsefdn/revealjs-solstice/templates/ulist.cjs

A flexible Reveal.js template with Eclipse Design System

module.exports = ({ node }) => {
  const svgIcon = `<svg class="list-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 0.5em;"><path fill="currentColor" d="M16.15 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.15L13.3 8.15q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L19.3 11.3q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.575 4.575q-.3-.3-.712.288t-.713-.313q-.275-.3-.288-.7t.288-.7z"></path></svg>`;

  const checklist = node.getAttribute('checklist-option') !== undefined ? 'checklist' : undefined;
  let marker_checked;
  let marker_unchecked;

  if (checklist) {
    if (node.getAttribute('interactive-option') !== undefined) {
      marker_checked = '<input type="checkbox" data-item-complete="1" checked>';
      marker_unchecked = '<input type="checkbox" data-item-complete="0">';
    } else {
      if (node.getDocument().getAttribute('icons') === 'font') {
        marker_checked = '<i class="icon-check"></i>';
        marker_unchecked = '<i class="icon-check-empty"></i>';
      } else {
        marker_checked = '<input type="checkbox" data-item-complete="1" checked disabled>';
        marker_unchecked = '<input type="checkbox" data-item-complete="0" disabled>';
      }
    }
  }

  const listItems = node
    .getItems()
    .map((item) => {
      const isFragment = node.getAttribute('step-option') !== undefined || node.hasRole('step-option');
      const fragmentClass = isFragment ? ' class="fragment"' : '';

      let pContent;
      if (checklist && item.getAttribute('checkbox') !== undefined) {
        const marker = item.getAttribute('checked') !== undefined ? marker_checked : marker_unchecked;
        pContent = `${marker}${item.getText()}`;
      } else {
        pContent = `${svgIcon}${item.getText()}`;
      }

      const text = `<p>${pContent}</p>`;
      const content = item.getContent();

      return `<li${fragmentClass}>${text}${content}</li>`;
    })
    .join('\n');

  const id = node.getId() ? ` id="${node.getId()}"` : '';
  const classList = ['ulist', checklist, node.getStyle(), node.getRole()].filter(Boolean).join(' ');
  const title = node.getTitle() ? `<div class="title">${node.getTitle()}</div>` : '';
  const ul_class = [checklist, node.getStyle()].filter(Boolean).join(' ');
  const ul_class_attr = ul_class.length > 0 ? ` class="${ul_class}"` : '';

  return `<div${id} class="${classList}">
${title}
<ul${ul_class_attr}>
${listItems}
</ul>
</div>`;
};