☰

Clean Britannica Dictionary UI

Clear elements at the top and add some buttons.

  1. // ==UserScript==
  2. // @name         Clean Britannica Dictionary UI
  3. // @namespace    https://github.com/zica87/self-made-userscipts
  4. // @version      1.0
  5. // @description  Clear elements at the top and add some buttons.
  6. // @author       zica
  7. // @match        https://www.britannica.com/*
  8. // @grant        none
  9. // @license      GPL-3.0
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     "use strict";
  14.  
  15.     clear_elements();
  16.     tweak_elements();
  17.     move_searchbar_and_entries_to_right();
  18.  
  19.     const fileType = "mp3"; // choose between mp3, ogg, and wav
  20.     add_pronounce_button();
  21.     generate_toggle_all_examples_button();
  22.  
  23.  
  24.     function clear_elements() {
  25.         document.getElementById("wrap_cr_t").remove(); // ad at the top
  26.         // document.getElementById("wrap_c").style.margin = 0; // space on the left & right
  27.         document.getElementsByClassName("section-links")[0].remove(); // top sections
  28.         document.getElementById("main_title").remove(); // "The Britannica Dictionary"
  29.         document.getElementById("ld_entries_v2_mainh").remove(); // the word
  30.         const all_lines = document.getElementsByClassName("dline"); // Britannica Dictionary definition of ...
  31.         const n = all_lines.length;
  32.         // bcz all_lines changes immediately when we change it, we need to use this way of iterating to properly remove all
  33.         for (let i = n - 1; i >= 0; --i) {
  34.             all_lines[i].remove();
  35.         }
  36.     }
  37.  
  38.     function tweak_elements() {
  39.         // short(in height) search box
  40.         document.getElementsByClassName("ld_search_inp")[1].style.padding = "6px";
  41.         // search button position
  42.         Object.assign(document.getElementsByClassName("search_btn")[1].style, {
  43.             top: "8px",
  44.             right: "7px",
  45.         });
  46.         // short list box if it doesn't have that many items
  47.         Object.assign(document.getElementsByClassName("o_list")[0].style, {
  48.             height: "revert",
  49.             maxHeight: "72px",
  50.         });
  51.         document.getElementById("ld_entries_v2_all").style.marginTop = 0; // margin at the top
  52.         // highlight definitions
  53.         for (const definition of document.getElementsByClassName("def_text")) {
  54.             Object.assign(definition.style, {
  55.                 backgroundColor: "gray",
  56.                 color: "white",
  57.                 padding: "0 0.5em",
  58.             });
  59.         }
  60.     }
  61.  
  62.     function move_searchbar_and_entries_to_right() {
  63.         const entries = document.getElementById("ld_entries_v2_others_block");
  64.         Object.assign(entries.style, {
  65.             backgroundColor: "white"
  66.         });
  67.         const searchbar = document.getElementsByClassName("desktop_top")[0];
  68.         const rightSide = document.getElementById("wrap_cr_br");
  69.         Object.assign(searchbar.style, {
  70.             width: getComputedStyle(rightSide).getPropertyValue("width"),
  71.         });
  72.         const toolbar = document.createElement("div");
  73.         Object.assign(toolbar.style, {
  74.             position: "sticky",
  75.             top: 0,
  76.             zIndex: Number.MAX_SAFE_INTEGER,
  77.         });
  78.         toolbar.append(searchbar);
  79.         toolbar.append(entries);
  80.         rightSide.prepend(toolbar);
  81.         Object.assign(rightSide.style, {
  82.             height: getComputedStyle(rightSide.parentElement).getPropertyValue("height"),
  83.         });
  84.     }
  85.  
  86.     function generate_toggle_all_examples_button() {
  87.         const toggleAllExamples = document.createElement("input");
  88.         Object.assign(toggleAllExamples.style, {
  89.             borderRadius: "10px",
  90.             position: "fixed",
  91.             zIndex: Number.MAX_SAFE_INTEGER,
  92.             bottom: "10vh",
  93.             right: "5vh",
  94.         });
  95.         let toShow = true;
  96.         Object.assign(toggleAllExamples, {
  97.             type: "button",
  98.             value: "show all examples",
  99.             onclick: function () {
  100.                 for (const wrapper of document.getElementsByClassName("vi_more")) {
  101.                     if (toShow !== wrapper.classList.contains("opened")) {
  102.                         wrapper.firstElementChild.click();
  103.                     }
  104.                 }
  105.                 toShow = !toShow;
  106.                 if (toShow) {
  107.                     this.value = "show all examples";
  108.                 } else {
  109.                     this.value = "hide all examples";
  110.                 }
  111.             },
  112.         });
  113.         document.documentElement.prepend(toggleAllExamples);
  114.     }
  115.  
  116.     function add_pronounce_button() {
  117.         for (const icon of document.getElementsByClassName("play_pron")) {
  118.             const path = icon.dataset.lang.replace('_', '/');
  119.             const file = icon.dataset.file;
  120.             const dir = icon.dataset.dir;
  121.             const url = `https://media.merriam-webster.com/audio/prons/${path}/${fileType}/${dir}/${file}.${fileType}`;
  122.             const audio = new Audio(url);
  123.  
  124.             const pronounce = document.createElement("input");
  125.             Object.assign(pronounce.style, {
  126.                 borderRadius: "10px",
  127.                 marginLeft: "1em"
  128.             });
  129.             Object.assign(pronounce, {
  130.                 type: "button",
  131.                 value: "pronounce",
  132.                 onclick: audio.play.bind(audio)
  133.             });
  134.             icon.after(pronounce);
  135.         }
  136.     }
  137. })();