☰

Habr.Features

Всякое-разное для Habr aka habr.com

当前为 2019-09-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Habr.Features
  3. // @version 3.6.67
  4. // @description Всякое-разное для Habr aka habr.com
  5. // @author AngReload
  6. // @include https://habr.com/*
  7. // @include http://habr.com/*
  8. // @namespace habr_comments
  9. // @run-at document-start
  10. // @grant GM.xmlHttpRequest
  11. // @connect m.habr.com
  12. // @icon https://habr.com/favicon.ico
  13. // ==/UserScript==
  14. /* global localStorage, MutationObserver, GM */
  15.  
  16. // настройки по умолчанию
  17. const FLAGS = {};
  18.  
  19. // размеры кнопок
  20. FLAGS.SMALL_BUTTONS = false;
  21.  
  22. // остановка гифок
  23. // клик по гифке заменит картинку на заглушку
  24. // повторный клик вернет гифку на место
  25. FLAGS.GIF_STOP = true;
  26. // остановить гифки при загрузке страницы
  27. FLAGS.GIF_STOP_ONLOAD = false;
  28. // цвета заглушки
  29. FLAGS.GIF_STOP_COLOR_FG = 'White'; // White
  30. FLAGS.GIF_STOP_COLOR_BG = 'LightGray'; // LightGray or WhiteSmoke
  31. // менять src вместо создания-удаления нод
  32. FLAGS.GIF_STOP_OVERTYPE = false;
  33.  
  34. // показывать счетчики рейтинга в виде:
  35. // рейтинг = число_плюсов - число_минусов
  36. FLAGS.RATING_DETAILS = true;
  37. // клик мышкой по рейтингу меняет вид на простой \ детальный
  38. FLAGS.RATING_DETAILS_ONCLICK = false;
  39. // рейтинг = число_голосовавших * (процент_плюсов - процент_минусов)%
  40. FLAGS.RATING_DETAILS_PN = false;
  41.  
  42. // карма = число_голосовавших * (процент_товарищей - процент_неприятелей)%
  43. FLAGS.KARMA_DETAILS = true;
  44.  
  45. // показывать метки времени в текущем часовом поясе
  46. // абсолютно, либо относительно текущего времени, либо относительно родительского времени
  47. // меняется по клику, в всплывающей подсказке другие виды времени, автообновляется
  48. FLAGS.TIME_DETAILS = true;
  49.  
  50. // добавить возможность сортировки комментариев
  51. FLAGS.COMMENTS_SORT = true;
  52. // сортировать комменты при загрузке страницы или оставить сортировку по времени
  53. FLAGS.COMMENTS_SORT_ONLOAD = true;
  54. // список доступных сортировок
  55. FLAGS.COMMENTS_SORT_BY_FRESHNESS = true;
  56. FLAGS.COMMENTS_SORT_BY_TREND = true; // самая полезная сортировка
  57. FLAGS.COMMENTS_SORT_BY_QUALITY = false;
  58. FLAGS.COMMENTS_SORT_BY_RATING = false;
  59. FLAGS.COMMENTS_SORT_BY_POPULARITY = false;
  60. FLAGS.COMMENTS_SORT_BY_REDDIT = false;
  61. FLAGS.COMMENTS_SORT_BY_RANDOM = false;
  62.  
  63. // добавить возможность сворачивать комментарии
  64. FLAGS.COMMENTS_HIDE = true;
  65. // свернуть комментарии если их глубина вложенности равна некому числу
  66. FLAGS.HIDE_LEVEL = 4;
  67. // свернуть комменты с 4-го уровня
  68. FLAGS.HIDE_LEVEL_4 = false;
  69. // сделать «возврат каретки» для комментариев чтобы глубина вложенности не превышала некого числа
  70. FLAGS.LINE_LEN = 8;
  71. // отбивать каждый следущий уровень вложенности дополнительным отступом
  72. FLAGS.REDUCE_NEW_LINES = true;
  73. // глубина вложенности при «возврате каретки» комментариев обозначается разным цветом
  74. FLAGS.RAINBOW_NEW_LINE = true;
  75.  
  76. // заменить ссылки ведущие к новым комментариям на дерево комментариев
  77. FLAGS.COMMENTS_LINKS = true;
  78.  
  79. // запоминание галки «Использовать MarkDown» для комментариев
  80. FLAGS.COMMENTS_MD = true;
  81.  
  82. // добавить ссылку на хабрасторадж в форму редактирования комментариев
  83. FLAGS.HTSO_BTN = true;
  84.  
  85. // добавить ссылку на отслеживаемых в странице профиля
  86. FLAGS.SUBS_BTN = true;
  87.  
  88. // включить поиск комментариев в профилях
  89. FLAGS.FIND_COMMENTS = true;
  90.  
  91. // линии вдоль прокрутки для отображения размеров поста и комментариев
  92. FLAGS.SCROLL_LEGEND = true;
  93.  
  94. // добавляет кнопку активации ночного режима
  95. FLAGS.NIGHT_MODE = true;
  96.  
  97. // добавляет диалок настроек
  98. FLAGS.CONFIG_INTERFACE = true;
  99.  
  100. // включить разные стили
  101. FLAGS.USERSTYLE = true;
  102. // лента постов с увеличенными отступами, нижний бар выровнен вправо
  103. FLAGS.USERSTYLE_FEED_DISTANCED = true;
  104. // мелкий фикс для отступа в счетчике ленты
  105. FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE = true;
  106. // удаляет правую колонку, там где не жалко
  107. FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT = true;
  108. // аватарки без скруглений
  109. FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS = true;
  110. // большие аватарки в профиле и карточках
  111. FLAGS.USERSTYLE_USERINFO_BIG_AVATARS = true;
  112. // ограничить размер картинок в комментах
  113. FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE = 0;
  114. // ограничить размер картинок в комментах
  115. FLAGS.USERSTYLE_COMMENTS_OPACITY = false;
  116. // нормальные стили для комментариев
  117. FLAGS.USERSTYLE_COMMENTS_FIX = true;
  118. // нормальные стили для кода
  119. FLAGS.USERSTYLE_CODE_FIX = true;
  120. // окантовка границ спойлеров
  121. FLAGS.USERSTYLE_SPOILER_BORDERS = true;
  122. // делает глючные плавающие блоки статичными
  123. FLAGS.USERSTYLE_STATIC_STICKY = true;
  124. // показывать язык подсветки блоков кода
  125. FLAGS.USERSTYLE_HLJS_LANG = true;
  126. // показывать язык кода только при наведении
  127. FLAGS.USERSTYLE_HLJS_LANG_HOVER = false;
  128. // свой шрифт для блоков кода
  129. FLAGS.USERSTYLE_CODE_FONT = ''; // PT Mono
  130. // размер табов в коде
  131. FLAGS.USERSTYLE_CODE_TABSIZE = 2;
  132. // для ночного режима
  133. FLAGS.USERSTYLE_CODE_NIGHT = true;
  134. // для настроек
  135. FLAGS.USERSTYLE_CONFIG_INTERFACE = true;
  136. FLAGS.SCROLL_BEHAVIOR_SMOOTH = true;
  137.  
  138. const configOptions = [
  139.   ['KARMA_DETAILS', 'счётчики кармы с плюсами и минусами'],
  140.   ['RATING_DETAILS', 'рейтинги с плюсами и минусами'],
  141.   ['RATING_DETAILS_PN', 'рейтинги в процентах'],
  142.   ['TIME_DETAILS', 'отметки о времени с подробностями'],
  143.   ['GIF_STOP', 'остановка гифок'],
  144.   ['GIF_STOP_ONLOAD', 'остановить гифки при загрузке страницы'],
  145.   ['COMMENTS_SORT', 'сортировка комментов'],
  146.   ['COMMENTS_SORT_ONLOAD', 'сортировать комменты при загрузке'],
  147.   ['COMMENTS_SORT_BY_FRESHNESS', 'сортировка новые'],
  148.   ['COMMENTS_SORT_BY_TREND', 'сортировка горячие'],
  149.   ['COMMENTS_SORT_BY_QUALITY', 'сортировка хорошие'],
  150.   ['COMMENTS_SORT_BY_REDDIT', 'сортировка проверенные'],
  151.   ['COMMENTS_SORT_BY_RATING', 'сортировка рейтинговые'],
  152.   ['COMMENTS_SORT_BY_POPULARITY', 'сортировка популярные'],
  153.   ['COMMENTS_SORT_BY_RANDOM', 'сортировка случайные'],
  154.   ['COMMENTS_HIDE', 'сворачивание комментов'],
  155.   ['HIDE_LEVEL_4', 'свернуть комменты с 4-го уровня'],
  156.   // ['REDUCE_NEW_LINES', 'возврат каретки с уменьшением ширины'],
  157.   // ['RAINBOW_NEW_LINE', 'возврат каретки комментов в разных цветах'],
  158.   // ['COMMENTS_LINKS', '"читать комментарии" ведёт на корень комментов'],
  159.   // ['COMMENTS_MD', 'запоминать галку MarkDown'],
  160.   ['USERSTYLE_COMMENTS_OPACITY', 'заминусованные комменты без прозрачности'],
  161.   // ['FIX_JUMPING_SCROLL', 'заморозить высоту статьи при загрузке'],
  162.   ['SCROLL_LEGEND', 'ленгенда страницы у скроллбара'],
  163.   ['SUBS_BTN', 'табы подписок в профилях'],
  164.   ['FIND_COMMENTS', 'поиск по комментариям в профилях'],
  165.   ['NIGHT_MODE', 'ночной режим'],
  166.   ['SMALL_BUTTONS', 'маленькие кнопки настроек и ночного режима'],
  167.   // ['USERSTYLE', 'стилизация'],
  168.   ['USERSTYLE_COMMENTS_FIX', 'стили комментов'],
  169.   ['USERSTYLE_HLJS_LANG', 'показать язык для блоков кода'],
  170.   // ['USERSTYLE_HLJS_LANG_HOVER', 'язык кода скрыт до наведении курсора'],
  171.   ['USERSTYLE_STATIC_STICKY', 'зафиксировать плавающие блоки'],
  172.   // ['USERSTYLE_SPOILER_BORDERS', 'видимые границы спойлеров'],
  173.   ['USERSTYLE_FEED_DISTANCED', 'большие отступы между постами в ленте'],
  174.   ['USERSTYLE_REMOVE_SIDEBAR_RIGHT', 'удалить правую колонку сайта'],
  175.   // ['USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS', 'квадратные аватарки'],
  176.   ['USERSTYLE_USERINFO_BIG_AVATARS', 'по возможности большие аватарки в профилях'],
  177. ];
  178.  
  179. // сохраняем умолчания для панели настроек
  180. if (!localStorage.getItem('habrafixFlags')) {
  181.   localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
  182. } else {
  183.   const jsonString = localStorage.getItem('habrafixFlags');
  184.   const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
  185.   const loadedKeys = Object.keys(loadedConfig);
  186.   Object.keys(FLAGS).forEach((key) => {
  187.     if (
  188.       loadedKeys.includes(key) &&
  189.       configOptions.find(arr => arr[0] === key)
  190.     ) {
  191.       FLAGS[key] = loadedConfig[key];
  192.     }
  193.   });
  194. }
  195.  
  196. let BUTTON_SIZE = 16;
  197. let BUTTON_SIZE2 = 25;
  198. let BUTTON_SIZE4 = 48;
  199. let KARMA_WIDTH = 84; // ?
  200.  
  201. if (FLAGS.SMALL_BUTTONS) {
  202.   BUTTON_SIZE = 16;
  203.   BUTTON_SIZE2 = 25;
  204.   BUTTON_SIZE4 = 48;
  205.   KARMA_WIDTH = 84; // ?
  206. } else {
  207.   BUTTON_SIZE = 32;
  208.   BUTTON_SIZE2 = 25;
  209.   BUTTON_SIZE4 = 88;
  210.   KARMA_WIDTH = 84;
  211. }
  212.  
  213. // интерфейс для хранения настроек
  214. const userConfig = {
  215.   // имя записи в localsorage
  216.   key: 'habrafix',
  217.   // модель настроек: ключ - возможные значения
  218.   model: {
  219.     time_publications: ['fromNow', 'absolute'],
  220.     time_comments: ['fromParent', 'fromNow', 'absolute'],
  221.     comments_order: ['trend', 'time'],
  222.     scores_details: [true, false],
  223.     comment_markdown: [false, true],
  224.     night_mode: [false, true],
  225.   },
  226.   config: {},
  227.   // при старте для конфига берем сохраненные параметры либо по умолчанию
  228.   init() {
  229.     let jsonString = localStorage.getItem(userConfig.key);
  230.     const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
  231.     const loadedKeys = Object.keys(loadedConfig);
  232.     const config = {};
  233.     Object.keys(userConfig.model).forEach((key) => {
  234.       const exist = loadedKeys.indexOf(key) >= 0;
  235.       config[key] = exist ? loadedConfig[key] : userConfig.model[key][0];
  236.     });
  237.     jsonString = JSON.stringify(config);
  238.     localStorage.setItem(userConfig.key, jsonString);
  239.     userConfig.config = config;
  240.   },
  241.   getItem(key) {
  242.     const jsonString = localStorage.getItem(userConfig.key);
  243.     const config = JSON.parse(jsonString);
  244.     return config[key];
  245.     // return userConfig.config[key];
  246.   },
  247.   setItem(key, value) {
  248.     let jsonString = localStorage.getItem(userConfig.key);
  249.     const config = JSON.parse(jsonString);
  250.     config[key] = value;
  251.     jsonString = JSON.stringify(config);
  252.     localStorage.setItem(userConfig.key, jsonString);
  253.     userConfig.config = config;
  254.   },
  255.   // каруселит параметр по значения модели
  256.   shiftItem(key) {
  257.     const currentValue = userConfig.getItem(key);
  258.     const availableValues = userConfig.model[key];
  259.     const currentIdx = availableValues.indexOf(currentValue);
  260.     const nextIdx = (currentIdx + 1) % availableValues.length;
  261.     const nextValue = availableValues[nextIdx];
  262.     userConfig.setItem(key, nextValue);
  263.     return nextValue;
  264.   },
  265. };
  266. userConfig.init();
  267.  
  268. // свои стили
  269. const userStyleEl = document.createElement('style');
  270. let userStyle = '';
  271.  
  272. if (FLAGS.SCROLL_LEGEND) {
  273.   userStyle += `
  274.     .legend_el {
  275.       position: fixed;
  276.       width: 4px;
  277.       right: 0;
  278.       transition: top 1s ease-out, height 1s ease-out;
  279.       z-index: 10000;
  280.     }
  281.  
  282.     #xpanel {
  283.       right: 4px;
  284.     }
  285.   `;
  286. }
  287.  
  288. if (FLAGS.USERSTYLE_FEED_DISTANCED) {
  289.   userStyle += `
  290.     .post__body_crop {
  291.       text-align: right;
  292.     }
  293.  
  294.     .post__body_crop .post__text {
  295.       text-align: left;
  296.     }
  297.  
  298.     .post__footer {
  299.       text-align: right;
  300.     }
  301.  
  302.     .posts_list .content-list__item_post {
  303.       padding: 40px 0;
  304.     }
  305.   `;
  306. }
  307.  
  308. if (FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE) {
  309.   userStyle += `
  310.     .toggle-menu__item-counter_new {
  311.       margin-left: 4px;
  312.     }
  313.   `;
  314. }
  315.  
  316. if (FLAGS.USERSTYLE_COMMENTS_OPACITY) {
  317.   userStyle += `
  318.     .comment__message_downgrade {
  319.       opacity: 1;
  320.     }
  321.   `;
  322. }
  323.  
  324. if (FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT) {
  325.   // remove for
  326.   // https://habr.com/post/352896/
  327.   // https://habr.com/sandbox/
  328.   // https://habr.com/sandbox/115216/
  329.   // https://habr.com/users/saggid/posts/
  330.   // https://habr.com/users/saggid/comments/
  331.   // https://habr.com/users/saggid/favorites/
  332.   // https://habr.com/users/saggid/favorites/posts/
  333.   // https://habr.com/users/saggid/favorites/comments/
  334.   // https://habr.com/company/pvs-studio/blog/353640/
  335.   // https://habr.com/company/pvs-studio/blog/
  336.   // https://habr.com/company/pvs-studio/blog/top/
  337.   // https://habr.com/company/pvs-studio/
  338.   // https://habr.com/feed/
  339.   // https://habr.com/top/
  340.   // https://habr.com/top/yearly/
  341.   // https://habr.com/all/
  342.   // https://habr.com/all/top10/
  343.  
  344.   // display for
  345.   // https://habr.com/company/pvs-studio/profile/
  346.   // https://habr.com/company/pvs-studio/vacancies/
  347.   // https://habr.com/company/pvs-studio/fans/all/rating/
  348.   // https://habr.com/company/pvs-studio/workers/new/rating/
  349.   // https://habr.com/feed/settings/
  350.   // https://habr.com/users/
  351.   // https://habr.com/hubs/
  352.   // https://habr.com/hubs/admin/
  353.   // https://habr.com/companies/
  354.   // https://habr.com/companies/category/software/
  355.   // https://habr.com/companies/new/
  356.   // https://habr.com/flows/design/
  357.  
  358.   const path = window.location.pathname;
  359.   const isPost = /^\/(ru|en)\/post\/\d+\/$/.test(path);
  360.   const isSandbox = /^\/(ru|en)\/sandbox\//.test(path);
  361.   const isUserPosts = /^\/(ru|en)\/users\/[^/]+\/posts\//.test(path);
  362.   const isUserComments = /^\/(ru|en)\/users\/[^/]+\/comments\//.test(path);
  363.   const isUserFavorites = /^\/(ru|en)\/users\/[^/]+\/favorites\//.test(path);
  364.   // const isUserSubscription = /^\/(ru|en)\/users\/[^/]+\/subscription\//.test(path);
  365.   const isCompanyBlog = /^\/(ru|en)\/company\/[^/]+\/blog\//.test(path);
  366.   const isCompanyBlog2 = /^\/(ru|en)\/company\/[^/]+\/(page\d+\/)?$/.test(path);
  367.   const isFeed = /^\/(ru|en)\/feed\//.test(path);
  368.   const isHome = /^\/(ru|en)\/$/.test(path);
  369.   const isTop = /^\/(ru|en)\/top\//.test(path);
  370.   const isAll = /^\/(ru|en)\/all\//.test(path);
  371.   const isNews = /^\/(ru|en)\/news\//.test(path);
  372.   const isNewsT = /^\/(ru|en)\/news\/t\/\d+\/$/.test(path);
  373.  
  374.   if (
  375.     isPost || isSandbox ||
  376.     isUserPosts || isUserComments || isUserFavorites ||
  377.     isCompanyBlog || isCompanyBlog2 ||
  378.     isFeed || isHome || isTop || isAll ||
  379.     isNews || isNewsT
  380.   ) {
  381.     userStyle += `
  382.       .sidebar_right,
  383.       .sidebar {
  384.         display: none;
  385.       }
  386.  
  387.       .content_left {
  388.         padding-right: 0;
  389.       }
  390.  
  391.       .comment_plain {
  392.         max-width: 860px;
  393.       }
  394.     `;
  395.   }
  396. }
  397.  
  398. if (FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS) {
  399.   userStyle += `
  400.     .user-info__image-pic,
  401.     .user-pic_popover,
  402.     .media-obj__image-pic,
  403.     .company-info__image-pic {
  404.       border-radius: 0;
  405.     }
  406.   `;
  407. }
  408.  
  409. if (FLAGS.USERSTYLE_USERINFO_BIG_AVATARS) {
  410.   userStyle += `
  411.     .page-header {
  412.       height: auto;
  413.     }
  414.  
  415.     .media-obj__image-pic_hub,
  416.     .user-info__stats .media-obj__image-pic_user,
  417.     /* .media-obj__image-pic_company, */
  418.     .company-info__image-pic {
  419.       width: auto;
  420.       height: auto;
  421.     }
  422.  
  423.     .page-header_tall .company-info__image-pic {
  424.       width: 48px;
  425.       height: 48px;
  426.     }
  427.   `;
  428. }
  429.  
  430. if (FLAGS.COMMENTS_SORT) {
  431.   userStyle += `
  432.     .comments_order {
  433.       color: #333;
  434.       font-size: 14px;
  435.       font-family: "-apple-system",BlinkMacSystemFont,Arial,sans-serif;
  436.       text-rendering: optimizeLegibility;
  437.       border-bottom: 1px solid #e3e3e3;
  438.       padding: 8px;
  439.       text-align: right;
  440.     }
  441.  
  442.     .comments_order a {
  443.       color: #548eaa;
  444.       font-style: normal;
  445.       text-decoration: none;
  446.     }
  447.  
  448.     .comments_order a:hover {
  449.       color: #487284;
  450.     }
  451.   `;
  452. }
  453.  
  454. if (FLAGS.USERSTYLE_COMMENTS_FIX) {
  455.   userStyle += `
  456.     .content-list_comments {
  457.       overflow: visible;
  458.     }
  459.  
  460.     .comment__folding-dotholder {
  461.       display: none !important;
  462.     }
  463.  
  464.     .content-list_nested-comments {
  465.       border-left: 1px solid #e3e3e3;
  466.       margin: 0;
  467.       padding-top: 20px;
  468.       padding-left: 20px !important;
  469.     }
  470.  
  471.     .content-list_comments {
  472.       /*border-left: 1px solid silver;*/
  473.       margin: 0;
  474.       padding-left: 0;
  475.       padding-top: 20px;
  476.       /*background: #FCE4EC;*/
  477.     }
  478.  
  479.     #comments-list .js-form_placeholder {
  480.       border-left: 1px solid #e3e3e3;
  481.       padding-left: 20px;
  482.     }
  483.  
  484.     .comments_new-line {
  485.       border-left: 1px solid #777;
  486.       border-bottom: 1px solid #777;
  487.       border-top: 1px solid #777;
  488.       margin-left: -${FLAGS.LINE_LEN * 21}px !important;
  489.       background: white;
  490.       padding-bottom: 4px;
  491.     }
  492.  
  493.     /* .comment__head_topic-author.comment__head_new-comment */
  494.     .comment__head_topic-author .user-info {
  495.       text-decoration: underline;
  496.     }
  497.  
  498.     /* фикс, когда не добавляется класс &_plus или minus при user_vote_action */
  499.     .voting-wjt__button[title="Вы проголосовали положительно"] {
  500.       color: #7ba600;
  501.     }
  502.     .voting-wjt__button[title="Вы проголосовали отрицательно"] {
  503.       color: #d53c30;
  504.     }
  505.   `;
  506. }
  507.  
  508. if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.RAINBOW_NEW_LINE) {
  509.   userStyle += `
  510.     .comments_new-line-1 {
  511.       border-color: #0caefb;
  512.     }
  513.  
  514.     .comments_new-line-2 {
  515.       border-color: #06feb7;
  516.     }
  517.  
  518.     .comments_new-line-3 {
  519.       border-color: #fbcb02;
  520.     }
  521.  
  522.     .comments_new-line-0 {
  523.       border-color: #fb0543;
  524.     }
  525.  
  526.     .js-comment_parent:not(:hover) {
  527.       color: #cd66cd !important;
  528.     }
  529.   `;
  530. }
  531.  
  532. if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.REDUCE_NEW_LINES) {
  533.   userStyle += `
  534.     .comments_new-line .comments_new-line {
  535.       margin-left: -${(FLAGS.LINE_LEN - 1) * 21}px !important;
  536.     }
  537.   `;
  538. }
  539.  
  540. if (FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE) {
  541.   userStyle += `
  542.     .comment__message img {
  543.       max-height: ${FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE}px;
  544.     }
  545.  
  546.     .comment__message .spoiler .img {
  547.       max-height: auto;
  548.     }
  549.   `;
  550. }
  551.  
  552. if (FLAGS.USERSTYLE_CODE_FIX) {
  553.   let addFont = '';
  554.   if (FLAGS.USERSTYLE_CODE_FONT) {
  555.     addFont = FLAGS.USERSTYLE_CODE_FONT;
  556.     if (addFont.indexOf(' ') >= 0) {
  557.       addFont = `"${addFont}"`;
  558.     }
  559.     addFont += ',';
  560.   }
  561.  
  562.   const tabSize = FLAGS.USERSTYLE_CODE_TABSIZE || 4;
  563.  
  564.   userStyle += `
  565.     .editor .text-holder textarea,
  566.     .tm-editor__textarea,
  567.     pre {
  568.       font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace;
  569.     }
  570.  
  571.     code {
  572.       font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace !important;;
  573.       -o-tab-size: ${tabSize};
  574.       -moz-tab-size: ${tabSize};
  575.       tab-size: ${tabSize};
  576.       background: #f7f7f7;
  577.       border-radius: 3px;
  578.       color: #505c66;
  579.       display: inline-block;
  580.       font-weight: 500;
  581.       line-height: 1.29;
  582.       padding: 5px 9px;
  583.       vertical-align: 1px;
  584.     }
  585.   `;
  586. }
  587.  
  588. if (FLAGS.USERSTYLE_SPOILER_BORDERS) {
  589.   userStyle += `
  590.     .spoiler .spoiler_text {
  591.       border: 1px dashed rgb(12, 174, 251);
  592.     }
  593.   `;
  594. }
  595.  
  596. if (FLAGS.USERSTYLE_STATIC_STICKY) {
  597.   userStyle += `
  598.     .wrapper-sticky,
  599.     .js-ad_sticky,
  600.     .js-ad_sticky_comments {
  601.       position: static !important;
  602.     }
  603.     .sticky-spacer {
  604.       display: none !important;
  605.     }
  606.   `;
  607. }
  608.  
  609. if (FLAGS.GIF_STOP) {
  610.   userStyle += `
  611.     .habrafix_gif-stop:hover {
  612.       outline: 4px solid #548eaa;
  613.       outline-offset: -4px;
  614.     }
  615.   `;
  616. }
  617.  
  618. if (FLAGS.USERSTYLE_HLJS_LANG) {
  619.   let hover = '';
  620.   if (FLAGS.USERSTYLE_HLJS_LANG_HOVER) hover = ':hover';
  621.   userStyle += `
  622.     pre {
  623.       position: relative;
  624.     }
  625.  
  626.     .hljs${hover}::after {
  627.       position: absolute;
  628.       font-size: 12px;
  629.       content: 'code';
  630.       right: 0;
  631.       top: 0;
  632.       padding: 1px 5px 0 4px;
  633.       /*border-bottom: 1px solid #e5e8ec;
  634.       border-left: 1px solid #e5e8ec;
  635.       border-bottom-left-radius: 3px;
  636.       color: #505c66;*/
  637.       opacity: .5;
  638.     }
  639.   `;
  640.   userStyle += [
  641.     ['1c', '1C:Enterprise (v7, v8)'],
  642.     ['abnf', 'Augmented Backus-Naur Form'],
  643.     ['accesslog', 'Access log'],
  644.     ['actionscript', 'ActionScript'],
  645.     ['ada', 'Ada'],
  646.     ['apache', 'Apache'],
  647.     ['applescript', 'AppleScript'],
  648.     ['arduino', 'Arduino'],
  649.     ['armasm', 'ARM Assembly'],
  650.     ['asciidoc', 'AsciiDoc'],
  651.     ['aspectj', 'AspectJ'],
  652.     ['autohotkey', 'AutoHotkey'],
  653.     ['autoit', 'AutoIt'],
  654.     ['avrasm', 'AVR Assembler'],
  655.     ['awk', 'Awk'],
  656.     ['axapta', 'Axapta'],
  657.     ['bash', 'Bash'],
  658.     ['basic', 'Basic'],
  659.     ['bnf', 'Backus–Naur Form'],
  660.     ['brainfuck', 'Brainfuck'],
  661.     ['cal', 'C/AL'],
  662.     ['capnproto', 'Cap’n Proto'],
  663.     ['ceylon', 'Ceylon'],
  664.     ['clean', 'Clean'],
  665.     ['clojure-repl', 'Clojure REPL'],
  666.     ['clojure', 'Clojure'],
  667.     ['cmake', 'CMake'],
  668.     ['coffeescript', 'CoffeeScript'],
  669.     ['coq', 'Coq'],
  670.     ['cos', 'Caché Object Script'],
  671.     ['cpp', 'C++'],
  672.     ['crmsh', 'crmsh'],
  673.     ['crystal', 'Crystal'],
  674.     ['cs', 'C#'],
  675.     ['csp', 'CSP'],
  676.     ['css', 'CSS'],
  677.     ['d', 'D'],
  678.     ['dart', 'Dart'],
  679.     ['delphi', 'Delphi'],
  680.     ['diff', 'Diff'],
  681.     ['django', 'Django'],
  682.     ['dns', 'DNS Zone file'],
  683.     ['dockerfile', 'Dockerfile'],
  684.     ['dos', 'DOS .bat'],
  685.     ['dsconfig', 'dsconfig'],
  686.     ['dts', 'Device Tree'],
  687.     ['dust', 'Dust'],
  688.     ['ebnf', 'Extended Backus-Naur Form'],
  689.     ['elixir', 'Elixir'],
  690.     ['elm', 'Elm'],
  691.     ['erb', 'ERB (Embedded Ruby)'],
  692.     ['erlang-repl', 'Erlang REPL'],
  693.     ['erlang', 'Erlang'],
  694.     ['excel', 'Excel'],
  695.     ['fix', 'FIX'],
  696.     ['flix', 'Flix'],
  697.     ['fortran', 'Fortran'],
  698.     ['fsharp', 'F#'],
  699.     ['gams', 'GAMS'],
  700.     ['gauss', 'GAUSS'],
  701.     ['gcode', 'G-code (ISO 6983)'],
  702.     ['gherkin', 'Gherkin'],
  703.     ['glsl', 'GLSL'],
  704.     ['go', 'Go'],
  705.     ['golo', 'Golo'],
  706.     ['gradle', 'Gradle'],
  707.     ['groovy', 'Groovy'],
  708.     ['haml', 'Haml'],
  709.     ['handlebars', 'Handlebars'],
  710.     ['haskell', 'Haskell'],
  711.     ['haxe', 'Haxe'],
  712.     ['hsp', 'HSP'],
  713.     ['htmlbars', 'HTMLBars'],
  714.     ['http', 'HTTP'],
  715.     ['hy', 'Hy'],
  716.     ['inform7', 'Inform 7'],
  717.     ['ini', 'Ini'],
  718.     ['irpf90', 'IRPF90'],
  719.     ['java', 'Java'],
  720.     ['javascript', 'JavaScript'],
  721.     ['jboss-cli', 'jboss-cli'],
  722.     ['json', 'JSON'],
  723.     ['julia-repl', 'Julia REPL'],
  724.     ['julia', 'Julia'],
  725.     ['kotlin', 'Kotlin'],
  726.     ['lasso', 'Lasso'],
  727.     ['ldif', 'LDIF'],
  728.     ['leaf', 'Leaf'],
  729.     ['less', 'Less'],
  730.     ['lisp', 'Lisp'],
  731.     ['livecodeserver', 'LiveCode'],
  732.     ['livescript', 'LiveScript'],
  733.     ['llvm', 'LLVM IR'],
  734.     ['lsl', 'Linden Scripting Language'],
  735.     ['lua', 'Lua'],
  736.     ['makefile', 'Makefile'],
  737.     ['markdown', 'Markdown'],
  738.     ['mathematica', 'Mathematica'],
  739.     ['matlab', 'Matlab'],
  740.     ['maxima', 'Maxima'],
  741.     ['mel', 'MEL'],
  742.     ['mercury', 'Mercury'],
  743.     ['mipsasm', 'MIPS Assembly'],
  744.     ['mizar', 'Mizar'],
  745.     ['mojolicious', 'Mojolicious'],
  746.     ['monkey', 'Monkey'],
  747.     ['moonscript', 'MoonScript'],
  748.     ['n1ql', 'N1QL'],
  749.     ['nginx', 'Nginx'],
  750.     ['nimrod', 'Nimrod'],
  751.     ['nix', 'Nix'],
  752.     ['nsis', 'NSIS'],
  753.     ['objectivec', 'Objective-C'],
  754.     ['ocaml', 'OCaml'],
  755.     ['openscad', 'OpenSCAD'],
  756.     ['oxygene', 'Oxygene'],
  757.     ['parser3', 'Parser3'],
  758.     ['perl', 'Perl'],
  759.     ['pf', 'pf'],
  760.     ['pgsql', 'PostgreSQL'],
  761.     ['plaintext', 'просто текст'], // на будущее
  762.     ['php', 'PHP'],
  763.     ['pony', 'Pony'],
  764.     ['powershell', 'PowerShell'],
  765.     ['processing', 'Processing'],
  766.     ['profile', 'Python profile'],
  767.     ['prolog', 'Prolog'],
  768.     ['protobuf', 'Protocol Buffers'],
  769.     ['puppet', 'Puppet'],
  770.     ['purebasic', 'PureBASIC'],
  771.     ['python', 'Python'],
  772.     ['q', 'Q'],
  773.     ['qml', 'QML'],
  774.     ['r', 'R'],
  775.     ['rib', 'RenderMan RIB'],
  776.     ['roboconf', 'Roboconf'],
  777.     ['routeros', 'Microtik RouterOS script'],
  778.     ['rsl', 'RenderMan RSL'],
  779.     ['ruby', 'Ruby'],
  780.     ['ruleslanguage', 'Oracle Rules Language'],
  781.     ['rust', 'Rust'],
  782.     ['scala', 'Scala'],
  783.     ['scheme', 'Scheme'],
  784.     ['scilab', 'Scilab'],
  785.     ['scss', 'SCSS'],
  786.     ['shell', 'Shell Session'],
  787.     ['smali', 'Smali'],
  788.     ['smalltalk', 'Smalltalk'],
  789.     ['sml', 'SML'],
  790.     ['sqf', 'SQF'],
  791.     ['sql', 'SQL'],
  792.     ['stan', 'Stan'],
  793.     ['stata', 'Stata'],
  794.     ['step21', 'STEP Part 21'],
  795.     ['stylus', 'Stylus'],
  796.     ['subunit', 'SubUnit'],
  797.     ['swift', 'Swift'],
  798.     ['taggerscript', 'Tagger Script'],
  799.     ['tap', 'Test Anything Protocol'],
  800.     ['tcl', 'Tcl'],
  801.     ['tex', 'TeX'],
  802.     ['thrift', 'Thrift'],
  803.     ['tp', 'TP'],
  804.     ['twig', 'Twig'],
  805.     ['typescript', 'TypeScript'],
  806.     ['vala', 'Vala'],
  807.     ['vbnet', 'VB.NET'],
  808.     ['vbscript-html', 'VBScript in HTML'],
  809.     ['vbscript', 'VBScript'],
  810.     ['verilog', 'Verilog'],
  811.     ['vhdl', 'VHDL'],
  812.     ['vim', 'Vim Script'],
  813.     ['x86asm', 'Intel x86 Assembly'],
  814.     ['xl', 'XL'],
  815.     ['xml', 'HTML, XML'],
  816.     ['xquery', 'XQuery'],
  817.     ['yaml', 'YAML'],
  818.     ['zephir', 'Zephir'],
  819.   ].map(([langTag, langName]) => `.hljs.${langTag}${hover}::after{content:'${langName} [${langTag}]'}`).join('');
  820. }
  821.  
  822. if (FLAGS.USERSTYLE_CODE_NIGHT) {
  823.   userStyle += `
  824.   .night_mode_switcher {
  825.     box-sizing: border-box;
  826.     position: fixed;
  827.     width: 32px;
  828.     height: 32px;
  829.     right: 32px;
  830.     bottom: 32px;
  831.     width: ${BUTTON_SIZE}px;
  832.     height: ${BUTTON_SIZE}px;
  833.     right: ${BUTTON_SIZE}px;
  834.     bottom: ${BUTTON_SIZE}px;
  835.     z-index: 10000;
  836.     background-color: transparent;
  837.     border-radius: 50%;
  838.     border: 4px solid #aaa;
  839.     border-right-width: ${BUTTON_SIZE / 2}px;
  840.     transition: border-color 0.1s ease-out;
  841.   }
  842.  
  843.   .night_mode_switcher:hover {
  844.     border-color: #333;
  845.   }
  846.  
  847.   .night .night_mode_switcher {
  848.     border-color: #515151;
  849.   }
  850.  
  851.   .night .night_mode_switcher:hover {
  852.     border-color: #9e9e9e;
  853.   }
  854.  
  855.   .night ::-webkit-scrollbar,
  856.   .night ::-webkit-scrollbar-corner,
  857.   .night ::-webkit-scrollbar-track-piece {
  858.     background-color: #000;
  859.   }
  860.   
  861.   .night ::-webkit-scrollbar-thumb {
  862.     background-color: #22272b;
  863.     border: 1px solid #000;
  864.   }
  865.   
  866.   .night ::-webkit-scrollbar-thumb:hover {
  867.     background-color: #2C3237;
  868.   }
  869.   
  870.   .night {
  871.     scrollbar-color: dark;
  872.     scrollbar-face-color: #22272b;
  873.     scrollbar-track-color: #000;
  874.     scrollbar-color: #22272b #000;
  875.   }
  876.  
  877.   /* bg */
  878.   .night .sidebar-block__suggest,
  879.   .night .dropdown-container,
  880.   .night .poll-result__bar,
  881.   .night .comments_new-line,
  882.   .night .tm-editor__textarea,
  883.   .night .layout,
  884.   .night .toggle-menu__most-read,
  885.   .night .toggle-menu_most-comments,
  886.   .night .partner-info {
  887.     background: #171c20;
  888.   }
  889.  
  890.   /* text */
  891.   .night .companies-rating__name:not(:hover),
  892.   .night .profile-section__title,
  893.   .night .profile-section__about-text,
  894.   .night .profile-section__invited,
  895.   .night .sidebar-block__suggest,
  896.   .night .user-message__body,
  897.   .night .promo-block__title_total,
  898.   .night .beta-anounce__text,
  899.   .night .defination-list__label,
  900.   .night .defination-list__value,
  901.   .night .search-field__select,
  902.   .night .search-field__input[type="text"],
  903.   .night .search-form__field,
  904.   .night .post-info__title:not(:hover),
  905.   .night .dropdown__user-stats,
  906.   .night .dropdown-container_white .user-info__special,
  907.   .night .n-dropdown-menu__item-link,
  908.   .night body,
  909.   .night .default-block__polling-title,
  910.   .night .poll-result__data-label,
  911.   .night code,
  912.   .night .user-info__fullname,
  913.   .night .user-info__specialization,
  914.   .night .page-header__info-title,
  915.   .night .page-header__info-desc,
  916.   .night .post__title-text,
  917.   .night .post__title_link:not(:visited),
  918.   .night .checkbox__label,
  919.   .night .radio__label,
  920.   .night .tm-editor__textarea,
  921.   .night .footer-block__title,
  922.   .night #TMpanel .container .bmenu > a.current,
  923.   .night .post__text-html,
  924.   .night .comment__message,
  925.   .night .comment-form__preview,
  926.   .night .post-share__title,
  927.   .night .post-donate__title,
  928.   .night .news-block__title,
  929.   .night .news-topic__title:not(:visited),
  930.   .night .partner-info__title,
  931.   .night .partner-info__description {
  932.     color: #9e9e9e;
  933.   }
  934.  
  935.   /* non important text */
  936.   .night .icon-svg_bookmark,
  937.   .night .icon-svg_views-count,
  938.   .night .icon-svg_post-comments,
  939.   .night .icon-svg_edit,
  940.   .night .icon-svg_recommend,
  941.   .night .icon-svg_report,
  942.   .night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus),
  943.   .night .icon_comment-edit,
  944.   .night .icon_comment-anchor,
  945.   .night .icon_comment-bookmark,
  946.   .night .icon_comment-branch,
  947.   .night .icon_comment-arrow-up,
  948.   .night .icon_comment-arrow-down,
  949.   .night .layout__elevator {
  950.     color: #515151;
  951.   }
  952.  
  953.   .night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus):hover,
  954.   .night .icon_comment-anchor:hover,
  955.   .night .icon_comment-bookmark:hover,
  956.   .night .icon_comment-branch:hover,
  957.   .night .icon_comment-arrow-up:hover,
  958.   .night .icon_comment-arrow-down:hover {
  959.     color: #548eaa;
  960.   }
  961.  
  962.   .night .n-dropdown-menu__item-link:hover {
  963.     color: white;
  964.   }
  965.  
  966.   /* top lvl bg */
  967.   .night .h-popover,
  968.   .night .profile-section__user-hub:not(.profile-section__user-hub_cross),
  969.   .night a.sort-panel__item-toggler.active,
  970.   .night .checkbox__label::before,
  971.   .night .radio__label::before,
  972.   .night .content-list__item_conversation:hover,
  973.   .night .search-field__select,
  974.   .night .search-field__input[type="text"],
  975.   .night .search-form__field,
  976.   .night .dropdown-container,
  977.   .night .n-dropdown-menu,
  978.   .night .post__translatation,
  979.   .night code,
  980.   .night .megapost-teasers,
  981.   .night .tm-editor_comments,
  982.   .night .promo-block__header,
  983.   .night .post__text-html blockquote,
  984.   .night .default-block,
  985.   .night .post-share,
  986.   .night .post-donate,
  987.   .night .company-info__author,
  988.   .night .layout__row_footer-links {
  989.     background: #22272B;
  990.   }
  991.  
  992.   /* not important bg */
  993.   .night .profile-section__user-hub:not(.profile-section__user-hub_cross):hover,
  994.   .night .btn_blue.disabled,
  995.   .night .btn_blue[disabled],
  996.   .night .tracker_page table.tracker_folowers tr.new,
  997.   .night .dropdown__user-stats,
  998.   .night .comment__head_topic-author,
  999.   .night .promo-item:hover,
  1000.   .night .layout__row_navbar,
  1001.   .night .layout__row_footer,
  1002.   .night #TMpanel,
  1003.   .night .n-dropdown-menu__item-link_flow:hover,
  1004.   .night #tracker-page .tracker-table__row.new {
  1005.     background: #1f2327;
  1006.   }
  1007.  
  1008.   /* borders */
  1009.   .night #tracker-page .tracker-table__header,
  1010.   .night #tracker-page .tracker-table__cell,
  1011.   .night .h-popover,
  1012.   .night .h-popover__stats,
  1013.   .night .default-block__footer,
  1014.   .night .toggle-menu__item-link_bordered,
  1015.   .night .default-block_promote,
  1016.   .night .sort-panel,
  1017.   .night .n-dropdown-menu_flows,
  1018.   .night .for_users_only_msg,
  1019.   .night #comments-list .js-form_placeholder,
  1020.   .night .sidebar-block__suggest,
  1021.   .night .content-list_preview-message,
  1022.   .night .btn_outline_blue[disabled],
  1023.   .night .user-message__body_html pre code,
  1024.   .night .content-list_user-dialog,
  1025.   .night .wysiwyg-toolbar,
  1026.   .night .content-list__item_bordered,
  1027.   .night .promo-block__total,
  1028.   .night .search-field__select,
  1029.   .night .search-field__input[type="text"],
  1030.   .night .search-form__field,
  1031.   .night .tracker_page table.tracker_folowers tr td,
  1032.   .night .tracker_page table.tracker_folowers tr th,
  1033.   .night .stacked-menu__item_devided,
  1034.   .night .post__text-html table,
  1035.   .night .post__text-html table td,
  1036.   .night .post__text-html table th,
  1037.   .night .n-dropdown-menu__item_border,
  1038.   .night .dropdown-container,
  1039.   .night .default-block_bordered,
  1040.   .night .default_block_polling,
  1041.   .night .column-wrapper_tabs .sidebar_right,
  1042.   .night .post__type-label,
  1043.   .night .promo-block__header,
  1044.   .night .user-info__contacts,
  1045.   .night .comment__message pre code,
  1046.   .night .comment-form__preview pre code,
  1047.   .night .sandbox-panel,
  1048.   .night .comment__post-title,
  1049.   .night .tm-editor__textarea,
  1050.   .night .promo-block__footer,
  1051.   .night .author-panel,
  1052.   .night .promo-block,
  1053.   .night .post__text-html pre code,
  1054.   .night .footer-block__title,
  1055.   .night #TMpanel,
  1056.   .night .layout__row_navbar,
  1057.   .night .page-header_bordered,
  1058.   .night .post-stats,
  1059.   .night .company-info__about,
  1060.   .night .company-info_post-additional,
  1061.   .night .company-info__contacts,
  1062.   .night .post-share,
  1063.   .night .post-donate,
  1064.   .night .content-list__item_devided,
  1065.   .night .comments_order,
  1066.   .night .comments-section__head,
  1067.   .night .content-list_nested-comments,
  1068.   .night .default-block__header,
  1069.   .night .column-wrapper_bordered,
  1070.   .night .tabs-menu,
  1071.   .night .toggle-menu,
  1072.   .night .news-block__header,
  1073.   .night .news-block__footer {
  1074.     border-color: #393d41;
  1075.   }
  1076.  
  1077.   .night .rating-info__progress,
  1078.   .night .poll-result__progress {
  1079.     background-color: #515151;
  1080.   }
  1081.  
  1082.   .night .poll-result__progress_winner {
  1083.     background-color: #5e8eac;
  1084.   }
  1085.  
  1086.   .night .layout__elevator:hover {
  1087.     background-color: #22272B;
  1088.   }
  1089.  
  1090.   .night .comment__head_topic-author {
  1091.     background: #003030;
  1092.   }
  1093.  
  1094.   .night .comment__head_my-comment {
  1095.     background: #003000;
  1096.   }
  1097.  
  1098.   .night .comment__head_new-comment {
  1099.     background: black
  1100.   }
  1101.  
  1102.   .night .user-info__nickname_comment,
  1103.   .night .icon-svg_logo-habrahabr {
  1104.     color: inherit;
  1105.   }
  1106.  
  1107.   .night [disabled] {
  1108.     opacity: 0.5
  1109.   }
  1110.  
  1111.   .night .content-list_comments .comment__folding-dotholder::before,
  1112.   .night .comment.is_selected::after {
  1113.     filter: invert(0.9);
  1114.   }
  1115.  
  1116.   /* img filter */
  1117.   .night .comment__message img,
  1118.   .night .comment-form__preview img,
  1119.   .night .default-block__content #facebook_like_box,
  1120.   .night .default-block__content #vk_groups,
  1121.   .night .post img,
  1122.   .night .page-header__banner img,
  1123.   .night .company_top_banner img,
  1124.   .night img .teaser__image,
  1125.   .night .teaser__image-pic,
  1126.   .night .article__body img {
  1127.     filter: brightness(0.5);
  1128.     transition: filter .6s ease-out;
  1129.   }
  1130.  
  1131.   .night .comment__message img:hover,
  1132.   .night .comment-form__preview img:hover,
  1133.   .night .default-block__content #facebook_like_box:hover,
  1134.   .night .default-block__content #vk_groups:hover,
  1135.   .night img[alt="en"],
  1136.   .night img[alt="habr"],
  1137.   .night img:hover,
  1138.   .night a.post-author__link img,
  1139.   .night img.user-info__image-pic,
  1140.   .night .teaser__image-pic:hover,
  1141.   .night .teaser__image:hover {
  1142.     filter: none;
  1143.   }
  1144.  
  1145.   /* Atelier Cave Dark */
  1146.   .night .hljs-comment,
  1147.   .night .hljs-quote {
  1148.     color:#7e7887 !important
  1149.   }
  1150.   .night .hljs-variable,
  1151.   .night .hljs-template-variable,
  1152.   .night .hljs-attribute,
  1153.   .night .hljs-regexp,
  1154.   .night .hljs-link,
  1155.   .night .hljs-tag,
  1156.   .night .hljs-name,
  1157.   .night .hljs-selector-id,
  1158.   .night .hljs-selector-class {
  1159.     color:#be4678 !important
  1160.   }
  1161.   .night .hljs-number,
  1162.   .night .hljs-meta,
  1163.   .night .hljs-built_in,
  1164.   .night .hljs-builtin-name,
  1165.   .night .hljs-literal,
  1166.   .night .hljs-type,
  1167.   .night .hljs-params {
  1168.     color:#aa573c !important
  1169.   }
  1170.   .night .hljs-string,
  1171.   .night .hljs-symbol,
  1172.   .night .hljs-bullet {
  1173.     color:#2a9292 !important
  1174.   }
  1175.   .night .hljs-title,
  1176.   .night .hljs-section {
  1177.     color:#576ddb !important
  1178.   }
  1179.   .night .hljs-keyword,
  1180.   .night .hljs-selector-tag {
  1181.     color:#955ae7 !important
  1182.   }
  1183.   .night .hljs-deletion,
  1184.   .night .hljs-addition {
  1185.     color:#19171c !important;
  1186.     display:inline-block !important;
  1187.     width:100% !important
  1188.   }
  1189.   .night .hljs-deletion {
  1190.     background-color:#be4678 !important
  1191.   }
  1192.   .night .hljs-addition {
  1193.     background-color:#2a9292 !important
  1194.   }
  1195.   .night .hljs {
  1196.     display:block !important;
  1197.     overflow-x:auto !important;
  1198.     background:#19171c !important;
  1199.     color:#8b8792 !important;
  1200.     /*padding:0.5em !important*/
  1201.   }
  1202.   .night .hljs-emphasis {
  1203.     font-style:italic !important
  1204.   }
  1205.   .night .hljs-strong {
  1206.     font-weight:bold !important
  1207.   }
  1208.   `;
  1209. }
  1210.  
  1211. if (FLAGS.USERSTYLE_CONFIG_INTERFACE) {
  1212.   userStyle += `
  1213.   .config_button {
  1214.     box-sizing: border-box;
  1215.     position: fixed;
  1216.     width: ${BUTTON_SIZE}px;
  1217.     height: ${BUTTON_SIZE2}px;
  1218.     right: ${BUTTON_SIZE}px;
  1219.     bottom: ${FLAGS.NIGHT_MODE ? BUTTON_SIZE4 : BUTTON_SIZE}px;
  1220.     z-index: 10000;
  1221.     background: -webkit-linear-gradient(top, #aaa 50%, transparent 50%);
  1222.     background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
  1223.     background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
  1224.     background-size: 10px 10px;
  1225.     transition: background 0.1s ease-out;
  1226.   }
  1227.  
  1228.   .config_button:hover {
  1229.     background: -webkit-linear-gradient(top, #333 50%, transparent 50%);
  1230.     background: -moz-linear-gradient(top, #333 50%, transparent 50%);
  1231.     background: -moz-linear-gradient(top, #333 50%, transparent 50%);
  1232.     background-size: 10px 10px;
  1233.   }
  1234.  
  1235.   .night .config_button {
  1236.     background: -webkit-linear-gradient(top, #515151 50%, transparent 50%);
  1237.     background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
  1238.     background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
  1239.     background-size: 10px 10px;
  1240.   }
  1241.  
  1242.   .night .config_button:hover {
  1243.     background: -webkit-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1244.     background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1245.     background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
  1246.     background-size: 10px 10px;
  1247.   }
  1248.  
  1249.   .config_frame {
  1250.     box-sizing: border-box;
  1251.     position: fixed;
  1252.     right: 80px;
  1253.     bottom: 32px;
  1254.     z-index: 10000;
  1255.     border: 1px solid #aaa;
  1256.     padding: 8px;
  1257.     background: #f7f7f7;
  1258.     -webkit-user-select: none;
  1259.     -moz-user-select: none;
  1260.     -ms-user-select: none;
  1261.     user-select: none;
  1262.     overflow-y: auto;
  1263.     max-height: calc(100vh - 64px);
  1264.     min-width: 390px;
  1265.   }
  1266.   .config_frame label:hover {
  1267.     cursor: pointer;
  1268.     background: rgba(128, 128, 128, 0.3);
  1269.   }
  1270.   .config_frame input {
  1271.     cursor: pointer;
  1272.     position: absolute;
  1273.     opacity: 0;
  1274.   }
  1275.   .config_frame input + span:before {
  1276.     content: '';
  1277.     display: inline-block;
  1278.     width: 0.5em;
  1279.     height: 0.5em;
  1280.     margin: 0 0.4em 0.1em 0.3em;
  1281.     outline: 1px solid currentcolor;
  1282.     outline-offset: 1px;
  1283.   }
  1284.   .config_frame input:checked + span:before {
  1285.     background: currentcolor;
  1286.   }
  1287.   .night .config_frame {
  1288.     background: #22272B;
  1289.     border-color: #393d41;
  1290.   }
  1291.   `;
  1292. }
  1293.  
  1294. userStyleEl.innerHTML = userStyle;
  1295.  
  1296. const navigatorEdge = /Edge/.test(navigator.userAgent);
  1297.  
  1298. function readyHead(fn) {
  1299.   if (document.body) { // если есть body, значит head готов
  1300.     fn();
  1301.   } else if (document.documentElement && !navigatorEdge) {
  1302.     const observer = new MutationObserver(() => {
  1303.       if (document.body) {
  1304.         observer.disconnect();
  1305.         fn();
  1306.       }
  1307.     });
  1308.     observer.observe(document.documentElement, { childList: true });
  1309.   } else {
  1310.     // рекурсивное ожидание появления DOM
  1311.     setTimeout(() => readyHead(fn), 16);
  1312.   }
  1313. }
  1314.  
  1315. readyHead(() => {
  1316.   if (document.getElementById('habrafixmarker')) return;
  1317.   if (FLAGS.USERSTYLE) document.head.appendChild(userStyleEl);
  1318.   if (FLAGS.NIGHT_MODE && userConfig.getItem('night_mode')) {
  1319.     document.documentElement.classList.add('night');
  1320.   }
  1321. });
  1322.  
  1323. function ready(fn) {
  1324.   const { readyState } = document;
  1325.   if (readyState === 'loading') {
  1326.     document.addEventListener('DOMContentLoaded', () => {
  1327.       fn();
  1328.     });
  1329.   } else {
  1330.     fn();
  1331.   }
  1332. }
  1333.  
  1334. ready(() => {
  1335.   if (document.getElementById('habrafixmarker')) return;
  1336.   if (FLAGS.COMMENTS_MD) {
  1337.     const mdSelectorEl = document.getElementById('comment_markdown');
  1338.     if (mdSelectorEl) {
  1339.       if (userConfig.getItem('comment_markdown')) mdSelectorEl.checked = true;
  1340.       mdSelectorEl.addEventListener('input', () => {
  1341.         userConfig.setItem('comment_markdown', mdSelectorEl.checked);
  1342.       });
  1343.     }
  1344.   }
  1345.  
  1346.   if (FLAGS.HTSO_BTN) {
  1347.     const commentForm = document.getElementById('comment-form');
  1348.     if (commentForm) {
  1349.       const toolbar = commentForm.querySelector('.tm-editor__toolbar');
  1350.       if (toolbar) {
  1351.         const item = document.createElement('li');
  1352.         item.classList.add('wysiwyg-toolbar__item');
  1353.         item.innerHTML = `
  1354.           <button type="button" class="btn btn_wysiwyg" tabindex="0" title="Загрузка картинок"
  1355.             onclick="window.open('//hsto.org', '_blank').focus();">
  1356.             <svg class="icon-svg icon-svg_spoiler_wysiwyg" aria-hidden="true" aria-labelledby="title"
  1357.               version="1.1" role="img" width="24" viewBox="0 0 100 82.9">
  1358.               <path
  1359.                 d="M77.9,82.9H5.6c-3.4,0-5.6-2.4-5.6-5.2V21.9c0-3.5,2.1-6.1,
  1360.                 5.6-6.1H50v11.1H11v45h61V54.8l12,0v22.9 C84,80.5,81.2,82.9,77.9,82.9L77.9,82.9z">
  1361.               </path>
  1362.               <polygon points="16.5,66.9 39.8,44.6 50.2,54.4 61.5,39.6 67,50.2 67,66.9 "></polygon>
  1363.               <path
  1364.                 d="M28,44.4c-3.2,0-5.7-2.6-5.7-5.7c0-3.2,2.6-5.8,5.7-5.8c3.2,0,5.8,2.6,5.8,
  1365.                 5.8C33.8,41.9,31.2,44.4,28,44.4  L28,44.4z">
  1366.               </path>
  1367.               <polygon points="84,21.9 84,44 72,44 72,21.9 56.1,21.9 78.1,0 100,21.9 "></polygon>
  1368.             </svg>
  1369.           </button>
  1370.         `;
  1371.         toolbar.appendChild(item);
  1372.       }
  1373.     }
  1374.   }
  1375.  
  1376.   if (FLAGS.SUBS_BTN) {
  1377.     const userBtn = document.querySelector('.tabs-menu__item_link');
  1378.     const isUserPage = /^\/(ru|en)\/users\/[^/]+\//.test(window.location.pathname);
  1379.     if (userBtn && isUserPage) {
  1380.       const bar = userBtn.parentElement;
  1381.  
  1382.       const tab = document.createElement('a');
  1383.       const isSubs = /subscription\/$/.test(window.location.pathname);
  1384.       tab.classList.add('tabs-menu__item', 'tabs-menu__item_link');
  1385.       tab.href = `${userBtn.href}subscription/`;
  1386.       tab.innerHTML = `<h3 class="tabs-menu__item-text ${isSubs ? 'tabs-menu__item-text_active' : ''}">Он читает</h3>`;
  1387.       bar.appendChild(tab);
  1388.  
  1389.       const tab2 = document.createElement('a');
  1390.       const isFols = /followers\/$/.test(window.location.pathname);
  1391.       tab2.classList.add('tabs-menu__item', 'tabs-menu__item_link');
  1392.       tab2.href = `${userBtn.href}subscription/followers/`;
  1393.       tab2.innerHTML = `<h3 class="tabs-menu__item-text ${isFols ? 'tabs-menu__item-text_active' : ''}">Его читают</h3>`;
  1394.       bar.appendChild(tab2);
  1395.     }
  1396.   }
  1397.  
  1398.   // надо ли ещё
  1399.   Array.from(document.querySelectorAll('iframe[src^="https://codepen.io/"]'))
  1400.     .map(el => el.setAttribute('scrolling', 'no'));
  1401.  
  1402.   // остановка гифок по клику и воспроизведение при повторном клике
  1403.   function toggleGIF(el) {
  1404.     // если атрибут со старым линком пуст или отсутствует
  1405.     if (!el.dataset.oldSrc) {
  1406.       // заменим ссылку на data-url-svg с треугольником в круге
  1407.       const w = Math.max(el.clientWidth || 256, 16);
  1408.       const h = Math.max(el.clientHeight || 128, 16);
  1409.       const cx = w / 2;
  1410.       const cy = h / 2;
  1411.       const r = Math.min(w, h) / 4;
  1412.       const ax = (r * 61) / 128;
  1413.       const by = (r * 56) / 128;
  1414.       const bx = (r * 35) / 128;
  1415.       const svg = `data:image/svg+xml;utf8,
  1416.         <svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
  1417.           <rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
  1418.           <circle cx='${cx}' cy='${cy}' r='${r}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1419.           <polygon points='${cx + ax} ${cy} ${cx - bx} ${cy - by} ${cx - bx} ${cy + by}' fill='${FLAGS.GIF_STOP_COLOR_BG}' />
  1420.         </svg>
  1421.       `;
  1422.       el.dataset.oldSrc = el.getAttribute('src'); // eslint-disable-line no-param-reassign
  1423.       el.setAttribute('src', svg);
  1424.     } else if (FLAGS.GIF_STOP_OVERTYPE) {
  1425.       // иначе поставим svg с троеточием
  1426.       const w = el.clientWidth;
  1427.       const h = el.clientHeight;
  1428.       const cx = w / 2;
  1429.       const cy = h / 2;
  1430.       const r = Math.min(w, h) / 4;
  1431.       const r2 = r / 4;
  1432.       const svg = `data:image/svg+xml;utf8,
  1433.         <svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
  1434.           <rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
  1435.           <circle cx='${cx - r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1436.           <circle cx='${cx}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1437.           <circle cx='${cx + r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
  1438.         </svg>
  1439.       `;
  1440.       el.setAttribute('src', svg);
  1441.       // когда отрендерится троеточие, можно менять на исходную гифку
  1442.       setTimeout(() => {
  1443.         if (el.dataset.oldSrc) {
  1444.           el.setAttribute('src', el.dataset.oldSrc);
  1445.           el.dataset.oldSrc = ''; // eslint-disable-line no-param-reassign
  1446.         }
  1447.       }, 100);
  1448.     } else {
  1449.       const img = document.createElement('img');
  1450.       img.setAttribute('src', el.dataset.oldSrc);
  1451.       if (el.hasAttribute('align')) {
  1452.         img.setAttribute('align', el.getAttribute('align'));
  1453.       }
  1454.       el.parentNode.insertBefore(img, el);
  1455.       img.onclick = () => toggleGIF(img); // eslint-disable-line no-param-reassign
  1456.       el.parentNode.removeChild(el);
  1457.     }
  1458.   }
  1459.  
  1460.   if (FLAGS.GIF_STOP) {
  1461.     Array.from(document.querySelectorAll('.post__text img[src$=".gif"], .comment__message img[src$=".gif"]'))
  1462.       .filter((el) => {
  1463.         const excludes = [
  1464.           'https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif',
  1465.           'https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif',
  1466.           'https://habrastorage.org/getpro/habr/post_images/d4b/289/ef0/d4b289ef0a00e969108c25d0c3d75f58.gif',
  1467.         ];
  1468.         return !excludes.includes(el.getAttribute('src'));
  1469.       })
  1470.       .forEach((el) => {
  1471.         if (FLAGS.GIF_STOP_ONLOAD) toggleGIF(el);
  1472.         el.classList.add('habrafix_gif-stop');
  1473.         el.onclick = () => toggleGIF(el); // eslint-disable-line no-param-reassign
  1474.       });
  1475.   }
  1476.  
  1477.   // счетчики кармы
  1478.   if (FLAGS.KARMA_DETAILS) {
  1479.     Array.from(document.querySelectorAll('.user-info__stats-item.stacked-counter')).forEach((itemCounter) => {
  1480.       itemCounter.style.marginRight = '16px'; // eslint-disable-line no-param-reassign
  1481.     });
  1482.     Array.from(document.querySelectorAll('.page-header__stats_karma')).forEach((karmaEl) => {
  1483.       karmaEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
  1484.       karmaEl.style.minWidth = `${KARMA_WIDTH}px`; // eslint-disable-line no-param-reassign
  1485.     });
  1486.     Array.from(document.querySelectorAll(`
  1487.       .stacked-counter[href="https://habr.com/ru/info/help/karma/"],
  1488.       .stacked-counter[href="https://habr.com/en/info/help/karma/"]
  1489.     `)).forEach((counterEl) => {
  1490.       let total = parseInt(counterEl.title, 10);
  1491.       const scoreEl = counterEl.querySelector('.stacked-counter__value');
  1492.       if (!scoreEl || !total) return;
  1493.       counterEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
  1494.       counterEl.style.minWidth = `${KARMA_WIDTH}px`; // eslint-disable-line no-param-reassign
  1495.       const score = parseFloat(scoreEl.innerHTML.replace('–', '-').replace(',', '.'), 10);
  1496.       if (score > total) total = score;
  1497.       const likes = (total + score) / 2;
  1498.       const percent = Math.round((100 * likes) / total);
  1499.       const details = `&nbsp;= ${total} × (${percent} − ${100 - percent})%`;
  1500.       const detailsEl = document.createElement('span');
  1501.       detailsEl.innerHTML = details;
  1502.       detailsEl.style.color = '#545454';
  1503.       detailsEl.style.fontFamily = '"-apple-system",BlinkMacSystemFont,Arial,sans-serif';
  1504.       detailsEl.style.fontSize = '13px';
  1505.       detailsEl.style.fontWeight = 'normal';
  1506.       detailsEl.style.verticalAlign = 'middle';
  1507.       scoreEl.appendChild(detailsEl);
  1508.       counterEl.title += `, ${(likes).toFixed(2)} плюсов и ${(total - likes).toFixed(2)} минусов`; // eslint-disable-line no-param-reassign
  1509.     });
  1510.   }
  1511.  
  1512.   // счетчики рейтинга с подробностями
  1513.   const scoresMap = new Map();
  1514.  
  1515.   class Score {
  1516.     constructor(el) {
  1517.       this.el = el;
  1518.       this.parentEl = el.parentNode;
  1519.       const data = this.constructor.parse(el);
  1520.       this.rating = data.rating;
  1521.       this.total = data.total;
  1522.       this.likes = data.likes;
  1523.       this.dislikes = data.dislikes;
  1524.       this.isDetailed = false;
  1525.       this.observer = new MutationObserver(() => this.update());
  1526.     }
  1527.  
  1528.     setDetails(isDetailed) {
  1529.       if (this.isDetailed === isDetailed) return;
  1530.       this.isDetailed = isDetailed;
  1531.       this.update();
  1532.     }
  1533.  
  1534.     update() {
  1535.       const newChild = this.parentEl.querySelector('.voting-wjt__counter');
  1536.       if (!newChild) return;
  1537.       this.el = newChild;
  1538.       const data = this.constructor.parse(this.el);
  1539.       this.rating = data.rating;
  1540.       this.total = data.total;
  1541.       this.likes = data.likes;
  1542.       this.dislikes = data.dislikes;
  1543.       this.observer.disconnect();
  1544.       if (this.isDetailed) {
  1545.         this.details();
  1546.       } else {
  1547.         this.simply();
  1548.       }
  1549.       this.observer.observe(this.parentEl, { childList: true });
  1550.     }
  1551.  
  1552.     static parse(el) {
  1553.       let [, likes, dislikes] = el
  1554.         .attributes.title.textContent
  1555.         .match(/[0-9]+/g).map(Number);
  1556.       let total = likes + dislikes;
  1557.       let [, sign, rating] = el.innerHTML.match(/([–]?)(\d+)/); // eslint-disable-line prefer-const
  1558.       rating = Number(rating);
  1559.       if (sign) rating = -rating;
  1560.       // не знаю что там происходит при голосовании, так что на всякий случай
  1561.       const diff = rating - (likes - dislikes);
  1562.       if (diff < 0) {
  1563.         total += Math.abs(diff);
  1564.         dislikes += Math.abs(diff);
  1565.       } else if (diff > 0) {
  1566.         total += diff;
  1567.         likes += diff;
  1568.       }
  1569.       return {
  1570.         rating,
  1571.         total,
  1572.         likes,
  1573.         dislikes,
  1574.       };
  1575.     }
  1576.  
  1577.     simply() {
  1578.       let innerHTML = '';
  1579.       if (this.rating > 0) {
  1580.         innerHTML = `+${this.rating}`;
  1581.       } else if (this.rating < 0) {
  1582.         innerHTML = `–${Math.abs(this.rating)}`;
  1583.       } else {
  1584.         innerHTML = '0';
  1585.       }
  1586.       this.el.innerHTML = innerHTML;
  1587.     }
  1588.  
  1589.     details() {
  1590.       let innerHTML = '';
  1591.       if (this.rating > 0) {
  1592.         innerHTML = `+${this.rating}`;
  1593.       } else if (this.rating < 0) {
  1594.         innerHTML = `–${Math.abs(this.rating)}`;
  1595.       } else {
  1596.         innerHTML = '0';
  1597.       }
  1598.       if (this.total !== 0) {
  1599.         let details = '';
  1600.         if (FLAGS.RATING_DETAILS_PN) {
  1601.           const percent = Math.round((100 * this.likes) / this.total);
  1602.           details = `&nbsp;= ${this.total} × (${percent} − ${100 - percent})%`;
  1603.         } else {
  1604.           details = `&nbsp;= ${this.likes} − ${this.dislikes}`;
  1605.         }
  1606.         innerHTML += ` <span style='color: #545454; font-weight: normal'>${details}</span>`;
  1607.       }
  1608.       this.el.innerHTML = innerHTML;
  1609.     }
  1610.   }
  1611.  
  1612.   // парсим их
  1613.   Array.from(document.querySelectorAll('.voting-wjt__counter')).forEach((el) => {
  1614.     scoresMap.set(el, new Score(el));
  1615.   });
  1616.  
  1617.   // добавляем подробностей
  1618.   if (FLAGS.RATING_DETAILS) {
  1619.     if (FLAGS.RATING_DETAILS_ONCLICK) {
  1620.       const isDetailed = userConfig.getItem('scores_details');
  1621.       if (isDetailed) scoresMap.forEach(score => score.setDetails(isDetailed));
  1622.       scoresMap.forEach((score) => {
  1623.         score.el.onclick = () => { // eslint-disable-line no-param-reassign
  1624.           const nowDetailed = userConfig.shiftItem('scores_details');
  1625.           scoresMap.forEach(s => s.setDetails(nowDetailed));
  1626.         };
  1627.       });
  1628.     } else {
  1629.       scoresMap.forEach(score => score.setDetails(true));
  1630.     }
  1631.   }
  1632.  
  1633.   // метки времени и работа с ними
  1634.   const pageLoadTime = new Date();
  1635.   const monthNames = [
  1636.     'января', 'февраля', 'марта',
  1637.     'апреля', 'мая', 'июня',
  1638.     'июля', 'августа', 'сентября',
  1639.     'октября', 'ноября', 'декабря',
  1640.   ];
  1641.   const monthNamesEng = [
  1642.     'January', 'February', 'March',
  1643.     'April', 'May', 'June',
  1644.     'July', 'August', 'September',
  1645.     'October', 'November', 'December',
  1646.   ];
  1647.  
  1648.   class HabraTime {
  1649.     constructor(el, parent) {
  1650.       this.el = el;
  1651.       this.parent = parent;
  1652.       this.attrDatetime = this.constructor.getAttributeDatetime(el);
  1653.       this.date = new Date(this.attrDatetime);
  1654.     }
  1655.  
  1656.     // вот было бы хорошо, если б на хабре были datetime атрибуты
  1657.     static getAttributeDatetime(el) {
  1658.       const imagination = el.getAttribute('datetime') || el.getAttribute('data-time_published');
  1659.       if (imagination) return imagination;
  1660.  
  1661.       let recently;
  1662.       let day;
  1663.       let month;
  1664.       let year;
  1665.       let time;
  1666.       let isEng = false;
  1667.       let meridiem;
  1668.       if (/^\d\d:\d\d$/.test(el.innerHTML)) {
  1669.         [, time] = el.innerHTML.match(/(\d\d:\d\d)/);
  1670.         recently = 'сегодня';
  1671.       } else if (/^\d\d:\d\d (AM|PM)$/.test(el.innerHTML)) {
  1672.         [, time, meridiem] = el.innerHTML.match(/(\d\d:\d\d) (AM|PM)/);
  1673.         recently = 'сегодня';
  1674.       } else if (/at/.test(el.innerHTML)) {
  1675.         isEng = true;
  1676.         const re = /((today|yesterday)|([A-z]+) (\d+), (\d+)) at (\d\d:\d\d) (AM|PM)/;
  1677.         [,,
  1678.           recently,
  1679.           month, day, year,
  1680.           time,
  1681.           meridiem,
  1682.         ] = el.innerHTML.match(re);
  1683.  
  1684.         if (recently === 'today') {
  1685.           recently = 'сегодня';
  1686.         } else if (recently === 'yesterday') {
  1687.           recently = 'вчера';
  1688.         }
  1689.       } else {
  1690.         const re = /((сегодня|вчера)|(\d+)[ .]([а-я]+|\d+)[ .]?(\d+)?) в (\d\d:\d\d)/;
  1691.         [,,
  1692.           recently,
  1693.           day, month, year,
  1694.           time,
  1695.         ] = el.innerHTML.match(re);
  1696.       }
  1697.  
  1698.       const [, h, m] = time.match(/(\d\d):(\d\d)/);
  1699.       if (meridiem === 'PM') {
  1700.         time = `${Number(h === '12' ? 0 : h) + 12}:${m}`;
  1701.       } else if (meridiem === 'AM') {
  1702.         time = `${h === '12' ? '00' : h}:${m}`;
  1703.       }
  1704.  
  1705.       // и местное время
  1706.       let moscow;
  1707.       if (recently || year === undefined) {
  1708.         const offsetMoscow = 3 * 60 * 60 * 1000;
  1709.         const yesterdayShift = (recently === 'вчера') ? 24 * 60 * 60 * 1000 : 0;
  1710.         const offset = pageLoadTime.getTimezoneOffset() * 60 * 1000;
  1711.         const value = (pageLoadTime - yesterdayShift) + offsetMoscow + offset;
  1712.         moscow = new Date(value);
  1713.       }
  1714.  
  1715.       if (recently) {
  1716.         day = moscow.getDate();
  1717.         month = moscow.getMonth() + 1;
  1718.       } else if (month.length !== 2) {
  1719.         month = (isEng ? monthNamesEng : monthNames).indexOf(month) + 1;
  1720.       } else {
  1721.         month = +month;
  1722.       }
  1723.  
  1724.       if (day < 10) day = `0${+day}`;
  1725.       if (month < 10) month = `0${month}`;
  1726.       if (year < 100) year = `20${year}`;
  1727.       if (year === undefined) year = moscow.getFullYear();
  1728.  
  1729.       return `${year}-${month}-${day}T${time}+03:00`;
  1730.     }
  1731.  
  1732.     absolute() {
  1733.       let result = '';
  1734.  
  1735.       const time = this.date;
  1736.       const day = time.getDate();
  1737.       const month = time.getMonth();
  1738.       const monthName = monthNames[month];
  1739.       const year = time.getFullYear();
  1740.       const hours = time.getHours();
  1741.       const minutes = time.getMinutes();
  1742.  
  1743.       const now = new Date();
  1744.       const nowDay = now.getDate();
  1745.       const nowMonth = now.getMonth();
  1746.       const nowYear = now.getFullYear();
  1747.  
  1748.       const yesterday = new Date(now - (24 * 60 * 60 * 1000));
  1749.       const yesterdayDay = yesterday.getDate();
  1750.       const yesterdayMonth = yesterday.getMonth();
  1751.       const yesterdayYear = yesterday.getFullYear();
  1752.  
  1753.       const hhmm = `${hours}:${minutes >= 10 ? minutes : `0${minutes}`}`;
  1754.  
  1755.       const isToday =
  1756.         day === nowDay &&
  1757.         month === nowMonth &&
  1758.         year === nowYear;
  1759.       const isYesterday =
  1760.         day === yesterdayDay &&
  1761.         month === yesterdayMonth &&
  1762.         year === yesterdayYear;
  1763.  
  1764.       if (isToday) {
  1765.         result = `сегодня в ${hhmm}`;
  1766.       } else if (isYesterday) {
  1767.         result = `вчера в ${hhmm}`;
  1768.       } else if (nowYear === year) {
  1769.         result = `${day} ${monthName} в ${hhmm}`;
  1770.       } else {
  1771.         result = `${day} ${monthName} ${year} в ${hhmm}`;
  1772.       }
  1773.  
  1774.       return result;
  1775.     }
  1776.  
  1777.     static relative(milliseconds) {
  1778.       let result = '';
  1779.  
  1780.       const pluralForm = (n, forms) => {
  1781.         if (n % 10 === 1 && n % 100 !== 11) return forms[0];
  1782.         if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) return forms[1];
  1783.         return forms[2];
  1784.       };
  1785.  
  1786.       const formats = [
  1787.         ['год', 'года', 'лет'],
  1788.         ['месяц', 'месяца', 'месяцев'],
  1789.         ['день', 'дня', 'дней'],
  1790.         ['час', 'часа', 'часов'],
  1791.         ['минуту', 'минуты', 'минут'],
  1792.       ];
  1793.  
  1794.       const minutes = milliseconds / 60000;
  1795.       const hours = minutes / 60;
  1796.       const days = hours / 24;
  1797.       const months = days / 30;
  1798.       const years = months / 12;
  1799.       const idx = [years, months, days, hours, minutes].findIndex(x => x >= 1);
  1800.  
  1801.       if (idx === -1) {
  1802.         result = 'несколько секунд';
  1803.       } else {
  1804.         const value = Math.floor([years, months, days, hours, minutes][idx]);
  1805.         const forms = formats[idx];
  1806.         const form = pluralForm(value, forms);
  1807.         result = `${value} ${form}`;
  1808.       }
  1809.       return result;
  1810.     }
  1811.  
  1812.     fromNow() {
  1813.       const diff = Math.abs(Date.now() - this.date);
  1814.       return `${this.constructor.relative(diff)} назад`;
  1815.     }
  1816.  
  1817.     fromParent() {
  1818.       const diff = Math.abs(this.date - this.parent.date);
  1819.       return `через ${this.constructor.relative(diff)}`;
  1820.     }
  1821.  
  1822.     static datetimeToMsk(datetime) {
  1823.       const [, yyyy, mm, dd, h, m] = datetime
  1824.         .match(/([0-9]+)-([0-9]+)-([0-9]+)T([0-9]+):([0-9]+)/);
  1825.       return `${Number(dd)} ${monthNames[mm - 1]} ${yyyy} в ${h}:${m}`;
  1826.     }
  1827.   }
  1828.  
  1829.   // собираем метки времени
  1830.   const datesMap = new Map();
  1831.   const megapostTimeEl = document.querySelector('.megapost-head__meta > .list_inline > .list__item');
  1832.   (megapostTimeEl ? [megapostTimeEl] : [])
  1833.     .concat(Array.from(document.querySelectorAll(`
  1834.         .post__time,
  1835.         .preview-data__time-published,
  1836.         time.comment__date-time_published,
  1837.         .tm-post__date,
  1838.         .user-message__date-time,
  1839.         .news-topic__attr_date-time
  1840.       `))).forEach((el) => {
  1841.       datesMap.set(el, new HabraTime(el));
  1842.     });
  1843.  
  1844.   function updateTime(el) {
  1845.     datesMap.forEach((habraTime) => {
  1846.       if (
  1847.         !habraTime.el ||
  1848.         !document.body.contains(habraTime.el) ||
  1849.         (el && el !== habraTime.el)
  1850.       ) return;
  1851.       let type;
  1852.       let otherTypes;
  1853.       if (habraTime.parent) {
  1854.         type = userConfig.config.time_comments;
  1855.         otherTypes = userConfig.model.time_comments
  1856.           .filter(str => str !== type);
  1857.       } else {
  1858.         type = userConfig.config.time_publications;
  1859.         otherTypes = userConfig.model.time_publications
  1860.           .filter(str => str !== type);
  1861.       }
  1862.       const title = otherTypes.map(otherType => habraTime[otherType]()).join(', ');
  1863.       habraTime.el.innerHTML = habraTime[type](); // eslint-disable-line no-param-reassign
  1864.       habraTime.el.setAttribute('title', title);
  1865.     });
  1866.   }
  1867.  
  1868.   if (FLAGS.TIME_DETAILS) {
  1869.     datesMap.forEach((habraTime) => {
  1870.       habraTime.el.setAttribute(
  1871.         'style',
  1872.         'cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;',
  1873.       );
  1874.       habraTime.el.onclick = () => { // eslint-disable-line no-param-reassign
  1875.         if (habraTime.parent) {
  1876.           userConfig.shiftItem('time_comments');
  1877.         } else {
  1878.           userConfig.shiftItem('time_publications');
  1879.         }
  1880.         updateTime();
  1881.       };
  1882.     });
  1883.     // подождём, когда дерево комментариев будет построено
  1884.     // у некоторых меток времени будут установлены родители
  1885.     // тогда и обновим их тексты
  1886.     setTimeout(updateTime, 100);
  1887.     setInterval(updateTime, 30 * 1000);
  1888.   }
  1889.  
  1890.   // время публикации, понадобится для корня древа комментариев
  1891.   let datePublication = datesMap.get(megapostTimeEl || document.querySelector('.post__time'));
  1892.   // если нету публикации поищем самую раннюю метку времени
  1893.   if (!datePublication) {
  1894.     datePublication = { date: pageLoadTime };
  1895.     datesMap.forEach((date) => {
  1896.       if (date.date < datePublication.date) datePublication = date;
  1897.     });
  1898.   }
  1899.  
  1900.   if (FLAGS.FIND_COMMENTS) {
  1901.     const commentsList = document.querySelector('.user_comments');
  1902.     const match = document.location.pathname.match(/users\/([^/]+)\/comments/i);
  1903.     if (match && commentsList) {
  1904.       const nickname = match[1];
  1905.       const originalTitle = document.title;
  1906.  
  1907.       const searchForm = document.createElement('div');
  1908.       searchForm.classList.add('search-form', 'search-form_expanded');
  1909.       searchForm.style.width = 'auto';
  1910.       searchForm.innerHTML = `
  1911.         <span class="search-field__icon icon-svg_search" style="left: 0;"><svg class="icon-svg" width="32" height="32"
  1912.         viewBox="0 0 32 32" aria-hidden="true" version="1.1" role="img"><path d="M21.416 13.21c0 4.6-3.65 8.34-8.14
  1913.         8.34S5.11 17.81 5.11 13.21c0-4.632 3.65-8.373 8.167-8.373 4.488 0 8.14 3.772 8.14 8.372zm1.945
  1914.         7.083c1.407-2.055 2.155-4.57 2.155-7.084C25.515 6.277 20.04.665 13.277.665S1.04 6.278 1.04 13.21c0 6.93 5.475
  1915.         12.542 12.237 12.542 2.454 0 4.907-.797 6.942-2.208l7.6 7.79 3.14-3.22-7.6-7.82z"></path></svg></span>
  1916.         <span class="search-field__icon icon-svg_loading" style="left: 0;"><svg class="icon-svg" width="40" height="40"
  1917.         viewBox="0 0 100 100" enable-background="new 0 0 0 0"><circle cx="50" cy="50" fill="none" stroke="#333333"
  1918.         stroke-width="4" r="20" stroke-dasharray="94.24777960769379 33.41592653589793"
  1919.         transform="rotate(88.5132 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear"
  1920.         values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
  1921.         </circle></svg></span>
  1922.         <label
  1923.           id="comments_search_label"
  1924.           class="search-form__field-wrapper"
  1925.           style="background: linear-gradient(to right, rgba(84, 142, 170, 0.2) 0%, transparent 0%)"
  1926.         >
  1927.           <input type="text" class="search-form__field" id="search-comments-field" placeholder="Поиск по тексту комментариев"
  1928.             style="position: absolute;background-color: transparent;">
  1929.           <button type="button" class="btn btn_search-close" id="search-comments-clear" title="Очистить">
  1930.             <svg class="icon-svg icon-svg_navbar-close-search" width="31" height="32" viewBox="0 0 31 32" aria-hidden="true" version="1.1" role="img">
  1931.               <path d="M26.67 0L15.217 11.448 3.77 0 0 3.77l11.447 11.45L0 26.666l3.77
  1932.                 3.77L15.218 18.99l11.45 11.448 3.772-3.77-11.448-11.45L30.44 3.772z">
  1933.               </path>
  1934.             </svg>
  1935.           </button>
  1936.         </label>
  1937.       `;
  1938.  
  1939.       const notFoundLabel = document.createElement('p');
  1940.       notFoundLabel.style.textAlign = 'center';
  1941.       notFoundLabel.style.fontSize = '18px';
  1942.       notFoundLabel.style.color = 'gray';
  1943.       notFoundLabel.style.display = 'none';
  1944.       notFoundLabel.textContent = 'Ничего не найдено';
  1945.  
  1946.       const commentsSubList = document.createElement('ul');
  1947.       commentsSubList.classList.add('content-list', 'content-list_comments');
  1948.       commentsSubList.id = 'search-comments';
  1949.       commentsSubList.style.display = 'none';
  1950.       commentsList.insertBefore(commentsSubList, commentsList.firstChild);
  1951.       commentsList.insertBefore(notFoundLabel, commentsList.firstChild);
  1952.       commentsList.insertBefore(searchForm, commentsList.firstChild);
  1953.  
  1954.       const Progress = {
  1955.         set(value) {
  1956.           if (value === 1) {
  1957.             document.title = 'Поиск завершён';
  1958.             this.setProgressBar(0);
  1959.           } else {
  1960.             const percent = Math.round(value * 100);
  1961.             document.title = `${percent}%, идёт поиск`;
  1962.             this.setProgressBar(value);
  1963.           }
  1964.         },
  1965.         setProgressBar(value) {
  1966.           const percent = value * 100;
  1967.           document.getElementById('comments_search_label').style.background = `
  1968.             linear-gradient(to right, rgba(84, 142, 170, 0.2) ${percent}%, transparent ${percent}%)
  1969.           `;
  1970.         },
  1971.         reset() {
  1972.           this.setProgressBar(0);
  1973.           document.title = originalTitle;
  1974.         },
  1975.       };
  1976.  
  1977.       const makeComment = (comment) => {
  1978.         const commentEl = document.createElement('li');
  1979.         commentEl.classList.add('content-list__item', 'content-list__item_comment', 'content-list__item_comment-plain');
  1980.         let ratingClass = '';
  1981.         let rating = '0';
  1982.         if (comment.score > 0) {
  1983.           rating = `+${comment.score}`;
  1984.           ratingClass = 'voting-wjt__counter_positive';
  1985.         } else if (comment.score < 0) {
  1986.           rating = `–${Math.abs(comment.score)}`;
  1987.           ratingClass = 'voting-wjt__counter_negative';
  1988.         }
  1989.         let avatar;
  1990.         if (comment.avatar === 'https://habr.com/images/avatars/stub-user-middle.gif') {
  1991.           avatar = `<svg class="default-image default-image_mini default-image_green" width="24"
  1992.           height="24"><use xlink:href="https://habr.com/images/1558430991/common-svg-sprite.svg#slug"></use></svg>`;
  1993.         } else {
  1994.           avatar = `<img src="${comment.avatar}" class="user-info__image-pic user-info__image-pic_small" width="24" height="24">`;
  1995.         }
  1996.         commentEl.innerHTML = `
  1997.           <div class="comment__post-title">
  1998.           <a href="${comment.post.url}" class="comment__post-link">${comment.post.title}</a>
  1999.           <div class="comment__post-footer">
  2000.           <a href="${comment.post.url}#comments">
  2001.           <svg class="icon-svg_comments icon-svg_comments-plain" width="14" height="13">
  2002.           <use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#comment"></use>
  2003.           </svg>
  2004.           <span class="comment__post-comments-counter">${comment.post.comments_count}</span>
  2005.           </a>
  2006.           </div>
  2007.           </div>
  2008.           <div class="comment comment_plain" rel="${comment.id}" id="habrafix_comment_${comment.id}">
  2009.           <div class="comment__head">
  2010.           <a href="https://habr.com/ru/users/${comment.author.login}/"
  2011.           class="user-info user-info_inline" rel="user-popover" data-user-login="${comment.author.login}">
  2012.           ${avatar}
  2013.           <span class="user-info__nickname user-info__nickname_small user-info__nickname_comment">${comment.author.login}</span>
  2014.           </a>
  2015.           <svg class="icon_comment-edit" title="Комментарий был изменен"
  2016.           style="display: ${comment.time_changed !== '0' ? 'block' : 'none'}" width="12"
  2017.           height="12"><use xlink:href="https://habr.com/images/1558430991/common-svg-sprite.svg#pencil"></use></svg>
  2018.           <time class="comment__date-time comment__date-time_published"
  2019.           datetime="${comment.time_published}">${comment.time_published}</time>
  2020.           <ul class="inline-list inline-list_comment-nav">
  2021.           <li class="inline-list__item inline-list__item_comment-nav">
  2022.           <a href="${comment.post.url}#comment_${comment.id}" class="icon_comment-anchor"
  2023.           title="Ссылка на комментарий"><svg width="12" height="12">
  2024.           <use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#anchor"></use></svg></a>
  2025.           </li>
  2026.           <li class="inline-list__item inline-list__item_comment-nav">
  2027.           <a href="#" class="icon_comment-bookmark " onclick="comments_add_to_favorite(this)" data-type="3"
  2028.           data-id="${comment.id}" data-action="add" title="Добавить в закладки">
  2029.           <svg width="12" height="12"><use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#book"></use></svg>
  2030.           </a>
  2031.           </li>
  2032.           </ul>
  2033.           <div class="voting-wjt voting-wjt_comments js-comment-vote">
  2034.           <span class="voting-wjt__counter ${ratingClass}
  2035.           js-score" title="Общий рейтинг ${rating}">${rating}</span>
  2036.           </div>
  2037.           </div>
  2038.           <div class="comment__message">${comment.message}</div>
  2039.           </div>`;
  2040.         return commentEl;
  2041.       };
  2042.  
  2043.       const addComment = (comment) => {
  2044.         document.getElementById('search-comments').appendChild(makeComment(comment));
  2045.         const timeEl = document.querySelector(`#habrafix_comment_${comment.id} time`);
  2046.         if (FLAGS.TIME_DETAILS) {
  2047.           timeEl.setAttribute(
  2048.             'style',
  2049.             'cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;',
  2050.           );
  2051.           timeEl.onclick = () => { // eslint-disable-line no-param-reassign
  2052.             userConfig.shiftItem('time_publications');
  2053.             updateTime();
  2054.           };
  2055.           datesMap.set(timeEl, new HabraTime(timeEl));
  2056.           updateTime(timeEl);
  2057.         } else {
  2058.           timeEl.textContent = HabraTime.datetimeToMsk(comment.time_published);
  2059.         }
  2060.       };
  2061.  
  2062.       // let fetchCors = url => fetch(`https://cors.io/?${url}`);
  2063.       let fetchCors = url => fetch(url);
  2064.  
  2065.       if (typeof GM !== 'undefined' && GM.xmlHttpRequest) {
  2066.         fetchCors = url => new Promise((resolve, reject) => GM.xmlHttpRequest({
  2067.           method: 'GET',
  2068.           url,
  2069.           onload(response) {
  2070.             resolve({
  2071.               json: () => Promise.resolve(JSON.parse(response.responseText)),
  2072.             });
  2073.           },
  2074.           onerror() { reject(); },
  2075.           ontimeout() { reject(); },
  2076.         }));
  2077.       }
  2078.  
  2079.       const loadComments = async (page) => {
  2080.         const url = `https://m.habr.com/kek/v1/users/${nickname}/comments?comments=true&user=${nickname}&page=${page}`;
  2081.         const res = await fetchCors(url);
  2082.         const json = await res.json();
  2083.         return json.data;
  2084.       };
  2085.  
  2086.       const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
  2087.  
  2088.       const pageCache = {};
  2089.       const memoizedLoadComments = async (page) => {
  2090.         if (pageCache[page]) {
  2091.           await sleep(0);
  2092.           return pageCache[page];
  2093.         }
  2094.         const result = await loadComments(page);
  2095.         pageCache[page] = result;
  2096.         return result;
  2097.       };
  2098.  
  2099.       let latestSearchId = 0;
  2100.  
  2101.       const removeResultsList = () => {
  2102.         document.getElementById('search-comments-field').value = '';
  2103.         latestSearchId += 1;
  2104.         document.getElementById('search-comments').innerHTML = '';
  2105.         document.getElementById('search-comments').style.display = 'none';
  2106.         document.getElementById('comments').style.display = '';
  2107.         const footer = document.querySelector('.page__footer');
  2108.         if (footer) footer.style.display = '';
  2109.         Progress.reset();
  2110.         notFoundLabel.style.display = 'none';
  2111.         searchForm.classList.remove('loading');
  2112.       };
  2113.  
  2114.       const addResultsList = () => {
  2115.         document.getElementById('search-comments').innerHTML = '';
  2116.         document.getElementById('search-comments').style.display = '';
  2117.         document.getElementById('comments').style.display = 'none';
  2118.         const footer = document.querySelector('.page__footer');
  2119.         if (footer) footer.style.display = 'none';
  2120.         Progress.set(0);
  2121.         notFoundLabel.style.display = 'none';
  2122.         searchForm.classList.add('loading');
  2123.       };
  2124.  
  2125.       document.getElementById('search-comments-clear').onclick = removeResultsList;
  2126.  
  2127.       // eslint-disable-next-line consistent-return
  2128.       const search = async () => {
  2129.         latestSearchId += 1;
  2130.         const currentSearchId = latestSearchId;
  2131.  
  2132.         const text = document.getElementById('search-comments-field').value;
  2133.         if (!text) return removeResultsList();
  2134.  
  2135.         addResultsList();
  2136.  
  2137.         const filter = (comment) => {
  2138.           const t = text.toLowerCase();
  2139.           const message = comment.message.toLowerCase();
  2140.           const title = comment.post.title.toLowerCase();
  2141.           return message.includes(t) || title.includes(t);
  2142.         };
  2143.  
  2144.         let pages = 1;
  2145.         for (let curPage = 1; curPage <= pages; curPage += 1) {
  2146.           let data;
  2147.  
  2148.           while (!data) {
  2149.             try {
  2150.               // eslint-disable-next-line no-await-in-loop
  2151.               data = await memoizedLoadComments(curPage);
  2152.             } catch (e) {
  2153.               document.title = 'Ошибка сети, повтор...';
  2154.               // eslint-disable-next-line no-await-in-loop
  2155.               await sleep(5000);
  2156.             }
  2157.           }
  2158.  
  2159.           // eslint-disable-next-line consistent-return
  2160.           if (currentSearchId !== latestSearchId) return; // пользователь изменил текст
  2161.  
  2162.           pages = pages === 1 ? data.pages : pages;
  2163.           Progress.set(curPage / pages);
  2164.  
  2165.           data.comments
  2166.             .filter(filter)
  2167.             .forEach(addComment);
  2168.         }
  2169.  
  2170.         if (commentsSubList.childNodes.length === 0) notFoundLabel.style.display = '';
  2171.         searchForm.classList.remove('loading');
  2172.       };
  2173.  
  2174.       const awaitEndOfInput = (func, ms) => {
  2175.         let timerId;
  2176.         return () => {
  2177.           clearTimeout(timerId);
  2178.           timerId = setTimeout(func, ms);
  2179.         };
  2180.       };
  2181.  
  2182.       document.getElementById('search-comments-field').oninput = awaitEndOfInput(search, 1000);
  2183.     }
  2184.   }
  2185.  
  2186.   // создаем дерево комментариев
  2187.   class ItemComment {
  2188.     constructor(el, parent) {
  2189.       this.parent = parent;
  2190.       this.el = el;
  2191.       this.lvl = parent.lvl + 1;
  2192.       this.id = Number(el.getAttribute('rel'));
  2193.       this.commentEl = el.querySelector('.comment');
  2194.       if (this.commentEl) {
  2195.         this.timeEl = this.commentEl.querySelector('time');
  2196.         this.ratingEl = this.commentEl.querySelector('.js-score');
  2197.       }
  2198.       this.date = datesMap.get(this.timeEl);
  2199.       if (this.date) {
  2200.         this.date.parent = parent.date;
  2201.       } else {
  2202.         this.date = parent.date;
  2203.       }
  2204.       this.votes = scoresMap.get(this.ratingEl) || {
  2205.         total: 0, likes: 0, dislikes: 0, rating: 0,
  2206.       };
  2207.       this.elList = el.querySelector('.content-list_nested-comments');
  2208.     }
  2209.  
  2210.     existId(id) {
  2211.       return !!this.elList.querySelector(id);
  2212.     }
  2213.  
  2214.     existNew() {
  2215.       return !!this.elList.querySelector('.js-comment_new');
  2216.     }
  2217.  
  2218.     getLength() {
  2219.       let { length } = this.list;
  2220.       this.list.forEach((node) => {
  2221.         length += node.getLength();
  2222.       });
  2223.       return length;
  2224.     }
  2225.   }
  2226.  
  2227.   class CommentsTree {
  2228.     constructor() {
  2229.       this.root = {
  2230.         isRoot: true,
  2231.         date: datePublication,
  2232.         lvl: 0,
  2233.         elList: document.getElementById('comments-list'),
  2234.         list: [],
  2235.       };
  2236.     }
  2237.  
  2238.     static exist() {
  2239.       return !!document.getElementById('comments-list');
  2240.     }
  2241.  
  2242.     update() {
  2243.       if (!this.root.elList) return;
  2244.       const recAdd = (node) => {
  2245.         node.list = Array.from(node.elList.children) // eslint-disable-line no-param-reassign
  2246.           .map(el => new ItemComment(el, node));
  2247.         node.list.forEach(recAdd);
  2248.       };
  2249.       recAdd(this.root);
  2250.     }
  2251.  
  2252.     walkTree(fn) {
  2253.       const walk = (tree) => {
  2254.         fn(tree);
  2255.         tree.list.forEach(walk);
  2256.       };
  2257.       walk(this.root);
  2258.     }
  2259.  
  2260.     sort(fn) {
  2261.       if (!this.root.elList) return;
  2262.       this.walkTree((tree) => {
  2263.         tree.list.sort(fn).forEach(subtree => tree.elList.appendChild(subtree.el));
  2264.       });
  2265.     }
  2266.  
  2267.     shuffle() {
  2268.       if (!this.root.elList) return;
  2269.       const randInt = maximum => Math.floor(Math.random() * (maximum + 1));
  2270.       this.walkTree((tree) => {
  2271.         const { list } = tree;
  2272.         for (let i = 0; i < list.length; i += 1) {
  2273.           const j = randInt(i);
  2274.           [list[i], list[j]] = [list[j], list[i]];
  2275.         }
  2276.         list.forEach(subtree => tree.elList.appendChild(subtree.el));
  2277.       });
  2278.     }
  2279.   }
  2280.  
  2281.   const commentsTree = new CommentsTree();
  2282.   commentsTree.update();
  2283.  
  2284.   FLAGS.sortVariants = [
  2285.     ['time', 'старые'],
  2286.   ];
  2287.  
  2288.   if (FLAGS.COMMENTS_SORT_BY_FRESHNESS) FLAGS.sortVariants.push(['freshness', 'новые']);
  2289.   if (FLAGS.COMMENTS_SORT_BY_TREND) FLAGS.sortVariants.push(['trend', 'горячие']);
  2290.   if (FLAGS.COMMENTS_SORT_BY_QUALITY) FLAGS.sortVariants.push(['quality', 'хорошие']);
  2291.   if (FLAGS.COMMENTS_SORT_BY_REDDIT) FLAGS.sortVariants.push(['reddit', 'проверенные']);
  2292.   if (FLAGS.COMMENTS_SORT_BY_RATING) FLAGS.sortVariants.push(['rating', 'рейтинговые']);
  2293.   if (FLAGS.COMMENTS_SORT_BY_POPULARITY) FLAGS.sortVariants.push(['popularity', 'популярные']);
  2294.   if (FLAGS.COMMENTS_SORT_BY_RANDOM) FLAGS.sortVariants.push(['shuffle', 'случайные']);
  2295.  
  2296.   // здесь начинается сортировка комментариев
  2297.   const commentsOrderEl = document.createElement('div');
  2298.   commentsOrderEl.classList.add('comments_order');
  2299.   commentsOrderEl.innerHTML = FLAGS.sortVariants.map(([type, text]) => {
  2300.     const underline = (type === 'time') ? '; text-decoration: underline' : '';
  2301.     return `<a data-order="${type}" style="cursor: pointer${underline}">${text}</a>`;
  2302.   }).join(', ');
  2303.  
  2304.   if (FLAGS.COMMENTS_SORT && document.getElementById('comments-list')) {
  2305.     const commentsList = document.getElementById('comments-list');
  2306.     commentsList.parentElement.insertBefore(commentsOrderEl, commentsList);
  2307.   }
  2308.  
  2309.   const commentsComparators = {
  2310.     time(a, b) {
  2311.       return a.id - b.id;
  2312.     },
  2313.  
  2314.     freshness(a, b) {
  2315.       return b.id - a.id;
  2316.     },
  2317.  
  2318.     rating(a, b) {
  2319.       const ascore = a.votes.rating;
  2320.       const bscore = b.votes.rating;
  2321.       if (bscore !== ascore) return bscore - ascore;
  2322.       return b.id - a.id;
  2323.     },
  2324.  
  2325.     popularity(a, b) {
  2326.       const aVotes = a.votes.total;
  2327.       const bVotes = b.votes.total;
  2328.       if (aVotes !== bVotes) return bVotes - aVotes;
  2329.       const aLength = a.getLength();
  2330.       const bLength = b.getLength();
  2331.       if (aLength !== bLength) return bLength - aLength;
  2332.       return b.id - a.id;
  2333.     },
  2334.  
  2335.     quality(a, b) {
  2336.       const aQuality = a.votes.rating / a.votes.total || 0;
  2337.       const bQuality = b.votes.rating / b.votes.total || 0;
  2338.       if (aQuality !== bQuality) return bQuality - aQuality;
  2339.       if (a.votes.rating !== b.votes.rating) return b.votes.rating - a.votes.rating;
  2340.       return b.id - a.id;
  2341.     },
  2342.  
  2343.     trend(a, b) {
  2344.       // в первые сутки после публикации статьи число посещений больше чем в остальное время
  2345.       const oneDay = 24 * 60 * 60 * 1000;
  2346.       const firstDayEnd = +datePublication.date + oneDay;
  2347.       // у комментария есть только три дня на голосование с момента его создания
  2348.       const threeDays = 3 * oneDay;
  2349.       const now = Date.now();
  2350.  
  2351.       // прикинем число голосов в первый день
  2352.       const aDate = +a.date.date;
  2353.       let aViews = 0;
  2354.       // в первый день
  2355.       if (aDate <= firstDayEnd) {
  2356.         aViews += Math.min(firstDayEnd, now) - aDate;
  2357.       }
  2358.       // и в остальное время
  2359.       if (now >= firstDayEnd) {
  2360.         const threeDaysEnd = aDate + threeDays;
  2361.         // для этого соотношения я собрал статистику
  2362.         aViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, aDate)) / 16;
  2363.       }
  2364.       const aScore = a.votes.rating / aViews;
  2365.  
  2366.       // аналогично
  2367.       const bDate = +b.date.date;
  2368.       let bViews = 0;
  2369.       if (bDate <= firstDayEnd) {
  2370.         bViews += Math.min(firstDayEnd, now) - bDate;
  2371.       }
  2372.       if (now >= firstDayEnd) {
  2373.         const threeDaysEnd = bDate + threeDays;
  2374.         // найти зависимость активности голосования от времени суток не удалось
  2375.         bViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, bDate)) / 16;
  2376.       }
  2377.       const bScore = b.votes.rating / bViews;
  2378.  
  2379.       if (bScore === aScore) return b.id - a.id;
  2380.       return bScore - aScore;
  2381.     },
  2382.  
  2383.     reddit(a, b) {
  2384.       const wilsonScore = (ups, downs) => {
  2385.         const n = ups + downs;
  2386.         if (n === 0) return 0;
  2387.         const z = 1.281551565545;
  2388.         const p = ups / n;
  2389.         const left = p + ((1 / (2 * n)) * z * z);
  2390.         const right = z * Math.sqrt(((p * (1 - p)) / n) + ((z * z) / (4 * n * n)));
  2391.         const under = 1 + ((1 / n) * (z * z));
  2392.         return (left - right) / under;
  2393.       };
  2394.       const aScore = wilsonScore(a.votes.likes, a.votes.dislikes);
  2395.       const bScore = wilsonScore(b.votes.likes, b.votes.dislikes);
  2396.       if (bScore === aScore) return b.id - a.id;
  2397.       return bScore - aScore;
  2398.     },
  2399.   };
  2400.  
  2401.   const sortComments = () => {
  2402.     const order = userConfig.getItem('comments_order');
  2403.  
  2404.     Array.from(commentsOrderEl.children).forEach((el) => {
  2405.       if (el.dataset.order === order) {
  2406.         el.style.textDecoration = 'underline'; // eslint-disable-line no-param-reassign
  2407.       } else {
  2408.         el.style.textDecoration = ''; // eslint-disable-line no-param-reassign
  2409.       }
  2410.     });
  2411.  
  2412.     if (order === 'shuffle') {
  2413.       commentsTree.shuffle();
  2414.     } else {
  2415.       const compare = commentsComparators[order];
  2416.       commentsTree.sort(compare);
  2417.     }
  2418.   };
  2419.  
  2420.   // сортируем комменты при загрузке страницы
  2421.   // или не сортируем, если они уже по порядку
  2422.   if (FLAGS.COMMENTS_SORT && FLAGS.COMMENTS_SORT_ONLOAD && userConfig.getItem('comments_order') !== 'time') {
  2423.     sortComments();
  2424.   }
  2425.  
  2426.   Array.from(commentsOrderEl.children).forEach((el) => {
  2427.     el.onclick = () => { // eslint-disable-line no-param-reassign
  2428.       userConfig.setItem('comments_order', el.dataset.order);
  2429.       sortComments();
  2430.     };
  2431.   });
  2432.  
  2433.  
  2434.   // меняем ссылки ведущие к новым комментариям на ссылки к началу комментариев
  2435.   if (FLAGS.COMMENTS_LINKS) {
  2436.     const commentsLinks = document.getElementsByClassName('post-stats__comments-link');
  2437.  
  2438.     for (let i = 0; i < commentsLinks.length; i += 1) {
  2439.       const iLink = commentsLinks[i];
  2440.       const hrefValue = iLink.getAttribute('href');
  2441.       const hrefToComments = hrefValue.replace('#first_unread', '#comments');
  2442.       iLink.setAttribute('href', hrefToComments);
  2443.     }
  2444.   }
  2445.  
  2446.   // сворачивание комментов
  2447.   if (FLAGS.COMMENTS_HIDE) {
  2448.     const commentHash = window.location.hash;
  2449.  
  2450.     const toggle = (subtree) => {
  2451.       const listLength = subtree.list.length;
  2452.       if (listLength === 0) return;
  2453.       /* eslint-disable */
  2454.       if (subtree.switcherEl.dataset.isVisibleList === 'true') {
  2455.         subtree.switcherEl.dataset.isVisibleList = 'false';
  2456.         subtree.switcherEl.innerHTML = `\u229E раскрыть ветку ${subtree.getLength()}`;
  2457.         subtree.elList.style.display = 'none';
  2458.       } else {
  2459.         subtree.switcherEl.dataset.isVisibleList = 'true';
  2460.         subtree.switcherEl.innerHTML = '\u229F';
  2461.         subtree.elList.style.display = 'block';
  2462.       }
  2463.       /* eslint-enable */
  2464.     };
  2465.  
  2466.     commentsTree.walkTree((subtree) => {
  2467.       // не пытаемся сворачивать корень
  2468.       if (subtree.isRoot) return;
  2469.       // у похищенных нет футера
  2470.       const footerEl = subtree.commentEl.querySelector('.comment__footer');
  2471.       if (footerEl === null) return;
  2472.       // создаём переключатель
  2473.       const switcher = document.createElement('a');
  2474.       switcher.classList.add('comment__footer-link');
  2475.       switcher.classList.add('comment__switcher');
  2476.       switcher.dataset.isVisibleList = 'true';
  2477.  
  2478.       switcher.innerHTML = '\u229F';
  2479.       if (subtree.list.length === 0) switcher.innerHTML = '\u22A1';
  2480.       switcher.style.cursor = 'pointer';
  2481.       switcher.style.marginLeft = '-5px';
  2482.  
  2483.       footerEl.insertBefore(switcher, footerEl.children[0]);
  2484.       subtree.switcherEl = switcher; // eslint-disable-line no-param-reassign
  2485.  
  2486.       switcher.onclick = () => toggle(subtree);
  2487.  
  2488.       const isHideLvl = subtree.lvl === FLAGS.HIDE_LEVEL && FLAGS.HIDE_LEVEL_4;
  2489.       const isLineLvl = subtree.lvl % FLAGS.LINE_LEN === 0;
  2490.       if (isLineLvl) {
  2491.         subtree.elList.classList.add('comments_new-line');
  2492.         const lineNumber = subtree.lvl / FLAGS.LINE_LEN;
  2493.         subtree.elList.classList.add(`comments_new-line-${lineNumber % 4}`);
  2494.       }
  2495.       // при запуске не сворачиваем ветки с новыми комментами, и содержащие целевой id
  2496.       if (
  2497.         (isHideLvl || isLineLvl) && !subtree.existNew() &&
  2498.         !(commentHash && subtree.existId(commentHash))
  2499.       ) {
  2500.         toggle(subtree);
  2501.       }
  2502.     });
  2503.   }
  2504.  
  2505.   if (FLAGS.SCROLL_LEGEND) {
  2506.     const postBodyEl = document.querySelector('.post__body_full') || document.querySelector('.article__body');
  2507.     const commentsEl = document.getElementById('comments-list');
  2508.     const getPercents = (el) => {
  2509.       if (!el) return { topPercent: 0, heightPercent: 0 };
  2510.       const pageHeight = document.documentElement.scrollHeight;
  2511.       const top = el.getBoundingClientRect().top + window.pageYOffset;
  2512.       const topPercent = ((100 * top) / pageHeight).toFixed(2);
  2513.       const height = el.clientHeight;
  2514.       const heightPercent = ((100 * height) / pageHeight).toFixed(2);
  2515.  
  2516.       return { topPercent, heightPercent };
  2517.     };
  2518.  
  2519.     const updateLegend = (pageEl, legendEl) => {
  2520.       const { topPercent, heightPercent } = getPercents(pageEl);
  2521.       legendEl.style.top = `${topPercent}%`; // eslint-disable-line no-param-reassign
  2522.       legendEl.style.height = `${heightPercent}%`; // eslint-disable-line no-param-reassign
  2523.     };
  2524.  
  2525.     const legendPost = document.createElement('div');
  2526.     legendPost.classList.add('legend_el');
  2527.     legendPost.style.background = 'rgba(84, 142, 170, 0.66)';
  2528.     updateLegend(postBodyEl, legendPost);
  2529.     document.body.appendChild(legendPost);
  2530.  
  2531.     const legendComments = document.createElement('div');
  2532.     legendComments.classList.add('legend_el');
  2533.     legendComments.style.background = 'rgba(49, 176, 7, 0.66)';
  2534.     updateLegend(commentsEl, legendComments);
  2535.     document.body.appendChild(legendComments);
  2536.  
  2537.     setInterval(() => {
  2538.       updateLegend(postBodyEl, legendPost);
  2539.       updateLegend(commentsEl, legendComments);
  2540.     }, 1000);
  2541.   }
  2542.  
  2543.   if (FLAGS.NIGHT_MODE) {
  2544.     const switcherEl = document.createElement('div');
  2545.     switcherEl.classList.add('night_mode_switcher');
  2546.     switcherEl.onclick = () => {
  2547.       const isNightMode = userConfig.shiftItem('night_mode');
  2548.       document.documentElement.classList.toggle('night', isNightMode);
  2549.     };
  2550.     document.body.appendChild(switcherEl);
  2551.     setInterval(() => {
  2552.       const boolClass = document.documentElement.classList.contains('night');
  2553.       const isNightMode = userConfig.getItem('night_mode');
  2554.       if (boolClass !== isNightMode) {
  2555.         document.documentElement.classList.toggle('night', isNightMode);
  2556.       }
  2557.     }, 1000);
  2558.   }
  2559.  
  2560.   if (FLAGS.CONFIG_INTERFACE) {
  2561.     const configFrame = document.createElement('div');
  2562.     configOptions.forEach(([key, text]) => {
  2563.       if (typeof FLAGS[key] !== 'boolean') return;
  2564.       const inputEl = document.createElement('input');
  2565.       inputEl.type = 'checkbox';
  2566.       inputEl.value = key;
  2567.       inputEl.checked = FLAGS[key];
  2568.       const labelEl = document.createElement('label');
  2569.       labelEl.setAttribute('unselectable', 'on');
  2570.       labelEl.setAttribute('onselectstart', 'return false');
  2571.       const spanEl = document.createElement('span');
  2572.       spanEl.innerHTML = text;
  2573.       configFrame.appendChild(labelEl);
  2574.       labelEl.appendChild(inputEl);
  2575.       labelEl.appendChild(spanEl);
  2576.       inputEl.onchange = () => {
  2577.         FLAGS[key] = inputEl.checked;
  2578.         localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
  2579.       };
  2580.       configFrame.appendChild(document.createElement('br'));
  2581.     });
  2582.     const reloadText = document.createElement('div');
  2583.     reloadText.style.textAlign = 'right';
  2584.     reloadText.innerHTML = `
  2585.       * чтобы увидеть изменения
  2586.       <a  href="#" onclick="location.reload(); return false">
  2587.         обновите страницу
  2588.       </a>`;
  2589.     configFrame.appendChild(reloadText);
  2590.     configFrame.classList.add('config_frame');
  2591.     configFrame.style.display = 'none';
  2592.     document.body.appendChild(configFrame);
  2593.  
  2594.     const configButton = document.createElement('div');
  2595.     configButton.classList.add('config_button');
  2596.     document.body.appendChild(configButton);
  2597.  
  2598.     configButton.onclick = () => {
  2599.       if (configFrame.style.display) {
  2600.         configFrame.style.display = '';
  2601.       } else {
  2602.         configFrame.style.display = 'none';
  2603.       }
  2604.     };
  2605.   }
  2606.  
  2607.   setTimeout(() => {
  2608.     const marker = document.createElement('meta');
  2609.     marker.id = 'habrafixmarker';
  2610.     document.head.appendChild(marker);
  2611.   }, 300);
  2612. });