Skip to content

Move inline JavaScript into dedicated asset files #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Move inline JavaScript into dedicated asset files #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 0 additions & 73 deletions input/Search.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,76 +10,3 @@ ShowInNavigation: false
</form>

<div id="search-results"></div>

@section Scripts
{
<script>
function runSearch(query) {
// Clear previous search results
$("#search-results").empty();

// If the search term is less than 2 characters, wait until the user types some more stuff
if (query.length < 2)
{
return;
}

// Update the URL so that the user can come back to these results
var url = new URL(window.location.href);
url.searchParams.set("query", query);
window.history.replaceState(url.href, "", url.href);

// Tell Lunr to run the search
search.search(query, function(results)
{
// Set up for scroll to text fragment on results links
// https://github.com/WICG/scroll-to-text-fragment
var highlight = "#:~:" + query.split(" ").map(term => {
if(term.includes("^"))
term = term.slice(0, term.indexOf("^"));
if(term.includes("~"))
term = term.slice(0, term.indexOf("~"));
if(term.includes(":"))
term = term.slice(term.indexOf(":")+1);
return "text=" + term.replace("*", "").replace("+", "").replace("-", "");
}).join("&");

// Prepare output formatting
var listHtml = "<ul>";
if (results.length == 0)
{
listHtml += "<li>No results found</li>";
}
else
{
for (var i = 0; i < results.length; ++i)
{
var res = results[i];
listHtml += `
<div class="p-3 mb-2 bg-light page-box">
<h4><a href="${res.link}${highlight}">${res.title}</a></h4>
<div class="font-size-sm">${res.excerpt}</div>
</div>
`;
}
}
listHtml += "</ul>";
$("#search-results").append(listHtml);
});
}
$(document).ready(function() {
// Hook into changes on the search box
$("#search").on('input propertychange paste', function() {
runSearch($("#search").val());
});

// If the URL contains a search parameter, do that search now
const urlParams = new URLSearchParams(window.location.search);
const queryParam = urlParams.get('query');
if (queryParam) {
$("#search").val(queryParam);
runSearch($("#search").val());
}
});
</script>
}
122 changes: 2 additions & 120 deletions input/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,15 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js" data-no-mirror></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js"></script>
<script src="@Context.GetLink("/assets/js/docable.js")" defer></script>

<!-- Lunr search -->
@if (Context.GetBool(WebKeys.GenerateSearchIndex))
{
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lunr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pako_inflate.min.js"></script>
<script src="@(Context.GetLink(Context.GetPath(WebKeys.SearchScriptPath, "search.js")))"></script>
<script src="@Context.GetLink("/assets/js/search.js")" defer></script>
}

@await RenderSectionAsync(SectionNames.Head, false)
Expand Down Expand Up @@ -231,126 +233,6 @@
</div>
</div>

