☰

better wiktionary

improving the webpage layout for reader, and adding hideshow button for every language

  1. // ==UserScript==
  2. // @name         better wiktionary
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-03-24.5
  5. // @description  improving the webpage layout for reader, and adding hideshow button for every language
  6. // @author       Al Arcus
  7. // @match        *://*.wiktionary.org/**
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=wiktionary.org
  9. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  10. // @grant        none
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.     // Add CSS to hide .toclevel-1 > ul by default
  17.     var style = document.createElement('style');
  18.     style.innerHTML = `
  19.         .toc-toggle-button {
  20.             position: absolute;
  21.             left: 5px;
  22.             min-width: 18px;
  23.             min-height: 18px;
  24.             padding: 0;
  25.             font-size: 0.7rem;
  26.         }
  27.  
  28.         .mw-body-content, .mw-first-heading{
  29.             margin: 0 auto;
  30.             margin-top: 0px;
  31.             margin-right: auto;
  32.             margin-bottom: 0px;
  33.             margin-left: auto;
  34.             max-width: 948px;
  35.         }
  36.         .mw-content-ltr > p, li{
  37.             max-width: 49em;
  38.         }
  39.  
  40.         #mw-panel {
  41.           left: auto !important;
  42.           right: 0px;
  43.         }
  44.         .vector-search-box {margin-right: 0;}
  45.         [class="portal expanded"]{margin-left: 11.2px; margin-right: 9.6px;}
  46.  
  47.         .mw-body, #mw-data-after-content, .mw-footer {
  48.             margin-right: 10em;
  49.         }
  50.  
  51.         .mw-body {
  52.             border-right-width: 1px;
  53.         }
  54.  
  55.         #mw-head {
  56.           right: 10em;
  57.           left: 5em;
  58.           width: auto;
  59.         }
  60.  
  61.         .toc {
  62.                 position: fixed;
  63.                 top: 0;
  64.                 left: 0;
  65.                 width: auto;
  66.                 min-width: 160px;
  67.                 height: 100%;
  68.                 background-color: #f6f6f6;
  69.                 display: block;
  70.                 overflow-y: auto;
  71.                 padding: 0px;
  72.                 border: 1px solid #a7d7f9;
  73.             }
  74.         .toc > ul { margin-left: 2em; }
  75.  
  76.         .NavFrame, .NavHead {
  77.             background-image: none !important;
  78.         }
  79.         .translations-cell {
  80.             background-color: #231400 !important;
  81.         }
  82.     `;
  83.     document.head.appendChild(style);
  84.  
  85.     function adjustContentMargin() {
  86.         var divWidth = $('#toc').width()+15.8;
  87.         $('.mw-body').css('margin-left', divWidth);
  88.         $('.mw-footer').css('margin-left', divWidth);
  89.         $('#left-navigation').css('margin-left', divWidth-80.3);
  90.     }
  91.     adjustContentMargin()
  92.  
  93.     // Loop through each .toclevel-1 element
  94.     $('.toclevel-1').each(function(index) {
  95.         // Extract the name from the href attribute
  96.         var name = $(this).find('a').attr('href').replace('#', '');
  97.  
  98.         // Set ul's id to toc-{name}-sublist
  99.         $(this).find('ul').attr('id', 'toc-' + name + '-sublist');
  100.  
  101.         // Add button to hide/show TOC subsection
  102.         var button = $('<button class="toc-toggle-button">+</button>');
  103.         $(this).prepend(button);
  104.  
  105.         // Add click event to toggle visibility of subsection
  106.         button.click(function() {
  107.             $('#toc-' + name + '-sublist').toggle();
  108.         });
  109.     });
  110.  
  111.     $('.toclevel-1 > ul').css('display', 'none')
  112.     $('.toctogglespan').css('display', 'none')
  113.  
  114. })();