91 Plus M

打造行動裝置看91譜的最好體驗。
当前为 2022-11-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         91 Plus M
// @namespace    https://github.com/DonkeyBear
// @version      0.95
// @description  打造行動裝置看91譜的最好體驗。
// @author       DonkeyBear
// @match        https://www.91pu.com.tw/m/*
// @match        https://www.91pu.com.tw/song/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

let currentUrl = window.location.href;
if (currentUrl.match(/\/song\//)) {
  let sheetId = currentUrl.match(/\/\d*\./)[0].slice(1, -1);
  let newUrl = `https://www.91pu.com.tw/m/tone.shtml?id=${sheetId}`;
  window.location.replace(newUrl);
}

let observerCheckList = {
  modifyTitle: false,
  modifyHeaderBackground: false,
  modifyHeaderFlex: false,
  modifyTransposeButton: false
}

const observer = new MutationObserver(() => {
  /* 隱藏網頁元素 */
  let elementShouldBlock = {
    // 需要倒數才能關閉的蓋版廣告
    modalAd: document.querySelector("#viptoneWindow.window"),
    // 在頁面最底部的廣告
    bottomAd: document.querySelector("#bottomad"),
    // 最上方提醒升級VIP的廣告
    updateVipBar: document.querySelector(".update_vip_bar"),
    // 譜上的LOGO和浮水印
    overlayLogo: document.querySelector(".wmask"),
    // 彈出式頁尾
    footer: document.querySelector("footer"),
    // 自動滾動頁面捲軸
    autoScroll: document.querySelector(".autoscroll"),
    // 頁首的返回列
    headerBackplace: document.querySelector(".backplace"),
    // 頁首的Key選項
    keys: document.querySelector(".set .keys"),
    // 其餘的Google廣告
    adsByGoogle: document.querySelectorAll(".adsbygoogle")
  }
  for (let selected in elementShouldBlock) {
    // 將上述元素隱藏
    if (elementShouldBlock[selected]) {
      if (elementShouldBlock[selected].length === undefined) {
        // Node
        elementShouldBlock[selected].style.display = "none";
      } else {
        // NodeList
        for (let elem of elementShouldBlock[selected]) {
          elem.style.display = "none";
        }
      }
    }
  }
  if (document.querySelectorAll(".setint .hr")) {
    // 隱藏頁首部分功能鈕
    for (let i = 3; i < 6; i++) {
      if (document.querySelectorAll(".setint .hr")[i]) {
        document.querySelectorAll(".setint .hr")[i].style.display = "none";
      }
    }
  }

  /* 更改網頁標題 */
  if (!observerCheckList.modifyTitle) {
    if (document.querySelector("#mtitle")) {
      document.title = `${document.querySelector("#mtitle").innerText} | 91+ M`;
      observerCheckList.modify = true;
    }
  }

  /* 更改頁首背景樣式 */
  if (!observerCheckList.modifyHeaderBackground) {
    if (document.querySelector("header")) {
      document.querySelector("header").style.backdropFilter = "blur(5px) saturate(80%)";
      document.querySelector("header").style.backgroundColor = "rgba(25, 20, 90, 0.5)";
      observerCheckList.modifyHeaderBackground = true;
    }
  }

  /* 更改頁首內容物排列方式 */
  if (!observerCheckList.modifyHeaderFlex) {
    for (let elem of [
      document.querySelector(".setint"),
      document.querySelector(".plays .capo")
    ]) {
      if (elem) {
        elem.style.display = "flex";
        elem.style.justifyContent = "space-between";
        if (elem.classList.contains("setint")) {
          elem.style.borderTop = "1px solid rgba(255, 255, 255, 0.2)";
        }
        observerCheckList.modifyHeaderFlex = true;
      }
    }
  }

  /* 刪除內建的移調鈕，建立自製的 */
  if (!observerCheckList.modifyTransposeButton) {
    if (document.querySelector(".capo .select")) {
      let stringCapo = document.querySelector(".capo .select").innerText.split(" / ")[0]; // CAPO
      let stringKey = document.querySelector(".capo .select").innerText.split(" / ")[1]; // 調
      for (let i of document.querySelectorAll(".capo span[play]")) {
        i.style.display = "none";
      }
      // 建立降調鈕
      let spanMinus = document.createElement("span");
      spanMinus.innerText = "－";
      spanMinus.className = "select";
      // 當前調
      let spanCapo = document.createElement("span");
      spanCapo.innerText = `Capo: ${stringCapo} (${stringKey})`;
      // 建立降調鈕
      let spanPlus = document.createElement("span");
      spanPlus.innerText = "＋";
      spanPlus.className = "select";
      
      for (let i of [spanMinus, spanCapo, spanPlus]) {
        document.querySelector(".plays .capo").appendChild(i);
      }

      observerCheckList.modifyTransposeButton = true;
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });