Установка

Способы установки MlPanel на ваш сайт:

1. Установка с помощью пакетного менеджера npm
2. Использование CDN пакета

Установка с помощью пакетного менеджера npm

npm i ml-panel

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

import { MlPanelService } from 'ml-panel'

const panel = new MlPanelService({
  url: 'https://quiz.lctest.ru/', // Используется в примере, для установки запросите ссылку у менеджера
  code: 'ml-01-ml', // Используется в примере, для установки запросите уникальный код у менеджера
})

panel.init()

Использование CDN пакета

Вы можете использовать MlPanel непосредственно из CDN с помощью тега script:

<script src="https://unpkg.com/ml-panel@1/dist/ml-panel.iife.js"></script>

Использование глобальной сборки

Приведенная выше ссылка загружает глобальную сборку MlPanel, где все API верхнего уровня отображаются как свойства глобального объекта MlPanel. Вот полный пример использования глобальной сборки:

<script src="https://unpkg.com/ml-panel@1/dist/ml-panel.iife.js"></script>

<button onclick="panel.open()">Open MlPanel</button>

<script>
  const { MlPanelService } = MlPanel

  const panel = new MlPanelService({
    url: 'https://quiz.lctest.ru/', // Используется в примере, для установки запросите ссылку у менеджера
    code: 'ml-01-ml', // Используется в примере, для установки запросите уникальный код у менеджера
  })

  panel.init()
</script>

Codepen demo

Использование сборки ES Module

Большинство современных браузеров теперь поддерживают ES модули изначально, поэтому мы можем использовать MlPanel из CDN через собственные ES-модули следующим образом:

<button id="ml-panel-open-btn">Open MlPanel</button>

<script type="module">
  import { MlPanelService } from 'https://unpkg.com/ml-panel@1/dist/ml-panel.js'

  const panel = new MlPanelService({
    url: 'https://quiz.lctest.ru/', // Используется в примере, для установки запросите ссылку у менеджера
    code: 'ml-01-ml', // Используется в примере, для установки запросите уникальный код у менеджера
  })

  panel.init()

  document.querySelector('#ml-panel-open-btn')
    .addEventListener('click', () => {
      panel.open()
    })
</script>

Обратите внимание, что мы используем <script type="module">, а импортированный URL-адрес CDN вместо этого указывает на сборку ES модулей из MlPanel.

Codepen demo

Методы

.init()

Обязательный метод для работы панели. Вызовите его, когда DOM будет доступен. Инициализирует панель в DOM, для дальнейшей ее работы.

const panel = new MlPanelService(...)

panel.init()

.open(payload?: OpenWidgetPropsPayload)

Открывает панель. Принимает необязательный аргумент в виде объекта, который перезапишет уникальный код и объект с дополнительными данными, которые были заданы при создании экземпляра панели.

const panel = new MlPanelService({
  url '...',
  code: 'initial'
})

// Откроет панель с уникальным кодом "initial"
panel.open()

// Откроет панель с новым уникальным кодом
panel.open({
  code: "...",
})

.close()

Скрывает видимость панели (Не удаляет из DOM)

const panel = new MlPanelService(...)

panel.close()

.destroy()

Полностью удаляет панель из DOM

const panel = new MlPanelService(...)

panel.destroy()