Skip to content

Commit c0a313d

Browse files
PrajwolAmatyaPrajwolAmatya
committed
add templates
1 parent 973240e commit c0a313d

File tree

9 files changed

+488
-1
lines changed

9 files changed

+488
-1
lines changed

‎public/templates/about-us-template.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="title">
4+
<h1>
5+
6+
{{{ title }}}
7+
8+
</h1>
9+
<div class="logo">
10+
<img src="{{{ metadata.logo }}}" alt="Logo">
11+
</div>
12+
</div>
13+
14+
<div class="content-wrapper">
15+
<div class="content">
16+
<div class="about-us-text">
17+
18+
{{{ content }}}
19+
20+
</div>
21+
<div class="info-section">
22+
<div class="info-box">
23+
<h3>Mission</h3>
24+
<p>{{{ metadata.mission }}}</p>
25+
</div>
26+
27+
<div class="divider"></div>
28+
29+
<div class="info-box">
30+
<h3>Vision</h3>
31+
<p>{{{ metadata.vision }}}</p>
32+
</div>
33+
34+
<div class="divider"></div>
35+
36+
<div class="info-box">
37+
<h3>Values</h3>
38+
<p>{{{ metadata.values }}}</p>
39+
</div>
40+
</div>
41+
42+
</div>
43+
</div>
44+
</div>
45+
<footer>
46+
<div class="footer-content">This is footer</div>
47+
<div class="custom-slide-number"></div>
48+
</footer>
49+
</script>

‎public/templates/assets/logo.png‎

6.72 KB
Loading

‎public/templates/assets/logo.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎public/templates/assets/reveal-black-text-sticker.png‎

27.2 KB
Loading

‎public/templates/cover-template.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="logo">
4+
<img src="{{{ metadata.logo }}}" alt="Logo">
5+
</div>
6+
7+
<div class="content">
8+
<h1>{{{ title }}}</h1>
9+
10+
<p>
11+
By: {{{ metadata.presenter }}}
12+
</p>
13+
14+
</div>
15+
</div>
16+
</script>

‎public/templates/title-content-image-template.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="title">
4+
<h1>
5+
6+
{{{ title }}}
7+
8+
</h1>
9+
<div class="logo">
10+
<img src="{{{ metadata.logo }}}" alt="Logo">
11+
</div>
12+
</div>
13+
14+
<div class="content-wrapper">
15+
<div class="content">
16+
17+
{{{ content }}}
18+
19+
</div>
20+
</div>
21+
</div>
22+
<footer>
23+
<div class="footer-content">This is footer</div>
24+
<div class="custom-slide-number"></div>
25+
</footer>
26+
</script>

‎public/templates/title-content-template.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="title">
4+
<h1>
5+
6+
{{{ title }}}
7+
8+
</h1>
9+
<div class="logo">
10+
<img src="{{{ metadata.logo }}}" alt="Logo">
11+
</div>
12+
</div>
13+
14+
<div class="content-wrapper">
15+
<div class="content">
16+
17+
{{{ content }}}
18+
19+
</div>
20+
</div>
21+
</div>
22+
<footer>
23+
<div class="footer-content">This is footer</div>
24+
<div class="custom-slide-number"></div>
25+
</footer>
26+
</script>

‎src/App.vue‎

