112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import { fastOverlayHandleClick } from '../fast-overlay'
|
|
|
|
const ajaxLoader = `<span class="ct-ajax-loader" data-type="boxed"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" opacity="0.2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"/><path d="m12,2c5.52,0,10,4.48,10,10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" from="0 12 12" to="360 12 12" repeatCount="indefinite" /></path></svg></span>`
|
|
|
|
const getModalContent = (args) => {
|
|
return new Promise((resolve) => {
|
|
const maybeCurrentChunk = args.loadedChunks[args.chunk.id]
|
|
|
|
const loader = document.createElement('div')
|
|
|
|
if (maybeCurrentChunk && maybeCurrentChunk.maybeGetPanelContent) {
|
|
const maybeFutureContent = maybeCurrentChunk.maybeGetPanelContent(
|
|
args.el,
|
|
{
|
|
event: args.event,
|
|
}
|
|
)
|
|
|
|
if (maybeFutureContent) {
|
|
maybeFutureContent.then((content) => {
|
|
loader.appendChild(content)
|
|
resolve(loader.firstElementChild)
|
|
})
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
loader.innerHTML = ajaxLoader
|
|
|
|
loader.dataset.behaviour = 'modal'
|
|
loader.classList.add('ct-panel')
|
|
loader.classList.add('loading')
|
|
|
|
if (args.chunk.has_loader.class) {
|
|
loader.classList.add(args.chunk.has_loader.class)
|
|
}
|
|
|
|
if (args.chunk.has_loader.id) {
|
|
loader.id = args.chunk.has_loader.id
|
|
} else {
|
|
loader.id = (args.el.hash || '').replace('#', '')
|
|
}
|
|
|
|
resolve(loader)
|
|
})
|
|
}
|
|
|
|
const openLoader = (args) => {
|
|
const startTime = new Date().getTime()
|
|
|
|
if (document.querySelector('.ct-panel.active')) {
|
|
return
|
|
}
|
|
|
|
getModalContent(args).then((content) => {
|
|
document.querySelector('.ct-drawer-canvas').appendChild(content)
|
|
|
|
fastOverlayHandleClick(args.event, {
|
|
openStrategy: 'fast',
|
|
container: content,
|
|
})
|
|
|
|
args.loadChunkWithPayload(
|
|
args.chunk,
|
|
{
|
|
event: args.event,
|
|
ajaxLoader,
|
|
panel: content,
|
|
completeAction: (completeArgs = {}) => {
|
|
completeArgs = {
|
|
onCompleted: () => {},
|
|
|
|
...completeArgs,
|
|
}
|
|
|
|
const setFinalState = () => {
|
|
const endTime = new Date().getTime()
|
|
|
|
if (endTime - startTime < args.ensureAtLeast) {
|
|
setTimeout(() => {
|
|
content.classList.remove('loading')
|
|
completeArgs.onCompleted()
|
|
}, args.ensureAtLeast - (endTime - startTime))
|
|
} else {
|
|
content.classList.remove('loading')
|
|
completeArgs.onCompleted()
|
|
}
|
|
}
|
|
|
|
setFinalState()
|
|
},
|
|
},
|
|
args.el
|
|
)
|
|
})
|
|
}
|
|
|
|
export const bootModalLoaderFlow = (args = {}) => {
|
|
args = {
|
|
el: null,
|
|
event: null,
|
|
chunk: null,
|
|
loadedChunks: {},
|
|
ensureAtLeast: 0, // TODO: maybe will be used in the future
|
|
|
|
...args,
|
|
}
|
|
|
|
openLoader(args)
|
|
}
|