☰

bilibili 新动态顶栏简易修改

修改 bilibili 新动态顶栏, 使其更方便使用

当前为 2017-12-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         bilibili 新动态顶栏简易修改
// @namespace    http://unown.moe
// @version      0.4.2
// @description  修改 bilibili 新动态顶栏, 使其更方便使用
// @author       Unown Hearn
// @license      MIT License
// @match        *://t.bilibili.com/*
// @grant        none
// ==/UserScript==

/*
    history:
        [2017.12.1] 0.0 简单地让 bilibili 网页端新版动态的顶栏固定,
   并隐藏原本冒出来的新顶栏

        [2017.12.1] 0.1 让顶栏在小窗口时也完全显示, 顶栏的左部分可以自动折叠

        [2017.12.1] 0.2 顶栏的搜索栏在聚焦时会伸长到 2.5 倍

        [2017.12.2] 0.3 右边栏也可以自动折叠了, 顶栏左部分的主站项不会消失

        [2017.12.2] 0.3.1 完善文档

        [2017.12.2] 0.3.2 偷了个懒, 让收进去的项横着显示, 规避了错位问题,
   另外解决了一个初始化时变成 2 行的 bug

        [2017.12.2] 0.3.3 修复了一行可能会变成两行的 bug
   (除了尺寸非常小的情况之外)

        [2017.12.2] 0.4 暴力解决了网络不好时需要等待网页加载而无法执行脚本的问题

        [2017.12.2] 0.4.1 修复 bug, 改进浏览器支持(chrome, safari)

        [2017.12.2] 0.4.1 正式发布于
   greasyfork(https://greasyfork.org/zh-CN/scripts/35912-bilibili-%E6%96%B0%E5%8A%A8%E6%80%81%E9%A1%B6%E6%A0%8F%E7%AE%80%E6%98%93%E4%BF%AE%E6%94%B9)

        [2017.12.2] 0.4.2 添加遗漏掉的协议

    TODO:
        * 点击省略号后, 使面板保持开启, 直到点击其他位置或再点一次省略号

        * 要不要解决宽度过小时会发生的问题? 那并不是应该算是正常使用...

*/

