@operato/popup 8.0.0-alpha.51 → 8.0.0-beta.1

package/src/open-popup.ts

@@ -1,166 +0,0 @@
-import './ox-floating-overlay.js'
-
-import { html, render, TemplateResult } from 'lit'
-
-import { OxFloatingOverlay } from './ox-floating-overlay.js'
-
-/**
- * Options for popup
- *
- * @typedef {Object} PopupOptions
- * @property {String} [title] - popup title
- * @property {'center' | 'next' | 'edge'} [hovering] - hovering position (default: 'center'). 'edge' : edge of the HEADERBAR, 'next' : next of the clicked position.
- * @property {'large' | 'medium' | small'} [size] - popup size
- * @property {Boolean} [closable] - set whether the close 'X' button is shown on top-right most position (default true)
- * @property {Boolean} [escapable] - set whether the close popup with 'ESC' key (default true)
- * @property {Boolean} [backdrop] - set whether to do background masking around the pop-up. If true, it becomes modal (default true)
- * @property {Boolean} [movable] - set whether to be able to movable by the gesture dragging on header once the hovering option is 'center'
- * @property {String} [help] - inline help link
- */
-export type PopupOptions = {
-  title?: string
-  hovering?: 'center' | 'next' | 'edge'
-  size?: 'large' | 'medium' | 'small'
-  closable?: boolean
-  escapable?: boolean
-  backdrop?: boolean
-  movable?: boolean
-  help?: string
-  search?: {
-    value?: string
-    handler?: (closure: any, value: string) => void
-    placeholder?: string
-    autofocus?: boolean
-  }
-  filter?: {
-    handler?: (closure: any) => void
-  }
-}
-
-/**
- * Popup handle object that will be returned openPopup
- *
- * @typedef {Object} PopupHandle
- * @property {String} [name] - popup instance name
- * @property {Function} [close] - call this function to close the popup.
- * @property {Boolean} [closed] - state telling whether the popup is closed or not.
- * @property {Function} [onclosed] - set callback function on close. It will be called when the popup about to close.
- */
-export type PopupHandle = {
-  name: string
-  close: () => void
-  closed: boolean
-  onclosed?: () => void
-}
-
-/*
- * popup handling
- *
- * popup은 overlay의 특별한 형태이다.
- * popup은 open될 때, viewpart를 append 하며, close 될 때 viewpart를 remove 한다.
- * - name: '$popup-${popupSequence}'
- * - position: VIEWPART_POSITION_HEADERBAR
- * - hovering: 'center' | 'next' | 'edge'
- */
-var popupSequence = 0
-
-/**
- * default openPopup implementation for operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-function defaultOpenPopup(template: TemplateResult, options: PopupOptions = {}): PopupHandle {
-  const {
-    title,
-    size = 'large',
-    closable = false,
-    escapable = false,
-    help,
-    hovering,
-    backdrop,
-    movable = false,
-    search,
-    filter
-  } = options
-  const name = `$popup-${popupSequence++}`
-
-  render(
-    html`
-      <ox-floating-overlay
-        id=${name}
-        name=${name}
-        .backdrop=${backdrop}
-        direction="down"
-        .hovering=${hovering}
-        .title=${title || ''}
-        .help=${help}
-        .size=${size}
-        .closable=${closable}
-        .historical=${false}
-        .movable=${movable}
-        .search=${search}
-        .filter=${filter}
-        >${template}</ox-floating-overlay
-      >
-    `,
-    document.body
-  )
-
-  requestAnimationFrame(() => {
-    dispatchEvent(new Event('resize'))
-  })
-
-  const popupHandle = {
-    name,
-    close: () => {
-      const popup = document.body.querySelector(`#${name}`) as OxFloatingOverlay
-      popup?.close()
-      popupHandle.onclosed && popupHandle.onclosed()
-    },
-    closed: false
-  } as PopupHandle
-
-  return popupHandle
-}
-
-var openPopupImpl: (template: TemplateResult, options: PopupOptions) => PopupHandle = defaultOpenPopup
-
-/**
- * replace default openPopup implementation
- *
- * @param {(template: TemplateResult, options: PopupOptions) => PopupHandle} implementation
- */
-export function setOpenPopupImplementation(
-  implementation: (template: TemplateResult, options: PopupOptions) => PopupHandle
-) {
-  openPopupImpl = implementation
-}
-
-/**
- * open popup out of operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-export const openPopup = (template: TemplateResult, options: PopupOptions = {}): PopupHandle => {
-  return openPopupImpl(template, options)
-}
-
-/**
- * open popup out of operato application environment
- *
- * @param {*} template html template to be rendered inside the popup
- * @param {PopupOptions} options
- * @returns popup handle object. This object is used to close the popup.
- */
-export const closePopup = (element: HTMLElement): void => {
-  element.dispatchEvent(
-    new CustomEvent('close-overlay', {
-      bubbles: true,
-      composed: true
-    })
-  )
-}