VitePress

Appearance

Таблица совместимости браузеров ​

БраузерПоддержка
Chrome Chrome60
Edge Edge41
Firefox Firefox46
Safari Safari10.1

Table of Contents ​

How to install ​

Чтобы установить виджет, необходимо в редакторе зайти в раздел "Установка" или добавить строку на сайт <script src="https://hinted.me/script.js"></script>

По необходимости можно добавить атрибуты
host - адрес апи. По умолчанию https://hinted.me/api .
hasSearch - 'true' | 'false'. отображение поиска сценариев в виджете. По умолчанию true.
isspa - 'true' | 'false'. Установка виджета для СПА сайт.
spaselector - селектор для отслеживания изменений элемента(как правило рутовый элемент для спа).
userName - имя пользователя, клиент может сюда передать имя пользователя, что бы разграничить доступ к сценариям.
groups - группа пользователей, то же что и userName. Можно указать несколько групп через ;
isrestoreonreload - 'true' | 'false'. Продолжать сценарий после обновления страницы в случае когда не закончили и не закрыли сценарий.
ignoreselectors - указывается через пробел список одиночных селекторов, которые будут игнорироваться при поиске элемента(например '.hover').
organizationId - ID организации. Если не указать, то не будет появляться виджет и не запустятся триггеры с тултипами.
tooltipAnimation - 'true' | 'false'. Отключение/включение анимации появления/скрытия подсказок.
spadelay - Время в мс. Если в течение этого времени не произойдет изменений на странице, то срабатывает заново инициализация триггеров, сценариев и тултипов.
debug <deprecated> - отображение доп информации в консоли. Рекомендуется использовать loglevel вместо debug.

loglevel - Установка уровня логирования.

уровеньсодержитописание
0OFFЛоги отключены и не отображаются в консоли. Настройка по-умолчанию.
1INFOВывод информации ознакомительного характера. Сообщает о запущенном процессе с минимальным описанием.
2WARN, ERRORБолее детальный вывод информации. Сообщает о возможных проблемах или ошибках.
3TRACEКаждый лог-вывод будет содержать стек вызова.
html
<script
  src="..."
  organizationId="..."
  host="..."
  loglevel="1"
  <!--
  INFO
  уровень
  --
>
  >
</script>

positionUpdateDelay - время в мс для обновления позиции подсказок.
no-cache - не кешировать запросы виджетa.
networkCredentials - Включение данных авторизации при кросс-доменных запросах MDN NetworkCredentialsspaIgnoreSelectors - указывать через пробел список одиночных селекторов, которые будут игнорироваться при прослушивании страницы и не будет срабатывать слушатель.

cacheExpiresEach - указывается для включения кеширования GET запросов в кэш браузера. Если атрибут не указан запросы не кешируются. Принимает целые положительные значения чисел в виде строки от 0 до 9007199254740991 или чисел с коротким обозначением единиц времени:

  • 1d - 1 день
  • 3m - 3 минуты
  • 5M - 5 минут

Если указано лишь число, оно будет принято за секунду:

  • 5 - 5 секунд

Весь список сокращений:

  1. s S - секунд (second)
  2. m M - минута (minute)
  3. h H - час (hour)
  4. d D - день (day)

Примеры использования:

html
<script
  src="..."
  organizationId="..."
  host="..."
  cacheExpiresEach="7d"
></script>
javascript
HintedWidget.configure({
  cacheExpiresEach: '7d',
});

Если значение атрибута не описано в соответствии с правилами выше установленные лимиты могут не соответствовать ожидаемым значениям или отклонены. В случае отклонения значения будет выведено сообщение в консоль.

Hinted Widget methods and properties ​

How to use ​

HintedWidget.methodName()

Version ​

HintedWidget.version

Single page application mode indicator ​

HintedWidget.isSpa

SPA selector ​

HintedWidget.spaSelector Селектор, заданный для поиска корневого элемента для отслеживания изменений в дом дереве

SPA Element ​

HintedWidget.spaElement Элемент выбранный для отслеживания с использованием spaSelector. null - если элемент не задан или не найден

SPA Debounce ​

HintedWidget.spaDelay Время(мс) в течение которого виджет ждет прежде чем обновить информацию о странице. Сделано для оптимизации и чтобы не инициировались проверки при нескольких изменениях в один момент времени.

Play status ​

HintedWidget.isPlaying Запущен ли сценарий в данный момент

