https://cncrg.org/place-editor.js

1function _initCncrgPlaceEditor(options = {}) {
2  return new Promise(async resolve => {
3    let usedCustomTargetEl = false
4    if (!options.targetEl) {
5      usedCustomTargetEl = true
6      _cncrgCreatePlaceEditorWrapper(options)
7      options.targetEl = document.getElementById('cncrg-place-editor')
8    }
9    if (!document.getElementById('cncrg-place-editor-script')) {
10      const scriptEl = document.createElement('script')
11      scriptEl.id = 'cncrg-place-editor-script'
12      const serverUrl = options.serverUrl || 'https://cncrg.org'
13      scriptEl.src = `${serverUrl}/place-editor/index.js`
14      scriptEl.type = 'text/javascript'
15      document.body.appendChild(scriptEl)
16      function waitScriptLoad() {
17        return new Promise(resolve => {
18          scriptEl.onload = () => resolve()
19        })
20      }
21      await waitScriptLoad()
22    }
23    window.cncrgPlaceEditorWidget = new CncrgPlaceEditor({
24      target: options.targetEl.attachShadow({ mode: 'open' }),
25      props: options,
26    })
27
28    interval = setInterval(() => {
29      if (!window.cncrgPlaceEditor) return
30      clearInterval(interval)
31
32      const onDestroyCallbacks = []
33      window.cncrgPlaceEditor.onDestroy = cb => onDestroyCallbacks.push(cb)
34      window.cncrgPlaceEditor.destroy = () => {
35        window.cncrgPlaceEditorWidget.$destroy()
36        window.cncrgPlaceEditorWidget = undefined
37        window.cncrgPlaceEditor = undefined
38
39        if (options.targetEl.parentElement)
40          options.targetEl.outerHTML = options.targetEl.outerHTML
41
42        if (usedCustomTargetEl) {
43          document.getElementById('cncrg-place-editor-wrapper').remove()
44          document.getElementById('cncrg-place-editor-wrapper-style').remove()
45        }
46        for (const cb of onDestroyCallbacks) cb()
47      }
48      resolve(window.cncrgPlaceEditor)
49    }, 10)
50  })
51}
52
53function initCncrgPlaceEditor(...args) {
54  return new Promise(resolve => {
55    let interval = setInterval(async () => {
56      if (!document.body) return
57      clearInterval(interval)
58      const cncrgPlaceEditor = await _initCncrgPlaceEditor(...args)
59      resolve(cncrgPlaceEditor)
60    }, 10)
61  })
62}
63
64function _cncrgCreatePlaceEditorWrapper(options) {
65  const placeEditorWrapper = document.createElement('div')
66  document.body.appendChild(placeEditorWrapper)
67  placeEditorWrapper.outerHTML = String.raw`
68      <div id="cncrg-place-editor-wrapper">
69        <div id="cncrg-place-titlebar">
70          <div id="cncrg-place-logo"></div>
71          <div id="cncrg-place-title">${
72            options.viewMode ? 'Просмотр' : 'Редактор'
73          } плейса</div>
74          <div id="cncrg-place-close">X</div>
75        </div>
76        <div id="cncrg-place-editor"></div>
77      </div>
78
79      <style id="cncrg-place-editor-wrapper-style">
80        #cncrg-place-editor-wrapper {
81          z-index: 15;
82          position: fixed;
83          display: flex;
84          flex-direction: column;
85          top: 0;
86          left: 0;
87          right: 0;
88          bottom: 0;
89        }
90        
91        #cncrg-place-titlebar {
92          height: 40px;
93          min-height: 40px;
94          background-color: #333;
95          display: flex;
96          justify-content: space-between;
97          align-items: center;
98
99          -webkit-user-drag: none;
100          user-select: none;
101          -moz-user-select: none;
102          -webkit-user-select: none;
103        }
104
105        #cncrg-place-logo {
106          height: 30px;
107          width: 30px;
108          background-image: url(https://cncrg.org/favicon.ico);
109          background-position: center;
110          background-size: cover;
111          filter: brightness(100);
112          margin-left: 5px;
113        }
114        #cncrg-place-title {
115          color: #ccc;
116        }
117        #cncrg-place-close {
118          color: #ccc;
119          padding: 0 15px;
120          height: 100%;
121          display: flex;
122          justify-content: center;
123          align-items: center;
124          transition: .25s all;
125          cursor: pointer;
126        }
127        #cncrg-place-close:hover {
128          background-color: rgba(255, 255, 255, .1);
129        }
130        
131        #cncrg-place-editor {
132          flex: 1;
133          max-height: 100%;
134        }
135      </style>
136    `
137
138  document.getElementById('cncrg-place-close').onclick = () => {
139    cncrgPlaceEditor.destroy()
140  }
141}