BDemetrix / BDemetrix.github.io

3 stars 2 forks source link

Разработан плагин Tooltips #79

Closed BDemetrix closed 4 months ago

BDemetrix commented 4 months ago

Задача: https://github.com/BDemetrix/BDemetrix.github.io/issues/80

/**
 * Создает всплывающие увдобления при наведении (или клике) на таргет (целевой элемент)
 * Требуется подключения стилей js-tooltip.scss
 */
class Tooltips {
  constructor(options = {}) {
    this.attach = options.attach ?? ".smart-tooltip";         // селектор таргетов тултипа
    this.openTrigger = options.openTrigger ?? "mouseenter";   // тригер показа тултипа
    this.closeTrigger = options.closeTrigger ?? "mouseleave"; // по умолчанию "mouseleave", если openTrigger !== "click"
    this.content = options.content ?? "title";                // контент тултипа (HTML) может быть задан при создании экземпляра класса

    this.contentSource = options.contentSource ?? null;       // селектор блока, содержимое которого надо перенести в тултип 
    this.setContent = options.setContent ?? null;             // асинхронный колбек для получения контента (удаленно)

    // Настройки отображения
    this.offset = options.offset ?? "";                       // отступ от таргета
    this.hasPointer = options.hasPointer ?? true;             // признак существования стрелочки (указателя)
    this.pointerSize = options.pointerSize ?? "";             // размер стрелочки (указателя)
    this.maxWidth = options.maxWidth ?? null;                 // максимальная ширина
    this.width = options.width ?? null;                       // ширина, если задана, то this.posMod.x = 'center' принудительно, иначе возникают баги
    this.posMod = {};
    this.posMod.x = options.posMod?.x ?? "center";            // позиция по горизонтали x: left|left-auto|center|right|right-auto
    this.posMod.y = options.posMod?.y ?? "auto";              // позиция по вертикали y: above|under|auto, auto по умолчанию
    this.hMargin = options.hMargin ?? 10;                     // оттступ тултипа от края экрана

    // вспомогательные свойства, не пребуют конфигурирования
    this.classMod = {};                                       // вспомогатольный объект для работы с модификаторами css
    this.isOpen = false;                                      // признак открытого тултипа
    this.isFirstOpen = true;                                  // признак первого открытия (нужен для исправления бага)

    this._init();
  }

  // Тело класса...

}