isLoaded ​

HintedWidget.isLoaded

stepNumber ​

HintedWidget.stepNumber Порядковый номер текущего шага

scenario ​

HintedWidget.scenario Данные текущего сценария

playerState ​

HintedWidget.playerState

groups ​

HintedWidget.groups Список групп заданных для пользователя

loadTooltipsByOrganizationId ​

HintedWidget.loadTooltipsByOrganizationId(organizationId: string) Загрузка тултипов по сети по id организации

turnTriggerOff ​

HintedWidget.turnTriggerOff() Отключает воспроизведение сценариев по триггерам и отключает тултипы на странице. Результат метода применяется после перезагрузки.

turnTriggerOn ​

HintedWidget.turnTriggerOn() Включает воспроизведение сценариев по триггерам и тултипов на странице. Результат метода применяется после перезагрузки.

isTriggerOn ​

HintedWidget.isTriggerOn Включает воспроизведение сценариев по триггерам и тултипов на странице. Результат метода применяется после перезагрузки.

username ​

HintedWidget.username Имя пользователя(если задано)

tooltips ​

HintedWidget.tooltips Отображенные подсказки

organizationId ​

HintedWidget.organizationId Текущий OrganizationID

configure() ​

HintedWidget.configure(HintedWidgetOptions)

ts
interface HintedWidgetOptions {
  title?: string; // Заголовок для описания сообщения раздела "нужна помощь" при первом запуске виджета
  position?: PositionEnum; // 'bottom-left' | 'bottom-right'
  positionCoords?: PositionCoords; // {x: number, y: number}
  offset?: string;
  host?: string; // адрес апи сервера
  movable?: boolean; // boolean можно передвигать виджет курсором или нет
  showWhenEmpty?: boolean; // показывать виджет когда нет сценариев
  hasSearchInput?: boolean; // boolean отображать или нет строку поиска сценариев в виджете
  showNotPublished?: boolean;
  usePathname?: boolean;
  discovery?: DiscoveryOptions; // { enabled: boolean, title: 'заголовок', description: 'Описание' } - параметры для приветственного окна
  isSPA?: boolean; // флаг для Single page application сайтов
  spaSelector?: string; // селектор для элемента, который отслеживаем, чтобы определять когда надо заново инициализировать виджет с его сущностями
  spaDelay?: number; // (debounce) кол-во мс, если в течение которых не будет изменений в дом дереве отслеживаемого элемента, считается что страница была обновлена
  debug?: boolean; // <deprecated> отображение в консоли дополнительной информации по работе виджета
  loglevel?: number; // Установка уровня логирования (0 - 3).
  userName?: string; // имя пользователя, чтобы определять что за юзер пользуется(используется в получении списка сценариев)
  groups?: string; // ограничение по получению списка сценариев по аналогии с userName
  ignoreSelectors?: string; // список селекторов(одиночных), которые будут игнорироваться при поиске элемента(актуально для селекторов, где добавляется класс типа .hover .select .active)
  organizationId?: string; // ID организации
  positionUpdateDelay?: number; // время обновления позиционирования подсказок
  tooltipAnimation?: boolean; // вкл/выкл анимации появления/исчезания
  networkCredentials?: 'same-origin' | 'include' | 'omit'; // Заголовок для включения учётных данных при кросс-доменных запросах. По умолчанию 'same-origin'
  spaIgnoreSelectors?: string[]; // массив селекторов, которые будут игнорироваться при прослушивании страницы виджетом, для того, чтобы не было не нужных обновлений виджета.
  searchTimeTrigger?:number; // Время в секундах, через сколько должен удалиться событие триггера после первого запуска. Например: Через 5 секунд, после нажатия на кнопку, триггер должен удалиться, не зависимо, запустился сценарий или нет. HintedWidget.configure({searchTimeTrigger: 5})
}

setMovable() ​

Разрешить/запретить двигать виджет курсором

ts
HintedWidget.setMovable(true);

addTeamList() ​

Изменить организацию, для которой будет работать виджет(подгружать сценарии, подсказки и тд)

ts
HintedWidget.addTeamList(id: string)

getChecklist() ​

Обновить контрольные списки в виджете

ts
HintedWidget.getChecklist(id: string)

Обновить список ссылок в виджете

ts
HintedWidget.getLinks(id: string)

whyIsShown ​

Причины отображения виджета

ts
HintedWidget.whyIsShown;

getStyles ​