(function() {
//'use strict';
//< 不然 safari 会报错

// 此脚本只管动态首页
if (!/^(\/|\/\?.*)$/.test(window.location.pathname)) {
  return;
}

console.log('启用了 userscript \'固定 bilibili 新动态的顶栏 1.0\'');

/**
 * 本 userscript 是否成功初始化
 *
 * @type boolean
 */
var initialized = false;

/**
 * 顶栏
 *
 * @type {HTMLElement}
 */
var bili_wrapper;
/**
 * 顶栏的左导航栏
 *
 * @type {HTMLElement}
 */
var nav_con_fl;
/**
 * 顶栏的右导航栏 (不包含右导航栏)
 *
 * @type {HTMLElement}
 */
var nav_con_fr;
/**
 * 顶栏的投稿栏
 *
 * @type {HTMLElement}
 */
var nav_upload;
/**
 * 顶栏的搜索栏 (从右导航栏分离)
 *
 * @type {HTMLElement}
 */
var nav_search;

/**
 * 是否在使用备选方案. 换句话说, 是否顶栏右部分被挤压了
 *
 * @type boolean
 */
var in_plan_b = false;

/**
 * 获取窗口宽度
 *
 * @returns {number} 窗口宽度
 */
function getWindowWidth() {
  return $(window).width();
}

/**
 * 获取元素的真实大小
 *
 * @param {HTMLElement} elem
 */
function getRealWidth(elem) {
  var width;

  if (elem.style.display === 'none') {
    var old_position = elem.style.position;
    var old_visibility = elem.style.visibility;
    elem.style.position = 'absolute';
    elem.style.visibility = 'hidden';
    elem.style.display = 'inline';
    width = elem.offsetWidth;
    elem.style.position = old_position;
    elem.style.display = 'none';
    elem.style.visibility = old_visibility;
    return width;
  }
  return elem.offsetWidth;
}

/**
 *  调整顶栏的某一部分导航栏
 *
 *  @param {HTMLElement} nav 导航栏
 *  @param {number} max_width 外部认为容许的最大宽度
 *  @param {HashMap} [options] 更多的选项, 包括:
 *  @param {HTMLElement} [options.plan_b] 备选可调整的导航栏
 *  @param {number} [options.nav_search_width_for_plan_b] 搜索框的最终长度, 在计算备选方案的长度时要用到
 *  @param {boolean} [options.is_left] 如果为真, 则代表正在调整的是左部分
 *
 *  @returns {number} 隐藏项的数量
 */
function __adjustNav(
    nav, max_width, options /*plan_b, nav_search_width_for_plan_b*/) {
  //< plan_b 为 undefined 代表只要管好自己就行了
  // console.log(["max width:", max_width]);
  options = options || {};

  // console.log(nav, nav.querySelector(".ul"));
  // querySelectorAll 蠢爆了, 不能限定到仅自己的子元素...
  // 包含外部项的 ul
  var nav_ul = nav.querySelector('ul');
  // "更多"的面板
  var more_panel = nav_ul.querySelector('.more-panel');
  // 外部项
  var outside_items = Array.prototype.slice.call(nav_ul.children);
  // 包含"更多"按钮的项, 位于外部项的最末尾. 可能会不 display, 但位置依旧不变
  var more_button_item = outside_items[outside_items.length - 1];



  var min_width = getRealWidth(more_button_item);
  if (options.is_left) {
    min_width += outside_items[0].offsetWidth;
    // 外部项的数组要忽略掉"第一项"和"更多"按钮
    outside_items = outside_items.slice(1, outside_items.length - 1);
  } else {
    // 外部项的数组要忽略掉"更多"按钮
    outside_items = outside_items.slice(0, outside_items.length - 1);
  }

  if (options.plan_b) {  // 有备用计划
    var max_width_for_plan_b = getWindowWidth() - min_width -
        nav_upload.offsetWidth - options.nav_search_width_for_plan_b;
    if (in_plan_b) {  //< 代表目前要先调整右部分
      if (__adjustNav(options.plan_b, max_width_for_plan_b) ===
          0) {  //< 右边没有隐藏项了, 代表可以试着调整左边了
        in_plan_b = false;

        var max_width = getWindowWidth() - nav_con_fr.offsetWidth -
            nav_upload.offsetWidth - options.nav_search_width_for_plan_b;
        __adjustNav(nav, max_width, {is_left: true});
        return;
      } else {  // 右边还没调整完, 不能调整左边, 所以直接返回
        return;
      }
    } else if (max_width < min_width) {  //< 左边不能再压榨空间了
      if (nav.offsetWidth > min_width) {
        __adjustNav(nav, min_width, {is_left: true});  //< 先把左边调整好
        // console.log([min_width, nav.offsetWidth]);
      }
      in_plan_b = true;
      console.log([nav_con_fr.offsetWidth, max_width_for_plan_b]);
      __adjustNav(options.plan_b, max_width_for_plan_b);
      return;
    }
  }

  nav.style.maxWidth = (max_width).toString() + 'px';
  // 包含隐藏项的 ul
  var more_panel_ul = more_panel.querySelector('ul');
  // 隐藏项
  var hidden_items = Array.prototype.slice.call((more_panel_ul.children));

  // 外部项的总长度
  var sum_width = 0;

  // 第一个隐藏的项(或 undefined), 用于插入新的隐藏项
  let first_hidden_item = hidden_items[0] || undefined;

  // 记录隐藏项的数量, 会在判定是否计算"更多"按钮时使用
  var hidden_count = hidden_items.length;

  // 如果为真, 则代表外边已经容不下更多项了
  var overflowed = false;

  // 将会溢出的项放入"更多"面板中
  for (var i = 0; i < outside_items.length; i++) {
    if (!overflowed) {
      sum_width += outside_items[i].offsetWidth;
      var actual_width =
          ((i === outside_items.length - 1) && hidden_count === 0) ?
          sum_width + min_width - getRealWidth(more_button_item) :
          sum_width + min_width;
      // console.log([sum_width, actual_width, getRealWidth(more_button_item),
      // more_button_item]);
      if (actual_width > max_width) {
        overflowed = true;
      }
    }

    if (overflowed) {
      // console.log(["hide:", i, outside_items[i]]);
      hidden_count++;
      if (first_hidden_item) {
        // console.log(["insert before", outside_items[i], first_hidden_item]);
        more_panel_ul.insertBefore(outside_items[i], first_hidden_item);
      } else {
        // console.log(["append child", outside_items[i]]);
        more_panel_ul.appendChild(outside_items[i]);
      }
    }
  }

  // 如果没有溢出, 试着将"更多"面板中的项取回顶栏的此半部分, 直到会溢出
  if (!overflowed) {
    for (var i = 0; i < hidden_items.length; i++) {
      sum_width += hidden_items[i].offsetWidth;

      var actual_width = (i === hidden_items.length - 1) ?
          sum_width + min_width - getRealWidth(more_button_item) :
          sum_width + min_width;
      if (actual_width > max_width) {
        overflowed = true;
        break;
      }

      hidden_count--;
      nav_ul.insertBefore(hidden_items[i], more_button_item);
    }
  }

  if (overflowed) {
    more_button_item.style.display = 'list-item';
  } else {
    more_button_item.style.display = 'none';
  }

  return hidden_count;
}

/**
 * 是否正在调整顶栏的导航栏
 *
 * @type boolean
 */
var in_adjusting = false;

/**
 * 调整顶栏
 *
 * @param {number} window_width 窗口的大小
 * @param {number} [nav_search_width] 搜索栏的最终大小
 *
 * @returns {void}
 */
function adjustNav(window_width, nav_search_width) {
  if (in_adjusting) {
    return;
  }
  in_adjusting = true;

  if (!nav_search_width) {
    nav_search_width = nav_search.offsetWidth;
  }

  var max_width = window_width - nav_con_fr.offsetWidth -
      nav_upload.offsetWidth - nav_search_width;

  __adjustNav(nav_con_fl, max_width, {
    plan_b: nav_con_fr,
    nav_search_width_for_plan_b: nav_search_width,
    is_left: true
  });

  in_adjusting = false;
}

/**
 *
 * @param {*} selector 选择器
 * @param {*} inv 尝试间隔
 * @param {*} callback 回调函数, 以毫秒为单位
 *
 * @returns {void}
 */
function waitUntilLoaded(selectors, inv, callback) {
  for (var i = 0; i < selectors.length; i++) {
    if (!document.querySelector(selectors[i])) {
      setTimeout(function() {
        waitUntilLoaded(selectors, inv, callback);
      }, inv);
      return;
    }
  }
  callback();
}

// 在页面加载后初始化本 userscript
function initialize() {
  // 让 home-container 能在正确的位置显示
  {
    var home_container = document.querySelector('.home-container');
    if (home_container) {
      home_container.style = 'position: absolute; top:42px;';
    } else {
      console.log('home-container 不存在!');
    }
  }

  // 使顶栏固定
  {
    var header = document.querySelector('.bili-header-m');
    if (header) {
      header.style = 'position: fixed; top:0; width: 100%;';
    } else {
      console.log('bili-header-m 不存在!');
      return;
    }
  }

  // ~~让顶栏的内容能正常显示~~
  {
    bili_wrapper = document.querySelector('.bili-wrapper');
    nav_con_fl = bili_wrapper.querySelector('.nav-con.fl');
    nav_con_fr = bili_wrapper.querySelector('.nav-con.fr');
    nav_upload = bili_wrapper.querySelector('.up-load');

    if (!bili_wrapper || !nav_con_fl || !nav_con_fr || !nav_upload) {
      console.log(
          '.bili-wrapper 或 .nav-con.fl 或 .nav-con.fr 或 .up-load.fr 不存在!');
      console.log([bili_wrapper, nav_con_fl, nav_con_fr, nav_upload]);
      return;
    } else {
      // nav_con_fl.style = "font-size: 0.8em; text-indent: -5px;";
      // nav_con_fr.style = "float: left;";
      // nav_upload.style = "float: left;";
      // bili_wrapper.appendChild(nav_upload);
      // nav_con_fl.style = "overflow: hidden;";
      // nav_con_fl_ul = nav_con_fl.querySelector("ul");
    }
  }

  // 把搜索栏挪出来
  {
    nav_search = bili_wrapper.querySelector('.nav-search');
    if (nav_search) {
      bili_wrapper.appendChild(nav_search);
    } else {
      console.log('.nav-search 不存在');
    }
    nav_search.style.marginRight = '0';
  }

  // 添加"更多"的按钮
  function addButtonMore(nav, is_right) {
    var ul = nav.querySelector('ul');

    var item_more = document.createElement('li');
    item_more.classList.add('nav-item');
    item_more.classList.add('more');
    item_more.style.paddingLeft = '11px';
    item_more.style.paddingRight = '11px';
    if (is_right) {
      item_more.style.display = 'none';
    }


    var button_area = document.createElement('div');
    button_area.classList.add('button-area');
    button_area.classList.add('c-pointer');  // 照猫画虎

    var more_button = document.createElement('div');
    more_button.classList.add('icon-font');
    more_button.classList.add('icon-more-1');

    var more_panel = document.createElement('div');
    more_panel.classList.add('more-panel');
    // more_panel.style = "position: absolute; display: none; left:";
    more_panel.style = 'position: absolute;';

    var more_panel_ul = document.createElement('ul');

    button_area.appendChild(more_button);
    item_more.appendChild(button_area);
    ul.appendChild(item_more);
    more_panel.appendChild(more_panel_ul);
    button_area.appendChild(more_panel);
  }

  addButtonMore(nav_con_fl);
  addButtonMore(nav_con_fr, true);

  // 让搜索框可以伸缩
  {
    var search_input = document.querySelector('.nav-search input');
    search_input.addEventListener('focusin', function() {
      // console.log(["focusin"]);
      adjustNav(window_width, 142);  // workaround
      search_input.style.width = '100px';
    });
    search_input.addEventListener('focusout', function() {
      search_input.style.width = '40px';
      setTimeout(function() {
        adjustNav(window_width);
      }, 250);  // workaround
    });
  }

  // css 相关
  {
    var sheet = document.createElement('style');

    sheet.innerHTML =
        // 抄自网站自己的 css, 用来显示面板
        '.nav-con .more-panel {' +
        'position: absolute;' +
        //'width: 94px;' +
        'text-align: center;' +
        'top: 45px;' +
        'left: -4px;' +
        //"right: 5px;"+
        'background: #fff;' +
        'border: 1px solid #e5e9ef;' +
        '-webkit-box-shadow: 0 11px 12px 0 rgba(106,115,133,0.12);' +
        'box-shadow: 0 11px 12px 0 rgba(106,115,133,0.12);' +
        'border-radius: 8px;' +
        'color: #222;' +
        'z-index: 10;' +
        // 适应大小
        'width: -moz-max-content;' +     // firefox
        'width: max-content;' +          // chrome
        'width: -webkit-max-content;' +  // safari
        '}\n' +
        // 右边
        '.nav-con.fr .more-panel {' +
        'right: 4px;' +
        'left: auto;' +
        '}\n' +
        // 抄自网站自己的 css, 用来显示面板的角
        '.nav-con .more-panel:after {' +
        'content: "";' +
        'display: block;' +
        'border-top: 1px solid #e5e9ef;' +
        'border-left: 1px solid #e5e9ef;' +
        '-webkit-transform: rotate(45deg);' +
        'transform: rotate(45deg);' +
        'width: 8px;' +
        'height: 8px;' +
        'position: absolute;' +
        'top: -5px;' +
        'left: 12px;' +
        'background: #fff;' +
        '}\n' +
        // 右边
        '.nav-con.fr .more-panel:after {' +
        'right: 12px;' +
        'left: auto;' +
        '}\n' +
        // ~~让更多面板上的项居中~~ 与面板中的项有关的样式
        '.more-panel .nav-item {' +
        //'float: none!important;' +
        'transition: none!important;' +
        //"clear: both;" +
        '}\n' +
        // 自适应宽度
        '@media screen and (max-width: 980px) {' +
        '.bili-header-m .bili-wrapper {' +
        'width: 100%;' +
        '}' +
        '}\n' +
        // 悬浮显示面板
        '.nav-item.more .more-panel {' +
        'visibility: hidden;' +
        'transition-duration: 0.1s;' +
        'transition-delay: 0.1s;' +
        '}\n' +
        '.nav-item.more:hover .more-panel {' +
        'visibility: visible;' +
        'transition-duration: 0.1s;' +
        'transition-delay: 0s;' +
        '}\n' +
        // 让 home 的位置好看些
        '.nav-item.home { ' +
        'margin-left: 0!important;' +
        'transition-duration: 0s;' +
        'transition-delay: 0s;' +
        '}\n';


    document.head.appendChild(sheet);
  }

  // setTimeout(function() {
  adjustNav(getWindowWidth());
  initialized = true;
  //}, 1000);



  // 隐藏会冒出来的新顶栏
  {
    var sticky_bar = document.querySelector('.sticky-bar');
    if (sticky_bar) {
      sticky_bar.style = 'visibility: hidden;';
    } else {
      console.log('sticky-bar 不存在!');
    }
  }
}

waitUntilLoaded(['.nav-con.fl', '.nav-con.fr', '.up-load.fr'], 50, initialize);

/**
 * 用于检测是否是窗口的宽度发生了变化
 *
 * @type {number}
 */
var window_width = getWindowWidth();

// 监视窗口调整大小
window.addEventListener('resize', function() {

  if (!initialized) {
    return;
  }

  var new_width = getWindowWidth();
  if (window_width === new_width) {
    return;
  }

  window_width = new_width;

  // nav_con_fl, nav_con_fr, nav_upload;

  adjustNav(window_width);

  // console.log(nav_con_fl.style.maxWidth);

});

})();