tildes-reextended/source/scripts/user-labels.ts

import debounce from 'debounce';
import {Component, render} from 'preact';
import {html} from 'htm/preact';
import {
  createElementFromString,
  isColorBright,
  isValidHexColor,
  log,
  querySelectorAll,
  setSettings,
  Settings,
  themeColors
} from '..';

type Props = {
  settings: Settings;
};

type State = {
  color: string;
  selectedColor: string;
  hidden: boolean;
  id: number | null;
  priority: number;
  target: HTMLElement | null;
  text: string;
  username: string;
};

const colorPattern: string = [
  '^(?:#(?:', // (?:) are non-capturing groups.
  '[a-f\\d]{8}|', // The order of 8 -> 6 -> 4 -> 3 character hex colors matters.
  '[a-f\\d]{6}|',
  '[a-f\\d]{4}|',
  '[a-f\\d]{3})',
  '|transparent)$' // "Transparent" is also allowed in the input.
].join('');

export class UserLabelsFeature extends Component<Props, State> {
  constructor(props: Props) {
    super(props);

    const selectedColor = window
      .getComputedStyle(document.body)
      .getPropertyValue(themeColors[1].value)
      .trim();

    this.state = {
      color: selectedColor,
      hidden: true,
      id: null,
      text: '',
      priority: 0,
      selectedColor,
      target: null,
      username: ''
    };

    const count = this.addLabelsToUsernames(querySelectorAll('.link-user'));
    log(`User Labels: Initialized for ${count} user links.`);
  }

  hide = () => {
    this.setState({hidden: true});
  };

  addLabelsToUsernames = (elements: Element[], onlyID?: number): number => {
    const settings = this.props.settings;
    const inTopicListing = document.querySelector('.topic-listing') !== null;

    // Sort the labels by priority or alphabetically, so 2 labels with the same
    // priority will be sorted alphabetically.
    const sortedLabels = settings.data.userLabels.sort((a, b): number => {
      if (inTopicListing) {
        // If we're in the topic listing sort with highest priority first.
        if (a.priority !== b.priority) {
          return b.priority - a.priority;
        }
      } else if (a.priority !== b.priority) {
        // If we're not in the topic listing, sort with lowest priority first.
        // We will add elements backwards, so the first label will be
        // behind all the other labels.
        return a.priority - b.priority;
      }

      return b.text.localeCompare(a.text);
    });

    for (const element of elements) {
      const username: string = element
        .textContent!.replace(/@/g, '')
        .toLowerCase();

      const userLabels = sortedLabels.filter(
        (value) =>
          value.username === username &&
          (onlyID === undefined ? true : value.id === onlyID)
      );

      const addLabel = html`
        <span
          class="trx-user-label-add"
          onClick=${(event: MouseEvent) => {
            this.addLabelHandler(event, username);
          }}
        >
          [+]
        </span>
      `;

      if (!inTopicListing && onlyID === undefined) {
        const addLabelPlaceholder = document.createElement('span');
        element.after(addLabelPlaceholder);
        render(addLabel, element.parentElement!, addLabelPlaceholder);
      }

      if (userLabels.length === 0 && onlyID === undefined) {
        if (
          inTopicListing &&
          (element.nextElementSibling === null ||
            !element.nextElementSibling.className.includes('trx-user-label'))
        ) {
          const addLabelPlaceholder = document.createElement('span');
          element.after(addLabelPlaceholder);
          render(addLabel, element.parentElement!, addLabelPlaceholder);
        }

        continue;
      }

      for (const userLabel of userLabels) {
        const bright = isColorBright(userLabel.color.trim())
          ? 'trx-bright'
          : '';

        const label = createElementFromString<HTMLSpanElement>(`<span
          data-trx-label-id="${userLabel.id}"
          class="trx-user-label ${bright}"
        >
          ${userLabel.text}
        </span>`);

        label.addEventListener('click', (event: MouseEvent) => {
          this.editLabelHandler(event, userLabel.id);
        });

        element.after(label);
        label.setAttribute('style', `background-color: ${userLabel.color};`);

        // If we're in the topic listing, stop after adding 1 label.
        if (inTopicListing) {
          break;
        }
      }
    }

    return elements.length;
  };

  addLabelHandler = (event: MouseEvent, username: string) => {
    event.preventDefault();
    const target = event.target as HTMLElement;

    if (this.state.target === target && !this.state.hidden) {
      this.hide();
    } else {
      const selectedColor = window
        .getComputedStyle(document.body)
        .getPropertyValue(themeColors[1].value)
        .trim();

      this.setState({
        hidden: false,
        target,
        username,
        color: selectedColor,
        id: null,
        text: '',
        priority: 0,
        selectedColor
      });
    }
  };

  editLabelHandler = (event: MouseEvent, id: number) => {
    event.preventDefault();
    const target = event.target as HTMLElement;

    if (this.state.target === target && !this.state.hidden) {
      this.hide();
    } else {
      const label = this.props.settings.data.userLabels.find(
        (value) => value.id === id
      );
      if (label === undefined) {
        log(
          'User Labels: Tried to edit label with ID that could not be found.',
          true
        );
        return;
      }

      this.setState({
        hidden: false,
        target,
        ...label
      });
    }
  };

