Как написать код JavaScript, который позволяет переопределять значения по умолчанию - PullRequest
Новая
       62

Как написать код JavaScript, который позволяет переопределять значения по умолчанию

0 голосов
/ 01 мая 2020

Я бы хотел использовать эту библиотеку для выделения текста в моем Vue проекте. Вот пример их использования на их веб-сайте: 

import TextHighlighter from '@perlego/text-highlighter';
import { isDuplicate } from './utils'; 
import highlightsApi from './services/highlights-api';

class ArticleView {
  constructor(data) {
    this.data = data;
    const pageElement = document.getElementById("article");
    this.highlighter = new TextHighlighter(
      pageElement, 
      {
        version: "independencia",
        onBeforeHighlight: this.onBeforeHighlight,
        onAfterHighlight: this.onAfterHighlight,
        preprocessDescriptors: this.preprocessDescriptors,
        onRemoveHighlight: this.onRemoveHighlight
    });
  }

  onBeforeHighlight = (range) => {
    return !isDuplicate(range)
  }

  onRemoveHighlight = (highlightElement) => {
    const proceed = window.confirm("Are you sure you want to remove this highlight?");
    return proceed;
  }

  preprocessDescriptors = (range, descriptors, timestamp) => {
    // Add an ID to the class list to identify each highlight 
    // (A highlight can be represented by a group of elements in the DOM).
    const uniqueId = `hlt-${Math.random()
      .toString(36)
      .substring(2, 15) +
      Math.random()
      .toString(36)
      .substring(2, 15)}`;

    const descriptorsWithIds = descriptors.map(descriptor => {
      const [wrapper, ...rest] = descriptor;
      return [
        wrapper.replace(
          'class="highlighted"',
          `class="highlighted ${uniqueId}"`
        ),
        ...rest
      ];
    });

    return { descriptors: descriptorsWithIds, meta: { id: uniqueId } };
  }

  onAfterHighlight = (range, descriptors, timestamp, meta) => {
    highlightsApi.saveBatch(meta.id, descriptorsWithIds)
      .then((result) => {
        // Do something with the highlights that have been saved.
      })
      .catch((err) => console.error(err));
  }

  render = () => {
    // Code that takes the data for the article and adds it to the DOM
    // based on a html template here.
  }
}

Используя приведенный выше пример, я хотел бы установить подсветку (аналогично приведенному выше коду, но в другом файле, например *). 1006 *) со всеми необходимыми опциями по умолчанию (onBeforeHighlight, onRemoveHighlight и т. Д. c.), А затем сможете импортировать их оттуда и переопределить опции, для которых я не хочу использовать значения по умолчанию в импортируемом файле это выглядит примерно так: 

import highlighter from "../utils/highlighter.js";

const overridingOptions = {
  onAfterHighlight: (range, descriptors, timestamp, meta) => {
    console.log(range, descriptors, timestamp, meta);
  }
};

const target = document.getElementsByClassName("testme")[0];
highlighter(target, overridingOptions);

По какой-то причине я не могу понять, как изменить пример ArticleView в соответствии со своими потребностями, поэтому я думаю, что мне нужно увидеть это сделано один раз. Как должен выглядеть код в ./utils/highlighter.js, чтобы сделать это возможным?

...