Подгрузить стили организации

ts
HintedWidget.getStyles(id: string); // organizationID

setCustomWidgetButton ​

Заменить стандартный виджет на свой элемент на сайте

ts
HintedWidget.setCustomWidgetButton(element: HTMLElement);

getConfigurationWidget ​

Подгрузить настройки виджета с сервера

ts
HintedWidget.getConfigurationWidget(id: string);

addScenario ​

Добавить сценарий по его id в виджет

ts
HintedWidget.addScenario(id: string);

addScenarios ​

Добавить список сценариев по их id в виджет

ts
HintedWidget.addScenarios(ids: string[]);

setSchema ​

Установить стили для виджета

ts
HintedWidget.setSchema(schema: HintedWidgetSchema, type: string = '');

hide ​

Скрыть виджет

ts
HintedWidget.hide();

show ​

Отобразить виджет

ts
HintedWidget.show();

getPosition ​

Получить текущие координаты виджета

ts
HintedWidget.getPosition();

stop ​

Остановить текущий сценарий

ts
HintedWidget.stop();

play ​

Запустить сценарий по ID или передав json сценария

ts
HintedWidget.play(scenario: Scenario | string, stepIndex = 0, plugin = false)

setSearchNotification ​

Включить/выключить отображение поиска шага(в случае, когда не нашелся элемент с первого раза)

ts
HintedWidget.setSearchNotification(status: boolean)

playOnThisPage ​

Запустить случайный сценарий для текущей страницы

ts
HintedWidget.playOnThisPage();

initTooltips ​

Отобразить тултипы текущей организации на текущей странице

ts
HintedWidget.initTooltips();

showTooltips ​

Показать подсказки по id набора подсказок

ts
HintedWidget.showTooltips(string, options: TriggerOptions = {} as TriggerOptions)

showTooltipsFromData ​

Показать подсказки, передав json набора подсказок

ts
HintedWidget.showTooltips(tooltip: Tooltip)

hideTooltips ​

Скрыть все подсказки

ts
HintedWidget.hideTooltips();

getSettings ​

Получить локальные настройки для текущего пользователя

ts
HintedWidget.getSettings();

events ​

Получить объект перечисления событий.

ts
HintedWidget.events = {
  scenario: ScenarioEvents,
  tooltip: TooltipEvents,
  supportCenter: SupportCenterEvents,
};
ts
ScenarioEvents {
  start,          // Перед запуском сценария
  end,            // До окончания сценария
  show,           // На каждое появление подсказки
}

TooltipEvents {
  init,           // После начала проигрывания тултипа (установка на страницу) для каждого тултипа
  hide,           // После сокрытия подсказки тултипа перемещением курсора с подсказки
  buttonHide,     // После клика на кнопку закрытия подсказки тултипа
}

SupportCenterEvents {
  afterInit,      // После инициализации всех параметров в Центра Поддержки
  beforeHide,     // После сокрытия Центра Поддержки
  opened,         // После открытия Центра Поддержки
}

useMiddleware ​

Добавить обработчик для промежуточного выполнения на события. Обработчик должен возвращать принимаемый объект eventData.

ts
HintedWidget.useMiddleware(
  event: ScenarioEvents | TooltipEvents | SupportCenterEvents,
  callback: (eventData: WalkStep | Controller | TooltipView) => WalkStep | Controller | TooltipView
);
ts
type MiddlewareCallback<T> = (arg: T) => T;

Example:

ts
const { tooltip, scenario, supportCenter } = HintedWidget.events;

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  return eventData;
});

HintedWidget.useMiddleware(scenario.show, (eventData: WalkStep) => {
  return eventData;
});

HintedWidget.useMiddleware(tooltip.init, (eventData: TooltipView) => {
  return eventData;
});

Можно последовательно установить несколько промежуточных обработчиков, которые будут последовательно вызваны друг за другом.

Example:

ts
const { supportCenter } = HintedWidget.events;

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  eventData.spaSelector = '.selector';
  return eventData;
});

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  eventData.spaSelector += '-controller';
  console.log(spaSelector); // '.selector-controller'
  return eventData;
});

Если промежуточный обработчик не вернёт объект события eventData, то следующий, установленный обработчик, получит в качестве аргумента undefined. Однако будет вызван в любом случае, как и все установленные обработчики после него.

ts
const { supportCenter } = HintedWidget.events;

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  eventData.spaSelector = '.selector';
});

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  console.log(eventData); // undefined
});

