MediaWiki:Common.js: Difference between revisions
m Add floating table of contents |
m Add searchable floating contents panel |
||
| Line 131: | Line 131: | ||
(function () { | (function () { | ||
function filterToc($panel, query) { | |||
var normalized = query.trim().toLowerCase(); | |||
$panel.find('li').removeClass('muhro-toc-match muhro-toc-hidden muhro-toc-ancestor'); | |||
if (!normalized) { | |||
return; | |||
} | |||
$panel.find('li').each(function () { | |||
var $item = $(this); | |||
var text = $item.children('a').first().text().toLowerCase(); | |||
if (text.indexOf(normalized) !== -1) { | |||
$item.addClass('muhro-toc-match'); | |||
$item.parents('li').addClass('muhro-toc-ancestor'); | |||
} | |||
}); | |||
$panel.find('li').each(function () { | |||
var $item = $(this); | |||
if (!$item.hasClass('muhro-toc-match') && !$item.hasClass('muhro-toc-ancestor')) { | |||
$item.addClass('muhro-toc-hidden'); | |||
} | |||
}); | |||
} | |||
function addFloatingToc($content) { | function addFloatingToc($content) { | ||
var $toc = $content.find('#toc').first(); | var $toc = $content.find('#toc').first(); | ||
| Line 136: | Line 163: | ||
var $button; | var $button; | ||
var $panel; | var $panel; | ||
var $header; | |||
var $filter; | |||
var $body; | |||
var $wrapper; | var $wrapper; | ||
| Line 161: | Line 191: | ||
.addClass('muhro-floating-toc-button') | .addClass('muhro-floating-toc-button') | ||
.text('Contents'); | .text('Contents'); | ||
$filter = $('<input>') | |||
.attr({ | |||
type: 'search', | |||
placeholder: 'Filter contents', | |||
'aria-label': 'Filter contents' | |||
}) | |||
.addClass('muhro-floating-toc-filter'); | |||
$header = $('<div>') | |||
.addClass('muhro-floating-toc-header') | |||
.append($filter); | |||
$body = $('<div>') | |||
.addClass('muhro-floating-toc-body') | |||
.append($tocList); | |||
$panel = $('<nav>') | $panel = $('<nav>') | ||
| Line 168: | Line 214: | ||
}) | }) | ||
.addClass('muhro-floating-toc-panel') | .addClass('muhro-floating-toc-panel') | ||
.append($ | .append($header, $body); | ||
$wrapper = $('<div>') | $wrapper = $('<div>') | ||
| Line 179: | Line 225: | ||
$wrapper.toggleClass('is-open', open); | $wrapper.toggleClass('is-open', open); | ||
$button.attr('aria-expanded', open ? 'true' : 'false'); | $button.attr('aria-expanded', open ? 'true' : 'false'); | ||
if (open) { | |||
window.setTimeout(function () { | |||
$filter.trigger('focus'); | |||
}, 0); | |||
} | |||
}); | |||
$filter.on('input', function () { | |||
filterToc($panel, $filter.val()); | |||
}); | }); | ||