Всякое-разное для Habr aka habr.com
// ==UserScript==
// @name Habr.Features
// @version 3.7.71
// @description Всякое-разное для Habr aka habr.com
// @author AngReload
// @include https://habr.com/*
// @include http://habr.com/*
// @namespace habr_comments
// @run-at document-start
// @grant GM.xmlHttpRequest
// @connect m.habr.com
// @icon https://habr.com/favicon.ico
// ==/UserScript==
/* global localStorage, MutationObserver, GM */
// настройки по умолчанию
const FLAGS = {};
// размеры кнопок
FLAGS.SMALL_BUTTONS = false;
// Предотвратить закрытие страницы, если статья удалена
FLAGS.PREVENT_CLOSING_DELETED_PAGES = false;
// остановка гифок
// клик по гифке заменит картинку на заглушку
// повторный клик вернет гифку на место
FLAGS.GIF_STOP = true;
// остановить гифки при загрузке страницы
FLAGS.GIF_STOP_ONLOAD = false;
// цвета заглушки
FLAGS.GIF_STOP_COLOR_FG = 'White'; // White
FLAGS.GIF_STOP_COLOR_BG = 'LightGray'; // LightGray or WhiteSmoke
// менять src вместо создания-удаления нод
FLAGS.GIF_STOP_OVERTYPE = false;
// показывать счетчики рейтинга в виде:
// рейтинг = число_плюсов - число_минусов
FLAGS.RATING_DETAILS = true;
// клик мышкой по рейтингу меняет вид на простой \ детальный
FLAGS.RATING_DETAILS_ONCLICK = false;
// рейтинг = число_голосовавших * (процент_плюсов - процент_минусов)%
FLAGS.RATING_DETAILS_PN = false;
// карма = число_голосовавших * (процент_товарищей - процент_неприятелей)%
FLAGS.KARMA_DETAILS = true;
// показывать метки времени в текущем часовом поясе
// абсолютно, либо относительно текущего времени, либо относительно родительского времени
// меняется по клику, в всплывающей подсказке другие виды времени, автообновляется
FLAGS.TIME_DETAILS = true;
// добавить возможность сортировки комментариев
FLAGS.COMMENTS_SORT = true;
// сортировать комменты при загрузке страницы или оставить сортировку по времени
FLAGS.COMMENTS_SORT_ONLOAD = true;
// список доступных сортировок
FLAGS.COMMENTS_SORT_BY_FRESHNESS = true;
FLAGS.COMMENTS_SORT_BY_TREND = true; // самая полезная сортировка
FLAGS.COMMENTS_SORT_BY_QUALITY = false;
FLAGS.COMMENTS_SORT_BY_RATING = false;
FLAGS.COMMENTS_SORT_BY_POPULARITY = false;
FLAGS.COMMENTS_SORT_BY_REDDIT = false;
FLAGS.COMMENTS_SORT_BY_RANDOM = false;
// добавить возможность сворачивать комментарии
FLAGS.COMMENTS_HIDE = false;
// свернуть комментарии если их глубина вложенности равна некому числу
FLAGS.HIDE_LEVEL = 4;
// свернуть комменты с 4-го уровня
FLAGS.HIDE_LEVEL_4 = false;
// сделать «возврат каретки» для комментариев чтобы глубина вложенности не превышала некого числа
FLAGS.LINE_LEN = 8;
// отбивать каждый следущий уровень вложенности дополнительным отступом
FLAGS.REDUCE_NEW_LINES = true;
// глубина вложенности при «возврате каретки» комментариев обозначается разным цветом
FLAGS.RAINBOW_NEW_LINE = true;
// заменить ссылки ведущие к новым комментариям на дерево комментариев
FLAGS.COMMENTS_LINKS = true;
// запоминание галки «Использовать MarkDown» для комментариев
FLAGS.COMMENTS_MD = true;
// добавить ссылку на хабрасторадж в форму редактирования комментариев
FLAGS.HTSO_BTN = true;
// добавить ссылку на отслеживаемых в странице профиля
FLAGS.SUBS_BTN = true;
// включить поиск комментариев в профилях
FLAGS.FIND_COMMENTS = true;
// линии вдоль прокрутки для отображения размеров поста и комментариев
FLAGS.SCROLL_LEGEND = true;
// добавляет кнопку активации ночного режима
FLAGS.NIGHT_MODE = true;
// добавляет диалок настроек
FLAGS.CONFIG_INTERFACE = true;
// включить разные стили
FLAGS.USERSTYLE = true;
// лента постов с увеличенными отступами, нижний бар выровнен вправо
FLAGS.USERSTYLE_FEED_DISTANCED = true;
// мелкий фикс для отступа в счетчике ленты
FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE = true;
// удаляет правую колонку, там где не жалко
FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT = true;
// аватарки без скруглений
FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS = true;
// большие аватарки в профиле и карточках
FLAGS.USERSTYLE_USERINFO_BIG_AVATARS = true;
// ограничить размер картинок в комментах
FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE = 0;
// ограничить размер картинок в комментах
FLAGS.USERSTYLE_COMMENTS_OPACITY = false;
// нормальные стили для комментариев
FLAGS.USERSTYLE_COMMENTS_FIX = true;
// нормальные стили для кода
FLAGS.USERSTYLE_CODE_FIX = true;
// окантовка границ спойлеров
FLAGS.USERSTYLE_SPOILER_BORDERS = true;
// делает глючные плавающие блоки статичными
FLAGS.USERSTYLE_STATIC_STICKY = true;
// показывать язык подсветки блоков кода
FLAGS.USERSTYLE_HLJS_LANG = true;
// показывать язык кода только при наведении
FLAGS.USERSTYLE_HLJS_LANG_HOVER = false;
// свой шрифт для блоков кода
FLAGS.USERSTYLE_CODE_FONT = ''; // PT Mono
// размер табов в коде
FLAGS.USERSTYLE_CODE_TABSIZE = 2;
// для ночного режима
FLAGS.USERSTYLE_CODE_NIGHT = true;
// для настроек
FLAGS.USERSTYLE_CONFIG_INTERFACE = true;
FLAGS.SCROLL_BEHAVIOR_SMOOTH = true;
const configOptions = [
['KARMA_DETAILS', 'счётчики кармы с плюсами и минусами'],
['RATING_DETAILS', 'рейтинги с плюсами и минусами'],
['RATING_DETAILS_PN', 'рейтинги в процентах'],
['TIME_DETAILS', 'отметки о времени с подробностями'],
['PREVENT_CLOSING_DELETED_PAGES', 'предотвратить закрытие страницы, если статья удалена'],
['GIF_STOP', 'остановка гифок'],
['GIF_STOP_ONLOAD', 'остановить гифки при загрузке страницы'],
['COMMENTS_SORT', 'сортировка комментов'],
['COMMENTS_SORT_ONLOAD', 'сортировать комменты при загрузке'],
['COMMENTS_SORT_BY_FRESHNESS', 'сортировка новые'],
['COMMENTS_SORT_BY_TREND', 'сортировка горячие'],
['COMMENTS_SORT_BY_QUALITY', 'сортировка хорошие'],
['COMMENTS_SORT_BY_REDDIT', 'сортировка проверенные'],
['COMMENTS_SORT_BY_RATING', 'сортировка рейтинговые'],
['COMMENTS_SORT_BY_POPULARITY', 'сортировка популярные'],
['COMMENTS_SORT_BY_RANDOM', 'сортировка случайные'],
// ['COMMENTS_HIDE', 'сворачивание комментов'],
// ['HIDE_LEVEL_4', 'свернуть комменты с 4-го уровня'],
// ['REDUCE_NEW_LINES', 'возврат каретки с уменьшением ширины'],
// ['RAINBOW_NEW_LINE', 'возврат каретки комментов в разных цветах'],
// ['COMMENTS_LINKS', '"читать комментарии" ведёт на корень комментов'],
// ['COMMENTS_MD', 'запоминать галку MarkDown'],
['USERSTYLE_COMMENTS_OPACITY', 'заминусованные комменты без прозрачности'],
// ['FIX_JUMPING_SCROLL', 'заморозить высоту статьи при загрузке'],
['SCROLL_LEGEND', 'ленгенда страницы у скроллбара'],
['SUBS_BTN', 'табы подписок в профилях'],
['FIND_COMMENTS', 'поиск по комментариям в профилях'],
['NIGHT_MODE', 'ночной режим'],
['SMALL_BUTTONS', 'маленькие кнопки настроек и ночного режима'],
// ['USERSTYLE', 'стилизация'],
['USERSTYLE_COMMENTS_FIX', 'стили комментов'],
['USERSTYLE_HLJS_LANG', 'показать язык для блоков кода'],
// ['USERSTYLE_HLJS_LANG_HOVER', 'язык кода скрыт до наведении курсора'],
['USERSTYLE_STATIC_STICKY', 'зафиксировать плавающие блоки'],
// ['USERSTYLE_SPOILER_BORDERS', 'видимые границы спойлеров'],
['USERSTYLE_FEED_DISTANCED', 'большие отступы между постами в ленте'],
['USERSTYLE_REMOVE_SIDEBAR_RIGHT', 'удалить правую колонку сайта'],
// ['USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS', 'квадратные аватарки'],
['USERSTYLE_USERINFO_BIG_AVATARS', 'по возможности большие аватарки в профилях'],
];
// сохраняем умолчания для панели настроек
if (!localStorage.getItem('habrafixFlags')) {
localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
} else {
const jsonString = localStorage.getItem('habrafixFlags');
const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
const loadedKeys = Object.keys(loadedConfig);
Object.keys(FLAGS).forEach((key) => {
if (
loadedKeys.includes(key) &&
configOptions.find(arr => arr[0] === key)
) {
FLAGS[key] = loadedConfig[key];
}
});
}
let BUTTON_SIZE = 16;
let BUTTON_SIZE2 = 25;
let BUTTON_SIZE4 = 48;
let KARMA_WIDTH = 84; // ?
if (FLAGS.SMALL_BUTTONS) {
BUTTON_SIZE = 16;
BUTTON_SIZE2 = 25;
BUTTON_SIZE4 = 48;
KARMA_WIDTH = 84; // ?
} else {
BUTTON_SIZE = 32;
BUTTON_SIZE2 = 25;
BUTTON_SIZE4 = 88;
KARMA_WIDTH = 84;
}
// интерфейс для хранения настроек
const userConfig = {
// имя записи в localsorage
key: 'habrafix',
// модель настроек: ключ - возможные значения
model: {
time_publications: ['fromNow', 'absolute'],
time_comments: ['fromParent', 'fromNow', 'absolute'],
comments_order: ['trend', 'time'],
scores_details: [true, false],
comment_markdown: [false, true],
night_mode: [false, true],
},
config: {},
// при старте для конфига берем сохраненные параметры либо по умолчанию
init() {
let jsonString = localStorage.getItem(userConfig.key);
const loadedConfig = jsonString ? JSON.parse(jsonString) : {};
const loadedKeys = Object.keys(loadedConfig);
const config = {};
Object.keys(userConfig.model).forEach((key) => {
const exist = loadedKeys.indexOf(key) >= 0;
config[key] = exist ? loadedConfig[key] : userConfig.model[key][0];
});
jsonString = JSON.stringify(config);
localStorage.setItem(userConfig.key, jsonString);
userConfig.config = config;
},
getItem(key) {
const jsonString = localStorage.getItem(userConfig.key);
const config = JSON.parse(jsonString);
return config[key];
// return userConfig.config[key];
},
setItem(key, value) {
let jsonString = localStorage.getItem(userConfig.key);
const config = JSON.parse(jsonString);
config[key] = value;
jsonString = JSON.stringify(config);
localStorage.setItem(userConfig.key, jsonString);
userConfig.config = config;
},
// каруселит параметр по значения модели
shiftItem(key) {
const currentValue = userConfig.getItem(key);
const availableValues = userConfig.model[key];
const currentIdx = availableValues.indexOf(currentValue);
const nextIdx = (currentIdx + 1) % availableValues.length;
const nextValue = availableValues[nextIdx];
userConfig.setItem(key, nextValue);
return nextValue;
},
};
userConfig.init();
// свои стили
const userStyleEl = document.createElement('style');
let userStyle = '';
if (FLAGS.SCROLL_LEGEND) {
userStyle += `
.legend_el {
position: fixed;
width: 4px;
right: 0;
transition: top 1s ease-out, height 1s ease-out;
z-index: 10000;
}
#xpanel {
right: 4px;
}
`;
}
if (FLAGS.USERSTYLE_FEED_DISTANCED) {
userStyle += `
.post__body_crop {
text-align: right;
}
.post__body_crop .post__text {
text-align: left;
}
.post__footer {
text-align: right;
}
.posts_list .content-list__item_post {
padding: 40px 0;
}
`;
}
if (FLAGS.USERSTYLE_COUNTER_NEW_FIX_SPACE) {
userStyle += `
.toggle-menu__item-counter_new {
margin-left: 4px;
}
`;
}
if (FLAGS.USERSTYLE_COMMENTS_OPACITY) {
userStyle += `
.comment__message_downgrade {
opacity: 1;
}
`;
}
if (FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT || FLAGS.PREVENT_CLOSING_DELETED_PAGES) {
// remove for
// https://habr.com/post/352896/
// https://habr.com/sandbox/
// https://habr.com/sandbox/115216/
// https://habr.com/users/saggid/posts/
// https://habr.com/users/saggid/comments/
// https://habr.com/users/saggid/favorites/
// https://habr.com/users/saggid/favorites/posts/
// https://habr.com/users/saggid/favorites/comments/
// https://habr.com/company/pvs-studio/blog/353640/
// https://habr.com/company/pvs-studio/blog/
// https://habr.com/company/pvs-studio/blog/top/
// https://habr.com/company/pvs-studio/
// https://habr.com/feed/
// https://habr.com/top/
// https://habr.com/top/yearly/
// https://habr.com/all/
// https://habr.com/all/top10/
// display for
// https://habr.com/company/pvs-studio/profile/
// https://habr.com/company/pvs-studio/vacancies/
// https://habr.com/company/pvs-studio/fans/all/rating/
// https://habr.com/company/pvs-studio/workers/new/rating/
// https://habr.com/feed/settings/
// https://habr.com/users/
// https://habr.com/hubs/
// https://habr.com/hubs/admin/
// https://habr.com/companies/
// https://habr.com/companies/category/software/
// https://habr.com/companies/new/
// https://habr.com/flows/design/
const path = window.location.pathname;
const isPost = /^\/(ru|en)\/post\/\d+\/$/.test(path);
const isSandbox = /^\/(ru|en)\/sandbox\//.test(path);
const isUserPosts = /^\/(ru|en)\/users\/[^/]+\/posts\//.test(path);
const isUserComments = /^\/(ru|en)\/users\/[^/]+\/comments\//.test(path);
const isUserFavorites = /^\/(ru|en)\/users\/[^/]+\/favorites\//.test(path);
// const isUserSubscription = /^\/(ru|en)\/users\/[^/]+\/subscription\//.test(path);
const isCompanyBlog = /^\/(ru|en)\/company\/[^/]+\/blog\//.test(path);
const isCompanyBlog2 = /^\/(ru|en)\/company\/[^/]+\/(page\d+\/)?$/.test(path);
const isCompanyBlogPost = /^\/(ru|en)\/company\/[^/]+\/blog\/[^/]+/.test(path);
const isFeed = /^\/(ru|en)\/feed\//.test(path);
const isHome = /^\/(ru|en)\/$/.test(path);
const isTop = /^\/(ru|en)\/top\//.test(path);
const isAll = /^\/(ru|en)\/all\//.test(path);
const isNews = /^\/(ru|en)\/news\//.test(path);
const isNewsT = /^\/(ru|en)\/news\/t\/\d+\/$/.test(path);
if (FLAGS.USERSTYLE_REMOVE_SIDEBAR_RIGHT && (
isPost || isSandbox ||
isUserPosts || isUserComments || isUserFavorites ||
isCompanyBlog || isCompanyBlog2 ||
isFeed || isHome || isTop || isAll ||
isNews || isNewsT
)) {
userStyle += `
.sidebar_right,
.sidebar {
display: none;
}
.content_left {
padding-right: 0;
}
.comment_plain {
max-width: 860px;
}
`;
}
if (FLAGS.PREVENT_CLOSING_DELETED_PAGES && (
isPost || isSandbox ||
isCompanyBlogPost ||
isNews || isNewsT
)) {
window.onbeforeunload = (e) => {
const xhr = new XMLHttpRequest();
xhr.open('HEAD', '', false);
xhr.send();
if (xhr.status < 200 || xhr.status >= 400) {
e.preventDefault();
const message = 'Статья уже удалена или недоступна';
e.returnValue = message;
return message;
}
return undefined;
};
}
}
if (FLAGS.USERSTYLE_REMOVE_BORDER_RADIUS_AVATARS) {
userStyle += `
.user-info__image-pic,
.user-pic_popover,
.media-obj__image-pic,
.company-info__image-pic {
border-radius: 0;
}
`;
}
if (FLAGS.USERSTYLE_USERINFO_BIG_AVATARS) {
userStyle += `
.page-header {
height: auto;
}
.media-obj__image-pic_hub,
.user-info__stats .media-obj__image-pic_user,
/* .media-obj__image-pic_company, */
.company-info__image-pic {
width: auto;
height: auto;
}
.page-header_tall .company-info__image-pic {
width: 48px;
height: 48px;
}
`;
}
if (FLAGS.COMMENTS_SORT) {
userStyle += `
.comments_order {
color: #333;
font-size: 14px;
font-family: "-apple-system",BlinkMacSystemFont,Arial,sans-serif;
text-rendering: optimizeLegibility;
border-bottom: 1px solid #e3e3e3;
padding: 8px;
text-align: right;
}
.comments_order a {
color: #548eaa;
font-style: normal;
text-decoration: none;
}
.comments_order a:hover {
color: #487284;
}
`;
}
if (FLAGS.USERSTYLE_COMMENTS_FIX) {
userStyle += `
.content-list_comments {
overflow: visible;
}
.comment__folding-dotholder {
display: none !important;
}
.content-list_nested-comments {
border-left: 1px solid #e3e3e3;
margin: 0;
/*padding-top: 20px;*/
padding-left: 20px !important;
}
.content-list_comments {
/*border-left: 1px solid silver;*/
margin: 0;
/*padding-left: 0;*/
padding-top: 20px;
/*background: #FCE4EC;*/
}
#comments-list .js-form_placeholder:not(:empty) {
border-left: 1px solid #e3e3e3;
padding-left: 20px;
}
.comments_new-line {
border-left: 1px solid #777;
border-bottom: 1px solid #777;
border-top: 1px solid #777;
margin-left: -${FLAGS.LINE_LEN * 21}px !important;
background: white;
padding-bottom: 4px;
}
/* .comment__head_topic-author.comment__head_new-comment */
.comment__head_topic-author .user-info {
text-decoration: underline;
}
/* фикс, когда не добавляется класс &_plus или minus при user_vote_action */
.voting-wjt__button[title="Вы проголосовали положительно"] {
color: #7ba600;
}
.voting-wjt__button[title="Вы проголосовали отрицательно"] {
color: #d53c30;
}
`;
}
if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.RAINBOW_NEW_LINE) {
userStyle += `
.comments_new-line-1 {
border-color: #0caefb;
}
.comments_new-line-2 {
border-color: #06feb7;
}
.comments_new-line-3 {
border-color: #fbcb02;
}
.comments_new-line-0 {
border-color: #fb0543;
}
.js-comment_parent:not(:hover) {
color: #cd66cd !important;
}
`;
}
if (FLAGS.USERSTYLE_COMMENTS_FIX && FLAGS.REDUCE_NEW_LINES) {
userStyle += `
.comments_new-line .comments_new-line {
margin-left: -${(FLAGS.LINE_LEN - 1) * 21}px !important;
}
`;
}
if (FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE) {
userStyle += `
.comment__message img {
max-height: ${FLAGS.USERSTYLE_COMMENTS_IMG_MAXSIZE}px;
}
.comment__message .spoiler .img {
max-height: auto;
}
`;
}
if (FLAGS.USERSTYLE_CODE_FIX) {
let addFont = '';
if (FLAGS.USERSTYLE_CODE_FONT) {
addFont = FLAGS.USERSTYLE_CODE_FONT;
if (addFont.indexOf(' ') >= 0) {
addFont = `"${addFont}"`;
}
addFont += ',';
}
const tabSize = FLAGS.USERSTYLE_CODE_TABSIZE || 4;
userStyle += `
.editor .text-holder textarea,
.tm-editor__textarea,
pre {
font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace;
}
code {
font-family: ${addFont} 'Ubuntu Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Courier New', monospace !important;;
-o-tab-size: ${tabSize};
-moz-tab-size: ${tabSize};
tab-size: ${tabSize};
background: #f7f7f7;
border-radius: 3px;
color: #505c66;
display: inline-block;
font-weight: 500;
line-height: 1.29;
padding: 5px 9px;
vertical-align: 1px;
}
`;
}
if (FLAGS.USERSTYLE_SPOILER_BORDERS) {
userStyle += `
.spoiler .spoiler_text {
border: 1px dashed rgb(12, 174, 251);
}
`;
}
if (FLAGS.USERSTYLE_STATIC_STICKY) {
userStyle += `
.wrapper-sticky,
.js-ad_sticky,
.js-ad_sticky_comments {
position: static !important;
}
.sticky-spacer {
display: none !important;
}
`;
}
if (FLAGS.GIF_STOP) {
userStyle += `
.habrafix_gif-stop:hover {
outline: 4px solid #548eaa;
outline-offset: -4px;
}
`;
}
if (FLAGS.USERSTYLE_HLJS_LANG) {
let hover = '';
if (FLAGS.USERSTYLE_HLJS_LANG_HOVER) hover = ':hover';
userStyle += `
pre {
position: relative;
}
.hljs${hover}::after {
position: absolute;
font-size: 12px;
content: 'code';
right: 0;
top: 0;
padding: 1px 5px 0 4px;
/*border-bottom: 1px solid #e5e8ec;
border-left: 1px solid #e5e8ec;
border-bottom-left-radius: 3px;
color: #505c66;*/
opacity: .5;
}
`;
userStyle += [
['1c', '1C:Enterprise (v7, v8)'],
['abnf', 'Augmented Backus-Naur Form'],
['accesslog', 'Access log'],
['actionscript', 'ActionScript'],
['ada', 'Ada'],
['apache', 'Apache'],
['applescript', 'AppleScript'],
['arduino', 'Arduino'],
['armasm', 'ARM Assembly'],
['asciidoc', 'AsciiDoc'],
['aspectj', 'AspectJ'],
['autohotkey', 'AutoHotkey'],
['autoit', 'AutoIt'],
['avrasm', 'AVR Assembler'],
['awk', 'Awk'],
['axapta', 'Axapta'],
['bash', 'Bash'],
['basic', 'Basic'],
['bnf', 'Backus–Naur Form'],
['brainfuck', 'Brainfuck'],
['cal', 'C/AL'],
['capnproto', 'Cap’n Proto'],
['ceylon', 'Ceylon'],
['clean', 'Clean'],
['clojure-repl', 'Clojure REPL'],
['clojure', 'Clojure'],
['cmake', 'CMake'],
['coffeescript', 'CoffeeScript'],
['coq', 'Coq'],
['cos', 'Caché Object Script'],
['cpp', 'C++'],
['crmsh', 'crmsh'],
['crystal', 'Crystal'],
['cs', 'C#'],
['csp', 'CSP'],
['css', 'CSS'],
['d', 'D'],
['dart', 'Dart'],
['delphi', 'Delphi'],
['diff', 'Diff'],
['django', 'Django'],
['dns', 'DNS Zone file'],
['dockerfile', 'Dockerfile'],
['dos', 'DOS .bat'],
['dsconfig', 'dsconfig'],
['dts', 'Device Tree'],
['dust', 'Dust'],
['ebnf', 'Extended Backus-Naur Form'],
['elixir', 'Elixir'],
['elm', 'Elm'],
['erb', 'ERB (Embedded Ruby)'],
['erlang-repl', 'Erlang REPL'],
['erlang', 'Erlang'],
['excel', 'Excel'],
['fix', 'FIX'],
['flix', 'Flix'],
['fortran', 'Fortran'],
['fsharp', 'F#'],
['gams', 'GAMS'],
['gauss', 'GAUSS'],
['gcode', 'G-code (ISO 6983)'],
['gherkin', 'Gherkin'],
['glsl', 'GLSL'],
['go', 'Go'],
['golo', 'Golo'],
['gradle', 'Gradle'],
['groovy', 'Groovy'],
['haml', 'Haml'],
['handlebars', 'Handlebars'],
['haskell', 'Haskell'],
['haxe', 'Haxe'],
['hsp', 'HSP'],
['htmlbars', 'HTMLBars'],
['http', 'HTTP'],
['hy', 'Hy'],
['inform7', 'Inform 7'],
['ini', 'Ini'],
['irpf90', 'IRPF90'],
['java', 'Java'],
['javascript', 'JavaScript'],
['jboss-cli', 'jboss-cli'],
['json', 'JSON'],
['julia-repl', 'Julia REPL'],
['julia', 'Julia'],
['kotlin', 'Kotlin'],
['lasso', 'Lasso'],
['ldif', 'LDIF'],
['leaf', 'Leaf'],
['less', 'Less'],
['lisp', 'Lisp'],
['livecodeserver', 'LiveCode'],
['livescript', 'LiveScript'],
['llvm', 'LLVM IR'],
['lsl', 'Linden Scripting Language'],
['lua', 'Lua'],
['makefile', 'Makefile'],
['markdown', 'Markdown'],
['mathematica', 'Mathematica'],
['matlab', 'Matlab'],
['maxima', 'Maxima'],
['mel', 'MEL'],
['mercury', 'Mercury'],
['mipsasm', 'MIPS Assembly'],
['mizar', 'Mizar'],
['mojolicious', 'Mojolicious'],
['monkey', 'Monkey'],
['moonscript', 'MoonScript'],
['n1ql', 'N1QL'],
['nginx', 'Nginx'],
['nimrod', 'Nimrod'],
['nix', 'Nix'],
['nsis', 'NSIS'],
['objectivec', 'Objective-C'],
['ocaml', 'OCaml'],
['openscad', 'OpenSCAD'],
['oxygene', 'Oxygene'],
['parser3', 'Parser3'],
['perl', 'Perl'],
['pf', 'pf'],
['pgsql', 'PostgreSQL'],
['plaintext', 'просто текст'], // на будущее
['php', 'PHP'],
['pony', 'Pony'],
['powershell', 'PowerShell'],
['processing', 'Processing'],
['profile', 'Python profile'],
['prolog', 'Prolog'],
['protobuf', 'Protocol Buffers'],
['puppet', 'Puppet'],
['purebasic', 'PureBASIC'],
['python', 'Python'],
['q', 'Q'],
['qml', 'QML'],
['r', 'R'],
['rib', 'RenderMan RIB'],
['roboconf', 'Roboconf'],
['routeros', 'Microtik RouterOS script'],
['rsl', 'RenderMan RSL'],
['ruby', 'Ruby'],
['ruleslanguage', 'Oracle Rules Language'],
['rust', 'Rust'],
['scala', 'Scala'],
['scheme', 'Scheme'],
['scilab', 'Scilab'],
['scss', 'SCSS'],
['shell', 'Shell Session'],
['smali', 'Smali'],
['smalltalk', 'Smalltalk'],
['sml', 'SML'],
['sqf', 'SQF'],
['sql', 'SQL'],
['stan', 'Stan'],
['stata', 'Stata'],
['step21', 'STEP Part 21'],
['stylus', 'Stylus'],
['subunit', 'SubUnit'],
['swift', 'Swift'],
['taggerscript', 'Tagger Script'],
['tap', 'Test Anything Protocol'],
['tcl', 'Tcl'],
['tex', 'TeX'],
['thrift', 'Thrift'],
['tp', 'TP'],
['twig', 'Twig'],
['typescript', 'TypeScript'],
['vala', 'Vala'],
['vbnet', 'VB.NET'],
['vbscript-html', 'VBScript in HTML'],
['vbscript', 'VBScript'],
['verilog', 'Verilog'],
['vhdl', 'VHDL'],
['vim', 'Vim Script'],
['x86asm', 'Intel x86 Assembly'],
['xl', 'XL'],
['xml', 'HTML, XML'],
['xquery', 'XQuery'],
['yaml', 'YAML'],
['zephir', 'Zephir'],
].map(([langTag, langName]) => `.hljs.${langTag}${hover}::after{content:'${langName} [${langTag}]'}`).join('');
}
if (FLAGS.USERSTYLE_CODE_NIGHT) {
userStyle += `
.night_mode_switcher {
box-sizing: border-box;
position: fixed;
width: 32px;
height: 32px;
right: 32px;
bottom: 32px;
width: ${BUTTON_SIZE}px;
height: ${BUTTON_SIZE}px;
right: ${BUTTON_SIZE}px;
bottom: ${BUTTON_SIZE}px;
z-index: 10000;
background-color: transparent;
border-radius: 50%;
border: 4px solid #aaa;
border-right-width: ${BUTTON_SIZE / 2}px;
transition: border-color 0.1s ease-out;
}
.night_mode_switcher:hover {
border-color: #333;
}
.night .night_mode_switcher {
border-color: #515151;
}
.night .night_mode_switcher:hover {
border-color: #9e9e9e;
}
.night ::-webkit-scrollbar,
.night ::-webkit-scrollbar-corner,
.night ::-webkit-scrollbar-track-piece {
background-color: #000;
}
.night ::-webkit-scrollbar-thumb {
background-color: #22272b;
border: 1px solid #000;
}
.night ::-webkit-scrollbar-thumb:hover {
background-color: #2C3237;
}
.night {
scrollbar-color: dark;
scrollbar-face-color: #22272b;
scrollbar-track-color: #000;
scrollbar-color: #22272b #000;
}
/* bg */
.night .sidebar-block__suggest,
.night .dropdown-container,
.night .poll-result__bar,
.night .comments_new-line,
.night .tm-editor__textarea,
.night .layout,
.night .toggle-menu__most-read,
.night .toggle-menu_most-comments,
.night .partner-info {
background: #171c20;
}
/* text */
.night .companies-rating__name:not(:hover),
.night .profile-section__title,
.night .profile-section__about-text,
.night .profile-section__invited,
.night .sidebar-block__suggest,
.night .user-message__body,
.night .promo-block__title_total,
.night .beta-anounce__text,
.night .defination-list__label,
.night .defination-list__value,
.night .search-field__select,
.night .search-field__input[type="text"],
.night .search-form__field,
.night .post-info__title:not(:hover),
.night .dropdown__user-stats,
.night .dropdown-container_white .user-info__special,
.night .n-dropdown-menu__item-link,
.night body,
.night .default-block__polling-title,
.night .poll-result__data-label,
.night code,
.night .user-info__fullname,
.night .user-info__specialization,
.night .page-header__info-title,
.night .page-header__info-desc,
.night .post__title-text,
.night .post__title_link:not(:visited),
.night .checkbox__label,
.night .radio__label,
.night .tm-editor__textarea,
.night .footer-block__title,
.night #TMpanel .container .bmenu > a.current,
.night .post__text-html,
.night .comment__message,
.night .comment-form__preview,
.night .post-share__title,
.night .post-donate__title,
.night .news-block__title,
.night .news-topic__title:not(:visited),
.night .partner-info__title,
.night .partner-info__description {
color: #9e9e9e;
}
/* non important text */
.night .icon-svg_bookmark,
.night .icon-svg_views-count,
.night .icon-svg_post-comments,
.night .icon-svg_edit,
.night .icon-svg_recommend,
.night .icon-svg_report,
.night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus),
.night .icon_comment-edit,
.night .icon_comment-anchor,
.night .icon_comment-bookmark,
.night .icon_comment-branch,
.night .icon_comment-arrow-up,
.night .icon_comment-arrow-down,
.night .layout__elevator {
color: #515151;
}
.night .voting-wjt__button:not(.voting-wjt__button_plus):not(.voting-wjt__button_minus):hover,
.night .icon_comment-anchor:hover,
.night .icon_comment-bookmark:hover,
.night .icon_comment-branch:hover,
.night .icon_comment-arrow-up:hover,
.night .icon_comment-arrow-down:hover {
color: #548eaa;
}
.night .n-dropdown-menu__item-link:hover {
color: white;
}
/* top lvl bg */
.night .h-popover,
.night .profile-section__user-hub:not(.profile-section__user-hub_cross),
.night a.sort-panel__item-toggler.active,
.night .checkbox__label::before,
.night .radio__label::before,
.night .content-list__item_conversation:hover,
.night .search-field__select,
.night .search-field__input[type="text"],
.night .search-form__field,
.night .dropdown-container,
.night .n-dropdown-menu,
.night .post__translatation,
.night code,
.night .megapost-teasers,
.night .tm-editor_comments,
.night .promo-block__header,
.night .post__text-html blockquote,
.night .default-block,
.night .post-share,
.night .post-donate,
.night .company-info__author,
.night .layout__row_footer-links {
background: #22272B;
}
/* not important bg */
.night .profile-section__user-hub:not(.profile-section__user-hub_cross):hover,
.night .btn_blue.disabled,
.night .btn_blue[disabled],
.night .tracker_page table.tracker_folowers tr.new,
.night .dropdown__user-stats,
.night .comment__head_topic-author,
.night .promo-item:hover,
.night .layout__row_navbar,
.night .layout__row_footer,
.night #TMpanel,
.night .n-dropdown-menu__item-link_flow:hover,
.night #tracker-page .tracker-table__row.new {
background: #1f2327;
}
/* borders */
.night #tracker-page .tracker-table__header,
.night #tracker-page .tracker-table__cell,
.night .h-popover,
.night .h-popover__stats,
.night .default-block__footer,
.night .toggle-menu__item-link_bordered,
.night .default-block_promote,
.night .sort-panel,
.night .n-dropdown-menu_flows,
.night .for_users_only_msg,
.night #comments-list .js-form_placeholder,
.night .sidebar-block__suggest,
.night .content-list_preview-message,
.night .btn_outline_blue[disabled],
.night .user-message__body_html pre code,
.night .content-list_user-dialog,
.night .wysiwyg-toolbar,
.night .content-list__item_bordered,
.night .promo-block__total,
.night .search-field__select,
.night .search-field__input[type="text"],
.night .search-form__field,
.night .tracker_page table.tracker_folowers tr td,
.night .tracker_page table.tracker_folowers tr th,
.night .stacked-menu__item_devided,
.night .post__text-html table,
.night .post__text-html table td,
.night .post__text-html table th,
.night .n-dropdown-menu__item_border,
.night .dropdown-container,
.night .default-block_bordered,
.night .default_block_polling,
.night .column-wrapper_tabs .sidebar_right,
.night .post__type-label,
.night .promo-block__header,
.night .user-info__contacts,
.night .comment__message pre code,
.night .comment-form__preview pre code,
.night .sandbox-panel,
.night .comment__post-title,
.night .tm-editor__textarea,
.night .promo-block__footer,
.night .author-panel,
.night .promo-block,
.night .post__text-html pre code,
.night .footer-block__title,
.night #TMpanel,
.night .layout__row_navbar,
.night .page-header_bordered,
.night .post-stats,
.night .company-info__about,
.night .company-info_post-additional,
.night .company-info__contacts,
.night .post-share,
.night .post-donate,
.night .content-list__item_devided,
.night .comments_order,
.night .comments-section__head,
.night .content-list_nested-comments,
.night .default-block__header,
.night .column-wrapper_bordered,
.night .tabs-menu,
.night .toggle-menu,
.night .news-block__header,
.night .news-block__footer {
border-color: #393d41;
}
.night .rating-info__progress,
.night .poll-result__progress {
background-color: #515151;
}
.night .poll-result__progress_winner {
background-color: #5e8eac;
}
.night .layout__elevator:hover {
background-color: #22272B;
}
.night .comment__head_topic-author {
background: #003030;
}
.night .comment__head_my-comment {
background: #003000;
}
.night .comment__head_new-comment {
background: black
}
.night .user-info__nickname_comment,
.night .icon-svg_logo-habrahabr {
color: inherit;
}
.night [disabled] {
opacity: 0.5
}
.night .content-list_comments .comment__folding-dotholder::before,
.night .comment.is_selected::after {
filter: invert(0.9);
}
/* img filter */
.night .comment__message img,
.night .comment-form__preview img,
.night .default-block__content #facebook_like_box,
.night .default-block__content #vk_groups,
.night .post img,
.night .page-header__banner img,
.night .company_top_banner img,
.night img .teaser__image,
.night .teaser__image-pic,
.night .article__body img {
filter: brightness(0.5);
transition: filter .6s ease-out;
}
.night .comment__message img:hover,
.night .comment-form__preview img:hover,
.night .default-block__content #facebook_like_box:hover,
.night .default-block__content #vk_groups:hover,
.night img[alt="en"],
.night img[alt="habr"],
.night img:hover,
.night a.post-author__link img,
.night img.user-info__image-pic,
.night .teaser__image-pic:hover,
.night .teaser__image:hover {
filter: none;
}
/* Atelier Cave Dark */
.night .hljs-comment,
.night .hljs-quote {
color:#7e7887 !important
}
.night .hljs-variable,
.night .hljs-template-variable,
.night .hljs-attribute,
.night .hljs-regexp,
.night .hljs-link,
.night .hljs-tag,
.night .hljs-name,
.night .hljs-selector-id,
.night .hljs-selector-class {
color:#be4678 !important
}
.night .hljs-number,
.night .hljs-meta,
.night .hljs-built_in,
.night .hljs-builtin-name,
.night .hljs-literal,
.night .hljs-type,
.night .hljs-params {
color:#aa573c !important
}
.night .hljs-string,
.night .hljs-symbol,
.night .hljs-bullet {
color:#2a9292 !important
}
.night .hljs-title,
.night .hljs-section {
color:#576ddb !important
}
.night .hljs-keyword,
.night .hljs-selector-tag {
color:#955ae7 !important
}
.night .hljs-deletion,
.night .hljs-addition {
color:#19171c !important;
display:inline-block !important;
width:100% !important
}
.night .hljs-deletion {
background-color:#be4678 !important
}
.night .hljs-addition {
background-color:#2a9292 !important
}
.night .hljs {
display:block !important;
overflow-x:auto !important;
background:#19171c !important;
color:#8b8792 !important;
/*padding:0.5em !important*/
}
.night .hljs-emphasis {
font-style:italic !important
}
.night .hljs-strong {
font-weight:bold !important
}
`;
}
if (FLAGS.USERSTYLE_CONFIG_INTERFACE) {
userStyle += `
.config_button {
box-sizing: border-box;
position: fixed;
width: ${BUTTON_SIZE}px;
height: ${BUTTON_SIZE2}px;
right: ${BUTTON_SIZE}px;
bottom: ${FLAGS.NIGHT_MODE ? BUTTON_SIZE4 : BUTTON_SIZE}px;
z-index: 10000;
background: -webkit-linear-gradient(top, #aaa 50%, transparent 50%);
background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
background: -moz-linear-gradient(top, #aaa 50%, transparent 50%);
background-size: 10px 10px;
transition: background 0.1s ease-out;
}
.config_button:hover {
background: -webkit-linear-gradient(top, #333 50%, transparent 50%);
background: -moz-linear-gradient(top, #333 50%, transparent 50%);
background: -moz-linear-gradient(top, #333 50%, transparent 50%);
background-size: 10px 10px;
}
.night .config_button {
background: -webkit-linear-gradient(top, #515151 50%, transparent 50%);
background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
background: -moz-linear-gradient(top, #515151 50%, transparent 50%);
background-size: 10px 10px;
}
.night .config_button:hover {
background: -webkit-linear-gradient(top, #9e9e9e 50%, transparent 50%);
background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
background: -moz-linear-gradient(top, #9e9e9e 50%, transparent 50%);
background-size: 10px 10px;
}
.config_frame {
box-sizing: border-box;
position: fixed;
right: 80px;
bottom: 32px;
z-index: 10000;
border: 1px solid #aaa;
padding: 8px;
background: #f7f7f7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow-y: auto;
max-height: calc(100vh - 64px);
min-width: 390px;
}
.config_frame label:hover {
cursor: pointer;
background: rgba(128, 128, 128, 0.3);
}
.config_frame input {
cursor: pointer;
position: absolute;
opacity: 0;
}
.config_frame input + span:before {
content: '';
display: inline-block;
width: 0.5em;
height: 0.5em;
margin: 0 0.4em 0.1em 0.3em;
outline: 1px solid currentcolor;
outline-offset: 1px;
}
.config_frame input:checked + span:before {
background: currentcolor;
}
.night .config_frame {
background: #22272B;
border-color: #393d41;
}
`;
}
userStyleEl.innerHTML = userStyle;
const navigatorEdge = /Edge/.test(navigator.userAgent);
function readyHead(fn) {
if (document.body) { // если есть body, значит head готов
fn();
} else if (document.documentElement && !navigatorEdge) {
const observer = new MutationObserver(() => {
if (document.body) {
observer.disconnect();
fn();
}
});
observer.observe(document.documentElement, { childList: true });
} else {
// рекурсивное ожидание появления DOM
setTimeout(() => readyHead(fn), 16);
}
}
readyHead(() => {
if (document.getElementById('habrafixmarker')) return;
if (FLAGS.USERSTYLE) document.head.appendChild(userStyleEl);
if (FLAGS.NIGHT_MODE && userConfig.getItem('night_mode')) {
document.documentElement.classList.add('night');
}
});
function ready(fn) {
const { readyState } = document;
if (readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
fn();
});
} else {
fn();
}
}
ready(() => {
if (document.getElementById('habrafixmarker')) return;
if (FLAGS.COMMENTS_MD) {
const mdSelectorEl = document.getElementById('comment_markdown');
if (mdSelectorEl) {
if (userConfig.getItem('comment_markdown')) mdSelectorEl.checked = true;
mdSelectorEl.addEventListener('input', () => {
userConfig.setItem('comment_markdown', mdSelectorEl.checked);
});
}
}
if (FLAGS.HTSO_BTN) {
const commentForm = document.getElementById('comment-form');
if (commentForm) {
const toolbar = commentForm.querySelector('.tm-editor__toolbar');
if (toolbar) {
const item = document.createElement('li');
item.classList.add('wysiwyg-toolbar__item');
item.innerHTML = `
<button type="button" class="btn btn_wysiwyg" tabindex="0" title="Загрузка картинок"
onclick="window.open('//hsto.org', '_blank').focus();">
<svg class="icon-svg icon-svg_spoiler_wysiwyg" aria-hidden="true" aria-labelledby="title"
version="1.1" role="img" width="24" viewBox="0 0 100 82.9">
<path
d="M77.9,82.9H5.6c-3.4,0-5.6-2.4-5.6-5.2V21.9c0-3.5,2.1-6.1,
5.6-6.1H50v11.1H11v45h61V54.8l12,0v22.9 C84,80.5,81.2,82.9,77.9,82.9L77.9,82.9z">
</path>
<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>
<path
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,
5.8C33.8,41.9,31.2,44.4,28,44.4 L28,44.4z">
</path>
<polygon points="84,21.9 84,44 72,44 72,21.9 56.1,21.9 78.1,0 100,21.9 "></polygon>
</svg>
</button>
`;
toolbar.appendChild(item);
}
}
}
if (FLAGS.SUBS_BTN) {
const userBtn = document.querySelector('.tabs-menu__item_link');
const isUserPage = /^\/(ru|en)\/users\/[^/]+\//.test(window.location.pathname);
if (userBtn && isUserPage) {
const bar = userBtn.parentElement;
const tab = document.createElement('a');
const isSubs = /subscription\/$/.test(window.location.pathname);
tab.classList.add('tabs-menu__item', 'tabs-menu__item_link');
tab.href = `${userBtn.href}subscription/`;
tab.innerHTML = `<h3 class="tabs-menu__item-text ${isSubs ? 'tabs-menu__item-text_active' : ''}">Он читает</h3>`;
bar.appendChild(tab);
const tab2 = document.createElement('a');
const isFols = /followers\/$/.test(window.location.pathname);
tab2.classList.add('tabs-menu__item', 'tabs-menu__item_link');
tab2.href = `${userBtn.href}subscription/followers/`;
tab2.innerHTML = `<h3 class="tabs-menu__item-text ${isFols ? 'tabs-menu__item-text_active' : ''}">Его читают</h3>`;
bar.appendChild(tab2);
}
}
// надо ли ещё
Array.from(document.querySelectorAll('iframe[src^="https://codepen.io/"]'))
.map(el => el.setAttribute('scrolling', 'no'));
// остановка гифок по клику и воспроизведение при повторном клике
function toggleGIF(el) {
// если атрибут со старым линком пуст или отсутствует
if (!el.dataset.oldSrc) {
// заменим ссылку на data-url-svg с треугольником в круге
const w = Math.max(el.clientWidth || 256, 16);
const h = Math.max(el.clientHeight || 128, 16);
const cx = w / 2;
const cy = h / 2;
const r = Math.min(w, h) / 4;
const ax = (r * 61) / 128;
const by = (r * 56) / 128;
const bx = (r * 35) / 128;
const svg = `data:image/svg+xml;utf8,
<svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
<circle cx='${cx}' cy='${cy}' r='${r}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
<polygon points='${cx + ax} ${cy} ${cx - bx} ${cy - by} ${cx - bx} ${cy + by}' fill='${FLAGS.GIF_STOP_COLOR_BG}' />
</svg>
`;
el.dataset.oldSrc = el.getAttribute('src'); // eslint-disable-line no-param-reassign
el.setAttribute('src', svg);
} else if (FLAGS.GIF_STOP_OVERTYPE) {
// иначе поставим svg с троеточием
const w = el.clientWidth;
const h = el.clientHeight;
const cx = w / 2;
const cy = h / 2;
const r = Math.min(w, h) / 4;
const r2 = r / 4;
const svg = `data:image/svg+xml;utf8,
<svg width='${w}' height='${h}' baseProfile='full' xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' width='${w}' height='${h}' fill='${FLAGS.GIF_STOP_COLOR_BG}'/>
<circle cx='${cx - r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
<circle cx='${cx}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
<circle cx='${cx + r}' cy='${cy}' r='${r2}' fill='${FLAGS.GIF_STOP_COLOR_FG}'/>
</svg>
`;
el.setAttribute('src', svg);
// когда отрендерится троеточие, можно менять на исходную гифку
setTimeout(() => {
if (el.dataset.oldSrc) {
el.setAttribute('src', el.dataset.oldSrc);
el.dataset.oldSrc = ''; // eslint-disable-line no-param-reassign
}
}, 100);
} else {
const img = document.createElement('img');
img.setAttribute('src', el.dataset.oldSrc);
if (el.hasAttribute('align')) {
img.setAttribute('align', el.getAttribute('align'));
}
el.parentNode.insertBefore(img, el);
img.onclick = () => toggleGIF(img); // eslint-disable-line no-param-reassign
el.parentNode.removeChild(el);
}
}
if (FLAGS.GIF_STOP) {
Array.from(document.querySelectorAll('.post__text img[src$=".gif"], .comment__message img[src$=".gif"]'))
.filter((el) => {
const excludes = [
'https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif',
'https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif',
'https://habrastorage.org/getpro/habr/post_images/d4b/289/ef0/d4b289ef0a00e969108c25d0c3d75f58.gif',
];
return !excludes.includes(el.getAttribute('src'));
})
.forEach((el) => {
if (FLAGS.GIF_STOP_ONLOAD) toggleGIF(el);
el.classList.add('habrafix_gif-stop');
el.onclick = () => toggleGIF(el); // eslint-disable-line no-param-reassign
});
}
// счетчики кармы
if (FLAGS.KARMA_DETAILS) {
Array.from(document.querySelectorAll('.user-info__stats-item.stacked-counter')).forEach((itemCounter) => {
itemCounter.style.marginRight = '16px'; // eslint-disable-line no-param-reassign
});
Array.from(document.querySelectorAll('.page-header__stats_karma')).forEach((karmaEl) => {
karmaEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
karmaEl.style.minWidth = `${KARMA_WIDTH}px`; // eslint-disable-line no-param-reassign
});
Array.from(document.querySelectorAll(`
.stacked-counter[href="https://habr.com/ru/info/help/karma/"],
.stacked-counter[href="https://habr.com/en/info/help/karma/"]
`)).forEach((counterEl) => {
let total = parseInt(counterEl.title, 10);
const scoreEl = counterEl.querySelector('.stacked-counter__value');
if (!scoreEl || !total) return;
counterEl.style.width = 'auto'; // eslint-disable-line no-param-reassign
counterEl.style.minWidth = `${KARMA_WIDTH}px`; // eslint-disable-line no-param-reassign
const score = parseFloat(scoreEl.innerHTML.replace('–', '-').replace(',', '.'), 10);
if (score > total) total = score;
const likes = (total + score) / 2;
const percent = Math.round((100 * likes) / total);
const details = ` = ${total} × (${percent} − ${100 - percent})%`;
const detailsEl = document.createElement('span');
detailsEl.innerHTML = details;
detailsEl.style.color = '#545454';
detailsEl.style.fontFamily = '"-apple-system",BlinkMacSystemFont,Arial,sans-serif';
detailsEl.style.fontSize = '13px';
detailsEl.style.fontWeight = 'normal';
detailsEl.style.verticalAlign = 'middle';
scoreEl.appendChild(detailsEl);
counterEl.title += `, ${(likes).toFixed(2)} плюсов и ${(total - likes).toFixed(2)} минусов`; // eslint-disable-line no-param-reassign
});
}
// счетчики рейтинга с подробностями
const scoresMap = new Map();
class Score {
constructor(el) {
this.el = el;
this.parentEl = el.parentNode;
const data = this.constructor.parse(el);
this.rating = data.rating;
this.total = data.total;
this.likes = data.likes;
this.dislikes = data.dislikes;
this.isDetailed = false;
this.observer = new MutationObserver(() => this.update());
}
setDetails(isDetailed) {
if (this.isDetailed === isDetailed) return;
this.isDetailed = isDetailed;
this.update();
}
update() {
const newChild = this.parentEl.querySelector('.voting-wjt__counter, .post-stats__result-counter');
if (!newChild) return;
this.el = newChild;
const data = this.constructor.parse(this.el);
this.rating = data.rating;
this.total = data.total;
this.likes = data.likes;
this.dislikes = data.dislikes;
this.observer.disconnect();
if (this.isDetailed) {
this.details();
} else {
this.simply();
}
this.observer.observe(this.parentEl, { childList: true });
}
static parse(el) {
let [, likes, dislikes] = el
.attributes.title.textContent
.match(/[0-9]+/g).map(Number);
let total = likes + dislikes;
let [, sign, rating] = el.innerHTML.match(/([–]?)(\d+)/); // eslint-disable-line prefer-const
rating = Number(rating);
if (sign) rating = -rating;
// не знаю что там происходит при голосовании, так что на всякий случай
const diff = rating - (likes - dislikes);
if (diff < 0) {
total += Math.abs(diff);
dislikes += Math.abs(diff);
} else if (diff > 0) {
total += diff;
likes += diff;
}
return {
rating,
total,
likes,
dislikes,
};
}
simply() {
let innerHTML = '';
if (this.rating > 0) {
innerHTML = `+${this.rating}`;
} else if (this.rating < 0) {
innerHTML = `–${Math.abs(this.rating)}`;
} else {
innerHTML = '0';
}
this.el.innerHTML = innerHTML;
}
details() {
let innerHTML = '';
if (this.rating > 0) {
innerHTML = `+${this.rating}`;
} else if (this.rating < 0) {
innerHTML = `–${Math.abs(this.rating)}`;
} else {
innerHTML = '0';
}
if (this.total !== 0) {
let details = '';
if (FLAGS.RATING_DETAILS_PN) {
const percent = Math.round((100 * this.likes) / this.total);
details = ` = ${this.total} × (${percent} − ${100 - percent})%`;
} else {
details = ` = ${this.likes} − ${this.dislikes}`;
}
innerHTML += ` <span style='color: #545454; font-weight: normal'>${details}</span>`;
}
this.el.innerHTML = innerHTML;
}
}
// парсим их
Array.from(document.querySelectorAll('.voting-wjt__counter, .post-stats__result-counter')).forEach((el) => {
scoresMap.set(el, new Score(el));
});
// добавляем подробностей
if (FLAGS.RATING_DETAILS) {
if (FLAGS.RATING_DETAILS_ONCLICK) {
const isDetailed = userConfig.getItem('scores_details');
if (isDetailed) scoresMap.forEach(score => score.setDetails(isDetailed));
scoresMap.forEach((score) => {
score.el.onclick = () => { // eslint-disable-line no-param-reassign
const nowDetailed = userConfig.shiftItem('scores_details');
scoresMap.forEach(s => s.setDetails(nowDetailed));
};
});
} else {
scoresMap.forEach(score => score.setDetails(true));
}
}
// метки времени и работа с ними
const pageLoadTime = new Date();
const monthNames = [
'января', 'февраля', 'марта',
'апреля', 'мая', 'июня',
'июля', 'августа', 'сентября',
'октября', 'ноября', 'декабря',
];
const monthNamesEng = [
'January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December',
];
class HabraTime {
constructor(el, parent) {
this.el = el;
this.parent = parent;
this.attrDatetime = this.constructor.getAttributeDatetime(el);
this.date = new Date(this.attrDatetime);
}
// вот было бы хорошо, если б на хабре были datetime атрибуты
static getAttributeDatetime(el) {
const imagination = el.getAttribute('datetime') || el.getAttribute('data-time_published');
if (imagination) return imagination;
let recently;
let day;
let month;
let year;
let time;
let isEng = false;
let meridiem;
if (/^\d\d:\d\d$/.test(el.innerHTML)) {
[, time] = el.innerHTML.match(/(\d\d:\d\d)/);
recently = 'сегодня';
} else if (/^\d\d:\d\d (AM|PM)$/.test(el.innerHTML)) {
[, time, meridiem] = el.innerHTML.match(/(\d\d:\d\d) (AM|PM)/);
recently = 'сегодня';
} else if (/at/.test(el.innerHTML)) {
isEng = true;
const re = /((today|yesterday)|([A-z]+) (\d+), (\d+)) at (\d\d:\d\d) (AM|PM)/;
[,,
recently,
month, day, year,
time,
meridiem,
] = el.innerHTML.match(re);
if (recently === 'today') {
recently = 'сегодня';
} else if (recently === 'yesterday') {
recently = 'вчера';
}
} else {
const re = /((сегодня|вчера)|(\d+)[ .]([а-я]+|\d+)[ .]?(\d+)?) в (\d\d:\d\d)/;
[,,
recently,
day, month, year,
time,
] = el.innerHTML.match(re);
}
const [, h, m] = time.match(/(\d\d):(\d\d)/);
if (meridiem === 'PM') {
time = `${Number(h === '12' ? 0 : h) + 12}:${m}`;
} else if (meridiem === 'AM') {
time = `${h === '12' ? '00' : h}:${m}`;
}
// и местное время
let moscow;
if (recently || year === undefined) {
const offsetMoscow = 3 * 60 * 60 * 1000;
const yesterdayShift = (recently === 'вчера') ? 24 * 60 * 60 * 1000 : 0;
const offset = pageLoadTime.getTimezoneOffset() * 60 * 1000;
const value = (pageLoadTime - yesterdayShift) + offsetMoscow + offset;
moscow = new Date(value);
}
if (recently) {
day = moscow.getDate();
month = moscow.getMonth() + 1;
} else if (month.length !== 2) {
month = (isEng ? monthNamesEng : monthNames).indexOf(month) + 1;
} else {
month = +month;
}
if (day < 10) day = `0${+day}`;
if (month < 10) month = `0${month}`;
if (year < 100) year = `20${year}`;
if (year === undefined) year = moscow.getFullYear();
return `${year}-${month}-${day}T${time}+03:00`;
}
absolute() {
let result = '';
const time = this.date;
const day = time.getDate();
const month = time.getMonth();
const monthName = monthNames[month];
const year = time.getFullYear();
const hours = time.getHours();
const minutes = time.getMinutes();
const now = new Date();
const nowDay = now.getDate();
const nowMonth = now.getMonth();
const nowYear = now.getFullYear();
const yesterday = new Date(now - (24 * 60 * 60 * 1000));
const yesterdayDay = yesterday.getDate();
const yesterdayMonth = yesterday.getMonth();
const yesterdayYear = yesterday.getFullYear();
const hhmm = `${hours}:${minutes >= 10 ? minutes : `0${minutes}`}`;
const isToday =
day === nowDay &&
month === nowMonth &&
year === nowYear;
const isYesterday =
day === yesterdayDay &&
month === yesterdayMonth &&
year === yesterdayYear;
if (isToday) {
result = `сегодня в ${hhmm}`;
} else if (isYesterday) {
result = `вчера в ${hhmm}`;
} else if (nowYear === year) {
result = `${day} ${monthName} в ${hhmm}`;
} else {
result = `${day} ${monthName} ${year} в ${hhmm}`;
}
return result;
}
static relative(milliseconds) {
let result = '';
const pluralForm = (n, forms) => {
if (n % 10 === 1 && n % 100 !== 11) return forms[0];
if (n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) return forms[1];
return forms[2];
};
const formats = [
['год', 'года', 'лет'],
['месяц', 'месяца', 'месяцев'],
['день', 'дня', 'дней'],
['час', 'часа', 'часов'],
['минуту', 'минуты', 'минут'],
];
const minutes = milliseconds / 60000;
const hours = minutes / 60;
const days = hours / 24;
const months = days / 30;
const years = months / 12;
const idx = [years, months, days, hours, minutes].findIndex(x => x >= 1);
if (idx === -1) {
result = 'несколько секунд';
} else {
const value = Math.floor([years, months, days, hours, minutes][idx]);
const forms = formats[idx];
const form = pluralForm(value, forms);
result = `${value} ${form}`;
}
return result;
}
fromNow() {
const diff = Math.abs(Date.now() - this.date);
return `${this.constructor.relative(diff)} назад`;
}
fromParent() {
const diff = Math.abs(this.date - this.parent.date);
return `через ${this.constructor.relative(diff)}`;
}
static datetimeToMsk(datetime) {
const [, yyyy, mm, dd, h, m] = datetime
.match(/([0-9]+)-([0-9]+)-([0-9]+)T([0-9]+):([0-9]+)/);
return `${Number(dd)} ${monthNames[mm - 1]} ${yyyy} в ${h}:${m}`;
}
}
// собираем метки времени
const datesMap = new Map();
const megapostTimeEl = document.querySelector('.megapost-head__meta > .list_inline > .list__item');
(megapostTimeEl ? [megapostTimeEl] : [])
.concat(Array.from(document.querySelectorAll(`
.post__time,
.preview-data__time-published,
time.comment__date-time_published,
.tm-post__date,
.user-message__date-time,
.news-topic__attr_date-time
`))).forEach((el) => {
datesMap.set(el, new HabraTime(el));
});
function updateTime(el) {
datesMap.forEach((habraTime) => {
if (
!habraTime.el ||
!document.body.contains(habraTime.el) ||
(el && el !== habraTime.el)
) return;
let type;
let otherTypes;
if (habraTime.parent) {
type = userConfig.config.time_comments;
otherTypes = userConfig.model.time_comments
.filter(str => str !== type);
} else {
type = userConfig.config.time_publications;
otherTypes = userConfig.model.time_publications
.filter(str => str !== type);
}
const title = otherTypes.map(otherType => habraTime[otherType]()).join(', ');
habraTime.el.innerHTML = habraTime[type](); // eslint-disable-line no-param-reassign
habraTime.el.setAttribute('title', title);
});
}
if (FLAGS.TIME_DETAILS) {
datesMap.forEach((habraTime) => {
habraTime.el.setAttribute(
'style',
'cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;',
);
habraTime.el.onclick = () => { // eslint-disable-line no-param-reassign
if (habraTime.parent) {
userConfig.shiftItem('time_comments');
} else {
userConfig.shiftItem('time_publications');
}
updateTime();
};
});
// подождём, когда дерево комментариев будет построено
// у некоторых меток времени будут установлены родители
// тогда и обновим их тексты
setTimeout(updateTime, 100);
setInterval(updateTime, 30 * 1000);
}
// время публикации, понадобится для корня древа комментариев
let datePublication = datesMap.get(megapostTimeEl || document.querySelector('.post__time'));
// если нету публикации поищем самую раннюю метку времени
if (!datePublication) {
datePublication = { date: pageLoadTime };
datesMap.forEach((date) => {
if (date.date < datePublication.date) datePublication = date;
});
}
if (FLAGS.FIND_COMMENTS) {
const commentsList = document.querySelector('.user_comments');
const match = document.location.pathname.match(/users\/([^/]+)\/comments/i);
if (match && commentsList) {
const nickname = match[1];
const originalTitle = document.title;
const searchForm = document.createElement('div');
searchForm.classList.add('search-form', 'search-form_expanded');
searchForm.style.width = 'auto';
searchForm.innerHTML = `
<span class="search-field__icon icon-svg_search" style="left: 0;"><svg class="icon-svg" width="32" height="32"
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
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
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
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>
<span class="search-field__icon icon-svg_loading" style="left: 0;"><svg class="icon-svg" width="40" height="40"
viewBox="0 0 100 100" enable-background="new 0 0 0 0"><circle cx="50" cy="50" fill="none" stroke="#333333"
stroke-width="4" r="20" stroke-dasharray="94.24777960769379 33.41592653589793"
transform="rotate(88.5132 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear"
values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
</circle></svg></span>
<label
id="comments_search_label"
class="search-form__field-wrapper"
style="background: linear-gradient(to right, rgba(84, 142, 170, 0.2) 0%, transparent 0%)"
>
<input type="text" class="search-form__field" id="search-comments-field" placeholder="Поиск по тексту комментариев"
style="position: absolute;background-color: transparent;">
<button type="button" class="btn btn_search-close" id="search-comments-clear" title="Очистить">
<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">
<path d="M26.67 0L15.217 11.448 3.77 0 0 3.77l11.447 11.45L0 26.666l3.77
3.77L15.218 18.99l11.45 11.448 3.772-3.77-11.448-11.45L30.44 3.772z">
</path>
</svg>
</button>
</label>
`;
const notFoundLabel = document.createElement('p');
notFoundLabel.style.textAlign = 'center';
notFoundLabel.style.fontSize = '18px';
notFoundLabel.style.color = 'gray';
notFoundLabel.style.display = 'none';
notFoundLabel.textContent = 'Ничего не найдено';
const commentsSubList = document.createElement('ul');
commentsSubList.classList.add('content-list', 'content-list_comments');
commentsSubList.id = 'search-comments';
commentsSubList.style.display = 'none';
commentsList.insertBefore(commentsSubList, commentsList.firstChild);
commentsList.insertBefore(notFoundLabel, commentsList.firstChild);
commentsList.insertBefore(searchForm, commentsList.firstChild);
const Progress = {
set(value) {
if (value === 1) {
document.title = 'Поиск завершён';
this.setProgressBar(0);
} else {
const percent = Math.round(value * 100);
document.title = `${percent}%, идёт поиск`;
this.setProgressBar(value);
}
},
setProgressBar(value) {
const percent = value * 100;
document.getElementById('comments_search_label').style.background = `
linear-gradient(to right, rgba(84, 142, 170, 0.2) ${percent}%, transparent ${percent}%)
`;
},
reset() {
this.setProgressBar(0);
document.title = originalTitle;
},
};
const makeComment = (comment) => {
const commentEl = document.createElement('li');
commentEl.classList.add('content-list__item', 'content-list__item_comment', 'content-list__item_comment-plain');
let ratingClass = '';
let rating = '0';
if (comment.score > 0) {
rating = `+${comment.score}`;
ratingClass = 'voting-wjt__counter_positive';
} else if (comment.score < 0) {
rating = `–${Math.abs(comment.score)}`;
ratingClass = 'voting-wjt__counter_negative';
}
let avatar;
if (comment.avatar === 'https://habr.com/images/avatars/stub-user-middle.gif') {
avatar = `<svg class="default-image default-image_mini default-image_green" width="24"
height="24"><use xlink:href="https://habr.com/images/1558430991/common-svg-sprite.svg#slug"></use></svg>`;
} else {
avatar = `<img src="${comment.avatar}" class="user-info__image-pic user-info__image-pic_small" width="24" height="24">`;
}
commentEl.innerHTML = `
<div class="comment__post-title">
<a href="${comment.post.url}" class="comment__post-link">${comment.post.title}</a>
<div class="comment__post-footer">
<a href="${comment.post.url}#comments">
<svg class="icon-svg_comments icon-svg_comments-plain" width="14" height="13">
<use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#comment"></use>
</svg>
<span class="comment__post-comments-counter">${comment.post.comments_count}</span>
</a>
</div>
</div>
<div class="comment comment_plain" rel="${comment.id}" id="habrafix_comment_${comment.id}">
<div class="comment__head">
<a href="https://habr.com/ru/users/${comment.author.login}/"
class="user-info user-info_inline" rel="user-popover" data-user-login="${comment.author.login}">
${avatar}
<span class="user-info__nickname user-info__nickname_small user-info__nickname_comment">${comment.author.login}</span>
</a>
<svg class="icon_comment-edit" title="Комментарий был изменен"
style="display: ${comment.time_changed !== '0' ? 'block' : 'none'}" width="12"
height="12"><use xlink:href="https://habr.com/images/1558430991/common-svg-sprite.svg#pencil"></use></svg>
<time class="comment__date-time comment__date-time_published"
datetime="${comment.time_published}">${comment.time_published}</time>
<ul class="inline-list inline-list_comment-nav">
<li class="inline-list__item inline-list__item_comment-nav">
<a href="${comment.post.url}#comment_${comment.id}" class="icon_comment-anchor"
title="Ссылка на комментарий"><svg width="12" height="12">
<use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#anchor"></use></svg></a>
</li>
<li class="inline-list__item inline-list__item_comment-nav">
<a href="#" class="icon_comment-bookmark " onclick="comments_add_to_favorite(this)" data-type="3"
data-id="${comment.id}" data-action="add" title="Добавить в закладки">
<svg width="12" height="12"><use xlink:href="https://habr.com/images/1556525186/common-svg-sprite.svg#book"></use></svg>
</a>
</li>
</ul>
<div class="voting-wjt voting-wjt_comments js-comment-vote">
<span class="voting-wjt__counter ${ratingClass}
js-score" title="Общий рейтинг ${rating}">${rating}</span>
</div>
</div>
<div class="comment__message">${comment.message}</div>
</div>`;
return commentEl;
};
const addComment = (comment) => {
document.getElementById('search-comments').appendChild(makeComment(comment));
const timeEl = document.querySelector(`#habrafix_comment_${comment.id} time`);
if (FLAGS.TIME_DETAILS) {
timeEl.setAttribute(
'style',
'cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;',
);
timeEl.onclick = () => { // eslint-disable-line no-param-reassign
userConfig.shiftItem('time_publications');
updateTime();
};
datesMap.set(timeEl, new HabraTime(timeEl));
updateTime(timeEl);
} else {
timeEl.textContent = HabraTime.datetimeToMsk(comment.time_published);
}
};
// let fetchCors = url => fetch(`https://cors.io/?${url}`);
let fetchCors = url => fetch(url);
if (typeof GM !== 'undefined' && GM.xmlHttpRequest) {
fetchCors = url => new Promise((resolve, reject) => GM.xmlHttpRequest({
method: 'GET',
url,
onload(response) {
resolve({
json: () => Promise.resolve(JSON.parse(response.responseText)),
});
},
onerror() { reject(); },
ontimeout() { reject(); },
}));
}
const loadComments = async (page) => {
const url = `https://m.habr.com/kek/v1/users/${nickname}/comments?comments=true&user=${nickname}&page=${page}`;
const res = await fetchCors(url);
const json = await res.json();
return json.data;
};
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const pageCache = {};
const memoizedLoadComments = async (page) => {
if (pageCache[page]) {
await sleep(0);
return pageCache[page];
}
const result = await loadComments(page);
pageCache[page] = result;
return result;
};
let latestSearchId = 0;
const removeResultsList = () => {
document.getElementById('search-comments-field').value = '';
latestSearchId += 1;
document.getElementById('search-comments').innerHTML = '';
document.getElementById('search-comments').style.display = 'none';
document.getElementById('comments').style.display = '';
const footer = document.querySelector('.page__footer');
if (footer) footer.style.display = '';
Progress.reset();
notFoundLabel.style.display = 'none';
searchForm.classList.remove('loading');
};
const addResultsList = () => {
document.getElementById('search-comments').innerHTML = '';
document.getElementById('search-comments').style.display = '';
document.getElementById('comments').style.display = 'none';
const footer = document.querySelector('.page__footer');
if (footer) footer.style.display = 'none';
Progress.set(0);
notFoundLabel.style.display = 'none';
searchForm.classList.add('loading');
};
document.getElementById('search-comments-clear').onclick = removeResultsList;
// eslint-disable-next-line consistent-return
const search = async () => {
latestSearchId += 1;
const currentSearchId = latestSearchId;
const text = document.getElementById('search-comments-field').value;
if (!text) return removeResultsList();
addResultsList();
const filter = (comment) => {
const t = text.toLowerCase();
const message = comment.message.toLowerCase();
const title = comment.post.title.toLowerCase();
return message.includes(t) || title.includes(t);
};
let pages = 1;
for (let curPage = 1; curPage <= pages; curPage += 1) {
let data;
while (!data) {
try {
// eslint-disable-next-line no-await-in-loop
data = await memoizedLoadComments(curPage);
} catch (e) {
document.title = 'Ошибка сети, повтор...';
// eslint-disable-next-line no-await-in-loop
await sleep(5000);
}
}
// eslint-disable-next-line consistent-return
if (currentSearchId !== latestSearchId) return; // пользователь изменил текст
pages = pages === 1 ? data.pages : pages;
Progress.set(curPage / pages);
data.comments
.filter(filter)
.forEach(addComment);
}
if (commentsSubList.childNodes.length === 0) notFoundLabel.style.display = '';
searchForm.classList.remove('loading');
};
const awaitEndOfInput = (func, ms) => {
let timerId;
return () => {
clearTimeout(timerId);
timerId = setTimeout(func, ms);
};
};
document.getElementById('search-comments-field').oninput = awaitEndOfInput(search, 1000);
}
}
// создаем дерево комментариев
class ItemComment {
constructor(el, parent) {
this.parent = parent;
this.el = el;
this.lvl = parent.lvl + 1;
this.id = Number(el.getAttribute('rel'));
this.commentEl = el.querySelector('.comment');
if (this.commentEl) {
this.timeEl = this.commentEl.querySelector('time');
this.ratingEl = this.commentEl.querySelector('.js-score');
}
this.date = datesMap.get(this.timeEl);
if (this.date) {
this.date.parent = parent.date;
} else {
this.date = parent.date;
}
this.votes = scoresMap.get(this.ratingEl) || {
total: 0, likes: 0, dislikes: 0, rating: 0,
};
this.elList = el.querySelector('.content-list_nested-comments');
}
existId(id) {
return !!this.elList.querySelector(id);
}
existNew() {
return !!this.elList.querySelector('.js-comment_new');
}
getLength() {
let { length } = this.list;
this.list.forEach((node) => {
length += node.getLength();
});
return length;
}
}
class CommentsTree {
constructor() {
this.root = {
isRoot: true,
date: datePublication,
lvl: 0,
elList: document.getElementById('comments-list'),
list: [],
};
}
static exist() {
return !!document.getElementById('comments-list');
}
update() {
if (!this.root.elList) return;
const recAdd = (node) => {
node.list = Array.from(node.elList.children) // eslint-disable-line no-param-reassign
.map(el => new ItemComment(el, node));
node.list.forEach(recAdd);
};
recAdd(this.root);
}
walkTree(fn) {
const walk = (tree) => {
fn(tree);
tree.list.forEach(walk);
};
walk(this.root);
}
sort(fn) {
if (!this.root.elList) return;
this.walkTree((tree) => {
tree.list.sort(fn).forEach(subtree => tree.elList.appendChild(subtree.el));
});
}
shuffle() {
if (!this.root.elList) return;
const randInt = maximum => Math.floor(Math.random() * (maximum + 1));
this.walkTree((tree) => {
const { list } = tree;
for (let i = 0; i < list.length; i += 1) {
const j = randInt(i);
[list[i], list[j]] = [list[j], list[i]];
}
list.forEach(subtree => tree.elList.appendChild(subtree.el));
});
}
}
const commentsTree = new CommentsTree();
commentsTree.update();
FLAGS.sortVariants = [
['time', 'старые'],
];
if (FLAGS.COMMENTS_SORT_BY_FRESHNESS) FLAGS.sortVariants.push(['freshness', 'новые']);
if (FLAGS.COMMENTS_SORT_BY_TREND) FLAGS.sortVariants.push(['trend', 'горячие']);
if (FLAGS.COMMENTS_SORT_BY_QUALITY) FLAGS.sortVariants.push(['quality', 'хорошие']);
if (FLAGS.COMMENTS_SORT_BY_REDDIT) FLAGS.sortVariants.push(['reddit', 'проверенные']);
if (FLAGS.COMMENTS_SORT_BY_RATING) FLAGS.sortVariants.push(['rating', 'рейтинговые']);
if (FLAGS.COMMENTS_SORT_BY_POPULARITY) FLAGS.sortVariants.push(['popularity', 'популярные']);
if (FLAGS.COMMENTS_SORT_BY_RANDOM) FLAGS.sortVariants.push(['shuffle', 'случайные']);
// здесь начинается сортировка комментариев
const commentsOrderEl = document.createElement('div');
commentsOrderEl.classList.add('comments_order');
commentsOrderEl.innerHTML = FLAGS.sortVariants.map(([type, text]) => {
const underline = (type === 'time') ? '; text-decoration: underline' : '';
return `<a data-order="${type}" style="cursor: pointer${underline}">${text}</a>`;
}).join(', ');
if (FLAGS.COMMENTS_SORT && document.getElementById('comments-list')) {
const commentsList = document.getElementById('comments-list');
commentsList.parentElement.insertBefore(commentsOrderEl, commentsList);
}
const commentsComparators = {
time(a, b) {
return a.id - b.id;
},
freshness(a, b) {
return b.id - a.id;
},
rating(a, b) {
const ascore = a.votes.rating;
const bscore = b.votes.rating;
if (bscore !== ascore) return bscore - ascore;
return b.id - a.id;
},
popularity(a, b) {
const aVotes = a.votes.total;
const bVotes = b.votes.total;
if (aVotes !== bVotes) return bVotes - aVotes;
const aLength = a.getLength();
const bLength = b.getLength();
if (aLength !== bLength) return bLength - aLength;
return b.id - a.id;
},
quality(a, b) {
const aQuality = a.votes.rating / a.votes.total || 0;
const bQuality = b.votes.rating / b.votes.total || 0;
if (aQuality !== bQuality) return bQuality - aQuality;
if (a.votes.rating !== b.votes.rating) return b.votes.rating - a.votes.rating;
return b.id - a.id;
},
trend(a, b) {
// в первые сутки после публикации статьи число посещений больше чем в остальное время
const oneDay = 24 * 60 * 60 * 1000;
const firstDayEnd = +datePublication.date + oneDay;
// у комментария есть только три дня на голосование с момента его создания
const threeDays = 3 * oneDay;
const now = Date.now();
// прикинем число голосов в первый день
const aDate = +a.date.date;
let aViews = 0;
// в первый день
if (aDate <= firstDayEnd) {
aViews += Math.min(firstDayEnd, now) - aDate;
}
// и в остальное время
if (now >= firstDayEnd) {
const threeDaysEnd = aDate + threeDays;
// для этого соотношения я собрал статистику
aViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, aDate)) / 16;
}
const aScore = a.votes.rating / aViews;
// аналогично
const bDate = +b.date.date;
let bViews = 0;
if (bDate <= firstDayEnd) {
bViews += Math.min(firstDayEnd, now) - bDate;
}
if (now >= firstDayEnd) {
const threeDaysEnd = bDate + threeDays;
// найти зависимость активности голосования от времени суток не удалось
bViews += (Math.min(threeDaysEnd, now) - Math.max(firstDayEnd, bDate)) / 16;
}
const bScore = b.votes.rating / bViews;
if (bScore === aScore) return b.id - a.id;
return bScore - aScore;
},
reddit(a, b) {
const wilsonScore = (ups, downs) => {
const n = ups + downs;
if (n === 0) return 0;
const z = 1.281551565545;
const p = ups / n;
const left = p + ((1 / (2 * n)) * z * z);
const right = z * Math.sqrt(((p * (1 - p)) / n) + ((z * z) / (4 * n * n)));
const under = 1 + ((1 / n) * (z * z));
return (left - right) / under;
};
const aScore = wilsonScore(a.votes.likes, a.votes.dislikes);
const bScore = wilsonScore(b.votes.likes, b.votes.dislikes);
if (bScore === aScore) return b.id - a.id;
return bScore - aScore;
},
};
const sortComments = () => {
const order = userConfig.getItem('comments_order');
Array.from(commentsOrderEl.children).forEach((el) => {
if (el.dataset.order === order) {
el.style.textDecoration = 'underline'; // eslint-disable-line no-param-reassign
} else {
el.style.textDecoration = ''; // eslint-disable-line no-param-reassign
}
});
if (order === 'shuffle') {
commentsTree.shuffle();
} else {
const compare = commentsComparators[order];
commentsTree.sort(compare);
}
};
// сортируем комменты при загрузке страницы
// или не сортируем, если они уже по порядку
if (FLAGS.COMMENTS_SORT && FLAGS.COMMENTS_SORT_ONLOAD && userConfig.getItem('comments_order') !== 'time') {
sortComments();
}
Array.from(commentsOrderEl.children).forEach((el) => {
el.onclick = () => { // eslint-disable-line no-param-reassign
userConfig.setItem('comments_order', el.dataset.order);
sortComments();
};
});
// меняем ссылки ведущие к новым комментариям на ссылки к началу комментариев
if (FLAGS.COMMENTS_LINKS) {
const commentsLinks = document.getElementsByClassName('post-stats__comments-link');
for (let i = 0; i < commentsLinks.length; i += 1) {
const iLink = commentsLinks[i];
const hrefValue = iLink.getAttribute('href');
const hrefToComments = hrefValue.replace('#first_unread', '#comments');
iLink.setAttribute('href', hrefToComments);
}
}
// сворачивание комментов
// eslint-disable-next-line no-constant-condition
if (false) { // FLAGS.COMMENTS_HIDE
const commentHash = window.location.hash;
const toggle = (subtree) => {
const listLength = subtree.list.length;
if (listLength === 0) return;
/* eslint-disable */
if (subtree.switcherEl.dataset.isVisibleList === 'true') {
subtree.switcherEl.dataset.isVisibleList = 'false';
subtree.switcherEl.innerHTML = `\u229E раскрыть ветку ${subtree.getLength()}`;
subtree.elList.style.display = 'none';
} else {
subtree.switcherEl.dataset.isVisibleList = 'true';
subtree.switcherEl.innerHTML = '\u229F';
subtree.elList.style.display = 'block';
}
/* eslint-enable */
};
commentsTree.walkTree((subtree) => {
// не пытаемся сворачивать корень
if (subtree.isRoot) return;
// у похищенных нет футера
const footerEl = subtree.commentEl.querySelector('.comment__footer');
if (footerEl === null) return;
// создаём переключатель
const switcher = document.createElement('a');
switcher.classList.add('comment__footer-link');
switcher.classList.add('comment__switcher');
switcher.dataset.isVisibleList = 'true';
switcher.innerHTML = '\u229F';
if (subtree.list.length === 0) switcher.innerHTML = '\u22A1';
switcher.style.cursor = 'pointer';
switcher.style.marginLeft = '-5px';
footerEl.insertBefore(switcher, footerEl.children[0]);
subtree.switcherEl = switcher; // eslint-disable-line no-param-reassign
switcher.onclick = () => toggle(subtree);
const isHideLvl = subtree.lvl === FLAGS.HIDE_LEVEL && FLAGS.HIDE_LEVEL_4;
const isLineLvl = subtree.lvl % FLAGS.LINE_LEN === 0;
if (isLineLvl) {
subtree.elList.classList.add('comments_new-line');
const lineNumber = subtree.lvl / FLAGS.LINE_LEN;
subtree.elList.classList.add(`comments_new-line-${lineNumber % 4}`);
}
// при запуске не сворачиваем ветки с новыми комментами, и содержащие целевой id
if (
(isHideLvl || isLineLvl) && !subtree.existNew() &&
!(commentHash && subtree.existId(commentHash))
) {
toggle(subtree);
}
});
}
if (FLAGS.SCROLL_LEGEND) {
const postBodyEl = document.querySelector('.post__body_full') || document.querySelector('.article__body');
const commentsEl = document.getElementById('comments-list');
const getPercents = (el) => {
if (!el) return { topPercent: 0, heightPercent: 0 };
const pageHeight = document.documentElement.scrollHeight;
const top = el.getBoundingClientRect().top + window.pageYOffset;
const topPercent = ((100 * top) / pageHeight).toFixed(2);
const height = el.clientHeight;
const heightPercent = ((100 * height) / pageHeight).toFixed(2);
return { topPercent, heightPercent };
};
const updateLegend = (pageEl, legendEl) => {
const { topPercent, heightPercent } = getPercents(pageEl);
legendEl.style.top = `${topPercent}%`; // eslint-disable-line no-param-reassign
legendEl.style.height = `${heightPercent}%`; // eslint-disable-line no-param-reassign
};
const legendPost = document.createElement('div');
legendPost.classList.add('legend_el');
legendPost.style.background = 'rgba(84, 142, 170, 0.66)';
updateLegend(postBodyEl, legendPost);
document.body.appendChild(legendPost);
const legendComments = document.createElement('div');
legendComments.classList.add('legend_el');
legendComments.style.background = 'rgba(49, 176, 7, 0.66)';
updateLegend(commentsEl, legendComments);
document.body.appendChild(legendComments);
setInterval(() => {
updateLegend(postBodyEl, legendPost);
updateLegend(commentsEl, legendComments);
}, 1000);
}
if (FLAGS.NIGHT_MODE) {
const switcherEl = document.createElement('div');
switcherEl.classList.add('night_mode_switcher');
switcherEl.onclick = () => {
const isNightMode = userConfig.shiftItem('night_mode');
document.documentElement.classList.toggle('night', isNightMode);
};
document.body.appendChild(switcherEl);
setInterval(() => {
const boolClass = document.documentElement.classList.contains('night');
const isNightMode = userConfig.getItem('night_mode');
if (boolClass !== isNightMode) {
document.documentElement.classList.toggle('night', isNightMode);
}
}, 1000);
}
if (FLAGS.CONFIG_INTERFACE) {
const configFrame = document.createElement('div');
configOptions.forEach(([key, text]) => {
if (typeof FLAGS[key] !== 'boolean') return;
const inputEl = document.createElement('input');
inputEl.type = 'checkbox';
inputEl.value = key;
inputEl.checked = FLAGS[key];
const labelEl = document.createElement('label');
labelEl.setAttribute('unselectable', 'on');
labelEl.setAttribute('onselectstart', 'return false');
const spanEl = document.createElement('span');
spanEl.innerHTML = text;
configFrame.appendChild(labelEl);
labelEl.appendChild(inputEl);
labelEl.appendChild(spanEl);
inputEl.onchange = () => {
FLAGS[key] = inputEl.checked;
localStorage.setItem('habrafixFlags', JSON.stringify(FLAGS));
};
configFrame.appendChild(document.createElement('br'));
});
const reloadText = document.createElement('div');
reloadText.style.textAlign = 'right';
reloadText.innerHTML = `
* чтобы увидеть изменения
<a href="#" onclick="location.reload(); return false">
обновите страницу
</a>`;
configFrame.appendChild(reloadText);
configFrame.classList.add('config_frame');
configFrame.style.display = 'none';
document.body.appendChild(configFrame);
const configButton = document.createElement('div');
configButton.classList.add('config_button');
document.body.appendChild(configButton);
configButton.onclick = () => {
if (configFrame.style.display) {
configFrame.style.display = '';
} else {
configFrame.style.display = 'none';
}
};
}
setTimeout(() => {
const marker = document.createElement('meta');
marker.id = 'habrafixmarker';
document.head.appendChild(marker);
}, 300);
});