MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 128: / Line 128: @@
          mw.hook('wikipage.content').add(addCollapsibleControls);
      });
+}());
+(function () {
+    function addFloatingToc($content) {
+        var $toc = $content.find('#toc').first();
+        var $tocList;
+        var $button;
+        var $panel;
+        var $wrapper;
+        if ($('#muhro-floating-toc').length || !$toc.length) {
+            return;
+        }
+        $tocList = $toc.find('> ul, .toc > ul').first().clone(false);
+        if (!$tocList.length) {
+            $tocList = $toc.find('ul').first().clone(false);
+        }
+        if (!$tocList.length) {
+            return;
+        }
+        $tocList.find('[id]').removeAttr('id');
+        $tocList.find('.tocnumber').attr('aria-hidden', 'true');
+        $button = $('<button>')
+            .attr({
+                type: 'button',
+                'aria-expanded': 'false',
+                'aria-controls': 'muhro-floating-toc-panel'
+            })
+            .addClass('muhro-floating-toc-button')
+            .text('Contents');
+        $panel = $('<nav>')
+            .attr({
+                id: 'muhro-floating-toc-panel',
+                'aria-label': 'Page contents'
+            })
+            .addClass('muhro-floating-toc-panel')
+            .append($tocList);
+        $wrapper = $('<div>')
+            .attr('id', 'muhro-floating-toc')
+            .addClass('muhro-floating-toc noprint')
+            .append($button, $panel);
+        $button.on('click', function () {
+            var open = !$wrapper.hasClass('is-open');
+            $wrapper.toggleClass('is-open', open);
+            $button.attr('aria-expanded', open ? 'true' : 'false');
+        });
+        $panel.on('click', 'a', function () {
+            if (window.matchMedia('(max-width: 720px)').matches) {
+                $wrapper.removeClass('is-open');
+                $button.attr('aria-expanded', 'false');
+            }
+        });
+        $('body').append($wrapper);
+    }
+    mw.hook('wikipage.content').add(addFloatingToc);
 }());