Kamran Ahmed
2 years ago
parent
426fe44dc8
commit
f4635d794f
3 changed files with 36 additions and 458 deletions
@ -1,82 +0,0 @@ |
||||
--- |
||||
import Icon from '../AstroIcon.astro'; |
||||
import Loader from '../Loader.astro'; |
||||
|
||||
export interface Props { |
||||
contentContributionLink: string; |
||||
} |
||||
|
||||
const { contentContributionLink } = Astro.props; |
||||
--- |
||||
|
||||
<div id='topic-overlay' class='hidden'> |
||||
<div |
||||
class='fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6' |
||||
tabindex='-1' |
||||
id='topic-body' |
||||
> |
||||
<div id='topic-loader' class='hidden'> |
||||
<Loader /> |
||||
</div> |
||||
|
||||
<div id='topic-actions' class='mb-2 hidden'> |
||||
<div data-guest-required class='hidden'> |
||||
<button |
||||
data-popup='login-popup' |
||||
class='inline-flex items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700' |
||||
> |
||||
<Icon icon='check' /> |
||||
<span class='ml-2'>Done</span> |
||||
</button> |
||||
</div> |
||||
|
||||
<div data-auth-required> |
||||
<button |
||||
id='mark-topic-done' |
||||
class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700' |
||||
> |
||||
<Icon icon='check' /> |
||||
<span class='ml-2'>Done</span> |
||||
</button> |
||||
|
||||
<button |
||||
id='mark-topic-pending' |
||||
class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700' |
||||
> |
||||
<Icon icon='reset' /> |
||||
<span class='ml-2'>Pending</span> |
||||
</button> |
||||
</div> |
||||
|
||||
<button |
||||
type='button' |
||||
id='close-topic' |
||||
class='absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900' |
||||
> |
||||
<Icon icon='close' /> |
||||
</button> |
||||
</div> |
||||
|
||||
<div |
||||
id='topic-content' |
||||
class='prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5' |
||||
> |
||||
</div> |
||||
|
||||
<p |
||||
id='contrib-meta' |
||||
class='mt-10 hidden border-t pt-3 text-sm text-gray-400' |
||||
> |
||||
We are still working on this page. You can contribute by submitting a |
||||
brief description and a few links to learn more about this topic <a |
||||
target='_blank' |
||||
class='text-blue-700 underline' |
||||
href={contentContributionLink}>on GitHub repository.</a |
||||
>. |
||||
</p> |
||||
</div> |
||||
<div class='fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80'> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src='./topic.js'></script> |
||||
@ -1,331 +0,0 @@ |
||||
export class Topic { |
||||
constructor() { |
||||
this.overlayId = 'topic-overlay'; |
||||
this.contentId = 'topic-content'; |
||||
this.loaderId = 'topic-loader'; |
||||
this.topicBodyId = 'topic-body'; |
||||
this.topicActionsId = 'topic-actions'; |
||||
this.markTopicDoneId = 'mark-topic-done'; |
||||
this.markTopicPendingId = 'mark-topic-pending'; |
||||
this.closeTopicId = 'close-topic'; |
||||
this.contributionTextId = 'contrib-meta'; |
||||
|
||||
this.activeResourceType = null; |
||||
this.activeResourceId = null; |
||||
this.activeTopicId = null; |
||||
|
||||
this.handleRoadmapTopicClick = this.handleRoadmapTopicClick.bind(this); |
||||
this.handleBestPracticeTopicClick = |
||||
this.handleBestPracticeTopicClick.bind(this); |
||||
this.handleBestPracticeTopicToggle = |
||||
this.handleBestPracticeTopicToggle.bind(this); |
||||
this.handleBestPracticeTopicPending = |
||||
this.handleBestPracticeTopicPending.bind(this); |
||||
|
||||
this.close = this.close.bind(this); |
||||
this.resetDOM = this.resetDOM.bind(this); |
||||
this.populate = this.populate.bind(this); |
||||
this.handleOverlayClick = this.handleOverlayClick.bind(this); |
||||
this.markAsDone = this.markAsDone.bind(this); |
||||
this.markAsPending = this.markAsPending.bind(this); |
||||
this.querySvgElementsByTopicId = this.querySvgElementsByTopicId.bind(this); |
||||
this.isTopicDone = this.isTopicDone.bind(this); |
||||
|
||||
this.init = this.init.bind(this); |
||||
} |
||||
|
||||
get loaderEl() { |
||||
return document.getElementById(this.loaderId); |
||||
} |
||||
|
||||
get markTopicDoneEl() { |
||||
return document.getElementById(this.markTopicDoneId); |
||||
} |
||||
|
||||
get markTopicPendingEl() { |
||||
return document.getElementById(this.markTopicPendingId); |
||||
} |
||||
|
||||
get topicActionsEl() { |
||||
return document.getElementById(this.topicActionsId); |
||||
} |
||||
|
||||
get contributionTextEl() { |
||||
return document.getElementById(this.contributionTextId); |
||||
} |
||||
|
||||
get contentEl() { |
||||
return document.getElementById(this.contentId); |
||||
} |
||||
|
||||
get overlayEl() { |
||||
return document.getElementById(this.overlayId); |
||||
} |
||||
|
||||
resetDOM(hideOverlay = false) { |
||||
if (hideOverlay) { |
||||
this.overlayEl.classList.add('hidden'); |
||||
} else { |
||||
this.overlayEl.classList.remove('hidden'); |
||||
} |
||||
|
||||
this.loaderEl.classList.remove('hidden'); // Show loader
|
||||
this.topicActionsEl.classList.add('hidden'); // Hide Actions
|
||||
this.contributionTextEl.classList.add('hidden'); // Hide contribution text
|
||||
this.contentEl.replaceChildren(''); // Remove content
|
||||
} |
||||
|
||||
close() { |
||||
this.resetDOM(true); |
||||
|
||||
this.activeResourceId = null; |
||||
this.activeTopicId = null; |
||||
} |
||||
|
||||
isTopicDone(topicId) { |
||||
const normalizedGroup = topicId.replace(/^\d+-/, ''); |
||||
const el = document.querySelector(`[data-group-id$="-${normalizedGroup}"]`); |
||||
return el?.classList.contains('done'); |
||||
} |
||||
|
||||
/** |
||||
* @param {string | HTMLElement} html |
||||
*/ |
||||
populate(html) { |
||||
this.contentEl.replaceChildren(html); |
||||
this.loaderEl.classList.add('hidden'); |
||||
this.topicActionsEl.classList.remove('hidden'); |
||||
this.contributionTextEl.classList.remove('hidden'); |
||||
|
||||
const isDone = this.isTopicDone(this.activeTopicId); |
||||
|
||||
if (isDone) { |
||||
this.markTopicDoneEl.classList.add('hidden'); |
||||
this.markTopicPendingEl.classList.remove('hidden'); |
||||
} else { |
||||
this.markTopicDoneEl.classList.remove('hidden'); |
||||
this.markTopicPendingEl.classList.add('hidden'); |
||||
} |
||||
} |
||||
|
||||
renderTopicFromUrl(url) { |
||||
return fetch(url) |
||||
.then((res) => { |
||||
return res.text(); |
||||
}) |
||||
.then((topicHtml) => { |
||||
// It's full HTML with page body, head etc.
|
||||
// We only need the inner HTML of the #main-content
|
||||
const node = new DOMParser().parseFromString(topicHtml, 'text/html'); |
||||
|
||||
return node.getElementById('main-content'); |
||||
}) |
||||
.then((content) => { |
||||
this.populate(content); |
||||
}) |
||||
.catch((e) => { |
||||
console.error(e); |
||||
this.populate('Error loading the content!'); |
||||
}); |
||||
} |
||||
|
||||
handleBestPracticeTopicToggle(e) { |
||||
const { resourceId: bestPracticeId, topicId } = e.detail; |
||||
if (!topicId || !bestPracticeId) { |
||||
console.log('Missing topic or bestPracticeId: ', e.detail); |
||||
return; |
||||
} |
||||
|
||||
const isDone = localStorage.getItem(topicId) === 'done'; |
||||
if (isDone) { |
||||
this.markAsPending(topicId, bestPracticeId, 'best-practice'); |
||||
} else { |
||||
this.markAsDone(topicId, bestPracticeId, 'best-practice'); |
||||
} |
||||
} |
||||
|
||||
handleBestPracticeTopicPending(e) { |
||||
const { resourceId: bestPracticeId, topicId } = e.detail; |
||||
if (!topicId || !bestPracticeId) { |
||||
console.log('Missing topic or bestPracticeId: ', e.detail); |
||||
return; |
||||
} |
||||
|
||||
this.markAsPending(topicId, bestPracticeId, 'best-practice'); |
||||
} |
||||
|
||||
handleBestPracticeTopicClick(e) { |
||||
const { resourceId: bestPracticeId, topicId } = e.detail; |
||||
if (!topicId || !bestPracticeId) { |
||||
console.log('Missing topic or bestPracticeId: ', e.detail); |
||||
return; |
||||
} |
||||
|
||||
this.activeResourceType = 'best-practice'; |
||||
this.activeResourceId = bestPracticeId; |
||||
this.activeTopicId = topicId; |
||||
|
||||
this.resetDOM(); |
||||
|
||||
const topicUrl = `/best-practices/${bestPracticeId}/${topicId.replaceAll( |
||||
':', |
||||
'/' |
||||
)}`;
|
||||
|
||||
this.renderTopicFromUrl(topicUrl).then(() => null); |
||||
} |
||||
|
||||
handleRoadmapTopicClick(e) { |
||||
const { resourceId: roadmapId, topicId } = e.detail; |
||||
if (!topicId || !roadmapId) { |
||||
console.log('Missing topic or roadmap: ', e.detail); |
||||
return; |
||||
} |
||||
|
||||
this.activeResourceType = 'roadmap'; |
||||
this.activeResourceId = roadmapId; |
||||
this.activeTopicId = topicId; |
||||
|
||||
this.resetDOM(); |
||||
const topicUrl = `/${roadmapId}/${topicId.replaceAll(':', '/')}`; |
||||
|
||||
window.fireEvent({ |
||||
category: `RoadmapClick`, |
||||
action: `${roadmapId}/load-topic`, |
||||
label: topicUrl, |
||||
}); |
||||
|
||||
this.renderTopicFromUrl(topicUrl).then(() => null); |
||||
} |
||||
|
||||
querySvgElementsByTopicId(topicId) { |
||||
const matchingElements = []; |
||||
|
||||
// Elements having sort order in the beginning of the group id
|
||||
document |
||||
.querySelectorAll(`[data-group-id$="-${topicId}"]`) |
||||
.forEach((element) => { |
||||
const foundGroupId = element?.dataset?.groupId || ''; |
||||
const validGroupRegex = new RegExp(`^\\d+-${topicId}$`); |
||||
|
||||
if (validGroupRegex.test(foundGroupId)) { |
||||
matchingElements.push(element); |
||||
} |
||||
}); |
||||
|
||||
// Elements with exact match of the topic id
|
||||
document |
||||
.querySelectorAll(`[data-group-id="${topicId}"]`) |
||||
.forEach((element) => { |
||||
matchingElements.push(element); |
||||
}); |
||||
|
||||
// Matching "check:XXXX" box of the topic
|
||||
document |
||||
.querySelectorAll(`[data-group-id="check:${topicId}"]`) |
||||
.forEach((element) => { |
||||
matchingElements.push(element); |
||||
}); |
||||
|
||||
return matchingElements; |
||||
} |
||||
|
||||
async markAsDone(topicId, resourceId, resourceType) { |
||||
const updatedTopicId = topicId.replace(/^\d+-/, ''); |
||||
|
||||
const { response, error } = {}; |
||||
|
||||
if (response) { |
||||
this.close(); |
||||
this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => { |
||||
item?.classList?.add('done'); |
||||
}); |
||||
} else { |
||||
console.error(error); |
||||
} |
||||
} |
||||
|
||||
async markAsPending(topicId, resourceId, resourceType) { |
||||
const updatedTopicId = topicId.replace(/^\d+-/, ''); |
||||
|
||||
const { response, error } = {}; |
||||
|
||||
if (response) { |
||||
this.close(); |
||||
this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => { |
||||
item?.classList?.remove('done'); |
||||
}); |
||||
} else { |
||||
console.error(error); |
||||
} |
||||
} |
||||
|
||||
handleOverlayClick(e) { |
||||
const isClickedInsideTopic = e.target.closest(`#${this.topicBodyId}`); |
||||
|
||||
if (!isClickedInsideTopic) { |
||||
this.close(); |
||||
return; |
||||
} |
||||
|
||||
const isClickedDone = |
||||
e.target.id === this.markTopicDoneId || |
||||
e.target.closest(`#${this.markTopicDoneId}`); |
||||
if (isClickedDone) { |
||||
this.markAsDone( |
||||
this.activeTopicId, |
||||
this.activeResourceId, |
||||
this.activeResourceType |
||||
); |
||||
// this.close();
|
||||
} |
||||
|
||||
const isClickedPending = |
||||
e.target.id === this.markTopicPendingId || |
||||
e.target.closest(`#${this.markTopicPendingId}`); |
||||
if (isClickedPending) { |
||||
this.markAsPending( |
||||
this.activeTopicId, |
||||
this.activeResourceId, |
||||
this.activeResourceType |
||||
); |
||||
// this.close();
|
||||
} |
||||
|
||||
const isClickedPopupOpener = |
||||
e.target.dataset['popup'] || e.target.closest('button[data-popup]'); |
||||
const isClickedClose = |
||||
e.target.id === this.closeTopicId || |
||||
e.target.closest(`#${this.closeTopicId}`); |
||||
if (isClickedClose || isClickedPopupOpener) { |
||||
this.close(); |
||||
} |
||||
} |
||||
|
||||
init() { |
||||
window.addEventListener( |
||||
'best-practice.topic.click', |
||||
this.handleBestPracticeTopicClick |
||||
); |
||||
window.addEventListener( |
||||
'best-practice.topic.toggle', |
||||
this.handleBestPracticeTopicToggle |
||||
); |
||||
|
||||
window.addEventListener( |
||||
'roadmap.topic.click', |
||||
this.handleRoadmapTopicClick |
||||
); |
||||
|
||||
window.addEventListener('click', this.handleOverlayClick); |
||||
window.addEventListener('keydown', (e) => { |
||||
if (e.key.toLowerCase() === 'escape') { |
||||
this.close(); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
// Initialize the topic loader
|
||||
const topic = new Topic(); |
||||
topic.init(); |
||||
Loading…
Reference in new issue