129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
///////////////////////////// Make headers linkable /////////////////////////////
|
|
|
|
$(".article--content h2, \
|
|
.article--content h3, \
|
|
.article--content h4, \
|
|
.article--content h5, \
|
|
.article--content h6" ).each(function() {
|
|
var link = "<a href=\"#" + $(this).attr("id") + "\"></a>"
|
|
$(this).wrapInner( link );
|
|
})
|
|
|
|
///////////////////////////////// Smooth Scroll /////////////////////////////////
|
|
|
|
var elementWhiteList = [
|
|
".tabs p a",
|
|
".code-tabs p a",
|
|
".truncate-toggle",
|
|
".children-links a",
|
|
".list-links a",
|
|
"a.url-trigger"
|
|
]
|
|
|
|
function scrollToAnchor(target) {
|
|
var $target = $(target);
|
|
|
|
$('html, body').stop().animate({
|
|
'scrollTop': ($target.offset().top)
|
|
}, 400, 'swing', function () {
|
|
window.location.hash = target;
|
|
});
|
|
}
|
|
|
|
$('.article a[href^="#"]:not(' + elementWhiteList + ')').click(function (e) {
|
|
e.preventDefault();
|
|
scrollToAnchor(this.hash);
|
|
});
|
|
|
|
///////////////////////////// Left Nav Interactions /////////////////////////////
|
|
|
|
$(".children-toggle").click(function(e) {
|
|
e.preventDefault()
|
|
$(this).toggleClass('open');
|
|
$(this).siblings('.children').toggleClass('open');
|
|
})
|
|
|
|
//////////////////////////// Mobile Contents Toggle ////////////////////////////
|
|
|
|
$('#contents-toggle-btn').click(function(e) {
|
|
e.preventDefault();
|
|
$(this).toggleClass('open');
|
|
$('#nav-tree').toggleClass('open');
|
|
})
|
|
|
|
//////////////////////////////// Tabbed Content ////////////////////////////////
|
|
|
|
function tabbedContent(container, tab, content) {
|
|
|
|
// Add the active class to the first tab in each tab group,
|
|
// in case it wasn't already set in the markup.
|
|
$(container).each(function () {
|
|
$(tab, this).removeClass('is-active');
|
|
$(tab + ':first', this).addClass('is-active');
|
|
});
|
|
|
|
$(tab).on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Make sure the tab being clicked is marked as active, and make the rest inactive.
|
|
$(this).addClass('is-active').siblings().removeClass('is-active');
|
|
|
|
// Render the correct tab content based on the position of the tab being clicked.
|
|
const activeIndex = $(tab).index(this);
|
|
$(content).each(function(i) {
|
|
if (i === activeIndex) {
|
|
$(this).show();
|
|
$(this).siblings(content).hide();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
tabbedContent('.code-tabs-wrapper', '.code-tabs p a', '.code-tab-content');
|
|
tabbedContent('.tabs-wrapper', '.tabs p a', '.tab-content');
|
|
|
|
//////////////////////// Activate Tabs with Query Params ////////////////////////
|
|
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
var anchor = window.location.hash
|
|
|
|
tab = $('<textarea />').html(queryParams.get('t')).text();
|
|
|
|
if (tab !== "") {
|
|
var targetTab = $('.tabs a:contains("' + tab + '")')
|
|
targetTab.click()
|
|
if (anchor !== "") { scrollToAnchor(anchor) }
|
|
}
|
|
|
|
$('.tabs p a').click(function() {
|
|
if ($(this).is(':not(":first-child")')) {
|
|
queryParams.set('t', $(this).html())
|
|
window.history.replaceState({}, '', `${location.pathname}?${queryParams}${anchor}`);
|
|
} else {
|
|
queryParams.delete('t')
|
|
window.history.replaceState({}, '', `${location.pathname}${anchor}`);
|
|
}
|
|
})
|
|
|
|
/////////////////////////////// Truncate Content ///////////////////////////////
|
|
|
|
$(".truncate-toggle").click(function(e) {
|
|
e.preventDefault()
|
|
$(this).closest('.truncate').toggleClass('closed');
|
|
})
|
|
|
|
////////////////////////////// Expand Accordians ///////////////////////////////
|
|
|
|
$('.expand-label').click(function() {
|
|
$(this).children('.expand-toggle').toggleClass('open')
|
|
$(this).next('.expand-content').slideToggle(200)
|
|
})
|
|
|
|
////////////////////////// Inject tooltips on load //////////////////////////////
|
|
|
|
$('.tooltip').each( function(){
|
|
$toolTipText = $('<div/>').addClass('tooltip-text').text($(this).attr('data-tooltip-text'));
|
|
$toolTipElement = $('<div/>').addClass('tooltip-container').append($toolTipText);
|
|
$(this).prepend($toolTipElement);
|
|
});
|