  colorChange = (event: Event) => {
    let color: string = (event.target as HTMLInputElement).value.toLowerCase();
    if (!color.startsWith('#') && !color.startsWith('t') && color.length > 0) {
      color = `#${color}`;
    }

    if (color !== 'transparent' && !isValidHexColor(color)) {
      log('User Labels: Color must be a valid hex color or "transparent".');
    }

    // If the color was changed through the preset values, also change the
    // selected color state.
    if ((event.target as HTMLElement).tagName === 'SELECT') {
      this.setState({color, selectedColor: color});
    } else {
      this.setState({color});
    }
  };

  labelChange = (event: Event) => {
    this.setState({text: (event.target as HTMLInputElement).value});
  };

  priorityChange = (event: Event) => {
    this.setState({
      priority: Number((event.target as HTMLInputElement).value)
    });
  };

  save = (event: MouseEvent) => {
    event.preventDefault();
    const {color, id, text, priority, username} = this.state;
    if (color === '' || username === '') {
      log('Cannot save user label without all values present.');
      return;
    }

    const {settings} = this.props;
    // If no ID is present then save a new label otherwise edit the existing one.
    if (id === null) {
      let newID = 1;
      if (settings.data.userLabels.length > 0) {
        newID = settings.data.userLabels.sort((a, b) => b.id - a.id)[0].id + 1;
      }

      settings.data.userLabels.push({
        color,
        id: newID,
        priority,
        text,
        username
      });

      this.addLabelsToUsernames(querySelectorAll('.link-user'), newID);
    } else {
      const index = settings.data.userLabels.findIndex(
        (value) => value.id === id
      );
      settings.data.userLabels.splice(index, 1);
      settings.data.userLabels.push({
        id,
        color,
        priority,
        text,
        username
      });

      const elements = querySelectorAll(`[data-trx-label-id="${id}"]`);
      const bright = isColorBright(color);
      for (const element of elements) {
        element.textContent = text;
        element.setAttribute('style', `background-color: ${color};`);
        if (bright) {
          element.classList.add('trx-bright');
        } else {
          element.classList.remove('trx-bright');
        }
      }
    }

    void setSettings(settings);
    this.props.settings = settings;
    this.hide();
  };

  remove = (event: MouseEvent) => {
    event.preventDefault();
    const {id} = this.state;
    if (id === null) {
      log('User Labels: Tried remove label when ID was null.');
      return;
    }

    const {settings} = this.props;
    const index = settings.data.userLabels.findIndex(
      (value) => value.id === id
    );
    if (index === undefined) {
      log(
        `User Labels: Tried to remove label with ID ${id} that could not be found.`,
        true
      );
      return;
    }

    querySelectorAll(`[data-trx-label-id="${id}"]`).forEach((value) => {
      value.remove();
    });

    settings.data.userLabels.splice(index, 1);
    void setSettings(settings);
    this.props.settings = settings;
    this.hide();
  };

  render() {
    const bodyStyle = window.getComputedStyle(document.body);
    const themeSelectOptions = themeColors.map(
      ({name, value}) =>
        html`
          <option value="${bodyStyle.getPropertyValue(value).trim()}">
            ${name}
          </option>
        `
    );

    const bright = isColorBright(this.state.color) ? 'trx-bright' : '';
    const hidden = this.state.hidden ? 'trx-hidden' : '';
    const {color, text: label, priority, selectedColor, username} = this.state;

    let top = 0;
    let left = 0;

    const target = this.state.target;
    if (target !== null) {
      const bounds = target.getBoundingClientRect();
      top = bounds.y + bounds.height + 4 + window.scrollY;
      left = bounds.x + window.scrollX;
    }

    const position = `left: ${left}px; top: ${top}px;`;
    const previewStyle = `background-color: ${color}`;

    return html`<form class="trx-user-label-form ${hidden}" style="${position}">
      <div class="trx-label-username-priority">
        <label class="trx-label-username">
          Add New Label
          <input
            type="text"
            class="form-input"
            placeholder="Username"
            value="${username}"
            required
          />
        </label>

        <label class="trx-label-priority">
          Priority
          <input
            type="number"
            class="form-input"
            value="${priority}"
            onChange=${this.priorityChange}
            required
          />
        </label>
      </div>

      <div>
        <label for="trx-label-color-input">Pick A Color</label>

        <div class="trx-label-grid">
          <input
            id="trx-label-color-input"
            type="text"
            class="form-input"
            placeholder="Color"
            value="${color}"
            onInput=${debounce(this.colorChange, 250)}
            pattern="${colorPattern}"
            required
          />

          <select
            class="form-select"
            value="${selectedColor}"
            onChange="${this.colorChange}"
          >
            ${themeSelectOptions}
          </select>
        </div>
      </div>

      <div>
        <label for="trx-label-input">Label</label>

        <div class="trx-label-grid">
          <input
            id="trx-label-input"
            type="text"
            class="form-input"
            placeholder="Text"
            value="${label}"
            onInput=${debounce(this.labelChange, 250)}
          />

          <div class="trx-label-preview ${bright}" style="${previewStyle}">
            <p>${label}</p>
          </div>
        </div>
      </div>

      <div class="trx-label-actions">
        <a class="btn-post-action" onClick=${this.save}>Save</a>
        <a class="btn-post-action" onClick=${this.hide}>Close</a>
        <a class="btn-post-action" onClick=${this.remove}>Remove</a>
      </div>
    </form>`;
  }
}