<!-- Scripts -->
<script>
$(document).ready(function() {
quicklink.listen();

// Bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip();

// Keeps the sidebars in view on wider viewports
let left = null;
let leftParent = null;
let right = null;
let rightParent = null;
function stickSidebars()
{
if (left == null) {
left = $('#left-sidebar');
right = $('#right-sidebar');
}
if (left.length) {
if (window.innerWidth >= 768) {
if (leftParent == null) {
leftParent = left.parent()[0];
}
if (leftParent) {
let leftRect = leftParent.getBoundingClientRect();
stickSidebar(left, leftRect);
}
} else {
left.css('position', 'relative');
if (left.css('bottom') != 0) {
left.css('bottom', '0');
}
}
}
if (right.length) {
if (window.innerWidth >= 768) {
if (rightParent == null) {
rightParent = right.parent()[0];
}
if (rightParent) {
let rightRect = rightParent.getBoundingClientRect();
stickSidebar(right, rightRect);
}
} else {
right.css('position', 'relative');
if (right.css('bottom') != 0) {
right.css('bottom', '0');
}
}
}
}
function stickSidebar(sidebar, rect) {
// Bottom
if (rect.bottom > window.innerHeight) {
sidebar.css('bottom', rect.bottom - window.innerHeight + "px");
} else {
sidebar.css('bottom', 0);
}
// Top
if (rect.top < 0) {
sidebar.css('position', 'sticky');
} else {
sidebar.css('position', 'absolute');
}
}
$(window).on("load", function() {
stickSidebars();
});
$(window).scroll(function() {
stickSidebars();
});
$(window).resize(function() {
stickSidebars();
})

// Mermaid diagrams
mermaid.initialize(
{
flowchart:
{
useMaxWidth: false
},
startOnLoad: false,
cloneCssStyles: false
});
mermaid.init(undefined, ".mermaid");

// Remove the max-width setting that Mermaid sets
var mermaidSvg = $('.mermaid svg');
mermaidSvg.addClass('img-fluid');
mermaidSvg.css('max-width', '');

// Make it scrollable
var target = document.querySelector(".mermaid svg");
if(target !== null)
{
var panZoom = window.panZoom = svgPanZoom(target, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
maxZoom: 20,
zoomScaleSensitivity: 0.6
});

// Do the reset once right away to fit the diagram
panZoom.resize();
panZoom.fit();
panZoom.center();

$(window).resize(function(){
panZoom.resize();
panZoom.fit();
panZoom.center();
});
}
});
</script>

@await RenderSectionAsync(SectionNames.Scripts, false)

@await Html.PartialAsync("_Scripts")
Expand Down
116 changes: 116 additions & 0 deletions input/assets/js/docable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
$(document).ready(function() {
quicklink.listen();

// Bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip();

// Keeps the sidebars in view on wider viewports
let left = null;
let leftParent = null;
let right = null;
let rightParent = null;
function stickSidebars()
{
if (left == null) {
left = $('#left-sidebar');
right = $('#right-sidebar');
}
if (left.length) {
if (window.innerWidth >= 768) {
if (leftParent == null) {
leftParent = left.parent()[0];
}
if (leftParent) {
let leftRect = leftParent.getBoundingClientRect();
stickSidebar(left, leftRect);
}
} else {
left.css('position', 'relative');
if (left.css('bottom') != 0) {
left.css('bottom', '0');
}
}
}
if (right.length) {
if (window.innerWidth >= 768) {
if (rightParent == null) {
rightParent = right.parent()[0];
}
if (rightParent) {
let rightRect = rightParent.getBoundingClientRect();
stickSidebar(right, rightRect);
}
} else {
right.css('position', 'relative');
if (right.css('bottom') != 0) {
right.css('bottom', '0');
}
}
}
}
function stickSidebar(sidebar, rect) {
// Bottom
if (rect.bottom > window.innerHeight) {
sidebar.css('bottom', rect.bottom - window.innerHeight + "px");
} else {
sidebar.css('bottom', 0);
}
// Top
if (rect.top < 0) {
sidebar.css('position', 'sticky');
} else {
sidebar.css('position', 'absolute');
}
}
$(window).on("load", function() {
stickSidebars();
});
$(window).scroll(function() {
stickSidebars();
});
$(window).resize(function() {
stickSidebars();
})

// Mermaid diagrams
mermaid.initialize(
{
flowchart:
{
useMaxWidth: false
},
startOnLoad: false,
cloneCssStyles: false
});
mermaid.init(undefined, ".mermaid");

// Remove the max-width setting that Mermaid sets
var mermaidSvg = $('.mermaid svg');
mermaidSvg.addClass('img-fluid');
mermaidSvg.css('max-width', '');

// Make it scrollable
var target = document.querySelector(".mermaid svg");
if(target !== null)
{
var panZoom = window.panZoom = svgPanZoom(target, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
maxZoom: 20,
zoomScaleSensitivity: 0.6
});

// Do the reset once right away to fit the diagram
panZoom.resize();
panZoom.fit();
panZoom.center();

$(window).resize(function(){
panZoom.resize();
panZoom.fit();
panZoom.center();
});
}
});
Loading