HintedWidget.useMiddleware(supportCenter.afterInit, (eventData: Controller) => {
  console.log(eventData); // undefined
});

Triggers ​

onLoad ​

Проигрывание сценария сразу по загрузке страницы.

onHover ​

Проигрывание сценария при наведении на элемент.

onClick ​

Проигрывание сценария при клике на элемент.

onDataInput ​

Проигрывание сценария при совпадении текстового содержимого в элемента на момент загрузки страницы.

onScrollToElement ​

Проигрывание сценария, когда элемент появится в области просмотра при скроле документа.

onInactive ​

Проигрывание сценария по истечении установленного времени бездействия.

startSPA() ​

Запускает отслеживание изменения DOM-дерева, для того, чтобы определять переходы на другие страницы сайта в SPA приложениях и открытия/закрытия модальных окон selector - селектор, по которому будет искать элемент

ts
HintedWidget.startSPA(selector: string)

stopSPA() ​

Отключить отслеживание элемента для SPA приложений

ts
HintedWidget.stopSPA();

startTriggers() ​

Запуск всех триггеров для текущей страницы

ts
HintedWidget.startTriggers(organizationId: string)

setSpaDelay() ​

Если в течение delay не будет совершено никаких изменений, то считается, что был совершен переход на другую страницу.

ts
HintedWidget.setSpaDelay((delay = 1300));

Инициализация виджета ​

disable() ​

Отключает проигрываемые сущности (тултипы, триггеры) на странице, а также скрывает сам виджет. Уже запущенный сценарий будет прерван. Прерывает все запросы за сущностями, кроме необходимых для отображения самого виджета и настроек организации, после перезагрузки страницы.

ts
HintedWidget.disable(): void;

enable() ​

Включает проигрываемые сущности (тултипы, триггеры) на странице, и показывает виджет. Если виджет был отключен и включен обратно до перезагрузки страницы, возвращает скрытые сущности на странцу (кроме прерванных сценариев), в противном случае виджет повторяет поведение "при загрузке" страницы, т.е. запускает триггеры, тултипы и показывает сам виджет.

ts
HintedWidget.enable(): void;

isEnable() ​

Получить состояние инициализации виджета true - включен, false - выключен

ts
HintedWidget.isEnable: boolean;

clearTriggerSessions() ​

Очистить историю запусков триггеров в сессиях.

ts
HintedWidget.clearTriggerSessions();

clearSessions() ​

Очистить всю статистику в сессиях

ts
HintedWidget.clearSessions();

clearCache ​

Полный сброс кэша

ts
HintedWidget.clearCache();

clearCacheById ​

Сброс кэша по id сущности

ts
HintedWidget.clearCacheById(id: string);

Player Object ​

on ​

Подписаться на события

ts
HintedWidget.player.on(e);

Возвращает все элементы футера подсказки, массивом.

js
HintedWidget.player.currentStep.footer.getElements(): HintFooterElement[]

Записывает и обновляет футер подсказки.

js
HintedWidget.player.currentStep.footer.setElements([HintFooterElement]);

example ​

ts
const elements: HintFooterElement[] =
  HintedWidget.player.currentStep.footer.getElements();
elements.splice(1, 1);

HintedWidget.player.currentStep.footer.setElements(elements);
js
e.event: 'start | searching | show | close | end | next'
e.scenario: Scenario | undefined,
e.step: number | undefined

example:

js
const hintedHandler = (e) => {
  console.log(e);

  if (e.event === 'end') {
    console.log('Scenario ended');
  }
};
HintedWidget.player.on(hintedHandler);

pageHelpers ​

Свойство pageHelpers глобального объекта HintedWidget содержит объект предоставляющий набор свойств и методов для взаимодействия с элементами и событиями веб-страницы.

Свойства: ​

pollingInterval ​

typescript
pageHelpers {
  pollingInterval: number;
  get pollingInterval(): number;
  set pollingInterval(value: number): void;
}

Число для интервала опроса (в миллисекундах), используемого при поиске элементов на странице. По умолчанию 300мс.

pollingElementTries ​

typescript
pageHelpers {
  pollingElementTries: number;
  get pollingElementTries(): number;
  set pollingElementTries(value: number): void;
}

Число попыток опроса элемента при поиске. По умолчанию 30.

Методы ​

isElementExistOnPageBySelectors ​

