mirror of
https://github.com/silverstripe/silverstripe-docsviewer
synced 2024-10-22 11:05:56 +02:00
da441b231d
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
220 lines
7.6 KiB
JavaScript
Executable File
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">▼</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('▲');})
|
|
},
|
|
function() {
|
|
$("#table-of-contents ul").animate({'height':'hide'}, 200, function(){$('#table-of-contents h4 span').html('▼');})
|
|
}
|
|
);
|
|
|
|
// 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') + '">¶</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);
|