2033 lines
55 KiB
JavaScript
2033 lines
55 KiB
JavaScript
/// <reference path="jquery.min.js" />
|
|
|
|
/*!
|
|
* Perlite (https://github.com/secure-77/Perlite)
|
|
* Author: sec77 (https://secure77.de)
|
|
* Licensed under MIT (https://github.com/secure-77/Perlite/blob/main/LICENSE)
|
|
*/
|
|
|
|
|
|
//// load default settings
|
|
|
|
// define perlite location on webserver
|
|
//var uriPath = '/perlite/'
|
|
var uriPath = '/'
|
|
|
|
|
|
// define home file
|
|
var homeFile = "README";
|
|
|
|
if ($('#index').data('option')) {
|
|
|
|
homeFile = $('#index').data('option');
|
|
}
|
|
|
|
// disable pophovers
|
|
if ($('#disablePopHovers').data('option') == true && localStorage.getItem("disablePopUp") === null) {
|
|
|
|
$('#disablePopUp').addClass('is-enabled')
|
|
localStorage.setItem('disablePopUp', 'true');
|
|
|
|
}
|
|
|
|
// show toc
|
|
if ($('#showTOC').data('option') == false || localStorage.getItem("showTOC") === false) {
|
|
|
|
localStorage.setItem("showTOC", "false")
|
|
$('#outline').css('display', 'none')
|
|
}
|
|
|
|
if ($('#showLocalGraph').data('option') == false || localStorage.getItem("showLocalGraph") === false) {
|
|
|
|
localStorage.setItem("showLocalGraph", "false")
|
|
$('#localGraph').css('display', 'none')
|
|
}
|
|
|
|
|
|
/**
|
|
* unslugURL
|
|
* @param {String} targetPath
|
|
*/
|
|
function unslugURL(targetPath) {
|
|
|
|
decodedURI = decodeURIComponent(targetPath);
|
|
decodedURI = decodedURI.replaceAll('-', ' ')
|
|
decodedURI = decodedURI.replaceAll('~', '-')
|
|
decodedURI = decodedURI.replaceAll('%80', '~')
|
|
|
|
// when perlite is in subdirectory remove it for content retrieval
|
|
if (decodedURI.startsWith(uriPath)) {
|
|
decodedURI = decodedURI.substring(uriPath.length - 1)
|
|
}
|
|
|
|
return decodedURI;
|
|
}
|
|
|
|
/**
|
|
* slugURL
|
|
* @param {String} targetPath
|
|
*/
|
|
function slugURL(targetPath) {
|
|
|
|
encodedURI = decodeURIComponent(targetPath)
|
|
encodedURI = encodedURI.replaceAll('~', '%80')
|
|
encodedURI = encodedURI.replaceAll('-', '~')
|
|
encodedURI = encodedURI.replaceAll(' ', '-')
|
|
|
|
// remove absolute path
|
|
if (encodedURI.substring(0, 1) == '/') {
|
|
encodedURI = encodedURI.substring(1)
|
|
}
|
|
|
|
// when perlite is in subdirectory remove it for content retrieval
|
|
if (encodedURI.startsWith(uriPath)) {
|
|
encodedURI = encodedURI.substring(uriPath.length - 1)
|
|
}
|
|
|
|
|
|
return encodedURI;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* scroll to anchor
|
|
* @param {String} aid
|
|
*/
|
|
function scrollToAnchor(aid) {
|
|
var aTag = $("a[name='" + aid + "']");
|
|
$('html,body,div').animate({ scrollTop: aTag.offset().top }, 'slow');
|
|
}
|
|
|
|
|
|
/**
|
|
* get markdown content
|
|
* @param {String} str
|
|
* @param {Boolean} home
|
|
* @param {Boolean} popHover
|
|
* @param {String} anchor
|
|
*/
|
|
function getContent(str, home = false, popHover = false, anchor = "") {
|
|
|
|
// reset content if request is empty
|
|
if (str.length == 0) {
|
|
document.getElementById("mdContent").innerHTML = "";
|
|
document.getElementsByClassName("modal-body")[0].innerHTML = "";
|
|
return;
|
|
} else {
|
|
|
|
requestPath = uriPath + "content.php?mdfile=" + str;
|
|
|
|
if (home) {
|
|
if ($("div.no-mobile").css("display") == "none") {
|
|
return
|
|
}
|
|
requestPath = uriPath + "content.php?home";
|
|
|
|
}
|
|
|
|
mdContent = $("#mdContent")[0]
|
|
|
|
|
|
$.ajax({
|
|
url: requestPath, success: function (result) {
|
|
|
|
if (popHover == false) {
|
|
|
|
// set content
|
|
$("#mdContent").html(result);
|
|
|
|
// set word and char count
|
|
$("#wordCount").text($(".wordCount").text() + ' words');
|
|
$("#charCount").text($(".charCount").text() + ' characters');
|
|
|
|
// set Browser, document title and nav path
|
|
var title = $("div.mdTitleHide").first().text();
|
|
if (title) {
|
|
|
|
//hrefTitle = '<a href=?link=' + encodeURIComponent(title) + '>' + title + '</a>'
|
|
title = title.substring(1)
|
|
titleElements = title.split('/')
|
|
title = titleElements.splice(-1)
|
|
parentTitle = titleElements.join(' / ')
|
|
if (parentTitle) {
|
|
parentTitle = parentTitle + ' / ';
|
|
}
|
|
$("div.view-header-title-parent").text(parentTitle);
|
|
$("div.view-header-title").text(title);
|
|
$(".inline-title").text(title);
|
|
|
|
$("title").text(title + ' - ' + $("p.vault").text() + ' - ' + $("p.perliteTitle").text());
|
|
|
|
// set edit button url
|
|
$('.clickable-icon.view-action[aria-label="Click to edit"]')
|
|
.attr("href", "obsidian://open?vault=" + encodeURIComponent($("p.vault").text()) + "&file=" + encodeURIComponent(title))
|
|
}
|
|
|
|
// Outlines
|
|
var toc = "";
|
|
var level = 0;
|
|
|
|
document.getElementById("mdContent").innerHTML =
|
|
document.getElementById("mdContent").innerHTML.replace(
|
|
/<h([\d])>([^<]+)<\/h([\d])>/gi,
|
|
function (str, openLevel, titleText, closeLevel) {
|
|
|
|
if (openLevel != closeLevel) {
|
|
return str;
|
|
}
|
|
if (openLevel > level) {
|
|
toc += (new Array(openLevel - level + 1)).join('<div class="tree-item tree-item-children">');
|
|
} else if (openLevel < level) {
|
|
toc += (new Array(level - openLevel + 1)).join("</div>");
|
|
}
|
|
|
|
level = parseInt(openLevel);
|
|
|
|
var anchor = titleText.replace(/ /g, "_");
|
|
toc += '<div class="tree-item-self is-clickable toc-item"><a href="#' + anchor + '">' + titleText
|
|
+ '</a></div>';
|
|
|
|
return "<h" + openLevel + "><a name='" + anchor + "' >"
|
|
+ "" + "</a>" + titleText + "</h" + closeLevel + ">";
|
|
|
|
}
|
|
);
|
|
|
|
if (level) {
|
|
toc += (new Array(level + 1)).join("</div></div>");
|
|
}
|
|
|
|
document.getElementById("toc").innerHTML = toc;
|
|
|
|
|
|
// add Image Click popup
|
|
$(".pop").on("click", function () {
|
|
|
|
var path = $(this).find("img").attr("src");
|
|
result = '<div class="modal-body imgModalBody"><img src="' + path + '" class="imagepreview"></div>';
|
|
$("#img-content").html(result);
|
|
$(".modal").css("width", "unset");
|
|
$(".modal").css("height", "unset");
|
|
$(".modal").css("max-width", "100%");
|
|
$(".modal").css("max-height", "100%");
|
|
$(".img-modal-title").text("Image preview");
|
|
$("#img-modal").css("display", "flex");
|
|
|
|
});
|
|
|
|
|
|
// trigger graph render on side bar
|
|
renderGraph(false, str);
|
|
|
|
//resize graph on windows rezise
|
|
$(window).resize(function () {
|
|
renderGraph(false, str, false);
|
|
});
|
|
|
|
|
|
// update the url
|
|
if (home == false) {
|
|
|
|
target = slugURL(str)
|
|
window.history.pushState({}, "", location.protocol + '//' + location.host + uriPath + target + anchor);
|
|
|
|
}
|
|
|
|
// add Tag section
|
|
$('#tags').html("")
|
|
$('.tag').each(function (index) {
|
|
const count = index + 1;
|
|
const originalHTML = $(this).prop('outerHTML');
|
|
const countTag = '<div class="tree-item-flair-outer"><span class="tree-item-flair" id="nodeCount">' + count + '</span></div>';
|
|
$('#tags').append(originalHTML);
|
|
});
|
|
|
|
// hide them when no tags are found
|
|
if ($('#tags').html() == "") {
|
|
$('#tags_container').css('display', 'none')
|
|
} else {
|
|
$('#tags_container').css('display', 'block')
|
|
}
|
|
|
|
|
|
// on Tag click -> start search
|
|
$('.tag').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
target = $(e.target);
|
|
$('.workspace-tab-header[data-type="search"]').click();
|
|
$('*[type="search"]').val(this.text);
|
|
search(this.text);
|
|
|
|
// on mobile go to search
|
|
if ($(window).width() < 990) {
|
|
|
|
$('.workspace').addClass('is-left-sidedock-open');
|
|
$('.mod-left-split').removeClass('is-sidedock-collapse');
|
|
$('.mod-left').removeClass('is-collapsed');
|
|
$('.workspace-ribbon.side-dock-ribbon.mod-left').css('display', 'flex');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// Toogle Front Matter Meta Container
|
|
$('.metadata-properties-heading').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if ($('.metadata-container').hasClass('is-collapsed')) {
|
|
$('.metadata-container').removeClass('is-collapsed');
|
|
} else {
|
|
$('.metadata-container').addClass('is-collapsed');
|
|
}
|
|
|
|
});
|
|
|
|
// Toogle Collapsable Callout Container
|
|
$('.callout-fold').on('click', function (e) {
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
target = $(e.target);
|
|
|
|
for (let i = 0; i < 5; i++) {
|
|
if (target.is('.callout', 'is-collapsible')) {
|
|
break;
|
|
}
|
|
target = target.parent()
|
|
}
|
|
|
|
calloutContent = target.find('.callout-content')
|
|
calloutIcon = target.find('.callout-fold')
|
|
|
|
if (calloutContent.hasClass('is-collapsed-callout')) {
|
|
calloutContent.removeClass('is-collapsed-callout');
|
|
} else {
|
|
calloutContent.addClass('is-collapsed-callout');
|
|
}
|
|
|
|
if (calloutIcon.hasClass('is-collapsed')) {
|
|
calloutIcon.removeClass('is-collapsed');
|
|
} else {
|
|
calloutIcon.addClass('is-collapsed');
|
|
}
|
|
|
|
if (target.hasClass('is-collapsed')) {
|
|
target.removeClass('is-collapsed');
|
|
} else {
|
|
target.addClass('is-collapsed');
|
|
}
|
|
|
|
});
|
|
|
|
// popHover (on hover internal links)
|
|
target = $('.disablePopUp')
|
|
|
|
if (!target.hasClass('is-enabled')) {
|
|
|
|
var currentMousePos = { x: -1, y: -1 };
|
|
$(document).mousemove(function (event) {
|
|
currentMousePos.x = event.pageX;
|
|
currentMousePos.y = event.pageY;
|
|
});
|
|
|
|
stopThis = false;
|
|
// enter the hover box
|
|
$('.popover.hover-popover').mouseenter(function (e) {
|
|
stopThis = true
|
|
$('.popover.hover-popover').css('display', 'unset');
|
|
})
|
|
// leave the hover box
|
|
$('.popover.hover-popover').mouseleave(function (e) {
|
|
e.preventDefault();
|
|
|
|
hoverTimer = setTimeout(function () {
|
|
|
|
$('.popover.hover-popover').css('display', 'none');
|
|
stopThis = false;
|
|
|
|
}, 500);
|
|
})
|
|
|
|
// leave the link
|
|
$('.internal-link').mouseleave(function (e) {
|
|
e.preventDefault();
|
|
|
|
hoverTimer = setTimeout(function () {
|
|
|
|
if (stopThis == false) {
|
|
$('.popover.hover-popover').css('display', 'none');
|
|
}
|
|
}, 1200);
|
|
})
|
|
|
|
$('.internal-link').mouseenter(function (e) {
|
|
e.preventDefault();
|
|
|
|
// update position for hover element
|
|
$('.popover.hover-popover').css({ top: currentMousePos.y, left: currentMousePos.x });
|
|
|
|
const urlParams = new URLSearchParams(this.href.split('?')[1]);
|
|
if (urlParams.has('link')) {
|
|
var target = urlParams.get('link');
|
|
target = encodeURIComponent(target);
|
|
} else {
|
|
target = unslugURL(window.location.pathname)
|
|
}
|
|
|
|
// get content of link
|
|
if (target) {
|
|
getContent(target, false, true)
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
//check setting if metadata is collapsed or not
|
|
if ($('.metadataOption').hasClass('is-enabled')) {
|
|
$('.metadata-properties-heading').trigger('click')
|
|
}
|
|
mdContent = $("#mdContent")[0]
|
|
|
|
// handle pop up and hover
|
|
} else {
|
|
|
|
// set content
|
|
$("#mdHoverContent").html(result);
|
|
$("#popUpContent").html(result);
|
|
|
|
// set title
|
|
var title = $("div.mdTitleHide")[1].innerText;
|
|
title = title.substring(1)
|
|
titleElements = title.split('/')
|
|
title = titleElements.splice(-1)
|
|
$(".inline-title.pophover-title").text(title);
|
|
$(".popup-modal-title").text(title);
|
|
|
|
|
|
// show pophover
|
|
$('.popover.hover-popover').css('display', 'unset');
|
|
|
|
mdContent = $("#mdHoverContent")[0]
|
|
|
|
}
|
|
|
|
// highlight code
|
|
hljs.highlightAll();
|
|
|
|
var snippets = document.getElementsByTagName('pre');
|
|
var numberOfSnippets = snippets.length;
|
|
for (var i = 0; i < numberOfSnippets; i++) {
|
|
//code = snippets[i].getElementsByTagName('code')[0].innerText;
|
|
|
|
snippets[i].classList.add('hljs'); // append copy button to pre tag
|
|
|
|
snippets[i].innerHTML = '<button class="copy-code-button">Copy</button>' + snippets[i].innerHTML; // append copy button
|
|
|
|
snippets[i].getElementsByClassName('copy-code-button')[0].addEventListener("click", function () {
|
|
this.innerText = 'Copying..';
|
|
button = this;
|
|
code = $(button).next()[0].innerText
|
|
navigator.clipboard.writeText(code).then(function () {
|
|
button.innerText = 'Copied!';
|
|
}, function (err) {
|
|
button.innerText = 'Cant Copy!';
|
|
console.error('Async: Could not copy Code: ', err);
|
|
});
|
|
|
|
setTimeout(function () {
|
|
button.innerText = 'Copy';
|
|
}, 1000)
|
|
|
|
});
|
|
}
|
|
|
|
|
|
// run mobile settings
|
|
isMobile();
|
|
|
|
//render LaTeX (Katex)
|
|
renderMathInElement(mdContent,
|
|
{
|
|
delimiters: [
|
|
{ left: "$$", right: "$$", display: true },
|
|
{ left: "\\[", right: "\\]", display: true },
|
|
{ left: "$", right: "$", display: false },
|
|
{ left: "\\(", right: "\\)", display: false }
|
|
]
|
|
}
|
|
);
|
|
|
|
// clean internal links in mermaid elements
|
|
var mermaids = document.getElementsByClassName("language-mermaid");
|
|
|
|
for (var i = 0; i < mermaids.length; i++) {
|
|
|
|
var mermaidLinks = mermaids[i].getElementsByTagName('a');
|
|
|
|
for (f = 0; f < mermaidLinks.length;) {
|
|
|
|
var linkElement = mermaidLinks[f]
|
|
|
|
if (linkElement.getAttribute("href").startsWith(uriPath)) {
|
|
|
|
var textonly = '[[' + linkElement.innerHTML + ']]';
|
|
linkElement.replaceWith(textonly)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//render mermaid
|
|
mermaid.init(undefined, document.querySelectorAll(".language-mermaid"));
|
|
|
|
//scroll to anchor
|
|
|
|
if (anchor != "") {
|
|
scrollToAnchor(anchor.substring(1));
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Gets the state of the graph setting inputs as a list.
|
|
* The options in order are: \
|
|
* [showNoLinks, showTags, sizeDepsOnConns]
|
|
* @returns {Array}
|
|
*/
|
|
function getGraphConfig() {
|
|
var showNoLinks = !$(".graphNoLinkOption").hasClass('is-enabled')
|
|
var showTags = $(".graphShowTagsOption").hasClass("is-enabled")
|
|
var sizeDepsOnConns = $(".graphSizeDepsOnConnsOption").hasClass("is-enabled")
|
|
|
|
return [showNoLinks, showTags, sizeDepsOnConns];
|
|
}
|
|
|
|
/**
|
|
* vis js stuff
|
|
* @param {Boolean} modal
|
|
* @param {String} path
|
|
* @param {Boolean} filter_emptyNodes
|
|
* @param {Boolean} show_tags
|
|
* @param {Boolean} sizeDepsOnConns
|
|
*/
|
|
function renderGraph(modal, path = "", filter_emptyNodes = false, show_tags = true, sizeDepsOnConns = false) {
|
|
|
|
// no graph found exit
|
|
if ($("#allGraphNodes").length == 0 || $("#allGraphNodes").text == '[]') {
|
|
console.log("Graph: no data found")
|
|
return;
|
|
}
|
|
|
|
|
|
var visNodes = document.getElementById('allGraphNodes').textContent;
|
|
var visEdges = document.getElementById('allGraphEdges').textContent;
|
|
|
|
var jsonNodes = JSON.parse(visNodes);
|
|
var jsonEdges = JSON.parse(visEdges);
|
|
|
|
var currId = 0;
|
|
path = decodeURIComponent(path);
|
|
if (path == 'home') {
|
|
path = '/' + homeFile;
|
|
}
|
|
|
|
|
|
// reset backlings count
|
|
|
|
$('#backlinksCount').text(0);
|
|
|
|
// get current node
|
|
for (const x in jsonNodes) {
|
|
if (path == ('/' + (jsonNodes[x]['title']).replace('&', '&'))) {
|
|
currId = jsonNodes[x]['id'];
|
|
break;
|
|
}
|
|
else if (modal == false) {
|
|
currId = -1;
|
|
}
|
|
}
|
|
|
|
// cancel graph display if no node was found
|
|
if (currId == -1) {
|
|
return;
|
|
}
|
|
|
|
// Graph Defaults
|
|
|
|
nodeSize = parseInt($('.slider.nodeSize').val())
|
|
varLinkDistance = parseInt($('.slider.linkDistance').val())
|
|
varLinkThickness = parseFloat($('.slider.linkThickness').val())
|
|
varGraphStyle = $('#graphStyleDropdown').val()
|
|
|
|
|
|
var options = {
|
|
interaction: {
|
|
hover: true,
|
|
},
|
|
layout: {
|
|
improvedLayout: true,
|
|
clusterThreshold: 10000,
|
|
},
|
|
physics: {
|
|
solver: 'forceAtlas2Based',
|
|
solver: 'barnesHut',
|
|
enabled: true,
|
|
stabilization: {
|
|
enabled: true,
|
|
iterations: 1000,
|
|
updateInterval: 10,
|
|
onlyDynamicEdges: false,
|
|
fit: true
|
|
}
|
|
},
|
|
// configure: {
|
|
// enabled: true,
|
|
// filter: 'nodes,edges',
|
|
// container: container,
|
|
// showButton: true
|
|
// } ,
|
|
edges: {
|
|
length: varLinkDistance,
|
|
width: varLinkThickness,
|
|
color: getComputedStyle(document.querySelector('.graph-view.color-line')).color,
|
|
smooth: {
|
|
type: varGraphStyle,
|
|
enabled: true,
|
|
}
|
|
},
|
|
|
|
nodes: {
|
|
shape: 'dot',
|
|
size: nodeSize,
|
|
scaling: {
|
|
min: 10,
|
|
max: 30
|
|
},
|
|
font: {
|
|
size: 16,
|
|
color: getComputedStyle(document.querySelector('.graph-view.color-text')).color,
|
|
},
|
|
borderWidth: 1,
|
|
color: {
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill')).color,
|
|
border: getComputedStyle(document.querySelector('.graph-view.color-fill')).color,
|
|
highlight: {
|
|
border: getComputedStyle(document.querySelector('.graph-view.color-fill')).color,
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill')).color,
|
|
},
|
|
hover: {
|
|
border: getComputedStyle(document.querySelector('.graph-view.color-fill')).color,
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill-highlight')).color,
|
|
},
|
|
},
|
|
},
|
|
|
|
groups: {
|
|
tag: {
|
|
color: {
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill-tag')).color,
|
|
border: getComputedStyle(document.querySelector('.graph-view.color-fill-tag')).color,
|
|
highlight: {
|
|
border: getComputedStyle(document.querySelector('.graph-view.color-fill-tag')).color,
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill-tag')).color,
|
|
},
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var network;
|
|
|
|
// show the whole graph
|
|
if (modal) {
|
|
|
|
var container_modal = document.getElementById('graph_all');
|
|
|
|
var nodes = new vis.DataSet(jsonNodes);
|
|
var edges = new vis.DataSet(jsonEdges);
|
|
|
|
edgeView = edges;
|
|
nodeView = nodes;
|
|
|
|
if (filter_emptyNodes) {
|
|
nodeView = new vis.DataView(nodes, {
|
|
filter: function (node) {
|
|
connEdges = edgeView.get({
|
|
filter: function (edge) {
|
|
if (node.id == currId) {
|
|
return true;
|
|
}
|
|
return (
|
|
(edge.to == node.id) || (edge.from == node.id));
|
|
}
|
|
});
|
|
return connEdges.length > 0;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
// filter out tags
|
|
if (!show_tags) {
|
|
nodeView = new vis.DataView(nodes, {
|
|
filter: function (node) {
|
|
return !(node.group && node.group === "tag");
|
|
}
|
|
})
|
|
}
|
|
|
|
// overwrite scaling function to make all nodes the same size
|
|
if (!sizeDepsOnConns) {
|
|
options["nodes"]["scaling"]["customScalingFunction"] = function (min, max, total, value) {
|
|
var maxSize = options["nodes"]["scaling"]["max"]
|
|
var minSize = options["nodes"]["scaling"]["min"]
|
|
|
|
var diff = maxSize - minSize;
|
|
|
|
return Math.max(0, (nodeSize - minSize) / diff); // reverse vis size calculation
|
|
}
|
|
}
|
|
|
|
// provide the data in the vis format
|
|
var data = {
|
|
nodes: nodeView,
|
|
edges: edgeView
|
|
};
|
|
|
|
network = new vis.Network(container_modal, data, options);
|
|
|
|
// show loading status
|
|
document.getElementById("loading-text").innerText = "loading graph: 0%";
|
|
document.getElementById("loading-text").style.display = "unset";
|
|
|
|
network.on("stabilizationProgress", function (params) {
|
|
var widthFactor = params.iterations / params.total;
|
|
document.getElementById("loading-text").innerText = "loading graph: " + Math.round(widthFactor * 100) + "%";
|
|
});
|
|
|
|
network.once("stabilizationIterationsDone", function () {
|
|
document.getElementById("loading-text").innerText = "loading graph: 100%";
|
|
// really clean the dom element
|
|
setTimeout(function () {
|
|
document.getElementById("loading-text").style.display = "none";
|
|
}, 500);
|
|
});
|
|
|
|
|
|
|
|
|
|
//network.selectNodes([currId]);
|
|
var node = network.body.nodes[currId];
|
|
node.setOptions({
|
|
font: {
|
|
size: 20
|
|
},
|
|
color: {
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill-focused')).color,
|
|
},
|
|
});
|
|
|
|
|
|
|
|
// local Graph
|
|
} else {
|
|
|
|
var myNodes = [];
|
|
var myEdges = [];
|
|
|
|
options['edges']['length'] = 250;
|
|
|
|
// add current node
|
|
for (const x in jsonNodes) {
|
|
jsonNodes[x]['label'] = (jsonNodes[x]['label']).replace('&', '&')
|
|
jsonNodes[x]['title'] = (jsonNodes[x]['title']).replace('&', '&')
|
|
if (path == ('/' + jsonNodes[x]['title'])) {
|
|
myNodes.push(jsonNodes[x])
|
|
curNode = myNodes[0]
|
|
curNode.size = '20';
|
|
curNode.color = {
|
|
background: getComputedStyle(document.querySelector('.graph-view.color-fill-focused')).color,
|
|
};
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
function idExists(id) {
|
|
return myNodes.some(function (el) {
|
|
return el.id === id;
|
|
});
|
|
}
|
|
|
|
|
|
// search linked nodes
|
|
for (const y in jsonEdges) {
|
|
if (currId == jsonEdges[y]['from']) {
|
|
|
|
// add "To" node to the nodes
|
|
for (const x in jsonNodes) {
|
|
if (jsonEdges[y]['to'] == jsonNodes[x]['id']) {
|
|
if (!idExists(jsonNodes[x]['id'])) {
|
|
myNodes.push(jsonNodes[x])
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// add the link
|
|
myEdges.push(jsonEdges[y]);
|
|
|
|
// search the backlinks
|
|
} else if (currId == jsonEdges[y]['to']) {
|
|
|
|
// add "From" node to the nodes
|
|
for (const x in jsonNodes) {
|
|
if (jsonEdges[y]['from'] == jsonNodes[x]['id']) {
|
|
if (!idExists(jsonNodes[x]['id'])) {
|
|
myNodes.push(jsonNodes[x])
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// add the backlink
|
|
myEdges.push(jsonEdges[y]);
|
|
curr = $('#backlinksCount').text();
|
|
$('#backlinksCount').text(parseInt(curr) + 1);
|
|
}
|
|
|
|
}
|
|
|
|
// build network structure
|
|
|
|
var nodes = new vis.DataSet(myNodes);
|
|
var edges = new vis.DataSet(myEdges);
|
|
|
|
// filter out tags
|
|
if (!show_tags) {
|
|
nodeView = new vis.DataView(nodes, {
|
|
filter: function (node) {
|
|
return !(node.group && node.group === "tag");
|
|
}
|
|
})
|
|
}
|
|
|
|
// overwrite scaling function to make all nodes the same size
|
|
options["nodes"]["scaling"]["customScalingFunction"] = function (min, max, total, value) {
|
|
var maxSize = options["nodes"]["scaling"]["max"]
|
|
var minSize = options["nodes"]["scaling"]["min"]
|
|
|
|
var diff = maxSize - minSize;
|
|
|
|
return Math.max(0, (nodeSize - minSize) / diff); // reverse vis size calculation
|
|
}
|
|
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
|
|
// update linked mentions
|
|
$("#nodeCount").text(nodes.length - 1);
|
|
|
|
var container = document.getElementById('mynetwork');
|
|
network = new vis.Network(container, data, options);
|
|
|
|
|
|
}
|
|
|
|
// jump to file function
|
|
if (network) {
|
|
|
|
network.on("click", function (properties) {
|
|
|
|
if (!properties.nodes.length) return;
|
|
var node = nodes.get(properties.nodes[0]);
|
|
|
|
if (node.group && node.group === "tag") {
|
|
$('.workspace-tab-header[data-type="search"]').click();
|
|
$('*[type="search"]').val(node.title);
|
|
search(node.title);
|
|
|
|
} else {
|
|
var glink = uriPath + node.title;
|
|
window.open(glink, "_self");
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* change mobile settings
|
|
*/
|
|
function isMobile() {
|
|
|
|
if ($(window).width() < 990) {
|
|
|
|
hideLeftMobile();
|
|
|
|
//disable mousehover on mobile
|
|
$('.internal-link').unbind("mouseenter");
|
|
$('.internal-link').unbind("mouseleave");
|
|
|
|
//override click for internal-links to use popUp instead
|
|
if ($('.popUpSetting').hasClass('is-enabled')) {
|
|
$('.internal-link').click(function (e) {
|
|
e.preventDefault();
|
|
const urlParams = new URLSearchParams(this.href.split('?')[1]);
|
|
if (urlParams.has('link')) {
|
|
var target = urlParams.get('link');
|
|
target = encodeURIComponent(target);
|
|
} else {
|
|
|
|
const path = new URL(this.href).pathname;
|
|
target = unslugURL(path)
|
|
|
|
}
|
|
|
|
|
|
if (target) {
|
|
getContent(target, false, true)
|
|
}
|
|
$("#popUp").css("display", "flex");
|
|
$(".goToLink").html('<a href="' + this.href + '"> go to site</a><br><br>')
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
function hideLeftMobile() {
|
|
|
|
$('.workspace').removeClass('is-left-sidedock-open');
|
|
$('.mod-left-split').addClass('is-sidedock-collapse');
|
|
$('.mod-left').addClass('is-collapsed');
|
|
//$('.workspace-ribbon.side-dock-ribbon.mod-left').css('display', 'none');
|
|
|
|
};
|
|
|
|
/**
|
|
* search
|
|
* @param {String} str
|
|
*/
|
|
function search(str) {
|
|
if (str.length == 0) {
|
|
$("div.search-results-children").html("");
|
|
return;
|
|
} else {
|
|
|
|
str = encodeURIComponent(str);
|
|
|
|
$.ajax({
|
|
url: uriPath + "content.php?search=" + str, success: function (result) {
|
|
|
|
$("div.search-results-children").html(result);
|
|
let preCodes = $("div.search-results-children").find("pre code")
|
|
for (var i = 0; i < preCodes.length; i++) {
|
|
hljs.highlightElement(preCodes[i]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// edit button
|
|
|
|
/**
|
|
* @param {String} name
|
|
* @returns {string}
|
|
*/
|
|
function getCookie(name) {
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) return parts.pop().split(';').shift();
|
|
};
|
|
|
|
/**
|
|
* helper
|
|
* @param {String} oldClass
|
|
* @param {String} newClass
|
|
*/
|
|
function replaceClass(oldClass, newClass) {
|
|
var elem = $("." + oldClass);
|
|
elem.removeClass(oldClass);
|
|
elem.addClass(newClass);
|
|
};
|
|
|
|
/**
|
|
* search entry
|
|
* @param {Event} e
|
|
*/
|
|
function toggleSearchEntry(e) {
|
|
|
|
el = $(e.target);
|
|
//e.preventDefault();
|
|
|
|
if (el.hasClass('svg-icon right-triangle')) {
|
|
el = el.parent().parent().parent()
|
|
} else if (el.hasClass('tree-item-icon collapse-icon')) {
|
|
el = el.parent().parent()
|
|
} else {
|
|
return
|
|
}
|
|
|
|
if (el.hasClass('is-collapsed')) {
|
|
el.removeClass('is-collapsed');
|
|
el.find('.search-result-file-matches').css("display", "unset");
|
|
|
|
} else {
|
|
el.addClass('is-collapsed');
|
|
el.find('.search-result-file-matches').css("display", "none");
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* nav menu collapse functions
|
|
* @param {Event} e
|
|
*/
|
|
function toggleNavFolder(e) {
|
|
el = $(e.target);
|
|
|
|
|
|
if (el.hasClass('nav-folder-title-content')) {
|
|
elIcon = el.prev()
|
|
el = el.parent()
|
|
el = el.next(el)
|
|
} else if (el.hasClass('collapse-icon')) {
|
|
elIcon = el
|
|
el = el.parent()
|
|
el = el.next(el)
|
|
} else if (el.hasClass('mod-collapsible')) {
|
|
elIcon = el.children()[0]
|
|
elIcon = $(elIcon)
|
|
el = el.next(el)
|
|
} else if (el.hasClass('svg-icon right-triangle')) {
|
|
elIcon = el.parent()
|
|
el = el.parent().parent()
|
|
el = el.next(el)
|
|
} else if (el.is('path')) {
|
|
el = el.parent().parent().parent()
|
|
el = el.next(el)
|
|
|
|
}
|
|
|
|
if (elIcon.hasClass('is-collapsed')) {
|
|
elIcon.removeClass('is-collapsed');
|
|
|
|
} else {
|
|
elIcon.addClass('is-collapsed');
|
|
}
|
|
|
|
if (el.hasClass('collapse')) {
|
|
el.removeClass('collapse');
|
|
|
|
} else {
|
|
el.addClass('collapse');
|
|
}
|
|
|
|
return
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @param {String} target
|
|
* @param {Boolean} openAll
|
|
*/
|
|
function openNavMenu(target, openAll = false) {
|
|
|
|
// open nav menu to target
|
|
var navId = decodeURIComponent(target);
|
|
linkname = navId.match(/([^\/]*)\/*$/)[1]
|
|
|
|
// search and open tree reverse
|
|
navId = navId.replace(/[^a-zA-Z0-9\-]/g, '_');
|
|
var next = $('#' + navId).parent().closest('.collapse');
|
|
|
|
do {
|
|
next.removeClass('collapse');
|
|
elIcon = next.prev().children()[0]
|
|
elIcon = $(elIcon)
|
|
elIcon.removeClass('is-collapsed');
|
|
next = next.parent().closest('.collapse');
|
|
}
|
|
while (next.length != 0);
|
|
|
|
|
|
// set focus to link
|
|
var searchText = linkname;
|
|
|
|
$("div").filter(function () {
|
|
return $(this).text() === searchText;
|
|
}).parent().addClass('perlite-link-active is-active');
|
|
|
|
};
|
|
|
|
function hideTooltip() {
|
|
$('.tooltip').css("display", "none")
|
|
};
|
|
|
|
|
|
|
|
// on document ready stuff
|
|
$(document).ready(function () {
|
|
|
|
|
|
// load settings from storage
|
|
// ----------------------------------------
|
|
|
|
// text size
|
|
if (localStorage.getItem('Font_size')) {
|
|
$('body').css('--font-text-size', localStorage.getItem('Font_size') + 'px');
|
|
}
|
|
|
|
$('.slider.font-size').val(parseInt($('body').css('--font-text-size')));
|
|
|
|
|
|
// popHovers
|
|
if (localStorage.getItem('disablePopUp') === 'true') {
|
|
$('.disablePopUp').addClass('is-enabled')
|
|
} else if (localStorage.getItem('disablePopUp') === 'false') {
|
|
$('.disablePopUp').removeClass('is-enabled')
|
|
}
|
|
|
|
// inline title
|
|
if (localStorage.getItem('InlineTitle') === 'hide') {
|
|
$('.inlineTitleOption').removeClass('is-enabled')
|
|
$('body').removeClass('show-inline-title')
|
|
}
|
|
|
|
// metadata
|
|
if (localStorage.getItem('Metadata') === 'hide') {
|
|
$('.metadataOption').addClass('is-enabled')
|
|
$('.metadata-container').addClass('is-collapsed');
|
|
}
|
|
|
|
// light mode
|
|
if (localStorage.getItem('lightMode') === 'true') {
|
|
$('body').removeClass('theme-dark')
|
|
$('body').addClass('theme-light')
|
|
$('.darkModeOption').removeClass('is-enabled')
|
|
}
|
|
|
|
// popUp Setting
|
|
if (localStorage.getItem('popUpEnabled') === 'true') {
|
|
$('.popUpSetting').addClass('is-enabled')
|
|
}
|
|
|
|
|
|
|
|
// graph settings & defaults
|
|
|
|
if (localStorage.getItem('Graph_Style')) {
|
|
$('#graphStyleDropdown').val(localStorage.getItem('Graph_Style'))
|
|
} else {
|
|
$('#graphStyleDropdown').val('dynamic')
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_NodeSize')) {
|
|
$('.slider.nodeSize').val(localStorage.getItem('Graph_NodeSize'))
|
|
} else {
|
|
$('.slider.nodeSize').val(12)
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_LinkDistance')) {
|
|
$('.slider.linkDistance').val(localStorage.getItem('Graph_LinkDistance'))
|
|
} else {
|
|
$('.slider.linkDistance').val(150)
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_LinkThickness')) {
|
|
$('.slider.linkThickness').val(localStorage.getItem('Graph_LinkThickness'))
|
|
} else {
|
|
$('.slider.linkThickness').val(1)
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_Orphans') === 'hide') {
|
|
$('.graphNoLinkOption').removeClass('is-enabled')
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_Tags') === 'hide') {
|
|
$('.graphShowTagsOption').removeClass('is-enabled')
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_NodeScaling') === 'depsOnSize') {
|
|
$('.graphSizeDepsOnConnsOption').addClass('is-enabled')
|
|
}
|
|
|
|
if (localStorage.getItem('Graph_Autoreload') === 'no') {
|
|
$('.graphAutoReloadOption').removeClass('is-enabled')
|
|
}
|
|
|
|
|
|
// panel sizes
|
|
if (localStorage.getItem('leftSizePanel')) {
|
|
$('.workspace-split.mod-horizontal.mod-left-split').css("width", localStorage.getItem('leftSizePanel'))
|
|
} else {
|
|
$('.workspace-split.mod-horizontal.mod-left-split').css("width", window.innerWidth / 6)
|
|
}
|
|
|
|
if (localStorage.getItem('rightSizePanel')) {
|
|
$('.workspace-split.mod-horizontal.mod-right-split').css("width", localStorage.getItem('rightSizePanel'))
|
|
} else {
|
|
$('.workspace-split.mod-horizontal.mod-right-split').css("width", window.innerWidth / 6)
|
|
}
|
|
|
|
|
|
//check for graph and hide local graph if none exists
|
|
if ($("#allGraphNodes").length == 0 || $("#allGraphNodes").text == '[]') {
|
|
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Open graph view"]').css('display', 'none')
|
|
$('.clickable-icon.view-action[aria-label="Open outline"]').css('display', 'none')
|
|
$('.clickable-icon.view-action[aria-label="Open localGraph"]').css('display', 'none')
|
|
$('#localGraph').css('display', 'none')
|
|
$('#outline').css('display', 'inline')
|
|
|
|
}
|
|
|
|
|
|
// direct links
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
|
|
var target = "";
|
|
if (urlParams.has('link')) {
|
|
var target = urlParams.get('link');
|
|
|
|
} else {
|
|
|
|
target = unslugURL(window.location.pathname)
|
|
|
|
}
|
|
|
|
if (window.location.pathname != uriPath | urlParams.has('link')) {
|
|
|
|
target = encodeURIComponent(target)
|
|
|
|
var hash = window.location.hash;
|
|
|
|
getContent(target, false, false, hash);
|
|
openNavMenu(target);
|
|
|
|
} else {
|
|
|
|
// load index page
|
|
getContent("home", true);
|
|
}
|
|
// on search submit
|
|
$('*[type="search"]').on('keypress', function (e) {
|
|
if (e.which == 13) {
|
|
search(this.value);
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
//mark current active menu item
|
|
$('.perlite-link').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
$('.perlite-link').removeClass('perlite-link-active is-active');
|
|
|
|
$(this).addClass('perlite-link-active is-active');
|
|
});
|
|
|
|
|
|
|
|
// toggle left sidedock
|
|
$('.sidebar-toggle-button.mod-left.sidebar').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
if ($('.sidebar-toggle-button.mod-left.sidebar').hasClass('is-collapsed')) {
|
|
$('.workspace').addClass('is-left-sidedock-open');
|
|
$('.mod-left-split').removeClass('is-sidedock-collapse');
|
|
$('.mod-left').removeClass('is-collapsed');
|
|
|
|
} else {
|
|
|
|
$('.workspace').removeClass('is-left-sidedock-open');
|
|
$('.mod-left-split').addClass('is-sidedock-collapse');
|
|
$('.mod-left').addClass('is-collapsed');
|
|
}
|
|
|
|
});
|
|
|
|
|
|
$('.sidebar-toggle-button.mod-left.mobile-display').click(function (e) {
|
|
|
|
if ($('.workspace-ribbon.side-dock-ribbon.mod-left').is(':hidden')) {
|
|
$('.workspace-ribbon.side-dock-ribbon.mod-left').css('display', 'flex')
|
|
} else {
|
|
$('.workspace-ribbon.side-dock-ribbon.mod-left').css('display', 'none')
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
// toggle right sidedock
|
|
$('.sidebar-toggle-button.mod-right').click(function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if ($('.sidebar-toggle-button.mod-right').hasClass('is-collapsed')) {
|
|
$('.workspace').addClass('is-right-sidedock-open');
|
|
$('.mod-right-split').removeClass('is-sidedock-collapse');
|
|
$('.mod-right').removeClass('is-collapsed');
|
|
|
|
} else {
|
|
|
|
$('.workspace').removeClass('is-right-sidedock-open');
|
|
$('.mod-right-split').addClass('is-sidedock-collapse');
|
|
$('.mod-right').addClass('is-collapsed');
|
|
}
|
|
|
|
});
|
|
|
|
|
|
// click search
|
|
$('.workspace-tab-header[data-type="search"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
$('.workspace-leaf-content[data-type="search"]').parent().css("display", "unset");
|
|
$('.workspace-leaf-content[data-type="file-explorer"]').parent().css("display", "none");
|
|
$('.workspace-tab-header[data-type="search"]').addClass('is-active mod-active');
|
|
$('.workspace-tab-header[data-type="file-explorer"]').removeClass('is-active mod-active');
|
|
|
|
// set focus to search field
|
|
$('input[type=search]').focus();
|
|
|
|
});
|
|
|
|
// click file-explorer
|
|
$('.workspace-tab-header[data-type="file-explorer"]').click(function (e) {
|
|
e.preventDefault();
|
|
$('.workspace-leaf-content[data-type="file-explorer"]').parent().css("display", "unset");
|
|
$('.workspace-leaf-content[data-type="search"]').parent().css("display", "none");
|
|
$('.workspace-tab-header[data-type="file-explorer"]').addClass('is-active mod-active');
|
|
$('.workspace-tab-header[data-type="search"]').removeClass('is-active mod-active');
|
|
});
|
|
|
|
// click expand-search-all
|
|
$('.clickable-icon.nav-action-button[aria-label="Collapse results"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
if ($('.tree-item.search-result').hasClass('is-collapsed')) {
|
|
$('.tree-item.search-result').removeClass('is-collapsed');
|
|
$('.search-result-file-matches').css("display", "unset");
|
|
$('.clickable-icon.nav-action-button[aria-label="Collapse results"]').removeClass('is-active');
|
|
|
|
} else {
|
|
$('.tree-item.search-result').addClass('is-collapsed');
|
|
$('.search-result-file-matches').css("display", "none");
|
|
$('.clickable-icon.nav-action-button[aria-label="Collapse results"]').addClass('is-active');
|
|
}
|
|
});
|
|
|
|
|
|
// click expand-file-explorer-all
|
|
$('.clickable-icon.nav-action-button[aria-label="Expand all"]').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
$('.nav-folder-children.collapse').removeClass('collapse')
|
|
$('.nav-folder').removeClass('is-collapsed');
|
|
$('.collapse-icon').removeClass('is-collapsed');
|
|
$('.clickable-icon.nav-action-button[aria-label="Collapse all"]').css('display', 'unset');
|
|
target.css('display', 'none');
|
|
|
|
});
|
|
|
|
|
|
// click collapse file-explorer-all
|
|
$('.clickable-icon.nav-action-button[aria-label="Collapse all"]').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
parents = $('.nav-folder-children').parent()
|
|
|
|
parents.each(function (index, value) {
|
|
parent = $(this)
|
|
if (!$(this).hasClass('mod-root')) {
|
|
parent.find('.nav-folder-children').addClass('collapse');
|
|
parent.find('.collapse-icon').addClass('is-collapsed');
|
|
}
|
|
})
|
|
|
|
$('.nav-folder').addClass('is-collapsed');
|
|
$('.clickable-icon.nav-action-button[aria-label="Expand all"]').css('display', 'unset');
|
|
target.css('display', 'none');
|
|
|
|
});
|
|
|
|
|
|
// copy URL function
|
|
$('.clickable-icon.view-action[aria-label="Copy URL"]').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
var text = window.location.href;
|
|
$('.tooltip').css("top", target.offset().top + 39);
|
|
$('.tooltip').css("left", target.offset().left);
|
|
$('.tooltip').css("height", "25px");
|
|
$('.tooltip').css("display", "unset");
|
|
|
|
navigator.clipboard.writeText(text).then(function () {
|
|
$('.tooltip').text("URL copied to clipboard!");
|
|
}, function (err) {
|
|
$('.tooltip').text("Could not copy URL");
|
|
console.error('Async: Could not copy URL: ', err);
|
|
});
|
|
|
|
setTimeout(hideTooltip, 1500);
|
|
});
|
|
|
|
|
|
|
|
// rezise Handler right
|
|
const rightDockContainer = $('.workspace-split.mod-horizontal.mod-right-split')
|
|
$('.workspace-leaf-resize-handle.right-dock').mousedown(function (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
$(document).mouseup(function (e) {
|
|
$(document).unbind('mousemove')
|
|
localStorage.setItem('rightSizePanel', rightDockContainer.css("width"))
|
|
});
|
|
|
|
$(document).mousemove(function (e) {
|
|
e.preventDefault()
|
|
rightDockContainer.css("width", $(document).width() - e.pageX)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
// rezise Handler left
|
|
const leftDockContainer = $('.workspace-split.mod-horizontal.mod-left-split')
|
|
$('.workspace-leaf-resize-handle.left-dock').mousedown(function (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
$(document).mouseup(function (e) {
|
|
$(document).unbind('mousemove')
|
|
localStorage.setItem('leftSizePanel', leftDockContainer.css("width"))
|
|
});
|
|
|
|
$(document).mousemove(function (e) {
|
|
e.preventDefault()
|
|
leftDockContainer.css("width", e.pageX)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
// Global Settings and Event Handler
|
|
// --------------------------------
|
|
|
|
// load themes
|
|
var dropDownValues = '<option value="Default">Obsidian Default</option>';
|
|
var perliteDefault = ""
|
|
$('.theme').each(function (i) {
|
|
themeName = $(this).data('themename');
|
|
themeId = $('.theme')[i].id;
|
|
dropDownValues += '<option value="' + themeId + '">' + themeName + '</option>'
|
|
|
|
// get current active
|
|
if (!$('.theme')[i].disabled) {
|
|
perliteDefault = $('.theme')[i].id;
|
|
}
|
|
|
|
})
|
|
|
|
|
|
// fill dropdown
|
|
$('#themeDropdown').html(dropDownValues);
|
|
|
|
// change theme
|
|
$("#themeDropdown").change(function (e) {
|
|
target = $(e.target)
|
|
|
|
// disable all themes
|
|
$('.theme').attr("disabled", 'disabled');
|
|
|
|
//enable selected if its not default
|
|
selectedTheme = target.val()
|
|
|
|
if (selectedTheme !== 'Default') {
|
|
$('#' + target.val()).attr('disabled', false);
|
|
}
|
|
|
|
localStorage.setItem('Theme', target.val());
|
|
|
|
});
|
|
|
|
//set active theme
|
|
if (localStorage.getItem('Theme')) {
|
|
$('#themeDropdown').val(localStorage.getItem('Theme'));
|
|
$("#themeDropdown").trigger('change');
|
|
|
|
} else {
|
|
$('#themeDropdown').val(perliteDefault);
|
|
}
|
|
|
|
|
|
// reset Theme
|
|
$('#resetTheme').click(function () {
|
|
$('#themeDropdown').val(perliteDefault);
|
|
$('#themeDropdown').change();
|
|
localStorage.removeItem('Theme');
|
|
})
|
|
|
|
// text size input slider
|
|
$('.slider.font-size').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
$('body').css('--font-text-size', target.val() + 'px')
|
|
localStorage.setItem('Font_size', target.val());
|
|
|
|
$('.slider.font-size').val(parseInt($('body').css('--font-text-size')));
|
|
|
|
});
|
|
|
|
// Textsize Restore Defaults Button
|
|
$('.clickable-icon[aria-label="Restore text settings"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
$('body').css('--font-text-size', '15px')
|
|
localStorage.removeItem('Font_size')
|
|
$('.slider.font-size').val(parseInt($('body').css('--font-text-size')));
|
|
|
|
});
|
|
|
|
// Panelsize Restore Defaults Button
|
|
$('.clickable-icon[aria-label="Restore panel settings"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
localStorage.removeItem('rightSizePanel')
|
|
localStorage.removeItem('leftSizePanel')
|
|
|
|
$('.workspace-split.mod-horizontal.mod-left-split').css("width", "450px")
|
|
$('.workspace-split.mod-horizontal.mod-right-split').css("width", "450px")
|
|
});
|
|
|
|
|
|
|
|
// inLine Title Option
|
|
$('.inlineTitleOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.inlineTitleOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
$('body').removeClass('show-inline-title')
|
|
localStorage.setItem('InlineTitle', 'hide');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
$('body').addClass('show-inline-title')
|
|
localStorage.removeItem('InlineTitle');
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// Disable PopHover Option
|
|
$('.disablePopUp').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.disablePopUp')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
localStorage.setItem('disablePopUp', 'false');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
localStorage.setItem('disablePopUp', 'true');
|
|
|
|
}
|
|
});
|
|
|
|
// Darkmode / Lightmode change
|
|
$('.darkModeOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.darkModeOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
|
|
$('body').removeClass('theme-dark')
|
|
$('body').addClass('theme-light')
|
|
localStorage.setItem('lightMode', 'true');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
$('body').removeClass('theme-light')
|
|
$('body').addClass('theme-dark')
|
|
localStorage.removeItem('lightMode');
|
|
|
|
}
|
|
});
|
|
|
|
// PopUp change (mobile only)
|
|
$('.popUpSetting').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.popUpSetting')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
localStorage.removeItem('popUpEnabled');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
localStorage.setItem('popUpEnabled', 'true');
|
|
|
|
}
|
|
});
|
|
|
|
|
|
// collapse Metadata Option
|
|
$('.metadataOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.metadataOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
if ($('.metadata-container').hasClass('is-collapsed')) {
|
|
$('.metadata-container').removeClass('is-collapsed');
|
|
}
|
|
localStorage.removeItem('Metadata');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
|
|
if (!$('.metadata-container').hasClass('is-collapsed')) {
|
|
$('.metadata-container').addClass('is-collapsed');
|
|
localStorage.setItem('Metadata', 'hide');
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Graph Settings and Event Handler
|
|
// --------------------------------
|
|
// open Graph
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Open graph view"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
str = document.getElementsByClassName('perlite-link-active');
|
|
isMobile();
|
|
|
|
if (str[0] != undefined) {
|
|
str = str[0].getAttribute('onclick');
|
|
str = str.substring(0, str.length - 3);
|
|
str = str.substring(12, str.length);
|
|
|
|
} else {
|
|
str = "";
|
|
}
|
|
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
|
|
if ($('.view-header-nav-buttons[data-section="close"]').is(':hidden')) {
|
|
// show graph and close button
|
|
$('.view-header-nav-buttons[data-section="close"]').css('display', 'flex');
|
|
$('#graph_content').css('display', 'unset');
|
|
$('.markdown-reading-view').css('display', 'none');
|
|
|
|
// hide right side-dock
|
|
$('.workspace').removeClass('is-right-sidedock-open');
|
|
$('.mod-right-split').addClass('is-sidedock-collapse');
|
|
$('.mod-right').addClass('is-collapsed');
|
|
|
|
} else {
|
|
|
|
$('.view-header-nav-buttons[data-section="close"]').click();
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
// close Graph
|
|
$('.view-header-nav-buttons[data-section="close"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
// hide graph and close button
|
|
$('.view-header-nav-buttons[data-section="close"]').css('display', 'none');
|
|
$('#graph_content').css('display', 'none');
|
|
$('.markdown-reading-view').css('display', 'flex');
|
|
|
|
// show right side-dock
|
|
$('.workspace').addClass('is-right-sidedock-open');
|
|
$('.mod-right-split').removeClass('is-sidedock-collapse');
|
|
$('.mod-right').removeClass('is-collapsed');
|
|
});
|
|
// open Graph settings
|
|
$('.clickable-icon.graph-controls-button.mod-open[aria-label="Open graph settings"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
target = $(e.target)
|
|
$('.graph-controls').removeClass('is-close')
|
|
});
|
|
|
|
// close Graph settings
|
|
$('.clickable-icon.graph-controls-button.mod-close[aria-label="Close"]').click(function (e) {
|
|
e.preventDefault();
|
|
$('.graph-controls').addClass('is-close')
|
|
});
|
|
|
|
// Graph Show Links Option (Orphans)
|
|
$('.graphNoLinkOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.graphNoLinkOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, true, showTags, sizeDepsOnConns);
|
|
}
|
|
|
|
localStorage.setItem('Graph_Orphans', 'hide');
|
|
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, false, showTags, sizeDepsOnConns);
|
|
}
|
|
localStorage.removeItem('Graph_Orphans');
|
|
}
|
|
});
|
|
|
|
// Graph Show Tags Option
|
|
$('.graphShowTagsOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.graphShowTagsOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, false, sizeDepsOnConns);
|
|
}
|
|
|
|
localStorage.setItem('Graph_Tags', 'hide');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, true, sizeDepsOnConns);
|
|
}
|
|
localStorage.removeItem('Graph_Tags');
|
|
}
|
|
});
|
|
|
|
// Graph Node Size Depends On Node Connection Number Option
|
|
$('.graphSizeDepsOnConnsOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.graphSizeDepsOnConnsOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, false);
|
|
}
|
|
|
|
localStorage.setItem('Graph_NodeScaling', 'default');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, true);
|
|
}
|
|
localStorage.setItem('Graph_NodeScaling', 'depsOnSize');
|
|
}
|
|
});
|
|
|
|
// Graph Auto-reload Option
|
|
$('.graphAutoReloadOption').click(function (e) {
|
|
e.preventDefault();
|
|
target = $('.graphAutoReloadOption')
|
|
|
|
if (target.hasClass('is-enabled')) {
|
|
target.removeClass('is-enabled')
|
|
localStorage.setItem('Graph_Autoreload', 'no');
|
|
|
|
} else {
|
|
target.addClass('is-enabled')
|
|
localStorage.removeItem('Graph_Autoreload');
|
|
}
|
|
});
|
|
|
|
// Graph Node Size Option
|
|
$('.nodeSize').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
$('#nodeSizeVal').text(target.val())
|
|
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
}
|
|
|
|
localStorage.setItem('Graph_NodeSize', target.val());
|
|
|
|
});
|
|
// Graph Link Distance Option
|
|
$('.linkDistance').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
$('#linkDistanceVal').text(target.val())
|
|
var showNoLinks = !$(".graphNoLinkOption").hasClass('is-enabled')
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
}
|
|
localStorage.setItem('Graph_LinkDistance', target.val());
|
|
|
|
});
|
|
// Graph Link Thickness Option
|
|
$('.linkThickness').click(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
|
|
$('#linkThicknessVal').text(target.val())
|
|
var showNoLinks = !$(".graphNoLinkOption").hasClass('is-enabled')
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
}
|
|
localStorage.setItem('Graph_LinkThickness', target.val());
|
|
|
|
});
|
|
|
|
// Graph Style Change
|
|
$("#graphStyleDropdown").change(function (e) {
|
|
e.preventDefault();
|
|
target = $(e.target)
|
|
if ($('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
}
|
|
localStorage.setItem('Graph_Style', target.val());
|
|
});
|
|
|
|
// Graph Reload Button
|
|
$("#graphReload").click(function (e) {
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
|
|
});
|
|
|
|
// Graph Restore Defaults Button
|
|
$('.clickable-icon.graph-controls-button.mod-reset[aria-label="Restore default settings"]').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
if (!$('.graphNoLinkOption').hasClass('is-enabled')) {
|
|
$('.graphNoLinkOption').addClass('is-enabled')
|
|
}
|
|
|
|
if (!$(".graphShowTagsOption").hasClass("is-enabled")) {
|
|
$(".graphShowTagsOption").addClass("is-enabled")
|
|
}
|
|
|
|
if ($(".graphSizeDepsOnConnsOption").hasClass("is-enabled")) {
|
|
$(".graphSizeDepsOnConnsOption").removeClass("is-enabled")
|
|
}
|
|
|
|
if (!$('.graphAutoReloadOption').hasClass('is-enabled')) {
|
|
$('.graphAutoReloadOption').addClass('is-enabled')
|
|
}
|
|
|
|
$('.slider.linkThickness').val(1)
|
|
$('.slider.linkDistance').val(150)
|
|
$('.slider.nodeSize').val(12)
|
|
$('#graphStyleDropdown').val('dynamic')
|
|
|
|
localStorage.removeItem('Graph_Orphans');
|
|
localStorage.removeItem('Graph_ShowTags');
|
|
localStorage.removeItem('Graph_NodeScaling')
|
|
localStorage.removeItem('Graph_Autoreload');
|
|
localStorage.removeItem('Graph_Style');
|
|
localStorage.removeItem('Graph_LinkDistance');
|
|
localStorage.removeItem('Graph_LinkThickness');
|
|
localStorage.removeItem('Graph_NodeSize');
|
|
|
|
|
|
[showNoLinks, showTags, sizeDepsOnConns] = getGraphConfig()
|
|
renderGraph(true, str, showNoLinks, showTags, sizeDepsOnConns);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Modal Event Handler
|
|
// --------------------------------
|
|
|
|
// info modal
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Help"]').click(function (e) {
|
|
$.ajax({
|
|
url: uriPath + "content.php?about", success: function (result) {
|
|
|
|
$("div.aboutContent").html(result);
|
|
$("#about").css("display", "flex");
|
|
//$(".modal-title").html('Perlite');
|
|
// hljs.highlightAll();
|
|
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// setting modal
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Settings"]').click(function (e) {
|
|
|
|
$("#settings").css("display", "flex");
|
|
|
|
});
|
|
|
|
// open random note
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Open random note"]').click(function (e) {
|
|
|
|
var nodes = JSON.parse($("#allGraphNodes").text())
|
|
nodesCount = nodes.length
|
|
|
|
min = Math.ceil(0);
|
|
max = Math.floor(nodesCount);
|
|
|
|
// don't load tags as random nodes
|
|
do {
|
|
tag = true
|
|
randomNode = Math.floor(Math.random() * (max - min) + min)
|
|
if (nodes[randomNode]['title'].substring(0, 1) != "#") {
|
|
tag = false
|
|
}
|
|
|
|
} while (tag);
|
|
|
|
target = '/' + nodes[randomNode]['title']
|
|
target = encodeURIComponent(target);
|
|
getContent(target)
|
|
|
|
});
|
|
|
|
// open random note
|
|
$('.clickable-icon.side-dock-ribbon-action[aria-label="Open TOC"]').click(function (e) {
|
|
|
|
console.log("open TOC")
|
|
|
|
$("#popUpContent").html($("#toc").html())
|
|
$(".popup-modal-title").text($(".popup-modal-title").text() + ' - Content');
|
|
$("#popUp").css("display", "flex")
|
|
|
|
});
|
|
|
|
/**
|
|
* close modal
|
|
* @param {String[]} elementIds
|
|
*/
|
|
function hideElements(elementIds) {
|
|
elementIds.forEach(function (id) {
|
|
$("#" + id).css("display", "none");
|
|
});
|
|
}
|
|
|
|
$('.modal-close-button').click(function (e) {
|
|
hideElements(["settings", "about", "popUp", "img-modal"]);
|
|
});
|
|
|
|
$(document).keydown(function (e) {
|
|
if (e.key === "Escape") {
|
|
hideElements(["settings", "about", "popUp", "img-modal"]);
|
|
}
|
|
});
|
|
|
|
// local Graph & Tag & Toc (outline) Switch
|
|
$('.clickable-icon.view-action[aria-label="Open outline"]').click(function (e) {
|
|
|
|
|
|
if ($('#outline').css('display') == 'inline') {
|
|
localStorage.setItem("showTOC", "false")
|
|
$('#outline').css('display', 'none')
|
|
|
|
|
|
} else {
|
|
localStorage.setItem("showTOC", "true")
|
|
$('#outline').css('display', 'inline')
|
|
}
|
|
|
|
});
|
|
|
|
$('.clickable-icon.view-action[aria-label="Open localGraph"]').click(function (e) {
|
|
|
|
if ($('#localGraph').css('display') == 'inline') {
|
|
localStorage.setItem("showLocalGraph", "false")
|
|
$('#localGraph').css('display', 'none')
|
|
} else {
|
|
localStorage.setItem("showLocalGraph", "true")
|
|
$('#localGraph').css('display', 'inline')
|
|
}
|
|
});
|
|
|
|
$('.clickable-icon.view-action[aria-label="Open Tags"]').click(function (e) {
|
|
|
|
if ($('#tags_container').css('display') == 'block') {
|
|
localStorage.setItem("showLocalTags", "false")
|
|
$('#tags_container').css('display', 'none')
|
|
} else {
|
|
localStorage.setItem("showLocalTags", "true")
|
|
$('#tags_container').css('display', 'block')
|
|
}
|
|
});
|
|
|
|
|
|
// init mermaid
|
|
mermaid.initialize({ startOnLoad: false, 'securityLevel': 'Strict', 'theme': 'dark' });
|
|
|
|
|
|
// handle browser history
|
|
window.addEventListener("popstate", function (event) {
|
|
|
|
target = unslugURL(window.location.pathname)
|
|
getContent(target)
|
|
|
|
});
|
|
|
|
});
|
|
|