forked from extern/easydiffusion
Add a utility function to create tabs with lazy loading functionality
This commit is contained in:
Olivia Godone-Maresca
parent
75445185c4
commit
3fc93e2c57
@ -683,7 +683,7 @@ class ServiceContainer {
|
||||
* @param {string} tag
|
||||
* @param {object} attributes
|
||||
* @param {string | Array<string>} classes
|
||||
* @param {string | HTMLElement | Array<string | HTMLElement>}
|
||||
* @param {string | Node | Array<string | Node>}
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
function createElement(tagName, attributes, classes, textOrElements) {
|
||||
@ -699,7 +699,7 @@ function createElement(tagName, attributes, classes, textOrElements) {
|
||||
if (textOrElements) {
|
||||
const children = Array.isArray(textOrElements) ? textOrElements : [textOrElements]
|
||||
children.forEach(textOrElem => {
|
||||
if (textOrElem instanceof HTMLElement) {
|
||||
if (textOrElem instanceof Node) {
|
||||
element.appendChild(textOrElem)
|
||||
} else {
|
||||
element.appendChild(document.createTextNode(textOrElem))
|
||||
@ -708,3 +708,135 @@ function createElement(tagName, attributes, classes, textOrElements) {
|
||||
}
|
||||
return element
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {object} TabOpenDetails
|
||||
* @property {HTMLElement} contentElement
|
||||
* @property {HTMLElement} labelElement
|
||||
* @property {number} timesOpened
|
||||
* @property {boolean} firstOpen
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {object} CreateTabRequest
|
||||
* @property {string} id
|
||||
* @property {string | Node | (() => (string | Node))} label
|
||||
* Label text or an HTML element
|
||||
* @property {string} icon
|
||||
* @property {string | Node | Promise<string | Node> | (() => (string | Node | Promise<string | Node>)) | undefined} content
|
||||
* HTML string or HTML element
|
||||
* @property {((TabOpenDetails, Event) => (undefined | string | Node | Promise<string | Node>)) | undefined} onOpen
|
||||
* If an HTML string or HTML element is returned, then that will replace the tab content
|
||||
* @property {string | undefined} css
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {CreateTabRequest} request
|
||||
*/
|
||||
function createTab(request) {
|
||||
if (!request?.id) {
|
||||
console.error('createTab() error - id is required', Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.label) {
|
||||
console.error('createTab() error - label is required', Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.icon) {
|
||||
console.error('createTab() error - icon is required', Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
if (!request.content && !request.onOpen) {
|
||||
console.error('createTab() error - content or onOpen required', Error().stack)
|
||||
return
|
||||
}
|
||||
|
||||
const tabsContainer = document.querySelector('.tab-container')
|
||||
if (!tabsContainer) {
|
||||
return
|
||||
}
|
||||
|
||||
const tabsContentWrapper = document.querySelector('#tab-content-wrapper')
|
||||
if (!tabsContentWrapper) {
|
||||
return
|
||||
}
|
||||
|
||||
console.debug('creating tab: ', request)
|
||||
|
||||
if (request.css) {
|
||||
document.querySelector('body').insertAdjacentElement(
|
||||
'beforeend',
|
||||
createElement('style', { id: `tab-${request.id}-css` }, undefined, request.css),
|
||||
)
|
||||
}
|
||||
|
||||
const label = typeof request.label === 'function' ? request.label() : request.label
|
||||
const labelElement = label instanceof Node ? label : createElement('span', undefined, undefined, label)
|
||||
|
||||
const tab = createElement(
|
||||
'span',
|
||||
{ id: `tab-${request.id}`, 'data-times-opened': 0 },
|
||||
['tab'],
|
||||
createElement(
|
||||
'span',
|
||||
undefined,
|
||||
undefined,
|
||||
[
|
||||
createElement(
|
||||
'i',
|
||||
{ style: 'margin-right: 0.25em' },
|
||||
['fa-solid', `${request.icon.startsWith('fa-') ? '' : 'fa-'}${request.icon}`, 'icon'],
|
||||
),
|
||||
labelElement,
|
||||
],
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
tabsContainer.insertAdjacentElement('beforeend', tab)
|
||||
|
||||
const wrapper = createElement('div', { id: request.id }, ['tab-content-inner'], 'Loading..')
|
||||
|
||||
const tabContent = createElement('div', { id: `tab-content-${request.id}` }, ['tab-content'], wrapper)
|
||||
tabsContentWrapper.insertAdjacentElement('beforeend', tabContent)
|
||||
|
||||
linkTabContents(tab)
|
||||
|
||||
function replaceContent(resultFactory) {
|
||||
if (resultFactory === undefined || resultFactory === null) {
|
||||
return
|
||||
}
|
||||
const result = typeof resultFactory === 'function' ? resultFactory() : resultFactory
|
||||
if (result instanceof Promise) {
|
||||
result.then(replaceContent)
|
||||
} else if (result instanceof Node) {
|
||||
wrapper.replaceChildren(result)
|
||||
} else {
|
||||
wrapper.innerHTML = result
|
||||
}
|
||||
}
|
||||
|
||||
replaceContent(request.content)
|
||||
|
||||
tab.addEventListener('click', (e) => {
|
||||
const timesOpened = +(tab.dataset.timesOpened || 0) + 1
|
||||
tab.dataset.timesOpened = timesOpened
|
||||
|
||||
if (request.onOpen) {
|
||||
const result = request.onOpen(
|
||||
{
|
||||
contentElement: wrapper,
|
||||
labelElement,
|
||||
timesOpened,
|
||||
firstOpen: timesOpened === 1,
|
||||
},
|
||||
e,
|
||||
)
|
||||
|
||||
replaceContent(result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -130,34 +130,11 @@
|
||||
}
|
||||
drawDiagram(fn)
|
||||
}
|
||||
|
||||
/////////////////////// Tab implementation
|
||||
document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
|
||||
<span id="tab-merge" class="tab">
|
||||
<span><i class="fa fa-code-merge icon"></i> Merge models</span>
|
||||
</span>
|
||||
`)
|
||||
|
||||
document.querySelector('#tab-content-wrapper')?.insertAdjacentHTML('beforeend', `
|
||||
<div id="tab-content-merge" class="tab-content">
|
||||
<div id="merge" class="tab-content-inner">
|
||||
Loading..
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
|
||||
const tabMerge = document.querySelector('#tab-merge')
|
||||
if (tabMerge) {
|
||||
linkTabContents(tabMerge)
|
||||
}
|
||||
const merge = document.querySelector('#merge')
|
||||
if (!merge) {
|
||||
// merge tab not found, dont exec plugin code.
|
||||
return
|
||||
}
|
||||
|
||||
document.querySelector('body').insertAdjacentHTML('beforeend', `
|
||||
<style>
|
||||
createTab({
|
||||
id: 'merge',
|
||||
icon: 'fa-code-merge',
|
||||
label: 'Merge models',
|
||||
css: `
|
||||
#tab-content-merge .tab-content-inner {
|
||||
max-width: 100%;
|
||||
padding: 10pt;
|
||||
@ -233,11 +210,8 @@
|
||||
}
|
||||
.merge-container #merge-warning {
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
</style>
|
||||
`)
|
||||
|
||||
merge.innerHTML = `
|
||||
}`,
|
||||
content: `
|
||||
<div class="merge-container panel-box">
|
||||
<div class="merge-input">
|
||||
<p><label for="#mergeModelA">Select Model A:</label></p>
|
||||
@ -327,7 +301,11 @@
|
||||
<div class="merge-buttons">
|
||||
<button id="merge-button" class="primaryButton">Merge models</button>
|
||||
</div>
|
||||
</div>`
|
||||
</div>`,
|
||||
onOpen: ({ firstOpen }) => {
|
||||
if (!firstOpen) {
|
||||
return
|
||||
}
|
||||
|
||||
const tabSettingsSingle = document.querySelector('#tab-merge-opts-single')
|
||||
const tabSettingsBatch = document.querySelector('#tab-merge-opts-batch')
|
||||
@ -454,5 +432,7 @@
|
||||
hypernetworkModelField.innerHTML = ''
|
||||
await getModels()
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
})()
|
||||
|
||||
@ -9,41 +9,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
|
||||
<span id="tab-news" class="tab">
|
||||
<span><i class="fa fa-bolt icon"></i> What's new?</span>
|
||||
</span>
|
||||
`)
|
||||
|
||||
document.querySelector('#tab-content-wrapper')?.insertAdjacentHTML('beforeend', `
|
||||
<div id="tab-content-news" class="tab-content">
|
||||
<div id="news" class="tab-content-inner">
|
||||
Loading..
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
|
||||
const tabNews = document.querySelector('#tab-news')
|
||||
if (tabNews) {
|
||||
linkTabContents(tabNews)
|
||||
}
|
||||
const news = document.querySelector('#news')
|
||||
if (!news) {
|
||||
// news tab not found, dont exec plugin code.
|
||||
return
|
||||
}
|
||||
|
||||
document.querySelector('body').insertAdjacentHTML('beforeend', `
|
||||
<style>
|
||||
createTab({
|
||||
id: 'news',
|
||||
icon: 'fa-bolt',
|
||||
label: "What's new",
|
||||
css: `
|
||||
#tab-content-news .tab-content-inner {
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
padding: 10pt;
|
||||
}
|
||||
</style>
|
||||
`)
|
||||
`,
|
||||
onOpen: async ({ firstOpen }) => {
|
||||
if (firstOpen) {
|
||||
const loadMarkedScriptPromise = loadScript('/media/js/marked.min.js')
|
||||
|
||||
loadScript('/media/js/marked.min.js').then(async function() {
|
||||
let appConfig = await fetch('/get/app_config')
|
||||
if (!appConfig.ok) {
|
||||
console.error('[release-notes] Failed to get app_config.')
|
||||
@ -59,6 +39,11 @@
|
||||
return
|
||||
}
|
||||
releaseNotes = await releaseNotes.text()
|
||||
news.innerHTML = marked.parse(releaseNotes)
|
||||
|
||||
await loadMarkedScriptPromise
|
||||
|
||||
return marked.parse(releaseNotes)
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
Loading…
Reference in New Issue
Block a user