saby-customizer 0.0.0-pre.10

package/README.md

@@ -0,0 +1,8 @@
+# SABY Customizer [![npm][npmbadge]][npm]
+
+SABY Customizer package for use via CDN
+
+[npmbadge]: https://img.shields.io/npm/v/saby-customizer?label=saby-customizer
+
+[npm]: https://www.npmjs.com/package/saby-customizer
+

package/features/git-branch.js

@@ -0,0 +1,92 @@
+import { oom } from '@notml/core'
+import { toggleDialog, keysMapping } from '../lib'
+import { getListOfOpenCards } from '../saby-lib/edo.js'
+
+
+/** Карточка со сведениями о задаче для копирования ветки */
+class GitBranchCard extends oom.extends(HTMLElement) {
+
+  static tagName = 'sc-git-branch-сard'
+  static style = oom.style({
+    'display': 'contents',
+    '.mdc-card': {
+      margin: '16px',
+      padding: '12px'
+    },
+    '.title': {
+      fontWeight: 'bold'
+    },
+    '.link': {
+      fontSize: '14px'
+    },
+    '.description': {
+      fontSize: '14px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  })
+
+  template = oom.div({ class: 'mdc-card' }, oom
+    .div({ class: 'title' }, this.getTitle())
+    .div({ class: 'link' }, oom.a(this.options.data.url, {
+      target: '_blank',
+      href: this.options.data.url
+    }))
+    .div({ class: 'description', title: this.options.data.description }, this.options.data.description))
+
+  /**
+   * @returns {string} Заголовок
+   */
+  getTitle() {
+    const { name } = this.options.data
+    const docNumber = ' № ' + this.options.data.number
+    const version = ' веха ' + this.options.data.version
+    const date = ' от ' + this.options.data.date
+    const author = ' ' + this.options.data.author
+
+    return name + docNumber + version + date + author
+  }
+
+}
+
+
+/** Список веток GIT для копирования на основе открытых карточек задач */
+class GitBranchCardList extends oom.extends(HTMLElement) {
+
+  static tagName = 'sc-git-branch-сard-list'
+  static style = oom.style({
+    'display': 'contents',
+    '.empty': {
+      padding: '100px',
+      textAlign: 'center'
+    }
+  })
+
+  taskList = getListOfOpenCards({
+    names: ['Ошибка', 'Задача'],
+    hasVersion: true
+  })
+    .map(card => new GitBranchCard(card))
+
+  taskListElement = (this.taskList.length > 0 && oom()(...this.taskList)) || oom
+    .div({ class: 'empty' }, 'Открытых задач с вехой не найдено')
+
+  template = oom()(
+    oom
+      .mwcTabBar(oom
+        .mwcTab({ label: 'Открытые задачи' })
+        .mwcTab({ label: 'История задач' })),
+    this.taskListElement
+  )
+
+}
+
+
+oom.define(GitBranchCard, GitBranchCardList)
+
+keysMapping['alt-KeyB'] = () => toggleDialog({
+  key: 'git-branch-dialog',
+  title: 'Ветки для Git',
+  Element: GitBranchCardList
+})

package/lib/dashboard.js

@@ -0,0 +1,55 @@
+import { oom } from '@notml/core'
+import { keysMapping } from './hotkeys.js'
+
+
+/** Главное окно плагина */
+class SabyCustomizerDashBoard extends oom.extends(HTMLElement) {
+
+  static tagName = 'sc-dash-board'
+
+  static style = oom.style({
+    'sc-dash-board': {
+      position: 'fixed',
+      left: '0',
+      top: '0',
+      right: '0',
+      height: '100%',
+      zIndex: '13000',
+      backgroundColor: 'rgba(0,0,0,.32)'
+    }
+  })
+
+  template = oom
+    .header({ class: 'mdc-top-app-bar' }, oom
+      .div({ class: 'mdc-top-app-bar__row' }, oom
+        .section({ class: 'mdc-top-app-bar__section mdc-top-app-bar__section--align-start' }, oom
+          .button({ class: 'material-icons mdc-top-app-bar__navigation-icon mdc-icon-button' }, oom
+            .span({ class: 'mdc-icon-button__ripple' })
+            .span('menu', { class: 'mdc-button__label' }))
+          .span('Page title', { class: 'mdc-top-app-bar__title' }))
+        .section({ class: 'mdc-top-app-bar__section mdc-top-app-bar__section--align-end' }, oom
+          .button({ class: 'material-icons mdc-top-app-bar__action-item mdc-icon-button' }, oom
+            .span({ class: 'mdc-icon-button__ripple' })
+            .span('close', {
+              class: 'mdc-button__label',
+              onclick: () => this.remove()
+            }))
+        )))
+    .main({ class: 'mdc-top-app-bar--fixed-adjust' }, oom
+      .span('test'))
+
+}
+
+
+oom.define(SabyCustomizerDashBoard)
+
+keysMapping['ctrl-shift-KeyU'] = keysMapping['ctrl-alt-KeyU'] = () => {
+  const layout = document.getElementById('saby-customizer-layout').shadowRoot
+  const dashboard = layout.getElementById('sc-dash-board')
+
+  if (dashboard) {
+    dashboard.remove()
+  } else {
+    oom(layout, oom.scDashBoard({ id: 'sc-dash-board' }))
+  }
+}

package/lib/database.js

@@ -0,0 +1,9 @@
+import { Dexie } from 'dexie'
+
+const db = new Dexie('saby-customizer-database')
+
+
+db.version(1).stores({ settings: '&key' })
+
+
+export { db }

package/lib/hotkeys.js

@@ -0,0 +1,21 @@
+export const keysMapping = {}
+
+
+document.addEventListener('keydown', (event) => {
+  let hKey = ''
+
+  if (event.ctrlKey) {
+    hKey += 'ctrl-'
+  }
+  if (event.shiftKey) {
+    hKey += 'shift-'
+  }
+  if (event.altKey) {
+    hKey += 'alt-'
+  }
+  hKey += event.code
+  if (hKey in keysMapping) {
+    keysMapping[hKey]()
+    event.stopPropagation()
+  }
+}, { capture: true })

package/lib/layout.js

@@ -0,0 +1,35 @@
+import { oom } from '@notml/core'
+
+
+/** Подложка в теневым DOM для размещения в ней элементов плагина, для изоляции их от основной верстки */
+oom.define(class SabyCustomizerLayout extends oom.extends(HTMLElement) {
+
+  static tagName = 'saby-customizer-layout'
+  static attachShadow = true
+
+  template = oom().head(oom
+    // Предзагрузка стилей material внутри теневого DOM
+    .link({ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap' })
+    .link({ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' })
+    // https://material.io/resources/color/
+    .style({
+      ':host': {
+        '--mdc-theme-primary': '#0d47a1',
+        '--mdc-theme-secondary': '#0d47a1',
+        '--mdc-theme-background': '#e1e1e1',
+        '--mdc-theme-surface': '#fff',
+        '--mdc-theme-on-primary': '#fff',
+        '--mdc-theme-on-secondary': '#fff',
+        '--mdc-theme-on-surface': '#000'
+      }
+    }))
+
+})
+
+
+const layoutElement = oom.sabyCustomizerLayout({ id: 'saby-customizer-layout' })
+
+oom(document.documentElement, layoutElement)
+
+
+export const layout = layoutElement.dom.shadowRoot

package/lib/material.js

@@ -0,0 +1,25 @@
+// https://github.com/material-components/material-web
+
+// В ожидании правки
+// https://github.com/material-components/material-web/issues/2780
+// import 'https://unpkg.com/@material/mwc-dialog@0.25.1?module'
+// import 'https://unpkg.com/@material/mwc-icon-button@0.25.1?module'
+// import 'https://unpkg.com/@material/mwc-tab-bar@0.25.1?module'
+// import 'https://unpkg.com/@material/mwc-top-app-bar@0.25.1?module'
+
+import '@material/mwc-dialog'
+import '@material/mwc-icon-button'
+import '@material/mwc-tab-bar'
+import '@material/mwc-top-app-bar'
+/*
+ * PS
+ * unpkg не вывозит новый JS:
+ *  https://github.com/mjackson/unpkg/issues/303
+ *
+ * jsdelivr не вывозит модульность:
+ *  https://github.com/jsdelivr/jsdelivr/issues/18263
+ *  https://github.com/jsdelivr/jsdelivr/issues/18215
+ *  https://github.com/jsdelivr/jsdelivr/issues/18298
+ *
+ * Поэтому зависимости разбиты на 2 CDN до решения проблем в любом их них
+ */

package/lib/popup-dialog.js

@@ -0,0 +1,111 @@
+import { oom } from '@notml/core'
+import { layout } from './layout.js'
+
+/**
+ * @typedef PopupDialogOptions
+ * @property {string} [key] Уникальный идентификатор вида диалога
+ * @property {string} [title] Текст заголовка диалога
+ * @property {typeof HTMLElement|string} Element Элемент с содержимым диалога
+ */
+/** @type {PopupDialogOptions} */
+const PopupDialogDefaults = {
+  title: 'SABY Customizer',
+  Element: ''
+}
+/** @type {PopupDialog} */
+let lastDialog = null
+
+
+/** Компонент всплывающего диалога */
+export class PopupDialog extends oom.extends(HTMLElement, PopupDialogDefaults) {
+
+  static tagName = 'sc-popup-dialog'
+  // static className = 'mdc-dialog'
+  static style = oom.style({
+    'sc-popup-dialog': {
+      display: 'contents'
+    },
+    'mwc-dialog': {
+      '--mdc-dialog-z-index': '10000',
+      '--mdc-dialog-max-width': '600px'
+    },
+    'header': {
+      margin: '-20px -24px 0px -24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '2px 2px 2px 14px',
+      fontSize: '20px',
+      backgroundColor: 'var(--mdc-theme-primary, #6200ee)',
+      color: 'var(--mdc-theme-on-primary, #fff)',
+      overflow: 'hidden'
+    },
+    'main': {
+      margin: '0px -24px -20px -24px'
+    }
+  })
+
+  key = this.options.key
+  content = typeof this.options.Element === 'string' ? this.options.Element : new this.options.Element()
+
+  template = async () => {
+    // Открытый диалог может быть только один
+    this.id = 'sc-popup-dialog'
+    /** @type {import('@material/mwc-dialog').Dialog} */// @ts-ignore
+    this.dialog = oom
+      .mwcDialog({ hideActions: true }, oom
+        .header(oom
+          .span(this.options.title)
+          .mwcIconButton({ icon: 'close', onclick: () => this.close() }))
+        .main(this.content))
+      .dom
+
+    oom(this, this.dialog)
+
+    this.dialog.addEventListener('closed', () => this.closed())
+
+    await this.open()
+  }
+
+  /** Функция открытия диалога с асинхронной задержкой, что бы успело построиться дерево компонента */
+  async open() {
+    lastDialog = this
+    await new Promise(resolve => setTimeout(resolve))
+    this.dialog.show()
+  }
+
+  /** Функция закрытия диалога */
+  close() {
+    if (this.dialog) {
+      this.dialog.close()
+    }
+  }
+
+  /** Обработчик завершения закрытия одиалога */
+  closed() {
+    this.dialog = lastDialog = null
+    this.remove()
+  }
+
+}
+
+oom.define(PopupDialog)
+
+
+/**
+ * Переключает открытый диалог с учетом уникального ключа диалога.
+ * Открывает с закрытием другого диалога, или скрывает если открыт тот же диалог
+ *
+ * @param {PopupDialogOptions} options Опции PopupDialog
+ */
+export function toggleDialog(options) {
+  const exists = lastDialog && lastDialog.key === options.key
+
+  if (lastDialog) {
+    // Открытый диалог может быть только один
+    lastDialog.close()
+  }
+  if (!exists) {
+    oom(layout, new PopupDialog(options))
+  }
+}

package/lib.js

@@ -0,0 +1,4 @@
+export * from './lib/database.js'
+export * from './lib/hotkeys.js'
+export * from './lib/layout.js'
+export * from './lib/popup-dialog.js'