typescript
pageHelpers {
  isElementExistOnPageBySelectors(selectors: string[]): boolean;
}

Проверяет, существует ли на странице элемент, соответствующий любому из предоставленных селекторов и возвращает true если элемент найден, в противном случае false.

example ​

typescript
const { isElementExistOnPageBySelectors } = HintedWidget.pageHelpers;

const isElementExist: boolean = isElementExistOnPageBySelectors([
  '.selector1',
  '.selector2',
]);
if (isElementExist) {
  // element exists do smth
}

getElementBySelectors ​

typescript
pageHelpers {
  getElementBySelectors(
    selectors: string[],
    options?: {
        useInnerText: boolean;
        innerText: string;
    }
  ): Observable<HTMLElement>;
}

Возвращает Observable, который эмитит первый найденный элемент, соответствующий любому из предоставленных селекторов. Если предоставлены опции, то также проверяется текст элемента. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента поток завершится с ошибкой.

example ​

typescript
const { getElementBySelectors } = HintedWidget.pageHelpers;

getElementBySelectors(['.selector1', '.selector2']).subscribe(
  (element: HTMLElement) => {
    // do something with element
  }
);

onPageLoad ​

typescript
pageHelpers {
  onPageLoad(): Observable<boolean>;
}

Возвращает Observable, который эмитит значение true, когда страница загружена.

example ​

typescript
const { onPageLoad } = HintedWidget.pageHelpers;

onPageLoad().subscribe((isPageLoaded: boolean) => {
  // do something
});

onClick ​

typescript
pageHelpers {
  onClick(
    selectors: string[],
    options?: {
        useInnerText: boolean;
        innerText: string;
    }
  ): Observable<Event>;
}

Возвращает Observable, который эмитит событие клика по элементу, соответствующему любому из предоставленных селекторов. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента поток завершится с ошибкой.

example ​

typescript
const { onClick } = HintedWidget.pageHelpers;

onClick(['.selector1, .selector2']).subscribe((event: Event) => {
  // do something
});

onElementHover ​

typescript
pageHelpers {
  onElementHover(
    selectors: string[],
    options?: {
        useInnerText: boolean;
        innerText: string;
    }
  ): Observable<Event>;
}

Возвращает Observable, который эмитит событие наведения курсора на элемент, соответствующий любому из предоставленных селекторов. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента поток завершится с ошибкой.

example ​

typescript
const { onElementHover } = HintedWidget.pageHelpers;

onElementHover(['.selector1, .selector2']).subscribe((event: Event) => {
  // do something
});

onScrollToElement ​

typescript
pageHelpers {
  onScrollToElement(
    selectors: string[],
    options?: {
        useInnerText: boolean;
        innerText: string;
    }
  ): Observable<HTMLElement>;
}

Возвращает Observable, который эмитит элемент, соответствующий любому из предоставленных селекторов, когда он появляется в области просмотра при скроле документа. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента поток завершится с ошибкой.

example ​

typescript
const { onScrollToElement } = HintedWidget.pageHelpers;

onScrollToElement(['.selector1, .selector2']).subscribe(
  (element: HTMLElement) => {
    // do something
  }
);

onInactive ​

typescript
pageHelpers {
  onInactive(idleTime: number): Observable<Event>;
}

Возвращает Observable, который эмитит событие, когда в течение указанного времени от пользователя не было зарегистрировано ни одно из следующих событий:

  • клик
  • двойной клик
  • наведение курсора
  • нажатие клавиши
  • движение мыши
  • скролл

По умолчанию idleTime равен 15000мс.

example ​

typescript
const { onInactive } = HintedWidget.pageHelpers;

onInactive().subscribe((event: Event) => {
  // do something
});

onElementInnerText ​

typescript
pageHelpers {
  onElementInnerText(
    selectors: string[],
    input: string[],
    options?: {
      useInnerText: boolean;
      innerText: string;
    }
  ): Observable<string>;
}

Возвращает Observable, который эмитит текст элемента, если элемент найден по списку селекторов и он содержит текст равный одному из input. Срабатывает сразу после поиска элемента. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента или ни одно значение из массива input не дало совпадений с содержимым элемента поток завершится с ошибкой.

example ​

typescript
const { onElementInnerText } = HintedWidget.pageHelpers;

onElementInnerText(['.selector1, .selector2'], ['text1', 'text2']).subscribe(
  (innerText: string) => {
    // do something
  }
);

