saby-customizer 0.0.0-pre.7 → 0.0.0

package/lib/saby-lib/toolbar.js

@@ -0,0 +1,272 @@
+import { oom } from '@notml/core'
+import { getListOfOpenCards } from './edo.js'
+
+const { MutationObserver } = window
+/**
+ * @typedef ToolbarContainerOptions Опции по умолчанию для панели
+ * @property {boolean} global Признак глобальной панели
+ * @property {import('saby-customizer/lib.js').Card} [card] Ссылка на экземпляр карточки задачи
+ * @property {string} [position='right'] Положение панели на сайте right|top
+ */
+/** @type {ToolbarContainerOptions} */
+const optionsDefaults = { global: false, card: null, position: 'right' }
+
+/** Класс контейнера для расширения панели сайта дополнительными кнопками */
+class ToolbarContainer extends oom.extends(HTMLElement, optionsDefaults) {
+
+  static tagName = 'saby-customizer-toolbar'
+  static style = oom.style({
+    'display': 'flex',
+    'alignItems': 'center',
+    'saby-customizer-toolbar.right': {
+      flexDirection: 'column',
+      marginBottom: '6px'
+    },
+    'saby-customizer-toolbar.top': {
+      marginLeft: '16px'
+    },
+    '.button': {
+      padding: '2px',
+      color: 'var(--secondary_icon-color)',
+      fill: 'var(--secondary_icon-color)',
+      cursor: 'pointer',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    'saby-customizer-toolbar.right .button': {
+      height: '32px',
+      width: '32px',
+      marginBottom: '4px'
+    },
+    'saby-customizer-toolbar.top .button': {
+      height: '20px',
+      width: '20px',
+      marginRight: '8px'
+    },
+    'saby-customizer-toolbar.top .button:last-child': {
+      marginRight: '0'
+    },
+    '.button:hover': {
+      color: 'var(--link_hover_text-color)',
+      fill: 'var(--link_hover_text-color)',
+      borderColor: ' var(--border-color_hover_button_toolButton)',
+      background: 'var(--background-color_hover_button_toolButton)',
+      borderRadius: 'var(--border-radius_button_toolButton)',
+      borderWidth: 'var(--border-thickness_button)'
+    }
+  })
+
+  /**
+   * @typedef ButtonOptionsFilter
+   * @property {Array<string>} [names] Фильтр по названию документа
+   */
+
+  /**
+   * @typedef ButtonOptions
+   * @property {string} [position='right'] Позиция панели в которой отображается кнопка
+   * @property {ButtonOptionsFilter} [filter] Фильтры отображения кнопок
+   * @property {string} title Всплывающая подсказка на кнопке
+   * @property {string} iconSVG Верстка иконки в формате SVG
+   * @property {Function} onclick Обработчик клика на иконку
+   */
+  /** @type {ButtonOptions[]} */
+  static buttons = []
+
+  /** @type {Set<ToolbarContainer>} */
+  static containers = new Set()
+
+  /** @type {ToolbarContainer} */
+  static globalContainer = null
+
+  /** @type {MutationObserver} */
+  static observer = null
+
+  /**
+   * Регистрирует новую общую кнопку в панели сайта
+   *
+   * @param {ButtonOptions} options Опции кнопки
+   */
+  static addButton(options) {
+    options = Object.assign({ position: 'right' }, options)
+    this.buttons.push(options)
+
+    this.containers.forEach(container => container.addButton(options))
+
+    if (!ToolbarContainer.globalContainer) {
+      this.addGlobalContainer()
+    }
+    if (!this.observer) {
+      this.addTaskPanelContainer()
+      this.registerTaskPanelWatcher()
+    }
+  }
+
+  /**
+   * Добавляет в вертску сайта глобальный контейнер в панели для добавления кнопок
+   *
+   * @param {{searchCount:number}} options Опции регистарции обработчиков
+   */
+  static addGlobalContainer({ searchCount } = { searchCount: 0 }) {
+    if (!ToolbarContainer.globalContainer) {
+      const sabyPageRightPanel = document.querySelector('.sabyPage-MainLayout__rightPanel .sabyPage-MainLayout__wrapper') ||
+        document.querySelector('.sabyPage-MainLayout__mainContent .sabyPage-widgets__rightPanel__bottomButtons .sabyPage-widgets__wrapper')
+
+      if (sabyPageRightPanel) {
+        ToolbarContainer.globalContainer = new ToolbarContainer({ global: true })
+        sabyPageRightPanel.prepend(ToolbarContainer.globalContainer)
+      } else {
+        if (searchCount < 10) {
+          searchCount++
+          setTimeout(() => {
+            this.addGlobalContainer({ searchCount })
+          }, 1000)
+        } else {
+          console.warn('saby-customizer - addGlobalContainer: Не найден ни один общий контейнер для размещения доп. панелей с кнопками')
+        }
+      }
+    }
+  }
+
+  /**
+   * Регистрирует обработчик для поиска открытых задач и добавления в них панели
+   *
+   * @param {{searchCount:number}} options Опции регистарции обработчиков
+   */
+  static registerTaskPanelWatcher({ searchCount } = { searchCount: 0 }) {
+    const popupContainer = document.getElementById('popup')
+    const pageEntityContainer = document.querySelector('.onlinePage_Entity-wrapper.controls-Popup__dialog-target-container')
+    let timeout = null
+
+    if (!this.observer) {
+      this.observer = new MutationObserver(() => {
+        if (!timeout) {
+          timeout = setTimeout(() => {
+            this.addTaskPanelContainer()
+            timeout = null
+          }, 1000)
+        }
+      })
+    }
+
+    if (popupContainer) {
+      this.observer.observe(popupContainer, { childList: true, subtree: true })
+    }
+    if (pageEntityContainer) {
+      this.observer.observe(pageEntityContainer, { childList: true, subtree: true })
+    }
+    if (!popupContainer && !pageEntityContainer) {
+      if (searchCount < 10) {
+        searchCount++
+        setTimeout(() => {
+          this.registerTaskPanelWatcher({ searchCount })
+        }, 1000)
+      } else {
+        console.error('saby-customizer - registerTaskPanelWatcher: Не найден ни один общий контейнер для размещения доп. панелей с кнопками')
+      }
+    }
+  }
+
+  /** Добавления во все найденные открытые задачи правую панель */
+  static addTaskPanelContainer() {
+    const openTaskList = getListOfOpenCards({ duplicates: true })
+
+    openTaskList.forEach(card => {
+      const rightPanel = card.element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-MainLayout__wrapper') ||
+        // Кнопки для всплывающий панелей в карточке открытой в отдельной вкладке
+        card.element.querySelector('.controls-StackTemplate__rightPanel .sabyPage-widgets__wrapper')
+      const topPanel = card.element.querySelector('.edo3-Dialog__head-firstLine-buttons')
+
+      if (rightPanel) {
+        const rightSidebar = rightPanel.querySelector('saby-customizer-toolbar')
+
+        if (!rightSidebar) {
+          rightPanel.prepend(new ToolbarContainer())
+        }
+      }
+      if (topPanel) {
+        /** @type {ToolbarContainer} */
+        let topSidebar = topPanel.querySelector('saby-customizer-toolbar')
+
+        if (topSidebar && topSidebar.options?.card.data.id !== card.data.id) {
+          topSidebar.remove()
+          topSidebar = null
+        }
+
+        if (!topSidebar) {
+          topPanel.prepend(new ToolbarContainer({ card, position: 'top' }))
+        }
+      }
+    })
+  }
+
+  template = () => {
+    // Атрибуты для игнорирования контейнера платформой wasaby
+    this.setAttribute('data-vdomignore', 'true')
+    this.setAttribute('contenteditable', 'true')
+    this.classList.add(this.options.position)
+  }
+
+  /** Будем запоминать все контейнеры для синхронизации кнопок */
+  connectedCallback() {
+    super.connectedCallback()
+    ToolbarContainer.containers.add(this)
+    ToolbarContainer.buttons.forEach(options => this.addButton(options))
+  }
+
+  /** Очищаем удаленные из DOM контейнеры */
+  disconnectedCallback() {
+    if (this.options.global) {
+      ToolbarContainer.globalContainer = null
+      ToolbarContainer.addGlobalContainer()
+    }
+    ToolbarContainer.containers.delete(this)
+    this.innerHTML = ''
+  }
+
+  /**
+   * Добавляет новую общую кнопку в текущий контейнер панели
+   *
+   * @param {ButtonOptions} options Опции кнопки
+   */
+  addButton(options) {
+    let match = true
+
+    match = match && this.options.position === options.position
+
+    if (match && this.options.card && options.filter) {
+      if (options.filter.names) {
+        match = match && options.filter.names.includes(this.options.card.data.name)
+      }
+    }
+
+    if (match) {
+      const button = oom.div({
+        class: 'button',
+        title: options.title,
+        onclick: () => {
+          const [card] = this.options.card
+            ? getListOfOpenCards({ id: this.options.card.data.id })
+            : [null]
+
+          options.onclick(card)
+        }
+      })
+
+      if (options.iconSVG) {
+        button({ innerHTML: options.iconSVG })
+      }
+
+      oom(this, button)
+    }
+  }
+
+}
+
+
+oom.define(ToolbarContainer)
+
+
+export const toolbar = {
+  addButton: (options) => ToolbarContainer.addButton(options)
+}

package/lib.js

@@ -0,0 +1,8 @@
+export * from './lib/context.js'
+export * from './lib/database.js'
+export * from './lib/hotkeys.js'
+export * from './lib/layout.js'
+export * from './lib/popup-dialog.js'
+export * from './lib/saby-lib/edo.js'
+export * from './lib/saby-lib/rpc.js'
+export * from './lib/saby-lib/toolbar.js'