Skip to content

Commit 1b3a9f0

Browse files
VerzatileDevVerzatileDev
committed
Save PContent Specific To page
Now the Content has a saved value based on the Path of the URL and the ID selected. When page is refreshed or loaded it would load the value if defined by default it should be on " cpp " Wrote comments to be more clear and understandable what each section actually does. Made an " asset " folder to hold the js file. Additionally in the next commit will include Images and CSS into that specified location. Currently Using " OOP and Memory " as placeholders for these examples.
1 parent 6529b9f commit 1b3a9f0

4 files changed

Lines changed: 106 additions & 30 deletions

File tree

‎_layouts/default.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,64 @@
11
---
22
layout: table_wrappers
3+
include_language_switch_script: false
34
---
45

56
<!DOCTYPE html>
67

78
<html lang="{{ site.lang | default: 'en-US' }}">
89
{% include head.html %}
910
<body>
11+
<!-- Skip to main content link for accessibility -->
1012
<a class="skip-to-main" href="#main-content">Skip to main content</a>
13+
14+
<!-- Include icons and sidebar components -->
1115
{% include icons/icons.html %}
1216
{% include components/sidebar.html %}
17+
18+
<!-- Main content section -->
1319
<div class="main" id="top">
1420
{% include components/header.html %}
21+
22+
<!-- Main content wrapper with breadcrumbs -->
1523
<div class="main-content-wrap">
1624
{% include components/breadcrumbs.html %}
25+
26+
<!-- Main content container -->
1727
<div id="main-content" class="main-content">
1828
<main>
29+
<!-- Include anchor headings for heading links -->
1930
{% if site.heading_anchors != false %}
2031
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
2132
{% else %}
2233
{{ content }}
2334
{% endif %}
2435

36+
<!-- Include children navigation if page has children and TOC is enabled -->
2537
{% if page.has_children == true and page.has_toc != false %}
2638
{% include components/children_nav.html %}
2739
{% endif %}
2840
</main>
41+
42+
<!-- Include site footer -->
2943
{% include components/footer.html %}
3044
</div>
3145
</div>
46+
47+
<!-- Include search footer if search is enabled -->
3248
{% if site.search_enabled != false %}
3349
{% include components/search_footer.html %}
3450
{% endif %}
3551
</div>
3652

