silverstripe-docsviewer/javascript/DocumentationViewer.js
Ingo Schommer da441b231d Better syntax highlighting
Specifically, the old highlighter didn't support the "diff" format which was important for changelogs.
Changed the style from dark to light, since it's way too contrasty on a light background - makes it hard to scan both text and code.
And reduced the padding between code and content (mostly using the highlight style defaults)
Added a slight background shadow on code to visually offset the relatively light background color
Changed existing background color for <pre> to a slightly lighter shade, better contrast
Didn't create a custom *.ss style yet, too much work, and XML is good enough for now
2017-06-29 11:13:01 +12:00

220 lines
7.6 KiB
JavaScript
Executable File

;(function($) {
$(document).ready(
function() {
// Open sidebar on mobile
$('.menu-open').click(
function(){
$('#sidebar').removeClass('hide').addClass('open');
return false;
}
);
// Close sidebar on mobile
$('.menu-close').click(
function(){
$('#sidebar').removeClass('open').addClass('hide');
setTimeout(
function() {
$('#sidebar').removeClass('hide');
}, 500
);
return false;
}
);
// Close sidebar by hitting of ESC
$(document).keyup(
function(e) {
if (e.keyCode == 27) {
$('#sidebar').removeClass('open');
}
}
);
var switched = false;
var updateTables = function() {
if (($(window).width() < 540) && !switched ) {
switched = true;
$("table").each(
function(i, element) {
splitTable($(element));
}
);
return true;
}
else if (switched && ($(window).width() > 540)) {
switched = false;
$("table").each(
function(i, element) {
unsplitTable($(element));
}
);
}
};
$(window).load(updateTables);
$(window).on(
"redraw",function() {
switched = false;
updateTables();
}
); // An event to listen for
$(window).on("resize", updateTables);
function splitTable(original) {
original.wrap("<div class='table-wrapper' />");
var copy = original.clone();
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
copy.removeClass("responsive");
original.closest(".table-wrapper").append(copy);
copy.wrap("<div class='pinned' />");
original.wrap("<div class='scrollable' />");
setCellHeights(original, copy);
}
function unsplitTable(original) {
original.closest(".table-wrapper").find(".pinned").remove();
original.unwrap();
original.unwrap();
}
function setCellHeights(original, copy) {
var tr = original.find('tr'),
tr_copy = copy.find('tr'),
heights = [];
tr.each(
function (index) {
var self = $(this),
tx = self.find('th, td');
tx.each(
function () {
var height = $(this).outerHeight(true);
heights[index] = heights[index] || 0;
if (height > heights[index]) { heights[index] = height;
}
}
);
}
);
tr_copy.each(
function (index) {
$(this).height(heights[index]);
}
);
}
/**
* -----------------------------------------------
* TABLE OF CONTENTS
*
* Transform a #table-of-contents div to a nested list
*/
if($("#table-contents-holder").length > 0) {
var toc = '<div id="table-of-contents" class="open">' +
'<h4>Table of contents<span class="updown">&#9660;</span></h4><ul style="display: none;">';
// Remove existing anchor redirection in the url
var pageURL = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, '');
var itemCount = 0;
$('#content h1[id], #content h2[id], #content h3[id], #content h4[id]').each(
function(i) {
var current = $(this);
var tagName = current.prop("tagName");
if(typeof tagName == "String") { tagName = tagName.toLowerCase();
}
itemCount++;
toc += '<li class="' + tagName + '"><a id="link' + i + '" href="'+ pageURL +'#' + $(this).attr('id') + '" title="' + current.html() + '">' + current.html() + '</a></li>';
}
);
// if no items in the table of contents, don't show anything
if(itemCount == 0) { return false;
}
toc += '</ul></div>';
$('#table-contents-holder').prepend(toc);
// Toggle the TOC
$('#table-of-contents').attr('href', 'javascript:void()').toggle(
function() {
$("#table-of-contents ul").animate({'height':'show'}, 200, function(){$('#table-of-contents h4 span').html('&#9650;');})
},
function() {
$("#table-of-contents ul").animate({'height':'hide'}, 200, function(){$('#table-of-contents h4 span').html('&#9660;');})
}
);
// Make sure clicking a link won't toggle the TOC
$("#table-of-contents li a").click(function (e) { e.stopPropagation(); });
}
/**
* ---------------------------------------------
* HEADING ANCHOR LINKS
*
* Automatically adds anchor links to headings that have IDs
*/
var url = window.location.href.replace(/#[a-zA-Z0-9\-\_]*/g, '');
$("#content h1[id], #content h2[id], #content h3[id], #content h4[id], #content h5[id], #content h6[id]").each(
function() {
var link = '<a class="heading-anchor-link" title="Link to this section" href="'+ url + '#' + $(this).attr('id') + '">&para;</a>';
$(this).append(' ' + link);
}
);
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseenter(
function() {
$(this).addClass('hover');
}
);
$("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").mouseleave(
function() {
$(this).removeClass('hover');
}
);
/**
* ---------------------------------------------
* LANGAUGE SELECTER
*
* Hide the change button and do it onclick
*/
$("#Form_LanguageForm .Actions").hide();
$("#Form_LanguageForm select").change(
function() {
$("#Form_LanguageForm").submit();
}
);
// Syntax highlighting with highlightjs.org
hljs.registerLanguage('ss', function() {
// Alias language with the closest match until we can write a better one
// See http://highlightjs.readthedocs.io/en/latest/language-guide.html
return hljs.getLanguage('xml');
});
hljs.initHighlighting();
}
);
})(jQuery);