Lines changed: 146 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import 'reveal.js/dist/reveal.css'
3939
import 'reveal.js/plugin/highlight/monokai.css'
4040
import 'reveal.js/dist/theme/white.css'
4141
import './css/variables.css'
42+
import './css/templates.css'
4243
4344
import { getMediaMimeTypes } from './helpers/mediaMimeTypes'
4445
import { id as appId } from '../public/manifest.json'
@@ -64,6 +65,10 @@ const dataSeparatorVertical = '\r?\n--\r?\n'
6465
const mdImageRegex = /!\[.*\]\((?!(?:http|data))(.*)\)/g
6566
6667
let reveal: Reveal.Api
68+
const awesoMd = RevealAwesoMD()
69+
awesoMd.setBaseUrl(
70+
'https://localhost:9200/assets/apps/com.github.jankaritech.mdpresentation-viewer'
71+
)
6772
6873
const { url } = defineProps({
6974
url: {
@@ -102,7 +107,7 @@ onMounted(async () => {
102107
})
103108
104109
reveal = new Reveal(unref(revealContainer), {
105-
plugins: [RevealAwesoMD, RevealHighlight, RevealMermaid]
110+
plugins: [awesoMd, RevealHighlight, RevealMermaid]
106111
})
107112
108113
await reveal.initialize({
@@ -113,6 +118,25 @@ onMounted(async () => {
113118
controlsLayout: 'edges'
114119
})
115120
121+
if (reveal.isReady()) {
122+
addCustomSlideNumber()
123+
updateImageStructure()
124+
// fitContent()
125+
adjustFontSize()
126+
} else {
127+
reveal.addEventListener('ready', function () {
128+
addCustomSlideNumber()
129+
updateImageStructure()
130+
// fitContent()
131+
adjustFontSize()
132+
})
133+
}
134+
135+
reveal.addEventListener('slidechanged', function () {
136+
// fitContent()
137+
adjustFontSize()
138+
})
139+
116140
isReadyToShow.value = true
117141
})
118142
onBeforeUnmount(() => {
@@ -207,6 +231,127 @@ function dirname(path: string) {
207231
function basename(path: string) {
208232
return path.split('/').reverse()[0]
209233
}
234+
235+
// TEMPLATE RELATED
236+
function addCustomSlideNumber() {
237+
const allSlides = reveal.getSlides()
238+
for (const [slideNumber, slide] of Array.from(allSlides).entries()) {
239+
const customSlideNumber = slide.querySelector('.custom-slide-number')
240+
if (!customSlideNumber) {
241+
continue
242+
}
243+
customSlideNumber.textContent = `${slideNumber + 1}`
244+
}
245+
}
246+
function updateImageStructure() {
247+
const pTags = document.querySelectorAll('p > img')
248+
pTags.forEach((img) => {
249+
const pTag = img.parentNode
250+
const divContainer = document.createElement('div')
251+
divContainer.classList.add('image-container')
252+
const divWrapper = document.createElement('div')
253+
divWrapper.classList.add('image-wrapper')
254+
divWrapper.appendChild(img)
255+
// const creditWrapper = document.createElement('div')
256+
// creditWrapper.classList.add('image-credit')
257+
// const credit = document.createElement('p')
258+
// credit.textContent = getImageMetadata(img.alt)
259+
// creditWrapper.appendChild(credit)
260+
// divWrapper.appendChild(creditWrapper)
261+
divContainer.appendChild(divWrapper)
262+
// pTag.replaceWith(divContainer)
263+
pTag.parentNode?.replaceChild(divContainer, pTag)
264+
})
265+
}
266+
function adjustFontSize() {
267+
const currentSlide = reveal.getCurrentSlide()
268+
269+
function getTotalHeightOfChildren(container) {
270+
let totalHeight = 0
271+
for (const child of container.children) {
272+
if (currentSlide.classList.contains('title-content-image')) {
273+
if (child.className !== 'image-container') {
274+
totalHeight += getHeightWithMargin(child)
275+
}
276+
} else {
277+
totalHeight += getHeightWithMargin(child)
278+
}
279+
}
280+
return totalHeight
281+
}
282+
283+
function getHeightWithMargin(element) {
284+
const style = getComputedStyle(element)
285+
const marginTop = parseFloat(style.marginTop)
286+
const marginBottom = parseFloat(style.marginBottom)
287+
const paddingTop = parseFloat(style.paddingTop)
288+
const paddingBottom = parseFloat(style.paddingBottom)
289+
return element.offsetHeight + marginTop + marginBottom + paddingTop + paddingBottom
290+
}
291+
292+
const contentWrapper = currentSlide.querySelector('.content-wrapper') as HTMLElement
293+
const content = currentSlide.querySelector('.content') as HTMLElement
294+
295+
if (!contentWrapper || !content) return
296+
297+
const contentWrapperHeight = contentWrapper.offsetHeight
298+
let totalHeight = getTotalHeightOfChildren(content)
299+
300+
// set minimum font size from where the image starts to get reduced as well
301+
// this is to prevent the font size to get too small and becomes hard to read
302+
const fontSizeToStartReducingImage = 12
303+
let fontSize = parseFloat(getComputedStyle(content).fontSize)
304+
305+
while (totalHeight > contentWrapperHeight) {
306+
const scaleFactor = contentWrapperHeight / totalHeight
307+
fontSize = Math.floor(scaleFactor * fontSize)
308+
309+
const wrapperElements = Array.from(content.children) as HTMLElement[]
310+
wrapperElements.forEach((wrapperElement) => {
311+
wrapperElement.style.fontSize = `${fontSize}px`
312+
const style = getComputedStyle(wrapperElement)
313+
const marginTop = Math.floor(parseFloat(style.marginTop) * scaleFactor)
314+
const marginBottom = Math.floor(parseFloat(style.marginBottom) * scaleFactor)
315+
wrapperElement.style.marginTop = `${marginTop}px`
316+
wrapperElement.style.marginBottom = `${marginBottom}px`
317+
})
318+
319+
// reduce image size if font size gets smaller than minimum font size
320+
const images = content.querySelectorAll(
321+
'.image-container .image-wrapper img'
322+
) as NodeListOf<HTMLImageElement>
323+
if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
324+
images.forEach((image) => {
325+
const currentWidth = image.offsetWidth
326+
const currentHeight = image.offsetHeight
327+
image.style.width = `${Math.floor(currentWidth * scaleFactor)}px`
328+
image.style.height = `${Math.floor(currentHeight * scaleFactor)}px`
329+
})
330+
}
331+
totalHeight = getTotalHeightOfChildren(content)
332+
}
333+
}
334+
function fitContent() {
335+
const images = document.querySelectorAll('img')
336+
let imagesLoaded = 0
337+
338+
images.forEach((img) => {
339+
if (img.complete) {
340+
imagesLoaded++
341+
} else {
342+
img.addEventListener('load', () => {
343+
imagesLoaded++
344+
if (imagesLoaded === images.length) {
345+
adjustFontSize()
346+
}
347+
})
348+
}
349+
})
350+
351+
if (images.length === 0) {
352+
adjustFontSize()
353+
}
354+
}
210355
</script>
211356

212357
<style lang="scss">

0 commit comments

Comments
 (0)