210 lines
9.6 KiB
HTML
210 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
layout:decorate="~{fragments/layout}">
|
|
|
|
<head>
|
|
<title th:text="${post.title} + ' | UMass Amherst'">Post Title | UMass Amherst</title>
|
|
<meta name="description" th:content="${post.metaDescription ?: post.excerpt}">
|
|
</head>
|
|
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<style th:if="${post != null and post.customCss != null and !post.customCss.empty}" th:utext="${post.customCss}"></style>
|
|
<script th:if="${post != null and post.customJs != null and !post.customJs.empty}" th:utext="${post.customJs}"></script>
|
|
<div id="block-umass-base-content" class="block block-system block-system-main-block tc--template-container tc--article">
|
|
<div class="t--template t--article">
|
|
|
|
<!-- Content Top (e.g. Hero Image & Title) -->
|
|
<div class="content-top">
|
|
<div class="lc--layout-container lc--full">
|
|
<div class="l--layout l--full">
|
|
<div class="lr--layout-region lr--main">
|
|
<div class="cc--component-container cc--hero-article">
|
|
<div class="c--component c--hero-article">
|
|
<div class="f--field f--image" th:if="${post.featuredImage != null and !post.featuredImage.isEmpty()}">
|
|
<img th:src="${post.featuredImage}" th:alt="${post.title}" style="width:100%; object-fit:cover;">
|
|
</div>
|
|
<h1 class="f--field f--title text-center" th:text="${post.title}">Post Title</h1>
|
|
<p class="f--field f--date text-center" th:if="${formattedDate != null}" th:text="${formattedDate}">Date</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Main (Full Width) -->
|
|
<div class="content-main">
|
|
<div class="lc--layout-container lc--full">
|
|
<div class="l--layout l--full">
|
|
<div class="lr--layout-region lr--main">
|
|
<section class="cc--component-container cc--wysiwyg">
|
|
<div class="c--component c--wysiwyg">
|
|
<div class="f--field f--wysiwyg editorjs-content" id="postContentRaw" style="display:none;" th:text="${post.content}"></div>
|
|
<div class="f--field f--wysiwyg" id="postContentParsed"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var rawData = document.getElementById("postContentRaw").textContent;
|
|
var parsedContainer = document.getElementById("postContentParsed");
|
|
try {
|
|
var data = JSON.parse(rawData);
|
|
var html = "";
|
|
if (data.blocks) {
|
|
|
|
var inTabs = false;
|
|
var tabsGroup = null;
|
|
|
|
function renderSingleBlock(block) {
|
|
var html = "";
|
|
switch(block.type) {
|
|
|
|
case "header":
|
|
html += "<h" + block.data.level + ">" + block.data.text + "</h" + block.data.level + ">";
|
|
break;
|
|
case "paragraph":
|
|
html += "<p>" + block.data.text + "</p>";
|
|
break;
|
|
case "image":
|
|
html += "<figure><img src='" + block.data.url + "' alt='" + (block.data.caption || '') + "'><figcaption>" + (block.data.caption || '') + "</figcaption></figure>";
|
|
break;
|
|
case "list":
|
|
var tag = block.data.style === 'ordered' ? 'ol' : 'ul';
|
|
html += "<" + tag + ">";
|
|
block.data.items.forEach(function(item) {
|
|
html += "<li>" + item + "</li>";
|
|
});
|
|
html += "</" + tag + ">";
|
|
break;
|
|
case "quote":
|
|
html += "<blockquote>" + block.data.text + " <cite>" + block.data.caption + "</cite></blockquote>";
|
|
break;
|
|
case "raw":
|
|
html += block.data.html;
|
|
break;
|
|
|
|
case "tabStart":
|
|
case "tabEnd":
|
|
break;
|
|
default:
|
|
console.log("Unknown block type", block.type);
|
|
}
|
|
return html;
|
|
}
|
|
|
|
var blockList = data && data.blocks ? data.blocks : (typeof blocks !== 'undefined' ? blocks : []);
|
|
var finalHtml = "";
|
|
|
|
blockList.forEach(function(block) {
|
|
if (block.type === 'tabStart') {
|
|
if (!inTabs) {
|
|
inTabs = true;
|
|
tabsGroup = { tabs: [] };
|
|
}
|
|
tabsGroup.tabs.push({
|
|
title: block.data.title || 'Tab',
|
|
contentHtml: ''
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (block.type === 'tabEnd') {
|
|
if (inTabs && tabsGroup) {
|
|
inTabs = false;
|
|
var groupHtml = '<div class="custom-tabs-wrapper">';
|
|
groupHtml += '<div class="custom-tabs-nav-container"><div class="tabs-container">';
|
|
tabsGroup.tabs.forEach(function(tab, index) {
|
|
var activeClass = (index === 0) ? 'active' : '';
|
|
groupHtml += '<button class="dao-tao-tab-btn custom-tab-btn ' + activeClass + '" data-tab-idx="' + index + '">' + tab.title + '</button>';
|
|
});
|
|
groupHtml += '</div>';
|
|
|
|
tabsGroup.tabs.forEach(function(tab, index) {
|
|
var displayStyle = (index === 0) ? 'block' : 'none';
|
|
groupHtml += '<div class="dao-tao-tab-panel custom-tab-panel" data-tab-idx="' + index + '" style="display: ' + displayStyle + ';">';
|
|
groupHtml += tab.contentHtml;
|
|
groupHtml += '</div>';
|
|
});
|
|
groupHtml += '</div>';
|
|
finalHtml += groupHtml;
|
|
tabsGroup = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
var blockHtml = renderSingleBlock(block);
|
|
|
|
if (inTabs && tabsGroup && tabsGroup.tabs.length > 0) {
|
|
tabsGroup.tabs[tabsGroup.tabs.length - 1].contentHtml += blockHtml;
|
|
} else {
|
|
finalHtml += blockHtml;
|
|
}
|
|
});
|
|
|
|
if (inTabs && tabsGroup) {
|
|
// Close unclosed tabs at the end
|
|
var groupHtml = '<div class="custom-tabs-wrapper">';
|
|
groupHtml += '<div class="custom-tabs-nav-container"><div class="tabs-container">';
|
|
tabsGroup.tabs.forEach(function(tab, index) {
|
|
var activeClass = (index === 0) ? 'active' : '';
|
|
groupHtml += '<button class="dao-tao-tab-btn custom-tab-btn ' + activeClass + '" data-tab-idx="' + index + '">' + tab.title + '</button>';
|
|
});
|
|
groupHtml += '</div>';
|
|
|
|
tabsGroup.tabs.forEach(function(tab, index) {
|
|
var displayStyle = (index === 0) ? 'block' : 'none';
|
|
groupHtml += '<div class="dao-tao-tab-panel custom-tab-panel" data-tab-idx="' + index + '" style="display: ' + displayStyle + ';">';
|
|
groupHtml += tab.contentHtml;
|
|
groupHtml += '</div>';
|
|
});
|
|
groupHtml += '</div>';
|
|
finalHtml += groupHtml;
|
|
}
|
|
|
|
html = finalHtml;
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('custom-tab-btn')) {
|
|
var btn = e.target;
|
|
var container = btn.closest('.custom-tabs-wrapper');
|
|
if (!container) return;
|
|
var idx = btn.getAttribute('data-tab-idx');
|
|
|
|
container.querySelectorAll('.custom-tab-btn').forEach(function(b) {
|
|
b.classList.remove('active');
|
|
|
|
|
|
});
|
|
btn.classList.add('active');
|
|
|
|
|
|
|
|
container.querySelectorAll('.custom-tab-panel').forEach(function(p) {
|
|
p.style.display = 'none';
|
|
});
|
|
var activePanel = container.querySelector('.custom-tab-panel[data-tab-idx="' + idx + '"]');
|
|
if (activePanel) activePanel.style.display = 'block';
|
|
}
|
|
});
|
|
// Assign back to whatever variable the original script used.
|
|
|
|
}
|
|
parsedContainer.innerHTML = html;
|
|
} catch(e) {
|
|
parsedContainer.innerHTML = rawData;
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|