onLocalStorageContains ​

typescript
pageHelpers {
  onLocalStorageContains(
    localComparingOptions: {
        key: string;
        userValue: string;
        comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
  }): Observable<{
    comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
    storeValue: string;
    userValue: string;
  }>;
}

Возвращает Observable, который эмитит объект сравнения, если в localStorage найден ключ, соответствующий предоставленным опциям, где key - имя свойства в localStorage, userValue - значение, a comparingType - тип сравнения. Для сравнения принимаются только числа в виде строк. Если утверждение localComparingOptions.comparingType над userValue и значением из хранилища ложно, поток завершится с ошибкой.

example ​

typescript
const { onLocalStorageContains } = HintedWidget.pageHelpers;

onLocalStorageContains({
  key: 'key',
  userValue: '300',
  comparingType: 'equal',
}).subscribe(({ comparingType, storeValue, userValue }) => {
  // do something with comparingType, storeValue, userValue
});

onCookieContains ​

typescript
pageHelpers {
  onCookieContains(
    cookieComparingOptions: {
        key: string;
        userValue: string;
        comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
  }): Observable<{
    comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
    storeValue: string;
    userValue: string;
  }>;
}

Возвращает Observable, который эмитит объект сравнения, если в cookie найден ключ, соответствующий предоставленным опциям, где key - имя свойства cookie, userValue - значение, a comparingType - тип сравнения. Для сравнения принимаются только числа в виде строк. Если утверждение localComparingOptions.comparingType над userValue и значением из хранилища ложно, поток завершится с ошибкой.

example ​

typescript
const { onCookieContains } = HintedWidget.pageHelpers;

onCookieContains({
  key: 'key',
  userValue: '300',
  comparingType: 'equal',
}).subscribe(({ comparingType, storeValue, userValue }) => {
  // do something with comparingType, storeValue, userValue
});

onSessionStorageContains ​

typescript
pageHelpers {
  onSessionStorageContains(
    sessionComparingOptions: {
        key: string;
        userValue: string;
        comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
  }): Observable<{
    comparingType: 'equal' | 'notEqual' | 'greater' | 'less' | 'greaterOrEqual' | 'lessOrEqual';
    storeValue: string;
    userValue: string;
  }>;
}

Возвращает Observable, который эмитит объект сравнения, если в sessionStorage найден ключ, соответствующий предоставленным опциям, где key - имя свойства sessionStorage, userValue - значение, a comparingType - тип сравнения. Для сравнения принимаются только числа в виде строк. Если утверждение localComparingOptions.comparingType над userValue и значением из хранилища ложно, поток завершится с ошибкой.

example ​

typescript
const { onSessionStorageContains } = HintedWidget.pageHelpers;

onSessionStorageContains({
  key: 'key',
  userValue: '300',
  comparingType: 'equal',
}).subscribe(({ comparingType, storeValue, userValue }) => {
  // do something with comparingType, storeValue, userValue
});

onElementContentChanged ​

typescript
pageHelpers {
  onElementContentChanged(
    selectors: string[],
    values: string[],
    options?: {
      useInnerText: boolean;
      innerText: string;
    }
  ): Observable<HTMLElement>;
}

Возвращает Observable, который эмитит элемент, соответствующий любому из предоставленных селекторов, когда его содержимое изменяется на одно из предоставленных значений. Ожидает когда содержимое изменится. Если элемент не найден за pollingElementTries попыток с интервалом поиска pollingInterval или options.innerText не дал совпадений с текстом найденного элемента или ни одно из значений массива values не совпало с текстом элемента поток завершится с ошибкой.

example ​

typescript
const { onElementContentChanged } = HintedWidget.pageHelpers;

onElementContentChanged(
  ['.selector1, .selector2'],
  ['text1', 'text2']
).subscribe((element: HTMLElement) => {
  // do something
});

toPromise ​

typescript
pageHelpers {
  toPromise<T>(observable: Observable<T>): Promise<T>;
}

Преобразует Observable в Promise. Закрывает поток в случае resolve или reject иначе ожидает первое значение (pending). Завершается в reject если поток завершается с ошибкой. Завершается в resolve на получение первого значения из потока.

example ​

typescript
const { toPromise, onClick } = HintedWidget.pageHelpers;

const promise: Promise<Event> = toPromise(onClick(['.selector1, .selector2']));
promise.then((event: Event) => {
  // do something
});