Goldenwere/mackenzii
Goldenwere/mackenzii
1
0
Fork 0
Code Activity Actions

remove dl inflator

Browse source
This commit is contained in:
lightling 2024-05-13 17:40:43 -04:00
parent cc0e8ae299
commit 15e4d822a1
2 changed files with 1 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
projects/frontend/src/components/inflators/descriptionList.ts
View file

@ -1,77 +0,0 @@
import type { ProjectListingInfo } from '@goldenwere/static-web-templates-types'
/**
* Queries for description list nodes and inflates them with extra functionality
* @param _window the reference to the window
*/
export const inflateDescriptionListEmbeds = (_projectInfo?: ProjectListingInfo) => {
document.querySelectorAll('dl:not(.no-inflate)').forEach((_element) => {
new DescriptionListElement(_element as HTMLDListElement, _projectInfo)
})
}
/**
* Inflates description list elements with extra functionality, namely tags and time period
*/
export class DescriptionListElement {
element: HTMLDListElement
constructor(_element: HTMLDListElement, _projectInfo?: ProjectListingInfo) {
this.element = _element
// if (!!_projectInfo) {
// this._inflatePeriod(_projectInfo)
// }
this._inflateTags()
}
// /**
// * Searches for the presence of a .period element wrapping around <dt> and <dd>,
// * and inflates the inner <dd> element by replacing the first instance of $PERIOD with formatted period
// * @param _projectInfo the project info in which the project's time period is defined.
// */
// _inflatePeriod = (_projectInfo: ProjectListingInfo) => {
// const periodWrapper = this.element.querySelector('.period')
// if (!!periodWrapper) {
// if (!!_projectInfo.period) {
// const periodDescriptionElement = periodWrapper.querySelector('dd')
// if (!!periodDescriptionElement) {
// periodDescriptionElement.innerHTML = periodDescriptionElement.innerHTML.replace('$PERIOD', getFormattedPeriod(_projectInfo.period))
// } else {
// console.warn('Found a .period element but not an inner dd element to format on. The .period class should be on a div wrapping around <dt> and <dd>')
// }
// } else {
// console.warn('Found a .period element but the project information is missing a period.')
// }
// }
// }
/**
* Searches for the presence of a .tags element wrapping around <dt> and <dd>,
* and inflates the inner <dd> element by replacing the inner key-value JSON object with an array of span elements,
* where the span's inner text corresponds to the keys of the JSON object,
* and the span's class corresponds to the values of the JSON object.
*/
_inflateTags = () => {
const tagsWrapper = this.element.querySelector('.tags')
if (!!tagsWrapper) {
let originalContent: { [key: string]: string } = { }
try {
const tagsDescriptionElement = tagsWrapper.querySelector('dd')
if (!!tagsDescriptionElement) {
originalContent = JSON.parse(tagsDescriptionElement.innerHTML)
const formattedText = Object.keys(originalContent).map((key) => (
`<span class="tag ${originalContent[key]}">${key}</span>`
)).join('')
tagsDescriptionElement.innerHTML = formattedText
} else {
console.warn('Found a .tags element but not an inner dd element to format on. The .tags class should be on a div wrapping around <dt> and <dd>.')
}
} catch (err) {
console.error('Found a .tags element but the inner dd element was improperly formatted. The <dd> element should contain a valid JSON object.')
console.error(originalContent)
console.error(err)
}
}
}
}

6
projects/frontend/src/components/inflators/embed.ts
View file

@ -1,6 +1,3 @@
import type { ProjectListingInfo } from '@goldenwere/static-web-templates-types'
import { inflateDescriptionListEmbeds } from './descriptionList'
import { inflateDetailsElements } from './details'
import { inflateImageEmbeds } from './image'
import { inflateVideoEmbeds } from './video'
@ -9,8 +6,7 @@ import { inflateVideoEmbeds } from './video'
* Inflates various supported embeds
* @param _window the reference to the window
*/
export const inflateEmbeds = (_projectInfo?: ProjectListingInfo) => {
inflateDescriptionListEmbeds(_projectInfo)
export const inflateEmbeds = () => {
inflateDetailsElements()
inflateImageEmbeds()
inflateVideoEmbeds()