53+
<!-- Include Mermaid diagrams if enabled -->
3754
{% if site.mermaid %}
3855
{% include components/mermaid.html %}
3956
{% endif %}
57+
58+
<!-- Includes Button switch to change from one Programming Language to another (Must be Enabled Or won't be possible) -->
59+
<!-- To Enable use " include_programming_language_switch_script: true " on .md pages -->
60+
{% if page.include_programming_language_switch_script %}
61+
<script src="{{ '/assets/js/programmingLanguageSwitch.js' | relative_url }}" defer></script>
62+
{% endif %}
4063
</body>
4164
</html>

‎assets/js/programmingLanguageSwitch.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Set the language preference in localStorage and update the displayed content immediately
2+
function setLanguagePreference(language, pagePath) {
3+
// Set language preference in localStorage
4+
localStorage.setItem('languagePreference_' + pagePath, language);
5+
// Update the displayed content based on the selected language
6+
showContent(language, pagePath);
7+
}
8+
9+
// Get the language preference from localStorage
10+
function getLanguagePreference(pagePath) {
11+
return localStorage.getItem('languagePreference_' + pagePath);
12+
}
13+
14+
// Show the content based on the selected language
15+
function showContent(language, pagePath) {
16+
// Map each language to its corresponding content element
17+
var contentMap = {
18+
'cpp': 'cppContent',
19+
'csharp': 'csharpContent',
20+
'python': 'pythonContent'
21+
};
22+
23+
// Iterate over each language in the contentMap
24+
Object.keys(contentMap).forEach(function (key) {
25+
// Get the content element based on the language
26+
var contentElement = document.getElementById(contentMap[key]);
27+
28+
// Check if the content element exists
29+
if (contentElement) {
30+
// Set the display property based on whether it's the selected language
31+
contentElement.style.display = (language === key) ? 'block' : 'none';
32+
}
33+
});
34+
35+
// Log a message indicating the switch to the specified language
36+
console.log(`Switching to ${language} content`);
37+
}
38+
39+
// Perform actions after the DOM has fully loaded
40+
document.addEventListener('DOMContentLoaded', function () {
41+
// Get the current page path
42+
var pagePath = window.location.pathname;
43+
console.log('Page Path:', pagePath);
44+
45+
// Retrieve the saved language preference from localStorage
46+
var savedLanguage = getLanguagePreference(pagePath);
47+
console.log('Saved Language:', savedLanguage);
48+
49+
// If a language preference is saved, update the displayed content
50+
if (savedLanguage) {
51+
showContent(savedLanguage, pagePath);
52+
}
53+
});
54+
55+
// Set the language preference and update the displayed content on button click
56+
function setLanguageAndShowContent(language) {
57+
// Get the current page path
58+
var pagePath = window.location.pathname;
59+
// Set the language preference in localStorage and update the displayed content
60+
setLanguagePreference(language, pagePath);
61+
}

‎docs/Concepts/Memory.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@ title: Memory
44
nav_order: 1
55
parent: Concepts
66
has_children: false
7+
include_programming_language_switch_script: true
78
---
89

910
{{ page.title }}
1011
======================
1112

1213
{% include under_construction.html %}
1314

15+
<div id="cppContent">
16+
<!-- Your default C++ content goes here -->
17+
This is C++ content for Object-Oriented Programming.
18+
</div>
19+
20+
<div id="csharpContent" style="display:none;">
21+
<!-- Your C# content goes here -->
22+
This is C# content for Object-Oriented Programming.
23+
</div>
24+
25+
<button onclick="setLanguageAndShowContent('cpp')">C++</button>
26+
<button onclick="setLanguageAndShowContent('csharp')">C#</button>
27+
1428

1529
<br>
1630

‎docs/Concepts/OOP.md‎

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ title: OOP
44
nav_order: 1
55
parent: Concepts
66
has_children: false
7+
include_programming_language_switch_script: true
78
---
89

910
{{ page.title }}
@@ -21,34 +22,11 @@ has_children: false
2122
This is C# content for Object-Oriented Programming.
2223
</div>
2324

24-
<button onclick="showContent('cpp')">C++</button>
25-
<button onclick="showContent('csharp')">C#</button>
26-
27-
<script>
28-
function setLanguagePreference(language) {
29-
localStorage.setItem('languagePreference', language);
30-
}
31-
32-
function getLanguagePreference() {
33-
return localStorage.getItem('languagePreference');
34-
}
35-
36-
function showContent(language) {
37-
setLanguagePreference(language);
38-
39-
if (language === 'cpp') {
40-
document.getElementById('cppContent').style.display = 'block';
41-
document.getElementById('csharpContent').style.display = 'none';
42-
} else if (language === 'csharp') {
43-
document.getElementById('cppContent').style.display = 'none';
44-
document.getElementById('csharpContent').style.display = 'block';
45-
}
46-
}
25+
<div id="pythonContent" style="display:none;">
26+
<!-- Your C# content goes here -->
27+
This is python content for Object-Oriented Programming.
28+
</div>
4729

48-
document.addEventListener('DOMContentLoaded', function () {
49-
var savedLanguage = getLanguagePreference();
50-
if (savedLanguage) {
51-
showContent(savedLanguage);
52-
}
53-
});
54-
</script>
30+
<button onclick="setLanguageAndShowContent('cpp')">C++</button>
31+
<button onclick="setLanguageAndShowContent('csharp')">C#</button>
32+
<button onclick="setLanguageAndShowContent('python')">Python</button>

0 commit comments

Comments
 (0)