Fix popup not working on roadmaps

pull/3278/head
Kamran Ahmed 2 years ago
parent 18e4804a51
commit fd939f198a
  1. 36
      src/components/InteractiveRoadmap/roadmap.js
  2. 14
      src/components/InteractiveRoadmap/sharer.js
  3. 21
      src/components/MarkdownRoadmap.astro
  4. 5
      src/pages/[roadmapId]/index.astro
  5. 10
      src/roadmaps/backend/content/104-version-control-systems/101-git.md

@ -1,6 +1,6 @@
import { wireframeJSONToSVG } from "roadmap-renderer";
import { Topic } from "./topic";
import { Sharer } from "./sharer";
import { wireframeJSONToSVG } from 'roadmap-renderer';
import { Topic } from './topic';
import { Sharer } from './sharer';
/**
* @typedef {{ roadmapId: string, jsonUrl: string }} RoadmapConfig
@ -11,10 +11,10 @@ export class Roadmap {
* @param {RoadmapConfig} config
*/
constructor() {
this.roadmapId = "";
this.jsonUrl = "";
this.roadmapId = '';
this.jsonUrl = '';
this.containerId = "roadmap-svg";
this.containerId = 'roadmap-svg';
this.init = this.init.bind(this);
this.onDOMLoaded = this.onDOMLoaded.bind(this);
@ -28,10 +28,16 @@ export class Roadmap {
}
prepareConfig() {
if (!this.containerEl) {
return false;
}
const dataset = this.containerEl.dataset;
this.roadmapId = dataset.roadmapId;
this.jsonUrl = dataset.jsonUrl;
return true;
}
/**
@ -40,7 +46,7 @@ export class Roadmap {
*/
fetchRoadmapSvg(jsonUrl) {
if (!jsonUrl) {
console.error("jsonUrl not defined in frontmatter");
console.error('jsonUrl not defined in frontmatter');
return null;
}
@ -50,13 +56,15 @@ export class Roadmap {
})
.then(function (json) {
return wireframeJSONToSVG(json, {
fontURL: "/fonts/balsamiq.woff2",
fontURL: '/fonts/balsamiq.woff2',
});
});
}
onDOMLoaded() {
this.prepareConfig();
if (!this.prepareConfig()) {
return;
}
this.fetchRoadmapSvg(this.jsonUrl)
.then((svg) => {
@ -66,8 +74,8 @@ export class Roadmap {
}
handleRoadmapClick(e) {
const targetGroup = e.target.closest("g") || {};
const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : "";
const targetGroup = e.target.closest('g') || {};
const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : '';
if (!groupId) {
return;
}
@ -75,7 +83,7 @@ export class Roadmap {
e.stopImmediatePropagation();
window.dispatchEvent(
new CustomEvent("topic.click", {
new CustomEvent('topic.click', {
detail: {
topicId: groupId,
roadmapId: this.roadmapId,
@ -85,8 +93,8 @@ export class Roadmap {
}
init() {
window.addEventListener("DOMContentLoaded", this.onDOMLoaded);
window.addEventListener("click", this.handleRoadmapClick);
window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
window.addEventListener('click', this.handleRoadmapClick);
}
}

@ -3,7 +3,7 @@ export class Sharer {
this.init = this.init.bind(this);
this.onScroll = this.onScroll.bind(this);
this.shareIconsId = "page-share-icons";
this.shareIconsId = 'page-share-icons';
}
get shareIconsEl() {
@ -12,14 +12,18 @@ export class Sharer {
onScroll() {
if (window.scrollY < 100 || window.innerWidth < 1050) {
this.shareIconsEl.classList.add("hidden");
this.shareIconsEl.classList.add('hidden');
return null;
}
this.shareIconsEl.classList.remove("hidden");
this.shareIconsEl.classList.remove('hidden');
}
init() {
window.addEventListener("scroll", this.onScroll, { passive: true });
if (!this.shareIconsEl) {
return;
}
window.addEventListener('scroll', this.onScroll, { passive: true });
}
}
}

@ -1,9 +1,24 @@
---
import "../styles/prism.css";
import '../styles/prism.css';
import DownloadPopup from './DownloadPopup.astro';
import ShareIcons from './ShareIcons.astro';
import SubscribePopup from './SubscribePopup.astro';
export interface Props {
roadmapId: string;
description: string;
}
const { roadmapId, description } = Astro.props;
---
<div class="bg-gray-50 py-4 sm:py-10">
<div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5">
<div class='bg-gray-50 py-4 sm:py-10'>
<div
class='container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 relative prose-code:text-white'
>
<DownloadPopup />
<SubscribePopup />
<slot />
</div>
</div>

@ -53,7 +53,10 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
{
!roadmapData.isUpcoming && !roadmapData.jsonUrl && (
<MarkdownRoadmap>
<MarkdownRoadmap
roadmapId={roadmapId}
description={roadmapData.description}
>
<roadmapFile.Content />
</MarkdownRoadmap>
)

@ -0,0 +1,10 @@
# Git
[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Visit the following resources to learn more:
- [Learn Git on the command line](https://github.com/jlord/git-it-electron)
- [Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg)
- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)
- [Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21)
Loading…
Cancel
Save