☰

Juick tweaks

Feature testing

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

  1. // ==UserScript==
  2. // @name        Juick tweaks
  3. // @namespace   ForJuickCom
  4. // @description Feature testing
  5. // @match       *://juick.com/*
  6. // @match       *://beta.juick.com/*
  7. // @author      Killy
  8. // @version     2.19.5
  9. // @date        2016.09.02 - 2017.12.29
  10. // @run-at      document-end
  11. // @grant       GM_xmlhttpRequest
  12. // @grant       GM_addStyle
  13. // @grant       GM_getValue
  14. // @grant       GM_setValue
  15. // @grant       GM_deleteValue
  16. // @grant       GM_listValues
  17. // @grant       GM_info
  18. // @connect     api.juick.com
  19. // @connect     twitter.com
  20. // @connect     bandcamp.com
  21. // @connect     mixcloud.com
  22. // @connect     flickr.com
  23. // @connect     flic.kr
  24. // @connect     deviantart.com
  25. // @connect     slideshare.net
  26. // @connect     gist.github.com
  27. // @connect     codepen.io
  28. // @connect     arxiv.org
  29. // @connect     pixiv.net
  30. // @connect     konachan.net
  31. // @connect     yande.re
  32. // @connect     gelbooru.com
  33. // @connect     safebooru.org
  34. // @connect     danbooru.donmai.us
  35. // @connect     safebooru.donmai.us
  36. // @connect     anime-pictures.net
  37. // @connect     api.imgur.com
  38. // @connect     tumblr.com
  39. // @connect     reddit.com
  40. // @connect     wordpress.com
  41. // @connect     lenta.ru
  42. // @connect     meduza.io
  43. // @connect     rbc.ru
  44. // @connect     tjournal.ru
  45. // @connect     *.newsru.com
  46. // @connect     *.itar-tass.com
  47. // @connect     tass.ru
  48. // @connect     rublacklist.net
  49. // @connect     mk.ru
  50. // @connect     kp.ru
  51. // @connect     gazeta.ru
  52. // @connect     republic.ru
  53. // @connect     bash.im
  54. // @connect     ixbt.com
  55. // @connect     techxplore.com
  56. // @connect     medicalxpress.com
  57. // @connect     phys.org
  58. // @connect     techcrunch.com
  59. // @connect     bbc.com
  60. // @connect     nplus1.ru
  61. // @connect     elementy.ru
  62. // @connect     news.tut.by
  63. // @connect     imdb.com
  64. // @connect     *
  65. // ==/UserScript==
  66.  
  67.  
  68. // #region === Pages and elements ===========================================================================
  69.  
  70. const isBeta = (window.location.hostname == 'beta.juick.com');
  71. if (isBeta && !GM_getValue('enable_beta', true)) { return; }
  72.  
  73. const content = document.getElementById('content');
  74. const isPost = content && content.hasAttribute('data-mid');
  75. const isFeed = document.querySelectorAll('#content article[data-mid]').length > 0;
  76. const isCommonFeed = !!(/^(?:https?:)?\/\/[a-z0-9.:]+\/(?:$|tag|#post|\?.*show=(?:all|photos))/i.exec(window.location.href));
  77. const isNewPostPage = window.location.pathname.endsWith('/post') && document.querySelector('textarea.newmessage');
  78. const isTagsPage = window.location.pathname.endsWith('/tags');
  79. const isSettingsPage = window.location.pathname.endsWith('/settings');
  80. const isUserColumn = !!(document.querySelector('aside#column > div#ustats'));
  81. const isUsersTable = !!(document.querySelector('#content > div.users'));
  82.  
  83. // #endregion
  84.  
  85.  
  86. // #region === Userscript features ==========================================================================
  87.  
  88. addStyle();
  89.  
  90. const userscriptFeatures = [
  91.   {
  92.     name: 'Форма нового сообщения в ленте (как старый /#post)',
  93.     id: 'enable_post_sharp',
  94.     enabledByDefault: false,
  95.     pageMatch: (isFeed && isUserColumn), // || (isFeed && isCommonFeed)
  96.     fun: addPostSharpFormUser
  97.   },
  98.   {
  99.     name: 'Открывать /post вместо диалога нового сообщения',
  100.     id: 'enable_replace_post_link',
  101.     enabledByDefault: false,
  102.     pageMatch: true,
  103.     fun: replacePostLink
  104.   },
  105.   {
  106.     name: 'Кликабельные теги на странице нового поста (/post)',
  107.     id: 'enable_tags_on_new_post_page',
  108.     enabledByDefault: true,
  109.     pageMatch: isNewPostPage,
  110.     fun: easyTagsUnderNewMessageForm
  111.   },
  112.   {
  113.     name: 'Сортировка и цветовое кодирование тегов на странице /user/tags',
  114.     id: 'enable_tags_page_coloring',
  115.     enabledByDefault: true,
  116.     pageMatch: isTagsPage,
  117.     fun: sortTagsPage
  118.   },
  119.   {
  120.     name: 'Min-width для тегов',
  121.     id: 'enable_tags_min_width',
  122.     enabledByDefault: true
  123.   },
  124.   {
  125.     name: 'Копирование ссылок на комментарии',
  126.     id: 'enable_comment_share_menu',
  127.     enabledByDefault: true,
  128.     pageMatch: isPost,
  129.     fun: addCommentShareMenu
  130.   },
  131.   {
  132.     name: 'Ссылки для удаления комментариев',
  133.     id: 'enable_comment_removal_links',
  134.     enabledByDefault: true,
  135.     pageMatch: isPost,
  136.     fun: addCommentRemovalLinks
  137.   },
  138.   {
  139.     name: 'Ссылка для редактирования тегов поста',
  140.     id: 'enable_tags_editing_link',
  141.     enabledByDefault: true,
  142.     pageMatch: isPost,
  143.     fun: addTagEditingLinkUnderPost
  144.   },
  145.   {
  146.     name: 'Большая аватарка в левой колонке',
  147.     id: 'enable_big_avatar',
  148.     enabledByDefault: true,
  149.     pageMatch: isUserColumn,
  150.     fun: biggerAvatar
  151.   },
  152.   {
  153.     name: 'Ссылки для перехода к постам пользователя за определённый год',
  154.     id: 'enable_year_links',
  155.     enabledByDefault: true,
  156.     pageMatch: isUserColumn,
  157.     fun: addYearLinks
  158.   },
  159.   {
  160.     name: 'Ссылка на настройки в левой колонке на своей странице',
  161.     id: 'enable_settings_link',
  162.     enabledByDefault: true,
  163.     pageMatch: isUserColumn,
  164.     fun: addSettingsLink
  165.   },
  166.   {
  167.     name: 'Сортировка подписок/подписчиков по дате последнего сообщения',
  168.     id: 'enable_users_sorting',
  169.     enabledByDefault: true,
  170.     pageMatch: isUsersTable,
  171.     fun: addUsersSortingButton
  172.   },
  173.   {
  174.     name: 'Статистика рекомендаций',
  175.     id: 'enable_irecommend',
  176.     enabledByDefault: true,
  177.     pageMatch: isUserColumn,
  178.     fun: addIRecommendLink
  179.   },
  180.   {
  181.     name: 'Упоминания (ссылка на поиск)',
  182.     id: 'enable_mentions_search',
  183.     enabledByDefault: true,
  184.     pageMatch: isUserColumn,
  185.     fun: addMentionsLink
  186.   },
  187.   {
  188.     name: 'Посты и комментарии, на которые нельзя ответить, — более бледные',
  189.     id: 'enable_unrepliable_styling',
  190.     enabledByDefault: true,
  191.     pageMatch: isPost || isFeed,
  192.     fun: () => { if (isPost) { checkReplyPost(); } else { checkReplyArticles(); } }
  193.   },
  194.   {
  195.     name: 'Для readonly поста отображать виртуальный тег (только на странице поста)',
  196.     id: 'enable_mark_readonly_post',
  197.     enabledByDefault: true,
  198.     pageMatch: isPost,
  199.     fun: markReadonlyPost
  200.   },
  201.   {
  202.     name: 'Показывать комментарии при наведении на ссылку "в ответ на /x"',
  203.     id: 'enable_move_comment_into_view',
  204.     enabledByDefault: true,
  205.     pageMatch: isPost,
  206.     fun: bringCommentsIntoViewOnHover
  207.   },
  208.   {
  209.     name: 'Стрелочки ("↓")',
  210.     id: 'enable_arrows',
  211.     enabledByDefault: true
  212.   },
  213.   {
  214.     name: 'Скрипт активен на beta.juick.com',
  215.     id: 'enable_beta',
  216.     enabledByDefault: true
  217.   },
  218.   {
  219.     name: 'Переключатель между juick.com и beta.juick.com',
  220.     id: 'enable_toggle_beta',
  221.     enabledByDefault: false,
  222.     pageMatch: true,
  223.     fun: addToggleBetaLink
  224.   },
  225.   {
  226.     name: 'Take care of NSFW tagged posts in feed',
  227.     id: 'enable_mark_nsfw_posts_in_feed',
  228.     enabledByDefault: true,
  229.     pageMatch: isFeed,
  230.     fun: markNsfwPostsInFeed
  231.   },
  232.   {
  233.     name: 'Сбросить стили для тега *code. Уменьшить шрифт взамен',
  234.     id: 'unset_code_style',
  235.     enabledByDefault: false
  236.   },
  237.   {
  238.     name: 'Сворачивать длинные посты',
  239.     id: 'enable_long_message_folding',
  240.     enabledByDefault: true,
  241.     pageMatch: isFeed,
  242.     fun: limitArticlesHeight
  243.   },
  244.   {
  245.     id: 'filter_comments_too', // not in the main feature list
  246.     enabledByDefault: false,
  247.     pageMatch: isPost,
  248.     fun: filterPostComments
  249.   },
  250.   {
  251.     pageMatch: isPost,
  252.     fun: embedLinksToPost
  253.   },
  254.   {
  255.     pageMatch: isFeed,
  256.     fun: embedLinksToArticles
  257.   },
  258.   {
  259.     pageMatch: isFeed && isCommonFeed,
  260.     fun: filterArticles
  261.   },
  262.   {
  263.     pageMatch: isSettingsPage,
  264.     fun: addTweaksSettingsButton
  265.   }
  266. ];
  267.  
  268. userscriptFeatures.forEach(feature => {
  269.   let runnable = feature.pageMatch && !!feature.fun;
  270.   let enabled = !feature.id || GM_getValue(feature.id, feature.enabledByDefault);
  271.   if (runnable && enabled) {
  272.     try { feature.fun(); } catch (e) {
  273.       console.warn(`Failed to run ${feature.fun.name}()`);
  274.       console.warn(e);
  275.     }
  276.   }
  277. });
  278.  
  279. // #endregion
  280.  
  281.  
  282. // #region === Helpers ======================================================================================
  283.  
  284. Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));
  285.  
  286. String.prototype.count = function(s1) {
  287.   return (this.length - this.replace(new RegExp(s1, 'g'), '').length) / s1.length;
  288. };
  289.  
  290. Number.prototype.pad = function(size=2) {
  291.   let s = String(this);
  292.   while (s.length < size) { s = '0' + s; }
  293.   return s;
  294. };
  295.  
  296. function longest(arr) {
  297.   return arr.reduce((a,b) => (!a) ? b : (!b || a.length > b.length) ? a : b);
  298. }
  299.  
  300. function intersect(a, b) {
  301.   if (a.length > b.length) { [a, b] = [b, a]; } // filter shorter array
  302.   return a.filter(item => (b.indexOf(item) !== -1));
  303. }
  304.  
  305. function fitToBounds(w, h, maxW, maxH) {
  306.   let r = h / w;
  307.   let w1 = ((h > maxH) ? maxH : h) / r;
  308.   let w2 = ((w1 > maxW) ? maxW : w1);
  309.   let h2 = w2 * r;
  310.   return { w: w2, h: h2 };
  311. }
  312.  
  313. function insertAfter(newNode, referenceNode) {
  314.   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  315. }
  316.  
  317. function setContent(containerNode, ...newNodes) {
  318.   removeAllFrom(containerNode);
  319.   newNodes.forEach(n => containerNode.appendChild(n));
  320.   return containerNode;
  321. }
  322.  
  323. function removeAllFrom(fromNode) {
  324.   for (let c; c = fromNode.lastChild; ) { fromNode.removeChild(c); }
  325. }
  326.  
  327. function parseRgbColor(colorStr, fallback=[0,0,0]){
  328.   let [, r, g, b] = colorStr.replace(/ /g, '').match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i) || [, ...fallback];
  329.   return [ +r, +g, +b ];
  330. }
  331.  
  332. function getAllMatchesAndCaptureGroups(re, str) {
  333.   let results = [], result;
  334.   while ((result = re.exec(str)) !== null) { results.push(Array.from(result)); }
  335.   return results;
  336. }
  337.  
  338. function htmlDecode(str) {
  339.   let doc = new DOMParser().parseFromString(str, 'text/html');
  340.   return doc.documentElement.textContent;
  341. }
  342.  
  343. function htmlEscape(html) {
  344.   let textarea = document.createElement('textarea');
  345.   textarea.textContent = html;
  346.   return textarea.innerHTML;
  347. }
  348.  
  349. function escapeRegExp(str) {
  350.   return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  351. }
  352.  
  353. function naiveEllipsis(str, len, ellStr='...') {
  354.   let ellLen = ellStr.length;
  355.   if (str.length <= len) { return str; }
  356.   let half = Math.floor((len - ellLen) / 2);
  357.   let left = str.substring(0, half);
  358.   let right = str.substring(str.length - (len - half - ellLen));
  359.   return '' + left + ellStr + right;
  360. }
  361.  
  362. function naiveEllipsisRight(str, len, ellStr='...') {
  363.   let ellLen = ellStr.length;
  364.   return (str.length <= len) ? str : str.substring(0, len - ellLen) + ellStr;
  365. }
  366.  
  367. function wrapIntoTag(node, tagName, className=undefined) {
  368.   let tag = document.createElement(tagName);
  369.   if (className) { tag.className = className; }
  370.   tag.appendChild(node);
  371.   return tag;
  372. }
  373.  
  374. function randomId() {
  375.   return Math.random().toString(36).substr(2);
  376. }
  377.  
  378. function matchWildcard(str, wildcard) {
  379.   let ww = wildcard.split('*');
  380.   let startFrom = 0;
  381.   for (let i = 0; i < ww.length; i++) {
  382.     let w = ww[i];
  383.     if (w == '') { continue; }
  384.     let wloc = str.indexOf(w, startFrom);
  385.     if (wloc == -1) { return false; }
  386.     let wend = wloc + w.length;
  387.     let headCondition = (i > 0) || (wloc == 0);
  388.     let tailCondition = (i < ww.length - 1) || ((i > 0) ? str.endsWith(w) : (str.substr(wloc) == w));
  389.     if (!headCondition || !tailCondition) { return false; }
  390.     startFrom = wend;
  391.   }
  392.   return true;
  393. }
  394.  
  395. // rules :: [{pr: number, re: RegExp, with: string}]
  396. // rules :: [{pr: number, re: RegExp, with: Function}]
  397. // rules :: [{pr: number, re: RegExp, brackets: true, with: [string, string]}]
  398. // rules :: [{pr: number, re: RegExp, brackets: true, with: [string, string, Function]}]
  399. function formatText(txt, rules) {
  400.   let idCounter = 0;
  401.   function nextId() { return idCounter++; }
  402.   function ft(txt, rules) {
  403.     let matches = rules.map(r => { r.re.lastIndex = 0; return [r, r.re.exec(txt)]; })
  404.                        .filter(([,m]) => m !== null)
  405.                        .sort(([r1,m1],[r2,m2]) => (r1.pr - r2.pr) || (m1.index - m2.index));
  406.     if (matches && matches.length > 0) {
  407.       let [rule, match] = matches[0];
  408.       let subsequentRules = rules.filter(r => r.pr >= rule.pr);
  409.       let idStr = `<>(${nextId()})<>`;
  410.       let outerStr = txt.substring(0, match.index) + idStr + txt.substring(rule.re.lastIndex);
  411.       let innerStr = (rule.brackets)
  412.         ? (() => { let [l ,r ,f] = rule.with; return l + ft((f ? f(match[1]) : match[1]), subsequentRules) + r; })()
  413.         : match[0].replace(rule.re, rule.with);
  414.       return ft(outerStr, subsequentRules).replace(idStr, innerStr);
  415.     }
  416.     return txt;
  417.   }
  418.   return ft(htmlEscape(txt), rules); // idStr above relies on the fact the text is escaped
  419. }
  420.  
  421. function getProto() {
  422.   return (location.protocol == 'http:') ? 'http:' : 'https:';
  423. }
  424.  
  425. function setProto(url, proto) {
  426.   return url.replace(
  427.     /^(https?:)?(?=\/\/)/i,
  428.     proto ? proto : getProto()
  429.   );
  430. }
  431.  
  432. function unsetProto(url) {
  433.   return url.replace(/^(https?:)?(?=\/\/)/i, '');
  434. }
  435.  
  436. function fixWwwLink(url) {
  437.   return url.replace(/^(?!([a-z]+:)?\/\/)/i, '//');
  438. }
  439.  
  440. function waitAndRunAsync(test, count, tick=100, successCallback, failCallback) {
  441.   return new Promise((resolve, reject) => {
  442.     function r(c){
  443.       if (test()) { resolve(successCallback()); } else {
  444.         if (c && (c > 0)) {
  445.           setTimeout(() => r(c-1), tick);
  446.         } else {
  447.           reject(failCallback());
  448.         }
  449.       }
  450.     }
  451.     r(count);
  452.   });
  453. }
  454.  
  455. // predicates :: [{ msg: Response -> string, test: Response -> bool, permanent: Response -> bool }]
  456. function xhrGetAsync(url, timeout=3000, predicates=undefined, method='GET') {
  457.   predicates = predicates || [
  458.     {
  459.       msg: response => (response.statusText ? `${response.status} - ${response.statusText}` : `${response.status}`),
  460.       test: response => response.status != 200,
  461.       permanent: response => !([408, 500, 503].includes(response.status))
  462.     }
  463.   ];
  464.   return new Promise(function(resolve, reject) {
  465.     GM_xmlhttpRequest({
  466.       method: method,
  467.       url: url,
  468.       timeout: timeout,
  469.       onload: function(response) {
  470.         let match = predicates && predicates.find(p => p.test(response));
  471.         if (!match) {
  472.           resolve(response);
  473.         } else {
  474.           reject({ reason: match.msg(response), response: response, permanent: (match.permanent) ? match.permanent(response) : false });
  475.         }
  476.       },
  477.       ontimeout: function(response) { reject({ reason: 'timeout', response: response, permanent: false }); },
  478.       onerror: function(response) { reject({ reason: 'unknown error', response: response, permanent: false }); }
  479.     });
  480.   });
  481. }
  482.  
  483. function xhrFirstResponse(urls, timeout) {
  484.   return urls.reduce(
  485.     (p, url) => p.catch(e => xhrGetAsync(url, timeout)),
  486.     Promise.reject({reason: 'init'})
  487.   );
  488. }
  489.  
  490. function computeStyle(newElement) {
  491.   if (document.body.contains(newElement)) {
  492.     return getComputedStyle(newElement);
  493.   }
  494.   document.body.appendChild(newElement);
  495.   let style = getComputedStyle(newElement);
  496.   setTimeout(function() {
  497.     document.body.removeChild(newElement);
  498.   }, 1); // let getComputedStyle to do the job
  499.   return style;
  500. }
  501.  
  502. function autosize(el) {
  503.   let offset = (!window.opera)
  504.     ? (el.offsetHeight - el.clientHeight)
  505.     : (el.offsetHeight + parseInt(window.getComputedStyle(el, null).getPropertyValue('border-top-width')));
  506.   let resize = function (el) {
  507.     el.style.height = 'auto';
  508.     el.style.height = (el.scrollHeight + offset) + 'px';
  509.   };
  510.   el.addEventListener('input', () => resize(el));
  511. }
  512.  
  513. function selectAndCopyElementContents(el, deselect=false) {
  514.   if (window.getSelection && document.createRange) {
  515.     let range = document.createRange();
  516.     range.selectNodeContents(el);
  517.     let sel = window.getSelection();
  518.     sel.removeAllRanges();
  519.     sel.addRange(range);
  520.     try {
  521.       let successful = document.execCommand('copy');
  522.       if (!successful) { console.log('Copy command is not available or not enabled.'); }
  523.       if (deselect) { sel.removeAllRanges(); }
  524.       return successful;
  525.     } catch (err) {
  526.       console.log(err);
  527.       return false;
  528.     }
  529.   }
  530.   return false;
  531. }
  532.  
  533. function keyboardClickable(el) {
  534.   el.addEventListener('keydown', e => {
  535.     if ((e.which === 13) || (e.which === 32)) { // 13 = Return, 32 = Space
  536.       e.preventDefault();
  537.       el.click();
  538.     }
  539.   });
  540. }
  541.  
  542. // #endregion
  543.  
  544.  
  545. // #region === Function definitions =========================================================================
  546.  
  547. function svgIconHtml(name) {
  548.   return `<div class="icon icon--ei-${name} icon--s "><svg class="icon__cnt"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ei-${name}-icon"></use></svg></div>`;
  549. }
  550.  
  551. function getMyAccountAsync() {
  552.   if (getMyAccountAsync[0]) {
  553.     return Promise.resolve(getMyAccountAsync[0]);
  554.   } else {
  555.     let hash = document.body.getAttribute('data-hash');
  556.     if (!hash) { return Promise.reject('not logged in') }
  557.     return xhrGetAsync(setProto('//api.juick.com/users?hash=' + hash), 500).then(response => {
  558.       let account = JSON.parse(response.responseText)[0];
  559.       getMyAccountAsync[0] = account;
  560.       return account;
  561.     });
  562.   }
  563. }
  564.  
  565. function getMyUserNameAsync() {
  566.   return getMyAccountAsync().then(account => account.uname);
  567. }
  568.  
  569. function getColumnUserName() {
  570.   let columnUserIdLink = document.querySelector('div#ctitle > a');
  571.   return (columnUserIdLink) ? columnUserIdLink.textContent.trim() : null;
  572. }
  573.  
  574. function getColumnUid() {
  575.   let avatar = document.querySelector('div#ctitle > a > img');
  576.   return (avatar) ? avatar.src.match(/\/as?\/(\d+)\./i)[1] : null;
  577. }
  578.  
  579. function getPostUserName(element) {
  580.   let avatar = element.querySelector('div.msg-avatar > a > img');
  581.   return (avatar) ? avatar.alt : null;
  582. }
  583.  
  584. function getPostUid(element) {
  585.   let avatar = document.querySelector('div.msg-avatar > a > img');
  586.   return (avatar) ? avatar.src.match(/\/as?\/(\d+)\./i)[1] : null;
  587. }
  588.  
  589. function replacePostLink() {
  590.   setTimeout(function() {
  591.     let postLink = document.querySelector('#post');
  592.     let cleanLink = postLink.cloneNode(true);
  593.     postLink.parentNode.replaceChild(postLink.cloneNode(true), postLink);
  594.   }, 100);
  595. }
  596.  
  597. function markNsfwPostsInFeed() {
  598.   [].forEach.call(document.querySelectorAll('#content article[data-mid]'), function(article, i, arr) {
  599.     let tagsDiv = article.querySelector('div.msg-tags');
  600.     let isNsfw = tagsDiv && Array.from(tagsDiv.children).some(t => t.textContent.toUpperCase() == 'NSFW');
  601.     if (isNsfw) { article.classList.add('nsfw'); }
  602.   });
  603. }
  604.  
  605. function addTagEditingLinkUnderPost() {
  606.   let post = document.querySelector('#content .msgthread');
  607.   let postToolbar = post.querySelector('nav.l');
  608.   let canEdit = !!document.querySelector('#column a[href="/logout"]');
  609.   let mid = document.getElementById('content').getAttribute('data-mid');
  610.   if (canEdit) {
  611.     postToolbar.insertAdjacentHTML('beforeend', `<a href="/post?body=%23${mid}+%2ATag">${svgIconHtml('tag')}&nbsp;Tags</a>`);
  612.   }
  613. }
  614.  
  615. function addCommentRemovalLinks() {
  616.   getMyUserNameAsync().then(uname => {
  617.     let commentsBlock = document.querySelector('ul#replies');
  618.     if (commentsBlock && uname) {
  619.       [].forEach.call(commentsBlock.children, function(linode, i, arr) {
  620.         let postUserAvatar = linode.querySelector('div.msg-avatar > a > img');
  621.         if (postUserAvatar) {
  622.           let postUserId = postUserAvatar.alt;
  623.           if (postUserId == uname) {
  624.             let linksBlock = linode.querySelector('div.msg-links');
  625.             let commentLink = linode.querySelector('div.msg-ts > a');
  626.             let postId = commentLink.pathname.replace('/','');
  627.             let commentId = commentLink.hash.replace('#','');
  628.             let anode = document.createElement('a');
  629.             anode.href = `/post?body=D+%23${postId}%2F${commentId}`;
  630.             anode.innerHTML = `${svgIconHtml('close')}&nbsp;Delete`;
  631.             anode.style.cssFloat = 'right';
  632.             anode.style.marginLeft = '15px';
  633.             linksBlock.appendChild(anode);
  634.           }
  635.         }
  636.       });
  637.     }
  638.   }).catch(err => console.info(err));
  639. }
  640.  
  641. function addCommentShareMenu() {
  642.   let commentsBlock = document.querySelector('ul#replies');
  643.   if (commentsBlock) {
  644.     [].forEach.call(commentsBlock.children, linode => {
  645.       let linksBlock = linode.querySelector('div.msg-links');
  646.       let commentLink = linode.querySelector('div.msg-ts > a');
  647.       if (!commentLink || !linksBlock) { return; }
  648.       let postId = commentLink.pathname.replace('/','');
  649.       let commentId = commentLink.hash.replace('#','');
  650.       linksBlock.insertAdjacentHTML('beforeend', `
  651.         <div class="hoverPopup">
  652.           <div class="hoverTarget" tabindex="0">${svgIconHtml('link')}&nbsp;Links</div>
  653.           <div class="hoverContainer">
  654.             <p>Click to copy:</p>
  655.             <a href="#copy_id" class="copyItem">#${postId}/${commentId}</a>
  656.             <a href="#copy_url" class="copyItem">${commentLink.href}</a>
  657.           </div>
  658.         </div>
  659.         `);
  660.       let hoverPopup = linksBlock.querySelector('.hoverPopup');
  661.       let hoverTarget = linksBlock.querySelector('.hoverTarget');
  662.       const copyAction = el => e => {
  663.         e.preventDefault();
  664.         selectAndCopyElementContents(el, true);
  665.         el.classList.add('blinkOnce');
  666.         setTimeout(() => {
  667.           el.classList.remove('blinkOnce');
  668.           hoverPopup.classList.remove('expanded');
  669.         }, 700);
  670.       };
  671.       [].forEach.call(linksBlock.querySelectorAll('.copyItem'), copyItem => {
  672.         copyItem.onclick = copyAction(copyItem);
  673.       });
  674.       hoverTarget.addEventListener('click', e => hoverPopup.classList.add('expanded'));
  675.       hoverTarget.addEventListener('mouseenter', e => hoverPopup.classList.add('expanded'));
  676.       hoverPopup.addEventListener('mouseleave', e => hoverPopup.classList.remove('expanded'));
  677.       hoverPopup.addEventListener('blur', e => {
  678.         if (!hoverPopup.contains(e.relatedTarget)) { hoverPopup.classList.remove('expanded'); }
  679.       }, true);
  680.       keyboardClickable(hoverTarget);
  681.     });
  682.   }
  683. }
  684.  
  685. function addYearLinks() {
  686.   let userId = getColumnUserName();
  687.   let asideColumn = document.querySelector('aside#column');
  688.   let hr1 = asideColumn.querySelector('form ~ hr');
  689.   let hr2 = document.createElement('hr');
  690.   let linksContainer = document.createElement('p');
  691.   let years = [
  692.     {y: (new Date()).getFullYear(), b: ''},
  693.     {y: 2016, b: '?before=2857956'},
  694.     {y: 2015, b: '?before=2816362'},
  695.     {y: 2014, b: '?before=2761245'},
  696.     {y: 2013, b: '?before=2629477'},
  697.     {y: 2012, b: '?before=2183986'},
  698.     {y: 2011, b: '?before=1695443'},
  699.     {y: 2010, b: '?before=1140357'},
  700.     {y: 2009, b: '?before=453764'},
  701.     {y: 2008, b: '?before=20106'}
  702.   ];
  703.   linksContainer.innerHTML = years.map(item => `<a href="/${userId}/${item.b}">${item.y}</a>`).join(' ');
  704.   asideColumn.insertBefore(hr2, hr1);
  705.   asideColumn.insertBefore(linksContainer, hr1);
  706. }
  707.  
  708. function addSettingsLink() {
  709.   getMyUserNameAsync().then(uname => {
  710.     if (getColumnUserName() == uname) {
  711.       let asideColumn = document.querySelector('aside#column');
  712.       let ctitle = asideColumn.querySelector('#ctitle');
  713.       let anode = document.createElement('a');
  714.       anode.innerHTML = svgIconHtml('gear');
  715.       anode.href = '/settings';
  716.       ctitle.appendChild(anode);
  717.       ctitle.style.display = 'flex';
  718.       ctitle.style.justifyContent = 'space-between';
  719.       ctitle.style.alignItems = 'baseline';
  720.     }
  721.   }).catch(err => console.info(err));
  722. }
  723.  
  724. function biggerAvatar() {
  725.   let avatarImg = document.querySelector('div#ctitle a img');
  726.   avatarImg.style.width = 'unset';
  727. }
  728.  
  729. function loadTagsAsync(uid) {
  730.   let hash = document.body.getAttribute('data-hash');
  731.   return xhrGetAsync(setProto(`//api.juick.com/tags?user_id=${uid}&hash=${hash}`), 1000).then(response => {
  732.     return JSON.parse(response.responseText);
  733.   });
  734. }
  735.  
  736. function makeTagsContainer(tags, numberLimit, sortBy='tag', uname, color=[0,0,0]) {
  737.   const tagUrl = (uname)
  738.     ? t => `/${uname}/?tag=${encodeURIComponent(t.tag)}`
  739.     : t => `/tag/${encodeURIComponent(t.tag)}`;
  740.  
  741.   let [r, g, b] = color;
  742.   let p0 = 0.7; // 70% of color range is used for color coding
  743.   let maxC = 0.1;
  744.   tags.forEach(t => { maxC = (t.messages > maxC) ? t.messages : maxC; });
  745.   maxC = Math.log(maxC);
  746.  
  747.   if (numberLimit && (tags.length > numberLimit)) {
  748.     tags = tags.sort((t1, t2) => t2.messages - t1.messages)
  749.                .slice(0, numberLimit);
  750.   }
  751.   if (sortBy) {
  752.     tags = tags.sort((t1, t2) => t1[sortBy].localeCompare(t2[sortBy]));
  753.   }
  754.   let aNodes = tags.map(t => {
  755.     let p = (Math.log(t.messages) / maxC - 1) * p0 + 1; // normalize to [1-p0..1]
  756.     return `<a title="${t.messages}" href="${tagUrl(t)}" style="color: rgba(${r},${g},${b},${p}) !important;">${t.tag}</a>`;
  757.   });
  758.   let tagsContainer = document.createElement('p');
  759.   tagsContainer.classList.add('tagsContainer');
  760.   tagsContainer.innerHTML = aNodes.join(' ');
  761.   return tagsContainer;
  762. }
  763.  
  764. function easyTagsUnderNewMessageForm() {
  765.   getMyAccountAsync().then(account => {
  766.     return loadTagsAsync(account.uid).then(tags => [account, tags]);
  767.   }).then(([account, tags]) => {
  768.     let color = parseRgbColor(computeStyle(document.createElement('a')).color);
  769.     return makeTagsContainer(tags, 300, 'tag', account.uname, color);
  770.   }).then(tagsContainer => {
  771.     Array.from(document.querySelectorAll('#content > a')).forEach(a => a.remove());
  772.     let content = document.querySelector('#content');
  773.     let messageBox = content.querySelector('textarea.newmessage');
  774.     content.insertAdjacentElement('beforeend', tagsContainer);
  775.     const addTag = (box, newTag) => {
  776.       let re = new RegExp(`(^.* |^)(\\*${escapeRegExp(newTag)})($|\\s[\\s\\S]*$)`, 'g');
  777.       if (re.test(box.value)) {
  778.         box.value = box.value.replace(re, '$1$3').replace(/(^.*? )( +)/, '$1').replace(/^ /, '');
  779.       } else {
  780.         box.value = box.value.replace(/(^.*)([\s\S]*)/g, `$1 *${newTag}$2`).replace(/(^.*? )( +)/, '$1').replace(/^ /, '');
  781.       }
  782.     };
  783.     Array.from(tagsContainer.children).forEach(t => {
  784.       let newTag = t.textContent;
  785.       t.href = '';
  786.       t.onclick = (e => { e.preventDefault(); addTag(messageBox, newTag); });
  787.     });
  788.     return;
  789.   }
  790.   ).catch( err => console.warn(err) );
  791. }
  792.  
  793. function clearFileInput(inp) {
  794.   try {
  795.     inp.value = '';
  796.     if (inp.value) {
  797.       inp.type = '';
  798.       inp.type = 'file';
  799.     }
  800.   } catch (e) {
  801.     console.log(e);
  802.     console.log('old browser having problems with cleaning file input');
  803.   }
  804. }
  805.  
  806. function clearImageInput(mode=undefined) {
  807.   let form = document.querySelector('#oldNewMessage');
  808.   if (!mode || mode == 'url') { form.querySelector('#image_url').value = ''; }
  809.   if (!mode || mode == 'file') { clearFileInput(form.querySelector('#image_upload')); }
  810.   form.classList.remove('withImage');
  811.   let image = document.querySelector('#imagePreview img');
  812.   if (image) { image.remove(); }
  813. }
  814.  
  815. function showImagePreview(src) {
  816.   let form = document.querySelector('#oldNewMessage');
  817.   let preview = form.querySelector('#imagePreview');
  818.   let image = preview.querySelector('img') || document.createElement('img');
  819.   image.src = src;
  820.   image.onerror = () => clearImageInput();
  821.   preview.appendChild(image);
  822.   form.classList.add('withImage');
  823. }
  824.  
  825. function updateImageUrlPreview(imageUrlInput) {
  826.   let form = document.querySelector('#oldNewMessage');
  827.   clearFileInput(form.querySelector('#image_upload')); // clear file input
  828.   setTimeout(() => showImagePreview(imageUrlInput.value), 0);
  829. }
  830.  
  831. function updateImageFilePreview(imageInput) {
  832.   let form = document.querySelector('#oldNewMessage');
  833.   form.querySelector('#image_url').value = ''; // clear url input
  834.   if (imageInput.files.length === 0) {
  835.     clearImageInput();
  836.   } else {
  837.     let selFile = imageInput.files[0];
  838.     let validTypes = ['image/jpeg', 'image/png'];
  839.     if (validTypes.includes(selFile.type) && selFile.size < 10485760) {
  840.       showImagePreview(window.URL.createObjectURL(selFile));
  841.     } else {
  842.       clearImageInput();
  843.     }
  844.   }
  845. }
  846.  
  847. function addPostSharpFormUser() {
  848.   getMyUserNameAsync().then(uname => {
  849.     if (getColumnUserName() == uname) {
  850.       addPostSharpForm();
  851.     }
  852.   }).catch(err => console.info(err));
  853. }
  854.  
  855. function addPostSharpForm() {
  856.   let content = document.querySelector('#content');
  857.   let newMessageForm = `
  858.     <form id="oldNewMessage" action="/post" method="post" enctype="multipart/form-data">
  859.       <textarea name="body" rows="1" placeholder="New message..."></textarea>
  860.       <div id="charCounterBlock" class="empty"><div id="charCounter" style="width: 0%;"></div></div>
  861.       <div id="bottomBlock">
  862.         <div id="bottomLeftBlock">
  863.           <input class="tags txt" name="tags" placeholder="Tags (space separated)">
  864.           <div id="imgUploadBlock">
  865.             <label for="image_upload" class="btn_like">Choose file</label>
  866.             <input type="file" id="image_upload" name="attach" accept="image/jpeg,image/png">
  867.             <input class="imgLink txt" id="image_url" name="img" placeholder="or paste link">
  868.             <div class="info" title="JPG/PNG up to 10 MB"><svg class="icon__cnt"><use xlink:href="#ei-question-icon"></use></svg></div>
  869.           </div>
  870.           <div class="flexSpacer"></div>
  871.           <input type="submit" class="subm" value="Send" disabled>
  872.         </div>
  873.         <div id="imagePreview">
  874.           <a id="clear_button" href="javascript:void(0);" title="Remove attachment">
  875.             <svg class="icon__cnt"><use xlink:href="#ei-close-icon"></use></svg>
  876.           </a>
  877.         </div>
  878.       </div>
  879.     </form>`;
  880.   content.insertAdjacentHTML('afterbegin', newMessageForm);
  881.   let f = document.querySelector('#oldNewMessage');
  882.   let ta = f.querySelector('textarea');
  883.   let urlInput = f.querySelector('#image_url');
  884.   let fileInput = f.querySelector('#image_upload');
  885.   let clearButton = f.querySelector('#clear_button');
  886.   let charCounter = f.querySelector('#charCounter');
  887.   let charCounterBlock = f.querySelector('#charCounterBlock');
  888.   let submitButton = f.querySelector('.subm');
  889.  
  890.   urlInput.addEventListener('paste', () => updateImageUrlPreview(urlInput));
  891.   urlInput.addEventListener('change', () => updateImageUrlPreview(urlInput));
  892.   fileInput.addEventListener('change', () => updateImageFilePreview(fileInput));
  893.   clearButton.addEventListener('click', () => clearImageInput());
  894.   ta.addEventListener('focus', () => {
  895.     ta.parentNode.classList.add('active');
  896.     document.querySelector('#oldNewMessage textarea').rows = 2;
  897.   });
  898.   ta.addEventListener('input', () => {
  899.     const maxLen = 4096;
  900.     let len = ta.value.length;
  901.     submitButton.disabled = (len < 1 || len > maxLen);
  902.     charCounterBlock.classList.toggle('invalid', len > maxLen);
  903.     if (len <= maxLen) {
  904.       charCounter.style.width = '' + (100.0 * len / maxLen) + '%';
  905.       charCounter.textContent = '';
  906.     } else {
  907.       charCounter.style.width = '';
  908.       charCounter.textContent = '' + len;
  909.     }
  910.   });
  911.   autosize(ta);
  912.  
  913.   getMyAccountAsync().then(account => {
  914.     return loadTagsAsync(account.uid).then(tags => [account, tags]);
  915.   }).then(([account, tags]) => {
  916.     let color = parseRgbColor(computeStyle(document.createElement('a')).color);
  917.     return makeTagsContainer(tags, 60, 'tag', account.uname, color);
  918.   }).then(tagsContainer => {
  919.     let messageForm = document.getElementById('oldNewMessage');
  920.     let tagsField = messageForm.querySelector('div > .tags');
  921.     tagsField.parentNode.parentNode.parentNode.appendChild(tagsContainer);
  922.     const addTag = (tagsField, newTag) => {
  923.       let re = new RegExp(`(^|\\s)(${escapeRegExp(newTag)})(\\s|$)`, 'g');
  924.       if (re.test(tagsField.value)) {
  925.         tagsField.value = tagsField.value.replace(re, '$1$3').replace(/\s\s+/g, ' ').trim();
  926.       } else {
  927.         tagsField.value = (tagsField.value.trim() + ' ' + newTag).trim();
  928.       }
  929.     };
  930.     Array.from(tagsContainer.children).forEach(t => {
  931.       let newTag = t.textContent;
  932.       t.href = '';
  933.       t.onclick = (e => { e.preventDefault(); addTag(tagsField, newTag); });
  934.     });
  935.     return;
  936.   }
  937.   ).catch( err => console.warn(err) );
  938. }
  939.  
  940. function sortTagsPage() {
  941.   let uid = getColumnUid();
  942.   let uname = getColumnUserName();
  943.   loadTagsAsync(uid).then(tags => {
  944.     let color = parseRgbColor(computeStyle(document.createElement('a')).color);
  945.     return makeTagsContainer(tags, undefined, 'tag', uname, color);
  946.   }).then(tagsContainer => {
  947.     let contentSection = document.querySelector('section#content');
  948.     setContent(contentSection, tagsContainer);
  949.     return;
  950.   }).catch( err => console.warn(err) );
  951. }
  952.  
  953. function getLastArticleDate(html) {
  954.   const re = /datetime\=\"([^\"]+) ([^\"]+)\"/;
  955.   //const re = /\"timestamp\"\:\"([^\"]+) ([^\"]+)\"/;
  956.   let [, dateStr, timeStr] = re.exec(html) || [];
  957.   return (dateStr) ? new Date(`${dateStr}T${timeStr}`) : null;
  958. }
  959.  
  960. function processPageAsync(url, retrievalFunction, timeout=110) {
  961.   return new Promise(function(resolve, reject) {
  962.     GM_xmlhttpRequest({
  963.       method: 'GET',
  964.       url: setProto(url),
  965.       onload: function(response) {
  966.         let result = null;
  967.         if (response.status != 200) {
  968.           console.log(`${url}: failed with ${response.status}, ${response.statusText}`);
  969.         } else {
  970.           result = retrievalFunction(response.responseText);
  971.         }
  972.         setTimeout(() => resolve(result), timeout);
  973.       }
  974.     });
  975.   });
  976. }
  977.  
  978. function loadUserDatesAsync(unprocessedUsers, processedUsers=[]) {
  979.   return new Promise(function(resolve, reject) {
  980.     if (unprocessedUsers.length === 0) {
  981.       resolve(processedUsers);
  982.     } else {
  983.       let user = unprocessedUsers.splice(0,1)[0];
  984.       //let postsUrl = "http://api.juick.com/messages?uname=" + user.id;
  985.       let postsUrl = '//juick.com/' + user.id + '/';
  986.       let recsUrl = '//juick.com/' + user.id + '/?show=recomm';
  987.  
  988.       processPageAsync(postsUrl, getLastArticleDate).then(lastPostDate => {
  989.         processPageAsync(recsUrl, getLastArticleDate).then(lastRecDate => {
  990.           let date = (lastPostDate > lastRecDate) ? lastPostDate : lastRecDate;
  991.           if (date) {
  992.             user.date = date;
  993.             user.a.appendChild(document.createTextNode (` (${date.getFullYear()}-${(date.getMonth()+1).pad(2)}-${date.getDate().pad(2)})` ));
  994.           } else {
  995.             console.log(`${user.id}: no posts or recommendations found`);
  996.           }
  997.           processedUsers.push(user);
  998.           loadUserDatesAsync(unprocessedUsers, processedUsers).then(rr => resolve(rr));
  999.         });
  1000.       });
  1001.     }
  1002.   });
  1003. }
  1004.  
  1005. function sortUsers() {
  1006.   let contentBlock = document.getElementById('content');
  1007.   let button = document.getElementById('usersSortingButton');
  1008.   button.parentNode.removeChild(button);
  1009.   let usersTable = document.querySelector('div.users');
  1010.   let unprocessedUsers = Array.from(usersTable.querySelectorAll('span > a')).map(anode => {
  1011.     let userId = anode.pathname.replace(/\//g, '');
  1012.     return {a: anode, id: userId, date: (new Date(1970, 1, 1))};
  1013.   });
  1014.   loadUserDatesAsync(unprocessedUsers).then(
  1015.     processedUsers => {
  1016.       processedUsers.sort((b, a) => (a.date > b.date) - (a.date < b.date));
  1017.       usersTable.parentNode.removeChild(usersTable);
  1018.       let ul = document.createElement('div');
  1019.       ul.className = 'users sorted';
  1020.       processedUsers.forEach(user => {
  1021.         let li = document.createElement('span');
  1022.         li.appendChild(user.a);
  1023.         ul.appendChild(li);
  1024.       });
  1025.       contentBlock.appendChild(ul);
  1026.       return;
  1027.     }
  1028.   ).catch( err => console.warn(err) );
  1029. }
  1030.  
  1031. function addUsersSortingButton() {
  1032.   let contentBlock = document.getElementById('content');
  1033.   let usersTable = document.querySelector('div.users');
  1034.   let button = document.createElement('button');
  1035.   button.id = 'usersSortingButton';
  1036.   button.textContent = 'Sort by date';
  1037.   button.onclick = sortUsers;
  1038.   contentBlock.insertBefore(button, usersTable);
  1039. }
  1040.  
  1041. function turnIntoCts(node, makeNodeCallback) {
  1042.   node.classList.add('cts');
  1043.   node.onclick = function(e){
  1044.     e.preventDefault();
  1045.     makeNodeCallback();
  1046.     node.onclick = '';
  1047.     node.classList.remove('cts');
  1048.   };
  1049. }
  1050.  
  1051. function makeCts(makeNodeCallback, titleHtml) {
  1052.   let ctsNode = document.createElement('div');
  1053.   let placeholder = document.createElement('div');
  1054.   placeholder.className = 'placeholder';
  1055.   placeholder.innerHTML = titleHtml;
  1056.   ctsNode.appendChild(placeholder);
  1057.   turnIntoCts(ctsNode, makeNodeCallback);
  1058.   return ctsNode;
  1059. }
  1060.  
  1061. function makeTitle(embedType, reResult) {
  1062.   return (embedType.makeTitle)
  1063.     ? embedType.makeTitle(reResult)
  1064.     : naiveEllipsis(reResult[0], 55);
  1065. }
  1066.  
  1067. function makeNewNode(embedType, aNode, reResult, alwaysCts) {
  1068.   const withClasses = el => {
  1069.     if (embedType.className) {
  1070.       el.classList.add(...embedType.className.split(' '));
  1071.     }
  1072.     return el;
  1073.   };
  1074.   let isCts = alwaysCts
  1075.               || GM_getValue('cts_' + embedType.id, embedType.ctsDefault)
  1076.               || (embedType.ctsMatch && embedType.ctsMatch(aNode, reResult));
  1077.   if (isCts) {
  1078.     let div = makeCts(
  1079.       () => embedType.makeNode(aNode, reResult, div),
  1080.       'Click to show: ' + htmlEscape(makeTitle(embedType, reResult))
  1081.     );
  1082.     return withClasses(div);
  1083.   } else {
  1084.     return embedType.makeNode(aNode, reResult, withClasses(document.createElement('div')));
  1085.   }
  1086. }
  1087.  
  1088. function doFetchingEmbed(aNode, reResult, div, embedType, promiseCallback) {
  1089.   return doFetchingEmbed2(
  1090.     div,
  1091.     makeTitle(embedType, reResult),
  1092.     promiseCallback,
  1093.     () => {
  1094.       div.classList.add('loading');
  1095.       div.classList.remove('failed');
  1096.       embedType.makeNode(aNode, reResult, div);
  1097.     }
  1098.   );
  1099. }
  1100.  
  1101. function doFetchingEmbed2(div, title, promiseCallback, remakeCallback) {
  1102.   div.innerHTML = `<span>loading ${htmlEscape(title)}</span>`;
  1103.   div.classList.add('embed', 'loading');
  1104.   promiseCallback()
  1105.     .then(() => { div.classList.remove('loading'); div.classList.add('loaded'); })
  1106.     .catch(({ reason, response, permanent }) => {
  1107.       console.log({reason: reason, response: response, permanent: permanent, div: div, title: title});
  1108.       if (permanent) {
  1109.         div.textContent = reason;
  1110.       } else {
  1111.         div.textContent = `Failed to load (${reason})`;
  1112.         div.classList.remove('loading');
  1113.         div.classList.add('failed');
  1114.         turnIntoCts(div, remakeCallback);
  1115.       }
  1116.     });
  1117.   return div;
  1118. }
  1119.  
  1120. function makeIframe(src, w, h, scrolling='no') {
  1121.   let iframe = document.createElement('iframe');
  1122.   iframe.style.width = w;
  1123.   iframe.style.height = h;
  1124.   iframe.frameBorder = 0;
  1125.   iframe.scrolling = scrolling;
  1126.   iframe.setAttribute('allowFullScreen', '');
  1127.   iframe.src = src;
  1128.   iframe.innerHTML = 'Cannot show iframes.';
  1129.   return iframe;
  1130. }
  1131.  
  1132. function makeResizableToRatio(element, ratio) {
  1133.   element.dataset['ratio'] = ratio;
  1134.   makeResizable(element, w => w * element.dataset['ratio']);
  1135. }
  1136.  
  1137. // calcHeight :: Number -> Number -- calculate element height for a given width
  1138. function makeResizable(element, calcHeight) {
  1139.   const setHeight = el => {
  1140.     if (document.body.contains(el) && (el.offsetWidth > 0)) {
  1141.       el.style.height = (calcHeight(el.offsetWidth)).toFixed(2) + 'px';
  1142.     }
  1143.   };
  1144.   window.addEventListener('resize', () => setHeight(element));
  1145.   setHeight(element);
  1146. }
  1147.  
  1148. function makeIframeWithHtmlAndId(myHTML) {
  1149.   let id = randomId();
  1150.   let script = `(function(html){
  1151.                   var iframe = document.createElement('iframe');
  1152.                   iframe.id='${id}';
  1153.                   iframe.onload = function(){var d = iframe.contentWindow.document; d.open(); d.write(html); d.close();};
  1154.                   document.body.appendChild(iframe);
  1155.                 })(${JSON.stringify(myHTML)});`;
  1156.   window.eval(script);
  1157.   return id;
  1158. }
  1159.  
  1160. function makeIframeHtmlAsync(html, w, h, insertCallback, successCallback, failCallback) {
  1161.   return new Promise((resolve, reject) => {
  1162.     let iframeId = makeIframeWithHtmlAndId(html);
  1163.     let iframe = document.getElementById(iframeId);
  1164.     iframe.className = 'newIframe';
  1165.     iframe.width = w;
  1166.     iframe.height = h;
  1167.     iframe.frameBorder = 0;
  1168.     iframe.addEventListener('load', () => resolve(successCallback(iframe)), false);
  1169.     iframe.onerror = er => reject(failCallback(er));
  1170.     insertCallback(iframe);
  1171.   });
  1172. }
  1173.  
  1174. function loadScript(url, async=false, callback, once=false) {
  1175.   if (once && [].some.call(document.scripts, s => s.src == url)) {
  1176.     if (typeof callback == 'function') { callback(); }
  1177.     return;
  1178.   }
  1179.  
  1180.   let head = document.getElementsByTagName('head')[0];
  1181.   let script = document.createElement('script');
  1182.   script.type = 'text/javascript';
  1183.   script.src = url;
  1184.   if (async) { script.setAttribute('async', ''); }
  1185.  
  1186.   if (typeof callback == 'function') {
  1187.     script.onload = callback;
  1188.   }
  1189.  
  1190.   head.appendChild(script);
  1191. }
  1192.  
  1193. function addScript(scriptString, once=false) {
  1194.   if (once && [].some.call(document.scripts, s => s.text == scriptString)) { return; }
  1195.  
  1196.   let head = document.getElementsByTagName('head')[0];
  1197.   let script = document.createElement('script');
  1198.   script.type = 'text/javascript';
  1199.   script.text = scriptString;
  1200.   head.appendChild(script);
  1201. }
  1202.  
  1203. function splitScriptsFromHtml(html) {
  1204.   const scriptRe = /<script.*?(?:src="(.+?)".*?)?>([\s\S]*?)<\/\s?script>/gmi;
  1205.   let scripts = getAllMatchesAndCaptureGroups(scriptRe, html).map(m => {
  1206.     let [, url, s] = m;
  1207.     return (url)
  1208.       ? { call: function(){ loadScript(url, true); } }
  1209.       : { call: function(){ setTimeout(window.eval(s), 0); } };
  1210.   });
  1211.   let strippedHtml = html.replace(scriptRe, '');
  1212.   return [strippedHtml, scripts];
  1213. }
  1214.  
  1215. function extractDomain(url) {
  1216.   const domainRe = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/\n]+)/i;
  1217.   return domainRe.exec(url)[1];
  1218. }
  1219.  
  1220. function isDefaultLinkText(aNode) {
  1221.   return (aNode.textContent == extractDomain(aNode.href));
  1222. }
  1223.  
  1224. function urlReplace(match, p1, p2, p3) {
  1225.   let isBrackets = (p1 !== undefined);
  1226.   return (isBrackets)
  1227.     ? `<a href="${fixWwwLink(p2 || p3)}">${p1}</a>`
  1228.     : `<a href="${fixWwwLink(match)}">${extractDomain(match)}</a>`;
  1229. }
  1230.  
  1231. function urlReplaceInCode(match, p1, p2, p3) {
  1232.   let isBrackets = (p1 !== undefined);
  1233.   return (isBrackets)
  1234.     ? `<a href="${fixWwwLink(p2 || p3)}">${match}</a>`
  1235.     : `<a href="${fixWwwLink(match)}">${match}</a>`;
  1236. }
  1237.  
  1238. function messageReplyReplace(messageId) {
  1239.   return function(match, mid, rid) {
  1240.     let replyPart = (rid && rid != '0') ? '#' + rid : '';
  1241.     return `<a href="/${mid || messageId}${replyPart}">${match}</a>`;
  1242.   };
  1243. }
  1244.  
  1245. function juickFormat(txt, messageId, isCode) {
  1246.   const urlRe = /(?:\[([^\]\[]+)\](?:\[([^\]]+)\]|\(((?:[a-z]+:\/\/|www\.|ftp\.)(?:\([-\w+*&@#/%=~|$?!:;,.]*\)|[-\w+*&@#/%=~|$?!:;,.])*(?:\([-\w+*&@#/%=~|$?!:;,.]*\)|[\w+*&@#/%=~|$]))\))|\b(?:[a-z]+:\/\/|www\.|ftp\.)(?:\([-\w+*&@#/%=~|$?!:;,.]*\)|[-\w+*&@#/%=~|$?!:;,.])*(?:\([-\w+*&@#/%=~|$?!:;,.]*\)|[\w+*&@#/%=~|$]))/gi;
  1247.   const bqReplace = m => m.replace(/^(?:>|&gt;)\s?/gmi, '');
  1248.   return (isCode)
  1249.     ? formatText(txt, [
  1250.       { pr: 1, re: urlRe, with: urlReplaceInCode },
  1251.       { pr: 1, re: /\B(?:#(\d+))?(?:\/(\d+))?\b/g, with: messageReplyReplace(messageId) },
  1252.       { pr: 1, re: /\B@([\w-]+)\b/gi, with: '<a href="/$1">@$1</a>' },
  1253.     ])
  1254.     : formatText(txt, [
  1255.       { pr: 0, re: /((?:^(?:>|&gt;)\s?[\s\S]+?$\n?)+)/gmi, brackets: true, with: ['<q>', '</q>', bqReplace] },
  1256.       { pr: 1, re: urlRe, with: urlReplace },
  1257.       { pr: 1, re: /\B(?:#(\d+))?(?:\/(\d+))?\b/g, with: messageReplyReplace(messageId) },
  1258.       { pr: 1, re: /\B@([\w-]+)\b/gi, with: '<a href="/$1">@$1</a>' },
  1259.       { pr: 2, re: /\B\*([^\n]+?)\*((?=\s)|(?=$)|(?=[!\"#$%&'*+,\-./:;<=>?@[\]^_`{|}~()]+))/g, brackets: true, with: ['<b>', '</b>'] },
  1260.       { pr: 2, re: /\B\/([^\n]+?)\/((?=\s)|(?=$)|(?=[!\"#$%&'*+,\-./:;<=>?@[\]^_`{|}~()]+))/g, brackets: true, with: ['<i>', '</i>'] },
  1261.       { pr: 2, re: /\b\_([^\n]+?)\_((?=\s)|(?=$)|(?=[!\"#$%&'*+,\-./:;<=>?@[\]^_`{|}~()]+))/g, brackets: true, with: ['<span class="u">', '</span>'] },
  1262.       { pr: 3, re: /\n/g, with: '<br/>' },
  1263.     ]);
  1264. }
  1265.  
  1266. function juickPhotoLink(postId, ext) {
  1267.   return `//i.juick.com/p/${postId}.${ext}`;
  1268. }
  1269.  
  1270. function juickId([, userId, postId, replyId]) {
  1271.   let isReply = replyId && (replyId != '0');
  1272.   return '#' + postId + (isReply ? '/' + replyId : '');
  1273. }
  1274.  
  1275. function getEmbeddableLinkTypes() {
  1276.   return [
  1277.     {
  1278.       name: 'Juick',
  1279.       id: 'embed_juick',
  1280.       className: 'juickEmbed',
  1281.       onByDefault: true,
  1282.       ctsDefault: false,
  1283.       re: /^(?:https?:)?\/\/juick\.com\/(?!tag\/)(?:([\w-]+)\/)?([\d]+\b)(?:#(\d+))?/i,
  1284.       ctsMatch: function(aNode, reResult) {
  1285.         let [url, userId, msgId, replyId] = reResult;
  1286.         let thisPageMsgMatch = /\/(\d+)$/.exec(window.location.pathname);
  1287.         let isSameThread = thisPageMsgMatch && thisPageMsgMatch[1] == msgId;
  1288.         return !isSameThread && replyId && (+replyId) > 150;
  1289.       },
  1290.       makeNode: function(aNode, reResult, div) {
  1291.         let thisType = this;
  1292.         let [url, userId, msgId, replyId] = reResult;
  1293.         let apiUrl = setProto('//api.juick.com/thread?mid=' + msgId);
  1294.  
  1295.         let isReply = (replyId && replyId !== '0');
  1296.         let mrid = (isReply) ? parseInt(replyId, 10) : 0;
  1297.         let idStr = juickId(reResult);
  1298.         let linkStr = '/' + msgId + (isReply ? '#' + mrid : '');
  1299.  
  1300.         if (GM_getValue('enable_move_into_view_on_same_page', true)) {
  1301.           let thisPageMsgMatch = /\/(\d+)$/.exec(window.location.pathname);
  1302.           let isSameThread = thisPageMsgMatch && thisPageMsgMatch[1] == msgId;
  1303.           if (isSameThread) {
  1304.             let linkedItem = Array.from(document.querySelectorAll('li.msg'))
  1305.                                   .find(x => x.id == replyId || (mrid == 0 && x.id == 'msg-' + msgId));
  1306.             if (linkedItem) {
  1307.               let thisMsg = aNode.closest('li.msg > div.msg-cont');
  1308.               let linkedMsg = linkedItem.querySelector('div.msg-cont');
  1309.               setMoveIntoViewOnHover(aNode, thisMsg, linkedMsg, 5, 30);
  1310.               return;
  1311.             }
  1312.           }
  1313.         }
  1314.  
  1315.         const callback = response => {
  1316.           let threadInfo = JSON.parse(response.responseText);
  1317.           let msg = (!isReply) ? threadInfo[0] : threadInfo.find(x => (x.rid == mrid));
  1318.           if (!msg) {
  1319.             throw { reason: `${idStr} does not exist`, response: response, permanent: true };
  1320.           }
  1321.  
  1322.           let withLikes = msg.likes && msg.likes > 0;
  1323.           let isReplyToOp = isReply && (!msg.replyto || msg.replyto == 0);
  1324.           let withReplies = msg.replies && msg.replies > 0;
  1325.           let isNsfw = msg.tags && msg.tags.some(t => t.toUpperCase() == 'NSFW');
  1326.           let isCode = msg.tags && msg.tags.some(t => t.toUpperCase() == 'CODE');
  1327.  
  1328.           if (isCode) { div.classList.add('codePost'); }
  1329.  
  1330.           let tagsStr = (msg.tags) ? '<div class="msg-tags">' + msg.tags.map(x => `<a href="/${msg.user.uname}/?tag=${encodeURIComponent(x)}">${x}</a>`).join('') + '</div>' : '';
  1331.           let photoStr = (msg.photo) ? `<div><a href="${juickPhotoLink(msg.mid, msg.attach)}"><img ${(isNsfw ? 'class="nsfw" ' : '')}src="${unsetProto(msg.photo.small)}"/></a></div>` : '';
  1332.           let replyStr = (isReply)
  1333.             ? ` in reply to <a class="whiteRabbit" href="/${msg.mid}${isReplyToOp ? '' : '#' + msg.replyto}">#${msg.mid}${isReplyToOp ? '' : '/' + msg.replyto}</a>`
  1334.             : '';
  1335.           let likesDiv = (withLikes) ? `<div class="likes"><a href="${linkStr}">${svgIconHtml('heart')}${msg.likes}</a></div>` : '';
  1336.           let commentsDiv = (withReplies) ? `<div class="replies"><a href="${linkStr}">${svgIconHtml('comment')}${msg.replies}</a></div>` : '';
  1337.           div.innerHTML = `
  1338.             <div class="top">
  1339.               <div class="msg-avatar"><a href="/${msg.user.uname}/"><img src="//i.juick.com/a/${msg.user.uid}.png" alt="${msg.user.uname}"></a></div>
  1340.               <div class="top-right">
  1341.                 <div class="top-right-1st">
  1342.                   <div class="title"><a href="/${msg.user.uname}/">@${msg.user.uname}</a></div>
  1343.                   <div class="date"><a href="${linkStr}">${msg.timestamp}</a></div>
  1344.                 </div>
  1345.                 <div class="top-right-2nd">${tagsStr}</div>
  1346.               </div>
  1347.             </div>
  1348.             <div class="desc">${juickFormat(msg.body, msgId, isCode)}</div>${photoStr}
  1349.             <div class="bottom">
  1350.               <div class="embedReply msg-links"><a href="${linkStr}">${idStr}</a>${replyStr}</div>
  1351.               <div class="right">${likesDiv}${commentsDiv}</div>
  1352.             </div>
  1353.             `;
  1354.  
  1355.           let allLinks = div.querySelectorAll('.desc a, .embedReply a.whiteRabbit');
  1356.           let embedContainer = div.parentNode;
  1357.           embedLinks(Array.from(allLinks).reverse(), embedContainer, true, div);
  1358.         };
  1359.  
  1360.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1361.       },
  1362.       makeTitle: function(reResult) {
  1363.         return juickId(reResult);
  1364.       },
  1365.       linkTextUpdate: function(aNode, reResult) {
  1366.         if (isDefaultLinkText(aNode)) {
  1367.           //var isUser = (reResult[1]);
  1368.           aNode.textContent = juickId(reResult); // + ((!isReply && isUser) ? ' (@' + reResult[1] + ')' : '');
  1369.         }
  1370.       }
  1371.     },
  1372.     {
  1373.       name: 'Jpeg and png images',
  1374.       id: 'embed_jpeg_and_png_images',
  1375.       className: 'picture compact',
  1376.       onByDefault: true,
  1377.       ctsDefault: false,
  1378.       re: /\.(jpe?g|png|svg)(:[a-zA-Z]+)?(?:\?[\w&;\?=]*)?$/i,
  1379.       makeNode: function(aNode, reResult, div) {
  1380.         div.innerHTML = `<a href="${aNode.href}"><img src="${aNode.href}"></a>`;
  1381.         return div;
  1382.       }
  1383.     },
  1384.     {
  1385.       name: 'Gif images',
  1386.       id: 'embed_gif_images',
  1387.       className: 'picture compact',
  1388.       onByDefault: true,
  1389.       ctsDefault: true,
  1390.       re: /\.gif(:[a-zA-Z]+)?(?:\?[\w&;\?=]*)?$/i,
  1391.       makeNode: function(aNode, reResult, div) {
  1392.         div.innerHTML = `<a href="${aNode.href}"><img src="${aNode.href}"></a>`;
  1393.         return div;
  1394.       }
  1395.     },
  1396.     {
  1397.       name: 'Video (webm, mp4, ogv)',
  1398.       id: 'embed_webm_and_mp4_videos',
  1399.       className: 'video compact',
  1400.       onByDefault: true,
  1401.       ctsDefault: false,
  1402.       re: /\.(webm|mp4|m4v|ogv)(?:\?[\w&;\?=]*)?$/i,
  1403.       makeNode: function(aNode, reResult, div) {
  1404.         div.innerHTML = `<video src="${aNode.href}" title="${aNode.href}" controls></video>`;
  1405.         return div;
  1406.       }
  1407.     },
  1408.     {
  1409.       name: 'Audio (mp3, ogg, weba, opus, m4a, oga, wav)',
  1410.       id: 'embed_sound_files',
  1411.       className: 'audio singleColumn',
  1412.       onByDefault: true,
  1413.       ctsDefault: false,
  1414.       re: /\.(mp3|ogg|weba|opus|m4a|oga|wav)(?:\?[\w&;\?=]*)?$/i,
  1415.       makeNode: function(aNode, reResult, div) {
  1416.         div.innerHTML = `<audio src="${aNode.href}" title="${aNode.href}" controls></audio>`;
  1417.         return div;
  1418.       }
  1419.     },
  1420.     {
  1421.       name: 'YouTube videos (and playlists)',
  1422.       id: 'embed_youtube_videos',
  1423.       className: 'youtube resizableV singleColumn',
  1424.       onByDefault: true,
  1425.       ctsDefault: false,
  1426.       re: /^(?:https?:)?\/\/(?:www\.|m\.|gaming\.)?(?:youtu(?:(?:\.be\/|be\.com\/(?:v|embed)\/)([-\w]+)|be\.com\/watch)((?:(?:\?|&(?:amp;)?)(?:\w+=[-\.\w]*[-\w]))*)|youtube\.com\/playlist\?list=([-\w]*)(&(amp;)?[-\w\?=]*)?)/i,
  1427.       makeNode: function(aNode, reResult, div) {
  1428.         let [url, v, args, plist] = reResult;
  1429.         let iframeUrl;
  1430.         if (plist) {
  1431.           iframeUrl = '//www.youtube-nocookie.com/embed/videoseries?list=' + plist;
  1432.         } else {
  1433.           let pp = {}; args.replace(/^\?/, '')
  1434.                            .split('&')
  1435.                            .map(s => s.split('='))
  1436.                            .forEach(z => pp[z[0]] = z[1]);
  1437.           let embedArgs = { rel: '0' };
  1438.           if (pp.t) {
  1439.             const tre = /^(?:(\d+)|(?:(\d+)h)?(?:(\d+)m)?(\d+)s|(?:(\d+)h)?(\d+)m|(\d+)h)$/i;
  1440.             let [, t, h, m, s, h1, m1, h2] = tre.exec(pp.t);
  1441.             embedArgs['start'] = (+t) || ((+(h || h1 || h2 || 0))*60*60 + (+(m || m1 || 0))*60 + (+(s || 0)));
  1442.           }
  1443.           if (pp.list) {
  1444.             embedArgs['list'] = pp.list;
  1445.           }
  1446.           v = v || pp.v;
  1447.           let argsStr = Object.keys(embedArgs)
  1448.                               .map(k => `${k}=${embedArgs[k]}`)
  1449.                               .join('&');
  1450.           iframeUrl = `//www.youtube-nocookie.com/embed/${v}?${argsStr}`;
  1451.         }
  1452.         let iframe = makeIframe(iframeUrl, '100%', '360px');
  1453.         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
  1454.         return setContent(div, iframe);
  1455.       }
  1456.     },
  1457.     {
  1458.       name: 'Vimeo videos',
  1459.       id: 'embed_vimeo_videos',
  1460.       className: 'vimeo resizableV',
  1461.       onByDefault: true,
  1462.       ctsDefault: false,
  1463.       re: /^(?:https?:)?\/\/(?:www\.)?(?:player\.)?vimeo\.com\/(?:video\/|album\/[\d]+\/video\/)?([\d]+)/i,
  1464.       makeNode: function(aNode, reResult, div) {
  1465.         let iframe = makeIframe('//player.vimeo.com/video/' + reResult[1], '100%', '360px');
  1466.         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
  1467.         return setContent(div, iframe);
  1468.       }
  1469.     },
  1470.     {
  1471.       name: 'Dailymotion videos',
  1472.       id: 'embed_youtube_videos',
  1473.       className: 'dailymotion resizableV',
  1474.       onByDefault: true,
  1475.       ctsDefault: false,
  1476.       re: /^(?:https?:)?\/\/(?:www\.)?dailymotion\.com\/video\/([a-zA-Z\d]+)(?:_[-%\w]*)?/i,
  1477.       makeNode: function(aNode, reResult, div) {
  1478.         let iframe = makeIframe('//www.dailymotion.com/embed/video/' + reResult[1], '100%', '360px');
  1479.         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
  1480.         return setContent(div, iframe);
  1481.       }
  1482.     },
  1483.     {
  1484.       name: 'Coub clips',
  1485.       id: 'embed_coub_clips',
  1486.       className: 'coub resizableV',
  1487.       onByDefault: true,
  1488.       ctsDefault: false,
  1489.       re: /^(?:https?:)?\/\/(?:www\.)?coub\.com\/(?:view|embed)\/([a-zA-Z\d]+)/i,
  1490.       makeNode: function(aNode, reResult, div) {
  1491.         let embedUrl = '//coub.com/embed/' + reResult[1] + '?muted=false&autostart=false&originalSize=false&startWithHD=false';
  1492.         let iframe = makeIframe(embedUrl, '100%', '360px');
  1493.         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
  1494.         return setContent(div, iframe);
  1495.       }
  1496.     },
  1497.     {
  1498.       name: 'Twitch streams',
  1499.       id: 'embed_twitch',
  1500.       className: 'twitch resizableV',
  1501.       onByDefault: true,
  1502.       ctsDefault: false,
  1503.       re: /^(?:https?:)?\/\/(?:www\.)?twitch\.tv\/(\w+)(?:\/v\/(\d+))?/i,
  1504.       makeNode: function(aNode, reResult, div) {
  1505.         let [, channel, video] = reResult;
  1506.         let url = (video)
  1507.           ? `https://player.twitch.tv/?video=v${video}&autoplay=false`
  1508.           : `https://player.twitch.tv/?channel=${channel}&autoplay=false`;
  1509.         let iframe = makeIframe(url, '100%', '378px');
  1510.         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
  1511.         return setContent(div, iframe);
  1512.       }
  1513.     },
  1514.     {
  1515.       name: 'Steam games',
  1516.       id: 'embed_steam',
  1517.       className: 'steam singleColumn',
  1518.       onByDefault: true,
  1519.       ctsDefault: false,
  1520.       re: /^(?:https?:)?\/\/store\.steampowered\.com\/app\/(\d+)/i,
  1521.       makeNode: function(aNode, reResult, div) {
  1522.         let iframe = makeIframe('//store.steampowered.com/widget/' + reResult[1] + '/', '100%', '190px');
  1523.         return setContent(div, iframe);
  1524.       }
  1525.     },
  1526.     {
  1527.       name: 'Bandcamp music',
  1528.       id: 'embed_bandcamp_music',
  1529.       className: 'bandcamp',
  1530.       onByDefault: true,
  1531.       ctsDefault: false,
  1532.       re: /^(?:https?:)?\/\/(\w+)\.bandcamp\.com\/(track|album)\/([-%\w]+)/i,
  1533.       makeNode: function(aNode, reResult, div) {
  1534.         let thisType = this;
  1535.         let [url, band, pageType, pageName] = reResult;
  1536.  
  1537.         const callback = response => {
  1538.           let videoUrl, videoH;
  1539.           const metaRe = /<\s*meta\s+(?:property|name)\s*=\s*\"([^\"]+)\"\s+content\s*=\s*\"([^\"]*)\"\s*>/gmi;
  1540.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText);
  1541.           matches.forEach(m => {
  1542.             if (m[1] == 'og:video') { videoUrl = m[2]; }
  1543.             if (m[1] == 'video_height') { videoH = parseInt(m[2], 10); }
  1544.           });
  1545.           let isAlbum = pageType == 'album';
  1546.           if (isAlbum) { videoUrl = videoUrl.replace('/tracklist=false', '/tracklist=true'); }
  1547.           videoUrl = videoUrl.replace('/artwork=small', '');
  1548.           let iframe = makeIframe(videoUrl, '100%', '600px');
  1549.           setContent(div, wrapIntoTag(iframe, 'div', 'bandcamp resizableV'));
  1550.           let calcHeight = w => w + videoH + (isAlbum ? 162 : 0);
  1551.           iframe.onload = () => makeResizable(iframe, calcHeight);
  1552.           div.classList.remove('embed');
  1553.         };
  1554.  
  1555.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(url, 3000).then(callback));
  1556.       }
  1557.     },
  1558.     {
  1559.       name: 'SoundCloud music',
  1560.       id: 'embed_soundcloud_music',
  1561.       className: 'soundcloud',
  1562.       onByDefault: true,
  1563.       ctsDefault: false,
  1564.       re: /^(?:https?:)?\/\/(?:www\.)?soundcloud\.com\/(([\w\-\_]*)\/(?:sets\/)?(?!tracks$)([-%\w]*))(?:\/)?/i,
  1565.       makeNode: function(aNode, reResult, div) {
  1566.         let embedUrl = '//w.soundcloud.com/player/?url=//soundcloud.com/' + reResult[1] + '&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true';
  1567.         return setContent(div, makeIframe(embedUrl, '100%', 450));
  1568.       }
  1569.     },
  1570.     {
  1571.       name: 'Mixcloud music',
  1572.       id: 'embed_mixcloud_music',
  1573.       className: 'mixcloud singleColumn',
  1574.       onByDefault: true,
  1575.       ctsDefault: false,
  1576.       re: /^(?:https?:)?\/\/(?:www\.)?mixcloud\.com\/(?!discover\/)([\w]+)\/(?!playlists\/)([-%\w]+)\/?/i,
  1577.       makeNode: function(aNode, reResult, div) {
  1578.         let thisType = this;
  1579.         let [url, author, mix] = reResult;
  1580.         let apiUrl = 'https://www.mixcloud.com/oembed/?format=json&url=' + encodeURIComponent(url);
  1581.  
  1582.         const callback = response => {
  1583.           let json = JSON.parse(response.responseText);
  1584.           div.innerHTML = json.html;
  1585.           div.className = div.classList.remove('embed');
  1586.         };
  1587.  
  1588.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1589.       }
  1590.     },
  1591.     {
  1592.       name: 'Яндекс.Музыка',
  1593.       id: 'embed_yandex_music',
  1594.       className: 'yandexMusic singleColumn',
  1595.       onByDefault: true,
  1596.       ctsDefault: true,
  1597.       re: /^(?:https?:)?\/\/music\.yandex\.ru(?!$|\/artist\/\d+$)(?:\/album\/(\d+))?(?:\/track\/(\d+))?/i,
  1598.       makeNode: function(aNode, reResult, div) {
  1599.         let [url, album, track] = reResult;
  1600.         let isTrack = !!track;
  1601.         let embedUrl = (isTrack)
  1602.           ? `https://music.yandex.ru/iframe/#track/${track}/${album ? album + '/' : ''}`
  1603.           : `https://music.yandex.ru/iframe/#album/${album}/`;
  1604.         return setContent(div, makeIframe(embedUrl, '100%', isTrack ? '100px' : '420px'));
  1605.       }
  1606.     },
  1607.     {
  1608.       name: 'Instagram',
  1609.       id: 'embed_instagram',
  1610.       className: 'instagram resizableV',
  1611.       onByDefault: true,
  1612.       ctsDefault: false,
  1613.       re: /^(?:https?:)?\/\/(?:www\.)?instagram\.com\/p\/([-%\w]*)(?:\/)?(?:\/)?/i,
  1614.       makeNode: function(aNode, reResult, div) {
  1615.         let iframe = makeIframe('//www.instagram.com/p/' + reResult[1] + '/embed', '100%', '722px');
  1616.         iframe.onload = () => makeResizable(iframe, w => w + 82);
  1617.         return setContent(div, iframe);
  1618.       }
  1619.     },
  1620.     {
  1621.       name: 'Flickr images',
  1622.       id: 'embed_flickr_images',
  1623.       className: 'flickr',
  1624.       onByDefault: true,
  1625.       ctsDefault: false,
  1626.       re: /^(?:https?:)?\/\/(?:(?:www\.)?flickr\.com\/photos\/([\w@-]+)\/(\d+)|flic.kr\/p\/(\w+))(?:\/)?/i,
  1627.       makeNode: function(aNode, reResult, div) {
  1628.         let thisType = this;
  1629.         let apiUrl = 'https://www.flickr.com/services/oembed?format=json&url=' + encodeURIComponent(reResult[0]);
  1630.  
  1631.         const callback = response => {
  1632.           let json = JSON.parse(response.responseText);
  1633.           let imageUrl = (json.url) ? json.url : json.thumbnail_url; //.replace('_b.', '_z.');
  1634.           let typeStr = (json.flickr_type == 'photo') ? '' : ` (${json.flickr_type})`;
  1635.           div.innerHTML = `
  1636.             <div class="top">
  1637.               <div class="title">
  1638.                 <a href="${json.web_page}">${json.title}</a>${typeStr} by <a href="${json.author_url}">${json.author_name}</a>
  1639.               </div>
  1640.             </div>
  1641.             <a href="${aNode.href}"><img src="${imageUrl}"></a>`;
  1642.         };
  1643.  
  1644.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1645.       }
  1646.     },
  1647.     {
  1648.       name: 'DeviantArt images',
  1649.       id: 'embed_deviantart_images',
  1650.       className: 'deviantart',
  1651.       onByDefault: true,
  1652.       ctsDefault: false,
  1653.       re: /^(?:https?:)?\/\/([\w-]+)\.deviantart\.com\/art\/([-%\w]+)/i,
  1654.       makeNode: function(aNode, reResult, div) {
  1655.         let thisType = this;
  1656.         let [url, userId, workId] = reResult;
  1657.         let apiUrl = 'https://backend.deviantart.com/oembed?format=json&url=' + encodeURIComponent(url);
  1658.  
  1659.         const callback = response => {
  1660.           let json = JSON.parse(response.responseText);
  1661.           let date = new Date(json.pubdate);
  1662.           let typeStr = (json.type == 'photo') ? '' : ` (${json.type})`;
  1663.           div.innerHTML = `
  1664.             <div class="top">
  1665.               <div class="title">
  1666.                 <a href="${url}">${json.title}</a>${typeStr} by <a href="${json.author_url}">${json.author_name}</a>
  1667.               </div>
  1668.               <div class="date">${date.toLocaleString('ru-RU')}</div>
  1669.             </div>`;
  1670.           if ((json.type == 'rich') && json.html) {
  1671.             div.innerHTML += `<div class="desc">${json.html}...</div>`;
  1672.           } else {
  1673.             let imageClassStr = (json.safety == 'adult') ? 'class="rating_e"' : '';
  1674.             let imageUrl = json.fullsize_url || json.url || json.thumbnail_url;
  1675.             div.innerHTML += `<a href="${aNode.href}"><img ${imageClassStr} src="${imageUrl}"></a>`;
  1676.           }
  1677.         };
  1678.  
  1679.         // consider adding note 'Failed to load (maybe this article can\'t be embedded)'
  1680.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1681.       }
  1682.     },
  1683.     {
  1684.       name: 'Imgur gifv videos',
  1685.       id: 'embed_imgur_gifv_videos',
  1686.       className: 'video compact',
  1687.       onByDefault: true,
  1688.       ctsDefault: false,
  1689.       re: /^(?:https?:)?\/\/(?:\w+\.)?imgur\.com\/([a-zA-Z\d]+)\.gifv/i,
  1690.       makeNode: function(aNode, reResult, div) {
  1691.         div.innerHTML = `<video src="//i.imgur.com/${reResult[1]}.mp4" title="${aNode.href}" controls loop></video>`;
  1692.         return div;
  1693.       }
  1694.     },
  1695.     {
  1696.       name: 'Imgur indirect links',
  1697.       id: 'embed_imgur_indirect_links',
  1698.       className: 'imgur singleColumn',
  1699.       onByDefault: true,
  1700.       ctsDefault: false,
  1701.       re: /^(?:https?:)?\/\/(?:\w+\.)?imgur\.com\/(?:(gallery|a)\/)?(?!gallery|jobs|about|blog|apps)([a-zA-Z\d]+)(?:#\d{1,2}$|#([a-zA-Z\d]+))?(\/\w+)?$/i,
  1702.       makeNode: function(aNode, reResult, div) {
  1703.         let thisType = this;
  1704.         let [, albumType, contentId, albumImageId] = reResult;
  1705.  
  1706.         let url = (albumType && albumImageId)
  1707.           ? 'http://imgur.com/' + albumImageId
  1708.           : 'http://imgur.com/' + (albumType ? albumType + '/' : '') + contentId;
  1709.         let apiUrl = 'https://api.imgur.com/oembed.json?url=' + encodeURIComponent(url);
  1710.  
  1711.         const callback = response => {
  1712.           let json = JSON.parse(response.responseText);
  1713.           let iframe = makeIframeHtmlAsync(
  1714.             json.html,
  1715.             '100%',
  1716.             '24px',
  1717.             iframe => div.appendChild(iframe),
  1718.             iframe => [iframe, iframe.contentWindow.document],
  1719.             e => ({ reason: e.message, permanent: false })
  1720.           ).then(([iframe, doc]) => {
  1721.             return waitAndRunAsync(
  1722.               () => !!doc.querySelector('iframe'),
  1723.               50,
  1724.               100,
  1725.               () => ([iframe, doc]),
  1726.               () => ({ reason: 'timeout', permanent: false })
  1727.             );
  1728.           }).then(([iframe, doc]) => {
  1729.             div.replaceChild(doc.querySelector('iframe'), iframe);
  1730.             div.querySelector('span').remove();
  1731.             div.classList.remove('embed');
  1732.           });
  1733.         };
  1734.  
  1735.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1736.       }
  1737.     },
  1738.     {
  1739.       name: 'Gfycat indirect links',
  1740.       id: 'embed_gfycat_indirect_links',
  1741.       className: 'gfycat',
  1742.       onByDefault: true,
  1743.       ctsDefault: true,
  1744.       re: /^(?:https?:)?\/\/(?:\w+\.)?gfycat\.com\/([a-zA-Z\d]+)$/i,
  1745.       makeNode: function(aNode, reResult, div) {
  1746.         return setContent(div, makeIframe('//gfycat.com/ifr/' + reResult[1], '100%', 480));
  1747.       }
  1748.     },
  1749.     {
  1750.       name: 'Twitter',
  1751.       id: 'embed_twitter_status',
  1752.       className: 'twi',
  1753.       onByDefault: true,
  1754.       ctsDefault: false,
  1755.       re: /^(?:https?:)?\/\/(?:www\.)?(?:mobile\.)?twitter\.com\/([\w-]+)\/status\/([\d]+)/i,
  1756.       makeNode: function(aNode, reResult, div) {
  1757.         let thisType = this;
  1758.         let [url, userId, postId] = reResult;
  1759.         url = url.replace('mobile.','');
  1760.  
  1761.         const predicates = [
  1762.           {
  1763.             msg: response => (response.statusText ? `${response.status} - ${response.statusText}` : `${response.status}`),
  1764.             test: response => response.status != 200,
  1765.             permanent: response => response.status != 503
  1766.           },
  1767.           {
  1768.             msg: response => 'Account @' + userId + ' is suspended',
  1769.             test: response => response.finalUrl.endsWith('account/suspended'),
  1770.             permanent: response => true
  1771.           },
  1772.           {
  1773.             msg: response => 'Account @' + userId + ' is protected',
  1774.             test: response => response.finalUrl.indexOf('protected_redirect=true') != -1,
  1775.             permanent: response => true
  1776.           }
  1777.         ];
  1778.         const callback = response => {
  1779.           let images = [];
  1780.           let userGenImg = false;
  1781.           let isVideo = false;
  1782.           let videoUrl, videoW, videoH;
  1783.           let title, description;
  1784.           const metaRe = /<\s*meta\s+property\s*=\s*\"([^\"]+)\"\s+content\s*=\s*\"([^\"]*)\"\s*>/gmi;
  1785.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText);
  1786.           matches.forEach(m => {
  1787.             if (m[1] == 'og:title') { title = m[2]; }
  1788.             if (m[1] == 'og:description') {
  1789.               description = htmlDecode(m[2])
  1790.                 .replace(/\n/g,'<br/>')
  1791.                 .replace(/\B@(\w{1,15})\b/gmi, '<a href="//twitter.com/$1">@$1</a>')
  1792.                 .replace(/#(\w+)/gmi, '<a href="//twitter.com/hashtag/$1">#$1</a>')
  1793.                 .replace(/(?:https?:)?\/\/t\.co\/([\w]+)/gmi, '<a href="$&">$&</a>');
  1794.             }
  1795.             if (m[1] == 'og:image') { images.push(m[2]); }
  1796.             if (m[1] == 'og:image:user_generated') { userGenImg = true; }
  1797.             if (m[1] == 'og:video:url') { videoUrl = m[2]; isVideo = true; }
  1798.             if (m[1] == 'og:video:height') { videoH = +m[2]; }
  1799.             if (m[1] == 'og:video:width') { videoW = +m[2]; }
  1800.           });
  1801.           const timestampMsRe = /\bdata-time-ms\s*=\s*\"([^\"]+)\"/gi;
  1802.           let timestampMsResult = timestampMsRe.exec(response.responseText);
  1803.           let dateDiv = (timestampMsResult) ? `<div class="date">${new Date(+timestampMsResult[1]).toLocaleString('ru-RU')}</div>` : '';
  1804.           div.innerHTML = `
  1805.             <div class="top">
  1806.               <div class="title">
  1807.                 ${title} (<a href="//twitter.com/${userId}">@${userId}</a>)
  1808.               </div>
  1809.               ${dateDiv}
  1810.             </div>
  1811.             <div class="desc">${description}</div>`;
  1812.           if (userGenImg) { div.innerHTML += images.map(x => { return `<a href="${x}"><img src="${x}"></a>`; }).join(''); }
  1813.           if (isVideo) {
  1814.             let { w, h } = fitToBounds(videoW, videoH, 620, 720);
  1815.             let ctsVideo = makeCts(
  1816.               () => setContent(ctsVideo, makeIframe(videoUrl, w + 'px', h + 'px')),
  1817.               `<img src="${images[0]}">${svgIconHtml('play')}`
  1818.             );
  1819.             div.appendChild(ctsVideo);
  1820.           }
  1821.         };
  1822.  
  1823.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(url, 3000, predicates).then(callback));
  1824.       }
  1825.     },
  1826.     {
  1827.       name: 'Facebook',
  1828.       id: 'embed_facebook',
  1829.       className: 'fbEmbed singleColumn',
  1830.       onByDefault: true,
  1831.       ctsDefault: false,
  1832.       re: /^(?:https?:)?\/\/(?:www\.|m\.)?facebook\.com\/(?:[\w.]+\/(?:posts|videos|photos)\/[\w:./]+(?:\?[\w=%&.]+)?|(?:photo|video)\.php\?[\w=%&.]+)/i,
  1833.       makeNode: function(aNode, reResult, div) {
  1834.         let thisType = this;
  1835.  
  1836.         const promiseCallback = () => {
  1837.           setTimeout(loadScript('https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3', false, undefined, true), 0);
  1838.           div.insertAdjacentHTML('beforeend', `<div class="fb-post" data-href="${aNode.href}" data-width="640" />`);
  1839.           return waitAndRunAsync(
  1840.             () => !!div.querySelector('iframe[height]'),
  1841.             20,
  1842.             100,
  1843.             () => {},
  1844.             () => ({ reason: 'timeout', permanent: false })
  1845.           ).then(() => {
  1846.             div.querySelector('span').remove();
  1847.             div.classList.remove('embed');
  1848.           }).catch(e => {
  1849.             console.log('Juick tweaks: time out on facebook embedding, applying workaround.');
  1850.             let embedUrl = 'https://www.facebook.com/plugins/post.php?width=640&height=570&href=' + encodeURIComponent(reResult[0]);
  1851.             div.innerHTML = '';
  1852.             div.appendChild(makeIframe(embedUrl, '100%', 570));
  1853.             div.classList.remove('embed');
  1854.             div.classList.add('fallback');
  1855.           });
  1856.         };
  1857.  
  1858.         return doFetchingEmbed(aNode, reResult, div, thisType, promiseCallback);
  1859.       }
  1860.     },
  1861.     {
  1862.       name: 'Google+',
  1863.       id: 'embed_google_plus',
  1864.       className: 'gplusEmbed',
  1865.       onByDefault: true,
  1866.       ctsDefault: false,
  1867.       re: /^(?:https?:)?\/\/plus\.google\.com\/(?:u\/0\/)?(\d+|\+[\w%]+)\/posts\/(\w+)/i,
  1868.       makeNode: function(aNode, reResult, div) {
  1869.         let thisType = this;
  1870.         let [url, author, postId] = reResult;
  1871.  
  1872.         const promiseCallback = () => {
  1873.           let id = randomId();
  1874.           div.insertAdjacentHTML('beforeend', `<div id="${id}" />`);
  1875.           setTimeout(loadScript('https://apis.google.com/js/plusone.js', false, () => {
  1876.             addScript('({"parsetags": "explicit"})', true);
  1877.             addScript(`gapi.post.render("${id}", {href: "${url}"});`, false);
  1878.           }, false), 0);
  1879.           return waitAndRunAsync(
  1880.             () => !!div.querySelector('div[style]'),
  1881.             30,
  1882.             100,
  1883.             () => {},
  1884.             () => ({ reason: 'Can\'t show this post', permanent: true })
  1885.           ).then(() => {
  1886.             div.querySelector('span').remove();
  1887.             div.classList.remove('embed');
  1888.           });
  1889.         };
  1890.  
  1891.         return doFetchingEmbed(aNode, reResult, div, thisType, promiseCallback);
  1892.       }
  1893.     },
  1894.     {
  1895.       name: 'Tumblr',
  1896.       id: 'embed_tumblr',
  1897.       className: 'tumblr singleColumn',
  1898.       onByDefault: true,
  1899.       ctsDefault: true,
  1900.       re: /^(?:https?:)?\/\/(?:([\w\-\_]+)\.)?tumblr\.com\/post\/([\d]*)(?:\/([-%\w]*))?/i,
  1901.       makeNode: function(aNode, reResult, div) {
  1902.         let thisType = this;
  1903.         let apiUrl = 'https://www.tumblr.com/oembed/1.0?url=' + reResult[0];
  1904.  
  1905.         const callback = response => {
  1906.           let json = JSON.parse(response.responseText);
  1907.           return makeIframeHtmlAsync(
  1908.             json.html,
  1909.             '100%',
  1910.             '24px',
  1911.             iframe => div.appendChild(iframe),
  1912.             iframe => [iframe, iframe.contentWindow.document],
  1913.             e => ({ reason: e.message, permanent: false })
  1914.           ).then(([iframe, doc]) => {
  1915.             return waitAndRunAsync(
  1916.               () => !!doc.querySelector('iframe[height]'),
  1917.               50,
  1918.               100,
  1919.               () => ([iframe, doc]),
  1920.               () => ({ reason: 'timeout', permanent: false })
  1921.             );
  1922.           }).then(([iframe, doc]) => {
  1923.             div.replaceChild(doc.querySelector('iframe[height]'), iframe);
  1924.             div.querySelector('span').remove();
  1925.             div.classList.remove('embed');
  1926.           });
  1927.         };
  1928.  
  1929.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1930.       }
  1931.     },
  1932.     {
  1933.       name: 'Reddit',
  1934.       id: 'embed_reddit',
  1935.       className: 'reddit singleColumn',
  1936.       onByDefault: true,
  1937.       ctsDefault: false,
  1938.       re: /^(?:https?:)?\/\/(?:www\.|np\.|m\.)?reddit\.com\/r\/([\w]+)\/comments\/(\w+)(?:\/(?:\w+(?:\/(\w+)?)?)?)?/i,
  1939.       makeNode: function(aNode, reResult, div) {
  1940.         let thisType = this;
  1941.         let apiUrl = 'https://www.reddit.com/oembed?url=' + encodeURIComponent(reResult[0]);
  1942.  
  1943.         const callback = response => {
  1944.           let json = JSON.parse(response.responseText);
  1945.           let [h, ss] = splitScriptsFromHtml(json.html);
  1946.           div.innerHTML += h;
  1947.           ss.forEach(s => s.call());
  1948.           return waitAndRunAsync(
  1949.             () => { let iframe = div.querySelector('iframe'); return (iframe && (parseInt(iframe.height) > 30)); },
  1950.             30,
  1951.             100,
  1952.             () => {},
  1953.             () => ({ reason: 'timeout', permanent: false })
  1954.           ).then(iframe => {
  1955.             div.querySelector('iframe').style.margin = '0px';
  1956.             div.querySelector('span').remove();
  1957.             div.classList.remove('embed');
  1958.           });
  1959.         };
  1960.  
  1961.         // consider adding note 'Failed to load (maybe this article can\'t be embedded)'
  1962.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1963.       }
  1964.     },
  1965.     {
  1966.       name: 'WordPress',
  1967.       id: 'embed_wordpress',
  1968.       className: 'wordpress singleColumn',
  1969.       onByDefault: true,
  1970.       ctsDefault: false,
  1971.       re: /^(?:https?:)?\/\/(\w+)\.wordpress\.com\/(\d{4})\/(\d{2})\/(\d{2})\/([-\w%\u0400-\u04FF]+)(?:\/)?/i,
  1972.       makeNode: function(aNode, reResult, div) {
  1973.         let thisType = this;
  1974.         let [url,site,year,month,day,slug] = reResult;
  1975.         let apiUrl = `https://public-api.wordpress.com/rest/v1.1/sites/${site}.wordpress.com/posts/slug:${slug}`;
  1976.  
  1977.         const callback = response => {
  1978.           let json = JSON.parse(response.responseText);
  1979.           div.innerHTML = `
  1980.             <div class="top">
  1981.               <div class="title">
  1982.                 "<a href="${url}">${json.title}</a>" by <a href="${json.author.URL}">${json.author.name}</a>
  1983.               </div>
  1984.               <div class="date">${new Date(json.date).toLocaleString('ru-RU')}</div>
  1985.             </div>
  1986.             <hr/>
  1987.             <div class="desc">${json.content}</div>`;
  1988.         };
  1989.  
  1990.         // consider adding note 'Failed to load (maybe this article can\'t be embedded)'
  1991.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  1992.       }
  1993.     },
  1994.     {
  1995.       name: 'SlideShare',
  1996.       id: 'embed_slideshare',
  1997.       className: 'slideshare singleColumn',
  1998.       onByDefault: true,
  1999.       ctsDefault: false,
  2000.       re: /^(?:https?:)?\/\/(?:\w+\.)?slideshare\.net\/(\w+)\/([-%\w]+)/i,
  2001.       makeNode: function(aNode, reResult, div) {
  2002.         let thisType = this;
  2003.         let [url, author, id] = reResult;
  2004.         let apiUrl = 'http://www.slideshare.net/api/oembed/2?format=json&url=' + url;
  2005.  
  2006.         const callback = response => {
  2007.           let json = JSON.parse(response.responseText);
  2008.           let baseSize = 640;
  2009.           let newH = 1.0 * baseSize / json.width * json.height;
  2010.           let iframeStr = json.html
  2011.                               .match(/<iframe[^>]+>[\s\S]*?<\/iframe>/i)[0]
  2012.                               .replace(/width="\d+"/i, `width="${baseSize}"`)
  2013.                               .replace(/height="\d+"/i, `height="${newH}"`);
  2014.           div.innerHTML = iframeStr;
  2015.         };
  2016.  
  2017.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  2018.       }
  2019.     },
  2020.     {
  2021.       name: 'Gist',
  2022.       id: 'embed_gist',
  2023.       className: 'gistEmbed singleColumn',
  2024.       onByDefault: true,
  2025.       ctsDefault: false,
  2026.       re: /^(?:https?:)?\/\/gist.github.com\/(?:([\w-]+)\/)?([A-Fa-f0-9]+)\b/i,
  2027.       makeNode: function(aNode, reResult, div) {
  2028.         let thisType = this;
  2029.         let [url, , id] = reResult;
  2030.         let apiUrl = 'https://gist.github.com/' + id + '.json';
  2031.  
  2032.         const callback = response => {
  2033.           let json = JSON.parse(response.responseText);
  2034.           let date = new Date(json.created_at).toLocaleDateString('ru-RU');
  2035.           div.innerHTML = `
  2036.             <div class="top">
  2037.               <div class="title">
  2038.                 "${json.description}" by <a href="https://gist.github.com/${json.owner}">${json.owner}</a>
  2039.               </div>
  2040.               <div class="date">${date}</div>
  2041.             </div>
  2042.             <link rel="stylesheet" href="${htmlEscape(json.stylesheet)}"></link>
  2043.             ${json.div}`;
  2044.         };
  2045.  
  2046.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  2047.       }
  2048.     },
  2049.     {
  2050.       name: 'JSFiddle',
  2051.       id: 'embed_jsfiddle',
  2052.       className: 'jsfiddle',
  2053.       onByDefault: true,
  2054.       ctsDefault: false,
  2055.       re: /^(?:https?:)?(\/\/(?:jsfiddle|fiddle.jshell)\.net\/(?:(?!embedded\b)[\w]+\/?)+)/i,
  2056.       makeNode: function(aNode, reResult, div) {
  2057.         let embedUrl = reResult[1].replace(/[^\/]$/, '$&/') + 'embedded/';
  2058.         return setContent(div, makeIframe(embedUrl, '100%', 500));
  2059.       }
  2060.     },
  2061.     {
  2062.       name: 'Codepen',
  2063.       id: 'embed_codepen',
  2064.       className: 'codepen singleColumn',
  2065.       onByDefault: true,
  2066.       ctsDefault: false,
  2067.       re: /^(?:https?:)?\/\/codepen\.io\/(\w+)\/(?:pen|full)\/(\w+)/i,
  2068.       makeNode: function(aNode, reResult, div) {
  2069.         let thisType = this;
  2070.         let [url] = reResult;
  2071.         let apiUrl = 'https://codepen.io/api/oembed?format=json&url=' + encodeURIComponent(url.replace('/full/', '/pen/'));
  2072.  
  2073.         const callback = response => {
  2074.           let json = JSON.parse(response.responseText);
  2075.           div.innerHTML = `
  2076.             <div class="top">
  2077.               <div class="title">"${json.title}" by <a href="${json.author_url}">${json.author_name}</a></div>
  2078.             </div>
  2079.             ${json.html}`;
  2080.         };
  2081.  
  2082.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  2083.       }
  2084.     },
  2085.     {
  2086.       name: 'XKCD',
  2087.       id: 'embed_xkcd',
  2088.       className: 'xkcd singleColumn',
  2089.       onByDefault: true,
  2090.       ctsDefault: false,
  2091.       re: /^(?:https?:)?\/\/xkcd\.com\/(\d+)/i,
  2092.       makeNode: function(aNode, reResult, div) {
  2093.         let thisType = this;
  2094.         let [url, xkcdId] = reResult;
  2095.  
  2096.         const callback = response => {
  2097.           let [, title] = /<div id="ctitle">([\s\S]+?)<\/div>/.exec(response.responseText) || [];
  2098.           let [, comic] = /<div id="comic">([\s\S]+?)<\/div>/.exec(response.responseText) || [];
  2099.           div.innerHTML = `
  2100.             <div class="top">
  2101.               <div class="title">${title}</div>
  2102.             </div>
  2103.             <a href="${url}" class="comic">${comic}</a>`;
  2104.         };
  2105.  
  2106.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(url, 3000).then(callback));
  2107.       },
  2108.       makeTitle: function(reResult) {
  2109.         return 'xkcd.com/' + reResult[1] + '/';
  2110.       },
  2111.       linkTextUpdate: function(aNode, reResult) {
  2112.         if (isDefaultLinkText(aNode)) {
  2113.           aNode.textContent = 'xkcd.com/' + reResult[1] + '/';
  2114.         }
  2115.       }
  2116.     },
  2117.     {
  2118.       name: 'lichess',
  2119.       id: 'embed_lichess',
  2120.       className: 'lichess singleColumn',
  2121.       onByDefault: true,
  2122.       ctsDefault: false,
  2123.       re: /^(?:https?:)?\/\/lichess\.org\/(study|)(?:\/?embed)?\/?((?=[a-z]*[A-Z0-9])[A-Za-z0-9\/]{8})/,
  2124.       makeNode: function(aNode, reResult, div) {
  2125.         let [, mode, rest] = reResult;
  2126.         let embedUrl = ['https://lichess.org', mode, 'embed', rest].filter(a => !!a).join('/');
  2127.         let iframe = makeIframe(embedUrl, '100%', '400px');
  2128.         iframe.onload = () => makeResizableToRatio(iframe, 397.0 / 600.0);
  2129.         return setContent(div, iframe);
  2130.       }
  2131.     },
  2132.     {
  2133.       name: 'arXiv',
  2134.       id: 'embed_arxiv',
  2135.       className: 'arxiv singleColumn',
  2136.       onByDefault: true,
  2137.       ctsDefault: false,
  2138.       re: /^(?:https?:)?\/\/(?:\w+\.)?arxiv\.org\/(?:abs|pdf)\/(\d+\.\d+)(v\d+)?/i,
  2139.       makeNode: function(aNode, reResult, div) {
  2140.         let thisType = this;
  2141.         let [url, arxivId, rev] = reResult;
  2142.         let absUrl = 'https://arxiv.org/abs/' + arxivId + (rev || '');
  2143.         let pdfUrl = 'https://arxiv.org/pdf/' + arxivId + (rev || '');
  2144.  
  2145.         const callback = response => {
  2146.           const metaRe = /<\s*meta\s+name\s*=\s*\"([^\"]+)\"\s+content\s*=\s*\"([^\"]*)\"\s*\/?>/gmi;
  2147.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText).map(m => ({ k: m[1].toLowerCase(), v: m[2] }));
  2148.           let title = matches.find(x => x.k == 'citation_title').v;
  2149.  
  2150.           let [, dateline] = /<div class="dateline">\s*([\s\S]+?)<\/div>/.exec(response.responseText) || [];
  2151.           let [, abstract] = /<blockquote class="abstract\b.*?">\s*<span class="descriptor">[\s\S]*?<\/span>\s*([\s\S]+?)<\/blockquote>/.exec(response.responseText) || [];
  2152.           let authors = getAllMatchesAndCaptureGroups(/<a href="(\/find.+?)">(.+?)<\/a>/gi, response.responseText).map(m => ({ url: m[1], name: m[2] }));
  2153.           let authorsStr = authors.map(a => `<a href="${a.url}">${a.name}</a>`).join(', ');
  2154.  
  2155.           div.innerHTML = `
  2156.             <div class="top">
  2157.               <div class="title"><a href="${absUrl}">${title}</a> (<a href="${pdfUrl}">pdf</a>)</div>
  2158.               <div class="date">${dateline}</div>
  2159.             </div>
  2160.             <div class="abstract">${abstract}</div>
  2161.             <div class="bottom">
  2162.               <div class="authors">${authorsStr}</div>
  2163.             </div>`;
  2164.         };
  2165.  
  2166.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(absUrl, 3000).then(callback));
  2167.       },
  2168.       makeTitle: function(reResult) {
  2169.         return 'arXiv:' + reResult[1] + (reResult[2] || '');
  2170.       },
  2171.       linkTextUpdate: function(aNode, reResult) {
  2172.         if (isDefaultLinkText(aNode)) {
  2173.           aNode.textContent = 'arXiv:' + reResult[1] + (reResult[2] || '');
  2174.         }
  2175.       }
  2176.     },
  2177.     {
  2178.       name: 'Pixiv',
  2179.       id: 'embed_pixiv',
  2180.       className: 'pixiv',
  2181.       onByDefault: true,
  2182.       ctsDefault: false,
  2183.       re: /^(?:https?:)?\/\/www\.pixiv\.net\/member_illust\.php\?((?:\w+=\w+&)*illust_id=(\d+)(?:&\w+=\w+)*)/i,
  2184.       makeNode: function(aNode, reResult, div) {
  2185.         let thisType = this;
  2186.         let [url, , illustId] = reResult;
  2187.  
  2188.         const predicates = [
  2189.           {
  2190.             msg: response => 'Private work',
  2191.             test: response => (response.status != 200) && response.responseText.includes('work private'),
  2192.             permanent: response => true
  2193.           },
  2194.           {
  2195.             msg: response => (response.statusText ? `${response.status} - ${response.statusText}` : `${response.status}`),
  2196.             test: response => response.status != 200,
  2197.             permanent: response => response.status != 503
  2198.           },
  2199.           {
  2200.             msg: response => 'Deleted work',
  2201.             test: response => response.responseText.includes('This work was deleted'),
  2202.             permanent: response => true
  2203.           }
  2204.         ];
  2205.         const callback = response => {
  2206.           let isMultipage = (url.includes('mode=manga') || response.responseText.includes('member_illust.php?mode=manga'));
  2207.           const metaRe = /<\s*meta\s+(?:property|name)\s*=\s*\"([^\"]+)\"\s+content\s*=\s*\"([^\"]*)\"\s*\/?>/gmi;
  2208.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText).map(m => ({ k: (m[1] || m[3]).toLowerCase(), v: m[2] }));
  2209.           let meta = {}; [].forEach.call(matches, m => { meta[m.k] = m.v; });
  2210.           let title = meta['twitter:title'] || meta['og:title'];
  2211.           let image = /* meta['twitter:image'] || meta['og:image'] || */ '//embed.pixiv.net/decorate.php?illust_id=' + illustId;
  2212.           let description = meta['twitter:description'] || meta['og:description'];
  2213.  
  2214.           let [, dateStr] = /<span\s+class=\"date\">([^<]+)<\/span>/.exec(response.responseText) || [];
  2215.           let [, authorId, authorName] = /<a\s+href="\/?member\.php\?id=(\d+)">\s*<img\s+src="[^"]+"\s+alt="[^"]+"\s+title="([^"]+)"\s\/?>/i.exec(response.responseText) || [];
  2216.  
  2217.           let dateDiv = (dateStr) ? `<div class="date">${dateStr}</div>` : '';
  2218.           let authorStr = (authorId) ? ` by <a href="//www.pixiv.net/member_illust.php?id=${authorId}">${authorName}</a>` : '';
  2219.           div.innerHTML = `
  2220.             <div class="top">
  2221.               <div class="title">
  2222.                 ${isMultipage ? '(multipage) ' : ''}<a href="${url}">${title}</a>${authorStr}
  2223.               </div>
  2224.               ${dateDiv}
  2225.             </div>
  2226.             <a href="${aNode.href}"><img src="${image}"></a>
  2227.             ${description ? '<p>' + description + '</p>' : ''}`;
  2228.         };
  2229.  
  2230.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(url.replace(/mode=\w+/, 'mode=medium'), 3000, predicates).then(callback));
  2231.       }
  2232.     },
  2233.     {
  2234.       name: 'Gelbooru',
  2235.       id: 'embed_gelbooru',
  2236.       className: 'gelbooru booru',
  2237.       onByDefault: true,
  2238.       ctsDefault: false,
  2239.       re: /^(?:https?:)?\/\/(?:www\.)?(gelbooru\.com|safebooru\.org)\/index\.php\?((?:\w+=\w+&)*id=(\d+)(?:&\w+=\w+)*)/i,
  2240.       makeNode: function(aNode, reResult, div) {
  2241.         let thisType = this;
  2242.         let [url, domain, , illustId] = reResult;
  2243.         let apiUrl = `https://${domain}/index.php?page=dapi&s=post&q=index&id=${illustId}`;
  2244.  
  2245.         const callback = response => {
  2246.           let count, id, previewUrl, md5, rating, createdAt, change, hasNotes=false, hasComments=false;
  2247.           const attributeRe = /(\w+)="([^"]+)"/gmi;
  2248.           let matches = getAllMatchesAndCaptureGroups(attributeRe, response.responseText);
  2249.           matches.forEach(([, attr, val]) => {
  2250.             if (attr == 'count') { count = +val; }
  2251.             if (attr == 'id') { id = val; }
  2252.             if (attr == 'preview_url') { previewUrl = val; }
  2253.             if (attr == 'md5') { md5 = val; }
  2254.             if (attr == 'rating') { rating = val; }
  2255.             if (attr == 'created_at') { createdAt = new Date(val); }
  2256.             if (attr == 'change') { change = new Date(1000 * parseInt(val, 10)); }
  2257.             if (attr == 'has_notes') { hasNotes = String(val).toLowerCase() === 'true'; }
  2258.             if (attr == 'has_comments') { hasComments = String(val).toLowerCase() === 'true'; }
  2259.           });
  2260.           if (count === 0) {
  2261.             throw { reason: illustId + ' is not available', response: response, permanent: true };
  2262.           }
  2263.  
  2264.           let saucenaoUrl = `https://img3.saucenao.com/booru/${md5[0]}/${md5[1]}/${md5}_2.jpg`;
  2265.           let createdDateStr = createdAt.toLocaleDateString('ru-RU');
  2266.           let changedDateStr = change.toLocaleDateString('ru-RU');
  2267.           if (createdDateStr != changedDateStr) { createdDateStr += ` (${changedDateStr})`; }
  2268.           let ratingStr = (rating == 's') ? '' : ` (${rating})`;
  2269.           div.innerHTML = `
  2270.             <div class="top">
  2271.               <div class="title">
  2272.                 <a href="${url}">${id}</a>${ratingStr}${hasNotes ? ' (notes)' : ''}${hasComments ? ' (comments)' : ''}
  2273.               </div>
  2274.               <div class="date">${createdDateStr}</div>
  2275.             </div>
  2276.             <div class="bottom-right">
  2277.               <div>
  2278.                 <a href="https://www.iqdb.org/?url=${previewUrl}">IQDB</a>, <a href="https://saucenao.com/search.php?url=${previewUrl}">SauceNAO</a>
  2279.               </div>
  2280.             </div>
  2281.             <a href="${aNode.href}">
  2282.               <img class="rating_${rating}" src="${previewUrl}" onerror="this.onerror=null;this.src='${saucenaoUrl}';">
  2283.             </a>
  2284.             `;
  2285.         };
  2286.  
  2287.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  2288.       },
  2289.       makeTitle: function([, domain, , illustId]) { return `${domain} (${illustId})`; },
  2290.       linkTextUpdate: function(aNode, [, , , illustId]) { aNode.textContent += ` (${illustId})`; }
  2291.     },
  2292.     {
  2293.       name: 'Danbooru',
  2294.       id: 'embed_danbooru',
  2295.       className: 'danbooru booru',
  2296.       onByDefault: true,
  2297.       ctsDefault: false,
  2298.       re: /^(?:https?:)?\/\/(danbooru|safebooru)\.donmai\.us\/post(?:s|\/show)\/(\d+)/i,
  2299.       makeNode: function(aNode, reResult, div) {
  2300.         let thisType = this;
  2301.         let [url, domain, id] = reResult;
  2302.         url = url.replace('http:', 'https:');
  2303.         let urls = (domain == 'safebooru')
  2304.           ? [`https://${domain}.donmai.us/posts/${id}.json`]
  2305.           : [`https://${domain}.donmai.us/posts/${id}.json`, `https://safebooru.donmai.us/posts/${id}.json`];
  2306.  
  2307.         const callback = response => {
  2308.           let [finalUrl, finalDomain, ] = thisType.re.exec(response.finalUrl);
  2309.           let json = JSON.parse(response.responseText);
  2310.           if (!json.preview_file_url) {
  2311.             div.innerHTML = `<span>Can't show <a href="${finalUrl}">${id}</a> (<a href="${url}">${json.rating}</a>)</span>`;
  2312.             return;
  2313.           }
  2314.  
  2315.           let finalPreviewUrl = `https://${finalDomain}.donmai.us${json.preview_file_url}`;
  2316.           let saucenaoUrl = `https://img3.saucenao.com/booru/${json.md5[0]}/${json.md5[1]}/${json.md5}_2.jpg`;
  2317.           let tagsStr = [json.tag_string_artist, json.tag_string_character, json.tag_string_copyright]
  2318.                           .filter(s => s != '')
  2319.                           .map(s => (s.count(' ') > 1) ? naiveEllipsisRight(s, 40) : `<a href="https://${finalDomain}.donmai.us/posts?tags=${encodeURIComponent(s)}">${s}</a>`)
  2320.                           .join('<br>');
  2321.           let notesStr = (json.last_noted_at) ? ' (notes)' : '';
  2322.           let commentsStr = (json.last_commented_at) ? ' (comments)' : '';
  2323.           let ratingStr = (json.rating == 's') ? '' : ` (<a href="${url}">${json.rating}</a>)`;
  2324.           let createdDateStr = (new Date(json.created_at)).toLocaleDateString('ru-RU');
  2325.           let updatedDateStr = (new Date(json.updated_at)).toLocaleDateString('ru-RU');
  2326.           if (createdDateStr != updatedDateStr) { createdDateStr += ` (${updatedDateStr})`; }
  2327.           div.innerHTML = `
  2328.             <div class="top">
  2329.               <div class="title"><a href="${finalUrl}">${id}</a>${ratingStr}${notesStr}${commentsStr}</div>
  2330.               <div class="date">${createdDateStr}</div>
  2331.             </div>
  2332.             <div class="bottom-right">
  2333.               <div class="booru-tags">${tagsStr}</div>
  2334.               <div>
  2335.                 <a href="https://www.iqdb.org/?url=${finalPreviewUrl}">IQDB</a>, <a href="https://saucenao.com/search.php?url=${finalPreviewUrl}">SauceNAO</a>
  2336.               </div>
  2337.             </div>
  2338.             <a href="${finalUrl}">
  2339.               <img class="rating_${json.rating}" src="${finalPreviewUrl}" onerror="this.onerror=null;this.src='${saucenaoUrl}';">
  2340.             </a>
  2341.             `;
  2342.         };
  2343.  
  2344.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrFirstResponse(urls, 3000).then(callback));
  2345.       },
  2346.       makeTitle: function([, domain, id]) { return `${domain} (${id})`; },
  2347.       linkTextUpdate: function(aNode, [, , id]) {
  2348.         aNode.href = aNode.href.replace('http:', 'https:');
  2349.         aNode.textContent += ` (${id})`;
  2350.       }
  2351.     },
  2352.     {
  2353.       name: 'Konachan',
  2354.       id: 'embed_konachan',
  2355.       className: 'konachan booru',
  2356.       onByDefault: true,
  2357.       ctsDefault: false,
  2358.       re: /^(?:https?:)?\/\/konachan\.(com|net)\/post\/show\/(\d+)/i,
  2359.       makeNode: function(aNode, reResult, div) {
  2360.         let thisType = this;
  2361.         let [url, domain, id] = reResult;
  2362.         url = url.replace('.com/', '.net/');
  2363.         let unsafeUrl = url.replace('.net/', '.com/');
  2364.         let apiUrls = [ `https://konachan.net/post.json?tags=id:${id}`, `https://konachan.com/post.json?tags=id:${id}` ];
  2365.  
  2366.         const callback = response => {
  2367.           let json = (JSON.parse(response.responseText))[0];
  2368.           if (!json || !json.preview_url) {
  2369.             div.innerHTML = `<span>Can't show <a href="${url}">${id}</a> (<a href="${unsafeUrl}">${json.rating}</a>)</span>'`;
  2370.             return;
  2371.           }
  2372.  
  2373.           let saucenaoUrl = `https://img3.saucenao.com/booru/${json.md5[0]}/${json.md5[1]}/${json.md5}_2.jpg`;
  2374.           let createdDateStr = (new Date(1000 * parseInt(json.created_at, 10))).toLocaleDateString('ru-RU');
  2375.           let ratingStr = (json.rating == 's') ? '' : ` (<a href="${unsafeUrl}">${json.rating}</a>)`;
  2376.           div.innerHTML = `
  2377.             <div class="top">
  2378.               <div class="title"><a href="${url}">${id}</a>${ratingStr}</div>
  2379.               <div class="date">${createdDateStr}</div>
  2380.             </div>
  2381.             <div class="bottom-right">
  2382.               <div>
  2383.                 <a href="https://www.iqdb.org/?url=${json.preview_url}">IQDB</a>, <a href="https://saucenao.com/search.php?url=${json.preview_url}">SauceNAO</a>
  2384.               </div>
  2385.             </div>
  2386.             <a href="${url}"><img class="rating_${json.rating}" src="${json.preview_url}" onerror="this.onerror=null;this.src='${saucenaoUrl}';"></a>
  2387.             `;
  2388.         };
  2389.  
  2390.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrFirstResponse(apiUrls, 3000).then(callback));
  2391.       },
  2392.       makeTitle: function([, , id]) { return `konachan (${id})`; },
  2393.       linkTextUpdate: function(aNode, [, , id]) { aNode.textContent += ` (${id})`; }
  2394.     },
  2395.     {
  2396.       name: 'yande.re',
  2397.       id: 'embed_yandere',
  2398.       className: 'yandere booru',
  2399.       onByDefault: true,
  2400.       ctsDefault: false,
  2401.       re: /^(?:https?:)?\/\/yande.re\/post\/show\/(\d+)/i,
  2402.       makeNode: function(aNode, reResult, div) {
  2403.         let thisType = this;
  2404.         let [url, id] = reResult;
  2405.         let apiUrl = 'https://yande.re/post.json?tags=id:' + id;
  2406.  
  2407.         const callback = response => {
  2408.           let json = (JSON.parse(response.responseText))[0];
  2409.           if (!json || !json.preview_url) {
  2410.             div.innerHTML = `<span>Can't show <a href="${url}">${id}</a> (${json.rating})</span>`;
  2411.             return;
  2412.           }
  2413.  
  2414.           let ratingStr = (json.rating == 's') ? '' : ` (${json.rating})`;
  2415.           let notesStr = (json.last_noted_at && json.last_noted_at !== 0) ? ' (notes)' : '';
  2416.           let commentsStr = (json.last_commented_at && json.last_commented_at !== 0) ? ' (comments)' : '';
  2417.           let createdDateStr = (new Date(1000 * json.created_at)).toLocaleDateString('ru-RU');
  2418.           let updatedDateStr = (new Date(1000 * json.updated_at)).toLocaleDateString('ru-RU');
  2419.           if (createdDateStr != updatedDateStr && json.updated_at != 0) { createdDateStr += ` (${updatedDateStr})`; }
  2420.           div.innerHTML = `
  2421.             <div class="top">
  2422.               <div class="title"><a href="${url}">${id}</a>${ratingStr}${notesStr}${commentsStr}</div>
  2423.               <div class="date">${createdDateStr}</div>
  2424.             </div>
  2425.             <div class="bottom-right">
  2426.               <div>
  2427.                 <a href="https://www.iqdb.org/?url=${json.preview_url}">IQDB</a>, <a href="https://saucenao.com/search.php?url=${json.preview_url}">SauceNAO</a>
  2428.               </div>
  2429.             </div>
  2430.             <a href="${url}"><img class="rating_${json.rating}" src="${json.preview_url}"></a>`;
  2431.         };
  2432.  
  2433.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(apiUrl, 3000).then(callback));
  2434.       },
  2435.       makeTitle: function([, id]) { return `yande.re (${id})`; },
  2436.       linkTextUpdate: function(aNode, [, id]) { aNode.textContent += ` (${id})`; }
  2437.     },
  2438.     {
  2439.       name: 'anime-pictures.net',
  2440.       id: 'embed_anime_pictures_net',
  2441.       className: 'anime-pictures booru',
  2442.       onByDefault: true,
  2443.       ctsDefault: false,
  2444.       re: /^(?:https?:)?\/\/anime-pictures.net\/pictures\/view_post\/(\d+)/i,
  2445.       makeNode: function(aNode, reResult, div) {
  2446.         let thisType = this;
  2447.         let [url, id] = reResult;
  2448.  
  2449.         const predicates = [
  2450.           {
  2451.             msg: response => 'Click to show ' + thisType.makeTitle(reResult),
  2452.             test: response => response.status == 503,
  2453.             permanent: response => false
  2454.           },
  2455.           {
  2456.             msg: response => (response.statusText ? `${response.status} - ${response.statusText}` : `${response.status}`),
  2457.             test: response => response.status != 200,
  2458.             permanent: response => true
  2459.           },
  2460.           {
  2461.             msg: response => 'Login required',
  2462.             test: response => response.responseText.includes('must be logged in'),
  2463.             permanent: response => true
  2464.           }
  2465.         ];
  2466.         const callback = response => {
  2467.           const metaRe = /<\s*meta\s+(?:(?:property|name)\s*=\s*\"([^\"]+)\"\s+)?content\s*=\s*\"([^\"]*)\"(?:\s+(?:property|name)\s*=\s*\"([^\"]+)\")?\s*>/gmi;
  2468.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText);
  2469.           let imageUrl = matches.find(m => (m[1] || m[3]) == 'og:image')[2];
  2470.  
  2471.           div.innerHTML = `
  2472.             <div class="top">
  2473.               <div class="title">
  2474.                 <a href="${url}">${id}</a>
  2475.               </div>
  2476.             </div>
  2477.             <div class="bottom-right">
  2478.               <a href="https://www.iqdb.org/?url=${imageUrl}">IQDB</a>
  2479.               <a href="https://saucenao.com/search.php?url=${imageUrl}">SauceNAO</a>
  2480.             </div>
  2481.             <a href="${aNode.href}"><img src="${imageUrl}"></a>`;
  2482.         };
  2483.  
  2484.         return doFetchingEmbed(aNode, reResult, div, thisType, () => xhrGetAsync(url, 3000, predicates).then(callback));
  2485.       },
  2486.       makeTitle: function([, id]) { return `anime-pictures.net (${id})`; },
  2487.       linkTextUpdate: function(aNode, [, id]) { aNode.textContent += ` (${id})`; }
  2488.     },
  2489.     {
  2490.       name: 'Яндекс.Фотки',
  2491.       id: 'embed_yandex_fotki',
  2492.       className: 'picture compact',
  2493.       onByDefault: true,
  2494.       ctsDefault: false,
  2495.       re: /^(?:https?:)?\/\/img-fotki\.yandex\.ru\/get\/\d+\/[\w\.]+\/[\w]+$/i,
  2496.       makeNode: function(aNode, reResult, div) {
  2497.         div.innerHTML = `<a href="${aNode.href}"><img src="${aNode.href}"></a>`;
  2498.         return div;
  2499.       }
  2500.     },
  2501.     {
  2502.       name: 'Use meta for other links (whitelist)',
  2503.       id: 'embed_whitelisted_domains',
  2504.       className: 'other',
  2505.       onByDefault: true,
  2506.       ctsDefault: false,
  2507.       re: /^(?:https?:)?\/\/(?!juick\.com\b).*/i,
  2508.       match: function(aNode, reResult) {
  2509.         let domain = aNode.hostname.replace(/^(?:www|m)\./, '');
  2510.         let domainsWhitelist = GM_getValue('domains_whitelist', getDefaultDomainWhitelist().join('\n')).split(/\r?\n/);
  2511.         return domainsWhitelist.some(w => matchWildcard(domain, w));
  2512.       },
  2513.       makeNode: function(aNode, reResult, div) {
  2514.         let thisType = this;
  2515.         let [url] = reResult;
  2516.         let domain = aNode.hostname;
  2517.  
  2518.         const checkContentType = response => {
  2519.           const headRe = /^([\w-]+): (.+)$/gmi;
  2520.           let headerMatches = getAllMatchesAndCaptureGroups(headRe, response.responseHeaders);
  2521.           let [, , contentType] = headerMatches.find(([, k, ]) => (k.toLowerCase() == 'content-type'));
  2522.           if (contentType && contentType.match(/^text\/html\b/i)) {
  2523.             return;
  2524.           } else {
  2525.             throw { reason: 'not text/html' };
  2526.           }
  2527.         };
  2528.  
  2529.         const callback = response => {
  2530.           const metaRe = /<\s*meta\s+(?:(?:property|name)\s*=\s*[\"']([^\"']+)[\"']\s+)?content\s*=\s*\"([^\"]*)\"(?:\s+(?:property|name)\s*=\s*\"([^\"]+)\")?(?:\s*(?:\w+=\"[^\"]*\"))*\s*\/?>/gmi;
  2531.           const titleRe = /<title>([\s\S]+?)<\/title>/gmi;
  2532.           let [, basicTitle] = titleRe.exec(response.responseText) || [];
  2533.           let matches = getAllMatchesAndCaptureGroups(metaRe, response.responseText).map(m => ({ k: (m[1] || m[3]).toLowerCase(), v: m[2] }));
  2534.           let meta = {}; [].forEach.call(matches, m => { meta[m.k] = m.v; });
  2535.           let title = meta['twitter:title'] || meta['og:title'] || meta['title'] || basicTitle || meta['sailthru.title'];
  2536.           let image = meta['twitter:image'] || meta['twitter:image:src'] || meta['og:image'] || meta['sailthru.image.full'];
  2537.           let description = longest([meta['og:description'], meta['twitter:description'], meta['description'], meta['sailthru.description']]);
  2538.           let isEnoughContent = title && description && (title.length > 0) && (description.length > 0);
  2539.           if (!isEnoughContent) {
  2540.             throw { reason: 'not enough meta content to embed' };
  2541.           }
  2542.           let imageStr = (image) ? `<a href="${url}"><img src="${image}" /></a>` : '';
  2543.           description = htmlDecode(description).replace(/\n+/g,'<br/>');
  2544.           div.innerHTML = `
  2545.             <div class="top">
  2546.               <div class="title">
  2547.                 <a href="${url}">${title}</a>
  2548.               </div>
  2549.             </div>
  2550.             ${imageStr}
  2551.             <div class="desc">${description}</div>`;
  2552.           div.classList.add(domain.replace(/\./g, '_'));
  2553.         };
  2554.  
  2555.         const unembed = e => {
  2556.           if (e.reason) { console.log(`${e.reason} - ${url}`); }
  2557.           div.remove();
  2558.           aNode.className = '';
  2559.         };
  2560.  
  2561.         return doFetchingEmbed(aNode, reResult, div, thisType,
  2562.                                () => xhrGetAsync(url, 1000, undefined, 'HEAD')
  2563.                                   .then(checkContentType)
  2564.                                   .then(() => { return xhrGetAsync(url, 1500).then(callback); })
  2565.                                   .catch(e => unembed(e))
  2566.         );
  2567.       }
  2568.     }
  2569.   ];
  2570. }
  2571.  
  2572. function getDefaultDomainWhitelist() {
  2573.   return [
  2574.     'lenta.ru',
  2575.     'meduza.io',
  2576.     'rbc.ru',
  2577.     'tjournal.ru',
  2578.     '*.newsru.com',
  2579.     '*.itar-tass.com',
  2580.     'tass.ru',
  2581.     'rublacklist.net',
  2582.     'mk.ru',
  2583.     'kp.ru',
  2584.     'gazeta.ru',
  2585.     'republic.ru',
  2586.     'bash.im',
  2587.     'ixbt.com',
  2588.     'techxplore.com',
  2589.     'medicalxpress.com',
  2590.     'phys.org',
  2591.     'techcrunch.com',
  2592.     'bbc.com',
  2593.     'nplus1.ru',
  2594.     'elementy.ru',
  2595.     'news.tut.by',
  2596.     'imdb.com'
  2597.   ];
  2598. }
  2599.  
  2600. function embedLink(aNode, linkTypes, container, alwaysCts, afterNode) {
  2601.   let anyEmbed = false;
  2602.   let linkId = (aNode.href.replace(/^https?:/i, '').replace(/\'/gi,''));
  2603.   let sameEmbed = container.querySelector(`*[data-linkid='${linkId}']`); // do not embed the same thing twice
  2604.   if (sameEmbed) {
  2605.     if (GM_getValue('enable_arrows', true)) { aNode.classList.add('arrow'); }
  2606.     setHighlightOnHover(aNode, sameEmbed);
  2607.     //setMoveIntoViewOnHover(aNode, aNode, newNode, 5, 30);
  2608.   } else {
  2609.     anyEmbed = [].some.call(linkTypes, function(linkType) {
  2610.       if (GM_getValue(linkType.id, linkType.onByDefault)) {
  2611.         let reResult = linkType.re.exec(aNode.href);
  2612.         if (reResult) {
  2613.           if (linkType.match && (linkType.match(aNode, reResult) === false)) { return false; }
  2614.  
  2615.           let newNode = makeNewNode(linkType, aNode, reResult, alwaysCts);
  2616.           if (!newNode) { return false; }
  2617.  
  2618.           newNode.setAttribute('data-linkid', linkId);
  2619.           if (afterNode) {
  2620.             insertAfter(newNode, afterNode);
  2621.           } else {
  2622.             container.appendChild(newNode);
  2623.           }
  2624.  
  2625.           aNode.classList.add('embedLink');
  2626.           if (GM_getValue('enable_arrows', true)) { aNode.classList.add('arrow'); }
  2627.           if (GM_getValue('enable_link_text_update', true) && linkType.linkTextUpdate) { linkType.linkTextUpdate(aNode, reResult); }
  2628.  
  2629.           setHighlightOnHover(aNode, newNode);
  2630.           //setMoveIntoViewOnHover(aNode, aNode, newNode, 5, 30);
  2631.           return true;
  2632.         }
  2633.       }
  2634.     });
  2635.   }
  2636.   return anyEmbed;
  2637. }
  2638.  
  2639. function embedLinks(aNodes, container, alwaysCts, afterNode) {
  2640.   let anyEmbed = false;
  2641.   let embeddableLinkTypes = getEmbeddableLinkTypes();
  2642.   Array.from(aNodes).forEach(aNode => {
  2643.     let isEmbedded = embedLink(aNode, embeddableLinkTypes, container, alwaysCts, afterNode);
  2644.     anyEmbed = anyEmbed || isEmbedded;
  2645.   });
  2646.   return anyEmbed;
  2647. }
  2648.  
  2649. function splitUsersAndTagsLists(str) {
  2650.   let items = str.split(/[\s,]+/);
  2651.   let users = items.filter(x => x.startsWith('@')).map(x => x.replace('@','').toLowerCase());
  2652.   let tags = items.filter(x => x.startsWith('*')).map(x => x.replace('*','').toLowerCase());
  2653.   return [users, tags];
  2654. }
  2655.  
  2656. function articleInfo(article) {
  2657.   let tagNodes = article.querySelectorAll('.msg-tags > *');
  2658.   let tags = Array.from(tagNodes).map(d => d.textContent.toLowerCase());
  2659.   return { userId: getPostUserName(article), tags: tags };
  2660. }
  2661.  
  2662. function isFilteredX(x, filteredUsers, filteredTags) {
  2663.   let {userId, tags} = articleInfo(x);
  2664.   return (filteredUsers && userId && filteredUsers.indexOf(userId.toLowerCase()) !== -1)
  2665.          || (intersect(tags, filteredTags).length > 0);
  2666. }
  2667.  
  2668. function embedLinksToX(x, beforeNodeSelector, allLinksSelector, ctsUsers, ctsTags) {
  2669.   let isCtsPost = isFilteredX(x, ctsUsers, ctsTags);
  2670.   let allLinks = x.querySelectorAll(allLinksSelector);
  2671.  
  2672.   let existingContainer = x.querySelector('div.embedContainer');
  2673.   if (existingContainer) {
  2674.     embedLinks(allLinks, existingContainer, isCtsPost);
  2675.   } else {
  2676.     let embedContainer = document.createElement('div');
  2677.     embedContainer.className = 'embedContainer';
  2678.  
  2679.     let anyEmbed = embedLinks(allLinks, embedContainer, isCtsPost);
  2680.     if (anyEmbed) {
  2681.       let beforeNode = x.querySelector(beforeNodeSelector);
  2682.       x.insertBefore(embedContainer, beforeNode);
  2683.     }
  2684.   }
  2685. }
  2686.  
  2687. function embedLinksToArticles() {
  2688.   let [ctsUsers, ctsTags] = splitUsersAndTagsLists(GM_getValue('cts_users_and_tags', ''));
  2689.   let beforeNodeSelector = 'nav.l';
  2690.   let allLinksSelector = 'p:not(.ir) a, pre a';
  2691.   setTimeout(function() {
  2692.     Array.from(document.querySelectorAll('#content article[data-mid]')).forEach(article => {
  2693.       embedLinksToX(article, beforeNodeSelector, allLinksSelector, ctsUsers, ctsTags);
  2694.     });
  2695.   }, 50);
  2696. }
  2697.  
  2698. function embedLinksToPost() {
  2699.   let [ctsUsers, ctsTags] = splitUsersAndTagsLists(GM_getValue('cts_users_and_tags', ''));
  2700.   let beforeNodeSelector = '.msg-txt + *';
  2701.   let allLinksSelector = '.msg-txt a';
  2702.   setTimeout(function() {
  2703.     Array.from(document.querySelectorAll('#content .msg-cont')).forEach(msg => {
  2704.       embedLinksToX(msg, beforeNodeSelector, allLinksSelector, ctsUsers, ctsTags);
  2705.     });
  2706.   }, 50);
  2707. }
  2708.  
  2709. function filterArticles() {
  2710.   let [filteredUsers, filteredTags] = splitUsersAndTagsLists(GM_getValue('filtered_users_and_tags', ''));
  2711.   let keepHeader = GM_getValue('filtered_posts_keep_header', true);
  2712.   Array.from(document.querySelectorAll('#content article[data-mid]'))
  2713.        .filter(article => isFilteredX(article, filteredUsers, filteredTags))
  2714.        .forEach(article => {
  2715.          if (keepHeader) {
  2716.            article.classList.add('filtered');
  2717.            while (article.children.length > 1) { article.removeChild(article.lastChild); }
  2718.          } else {
  2719.            article.remove();
  2720.          }
  2721.        });
  2722. }
  2723.  
  2724. function filterPostComments() {
  2725.   let [filteredUsers, filteredTags] = splitUsersAndTagsLists(GM_getValue('filtered_users_and_tags', ''));
  2726.   let keepHeader = GM_getValue('filtered_posts_keep_header', true);
  2727.   Array.from(document.querySelectorAll('#content #replies .msg-cont')).forEach(reply => {
  2728.     let isFilteredComment = isFilteredX(reply, filteredUsers, filteredTags);
  2729.     if (isFilteredComment) {
  2730.       reply.classList.add('filteredComment');
  2731.       reply.querySelector('.msg-txt').remove();
  2732.       reply.querySelector('.msg-comment-target').remove();
  2733.       let linksDiv = reply.querySelector('.msg-links');
  2734.       linksDiv.querySelector('.a-thread-comment').remove();
  2735.       linksDiv.innerHTML = linksDiv.innerHTML.replace(' · ', '');
  2736.       let media = reply.querySelector('.msg-media');
  2737.       if (media) { media.remove(); }
  2738.       if (!keepHeader) {
  2739.         reply.classList.add('headless');
  2740.         reply.querySelector('.msg-header').remove();
  2741.       }
  2742.     }
  2743.   });
  2744. }
  2745.  
  2746. function setHighlightOnHover(hoverTarget, highlightable) {
  2747.   highlightable.classList.toggle('highlightable', true);
  2748.   hoverTarget.addEventListener('mouseenter', e => highlightable.classList.toggle('hoverHighlight', true), false);
  2749.   hoverTarget.addEventListener('mouseleave', e => highlightable.classList.toggle('hoverHighlight', false), false);
  2750. }
  2751.  
  2752. function setMoveIntoViewOnHover(hoverTarget, avoidTarget, movable, avoidMargin=0, threshold=0) {
  2753.  
  2754.   function checkFullyVisible(node, threshold=0) {
  2755.     let rect = node.getBoundingClientRect();
  2756.     let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  2757.     let above = rect.top + threshold < 0;
  2758.     let below = rect.bottom - threshold - viewHeight >= 0;
  2759.     return !above && !below;
  2760.   }
  2761.  
  2762.   function resetMovementArtifacts(node) {
  2763.     node.removeEventListener('transitionend', afterBackTransition, false);
  2764.     node.classList.toggle('moved', false);
  2765.     node.classList.toggle('hoverHighlight', false);
  2766.   }
  2767.  
  2768.   function moveNodeIntoView(node, avoidNode, avoidMargin=0, threshold=0) {
  2769.     resetMovementArtifacts(node);
  2770.     node.classList.toggle('hoverHighlight', true);
  2771.     let onscreen = checkFullyVisible(node, threshold);
  2772.     if (!onscreen) {
  2773.       let parentNodeRect = node.parentNode.getBoundingClientRect();
  2774.       let avoidNodeRect = avoidNode.getBoundingClientRect();
  2775.       let [w, h] = [node.offsetWidth, node.offsetHeight];
  2776.       let vtop = parentNodeRect.top;
  2777.       let atop = avoidNodeRect.top - avoidMargin;
  2778.       let ah = avoidNodeRect.height + 2*avoidMargin;
  2779.       let wh = window.innerHeight;
  2780.       let isAbove = (vtop < atop);
  2781.       let moveAmount = isAbove ? (0-vtop-h+atop) : (0-vtop+atop+ah);
  2782.       let availableSpace = isAbove ? (atop - avoidMargin) : (wh - atop - ah + avoidMargin);
  2783.       if ((Math.abs(moveAmount) > threshold) && (availableSpace > threshold*2)) {
  2784.         let s = getComputedStyle(node);
  2785.         node.classList.toggle('moved', true);
  2786.         node.style.marginTop = `${moveAmount}px`;
  2787.         node.parentNode
  2788.             .querySelector('.movable + .placeholder')
  2789.             .setAttribute('style', `width: ${w}px; height: ${h}px; margin: ${s.margin};`);
  2790.       }
  2791.     }
  2792.   }
  2793.  
  2794.   function afterBackTransition(event) { resetMovementArtifacts(event.target); }
  2795.  
  2796.   function moveNodeBack(node) {
  2797.     const eventType = 'transitionend';
  2798.     if (node.classList.contains('moved')) {
  2799.       let parentNodeRect = node.parentNode.getBoundingClientRect();
  2800.       let nodeRect = node.getBoundingClientRect();
  2801.       if (Math.abs(parentNodeRect.top - nodeRect.top) > 1) {
  2802.         node.addEventListener(eventType, afterBackTransition, false);
  2803.       } else {
  2804.         resetMovementArtifacts(node);
  2805.       }
  2806.       node.style.marginTop = '';
  2807.     } else {
  2808.       node.classList.toggle('hoverHighlight', false);
  2809.     }
  2810.   }
  2811.  
  2812.   hoverTarget.addEventListener('mouseenter', e => { moveNodeIntoView(movable, avoidTarget, avoidMargin, threshold); }, false);
  2813.   hoverTarget.addEventListener('mouseleave', e => { moveNodeBack(movable); }, false);
  2814.   movable.parentNode.classList.toggle('movableContainer', true);
  2815.   movable.classList.toggle('movable', true);
  2816.   if (!movable.parentNode.querySelector('.movable + .placeholder')) {
  2817.     let pldr = document.createElement('div');
  2818.     pldr.className = 'placeholder';
  2819.     insertAfter(pldr, movable);
  2820.   }
  2821. }
  2822.  
  2823. function bringCommentsIntoViewOnHover() {
  2824.   let replies = Array.from(document.querySelectorAll('#replies li'));
  2825.   let nodes = {};
  2826.   replies.forEach(r => { nodes[r.id] = r.querySelector('div.msg-cont'); });
  2827.   replies.forEach(r => {
  2828.     let replyToLink = Array.from(r.querySelectorAll('.msg-links a')).find(a => /\d+/.test(a.hash));
  2829.     if (replyToLink) {
  2830.       let rtid = replyToLink.hash.replace(/^#/, '');
  2831.       setMoveIntoViewOnHover(replyToLink, nodes[r.id], nodes[rtid], 5, 30);
  2832.     }
  2833.   });
  2834. }
  2835.  
  2836. function checkReply(allPostsSelector, ...replySelectors) {
  2837.   getMyUserNameAsync().then(uname => {
  2838.     Array.from(document.querySelectorAll(allPostsSelector))
  2839.          .filter(p => (getPostUserName(p) != uname) && (!replySelectors.some(s => p.querySelector(s))))
  2840.          .forEach(p => p.classList.add('readonly'));
  2841.   }).catch(err => console.info(err));
  2842. }
  2843.  
  2844. function checkReplyArticles() {
  2845.   checkReply('#content article[data-mid]', 'nav.l > a.a-comment');
  2846. }
  2847.  
  2848. function checkReplyPost() {
  2849.   checkReply('#content div.msg-cont', 'a.a-thread-comment', '.msg-comment');
  2850. }
  2851.  
  2852. function markReadonlyPost() {
  2853.   if (document.title.match(/\B\*readonly\b/)) {
  2854.     document.querySelector('#content .msg-cont .msg-tags')
  2855.             .insertAdjacentHTML('beforeend', '<a class="virtualTag" href="#readonly">readonly</a>');
  2856.   }
  2857. }
  2858.  
  2859. function makeSettingsCheckbox(caption, id, defaultState) {
  2860.   let label = document.createElement('label');
  2861.   let cb = document.createElement('input');
  2862.   cb.type = 'checkbox';
  2863.   cb.checked = GM_getValue(id, defaultState);
  2864.   cb.onclick = (e => GM_setValue(id, cb.checked));
  2865.   label.appendChild(cb);
  2866.   label.appendChild(document.createTextNode(caption));
  2867.   return label;
  2868. }
  2869.  
  2870. function makeSettingsTextbox(caption, id, defaultString, placeholder) {
  2871.   let label = document.createElement('label');
  2872.   let wrapper = document.createElement('div');
  2873.   wrapper.className = 'ta-wrapper';
  2874.   let textarea = document.createElement('textarea');
  2875.   textarea.className = id;
  2876.   textarea.placeholder = placeholder;
  2877.   textarea.title = placeholder;
  2878.   textarea.value = GM_getValue(id, defaultString);
  2879.   textarea.oninput = (e => GM_setValue(id, textarea.value));
  2880.   wrapper.appendChild(textarea);
  2881.   label.appendChild(document.createTextNode('' + caption + ': '));
  2882.   label.appendChild(wrapper);
  2883.   return label;
  2884. }
  2885.  
  2886. function showUserscriptSettings() {
  2887.   let h1 = document.createElement('h1');
  2888.   h1.textContent = 'Tweaks';
  2889.  
  2890.   let uiFieldset = document.createElement('fieldset');
  2891.   { // UI
  2892.     let uiLegend = document.createElement('legend');
  2893.     uiLegend.textContent = 'UI';
  2894.     uiFieldset.appendChild(uiLegend);
  2895.  
  2896.     let list1 = document.createElement('ul');
  2897.     userscriptFeatures
  2898.       .filter(item => !!item.name && !!item.id)
  2899.       .map(item => makeSettingsCheckbox(item.name, item.id, item.enabledByDefault))
  2900.       .map(cb => wrapIntoTag(wrapIntoTag(cb, 'p'), 'li'))
  2901.       .forEach(item => list1.appendChild(item));
  2902.     uiFieldset.appendChild(list1);
  2903.   }
  2904.  
  2905.   let embeddingFieldset = document.createElement('fieldset');
  2906.   { // Embedding
  2907.     let embeddingLegend = document.createElement('legend');
  2908.     embeddingLegend.textContent = 'Embedding';
  2909.  
  2910.     let embeddingTable = document.createElement('table');
  2911.     embeddingTable.style.width = '100%';
  2912.     getEmbeddableLinkTypes().forEach(linkType => {
  2913.       let row = document.createElement('tr');
  2914.       row.appendChild(wrapIntoTag(makeSettingsCheckbox(linkType.name, linkType.id, linkType.onByDefault), 'td'));
  2915.       row.appendChild(wrapIntoTag(makeSettingsCheckbox('Click to show', 'cts_' + linkType.id, linkType.ctsDefault), 'td'));
  2916.       embeddingTable.appendChild(row);
  2917.     });
  2918.  
  2919.     let domainsWhitelist = makeSettingsTextbox('Domains whitelist ("*" wildcard is supported)', 'domains_whitelist', getDefaultDomainWhitelist().join('\n'), 'One domain per line. "*" wildcard is supported');
  2920.  
  2921.     let moveIntoViewOnSamePageCheckbox = makeSettingsCheckbox('Ссылки на ту же страницу не встраивать, а показывать при наведении', 'enable_move_into_view_on_same_page', true);
  2922.     let updateLinkTextCheckbox = makeSettingsCheckbox('Обновлять текст ссылок, если возможно (например, "juick.com" на #123456/7)', 'enable_link_text_update', true);
  2923.     let ctsUsersAndTags = makeSettingsTextbox('Всегда использовать "Click to show" для этих юзеров и тегов в ленте', 'cts_users_and_tags', '', '@users and *tags separated with space or comma');
  2924.     ctsUsersAndTags.style = 'display: flex; flex-direction: column; align-items: stretch;';
  2925.  
  2926.     setContent(
  2927.       embeddingFieldset,
  2928.       embeddingLegend,
  2929.       embeddingTable,
  2930.       wrapIntoTag(domainsWhitelist, 'p'),
  2931.       document.createElement('hr'),
  2932.       wrapIntoTag(ctsUsersAndTags, 'p'),
  2933.       wrapIntoTag(updateLinkTextCheckbox, 'p'),
  2934.       wrapIntoTag(moveIntoViewOnSamePageCheckbox, 'p')
  2935.     );
  2936.   }
  2937.  
  2938.   let filteringFieldset = document.createElement('fieldset');
  2939.   { // Filtering
  2940.     let filteringLegend = document.createElement('legend');
  2941.     filteringLegend.textContent = 'Filtering';
  2942.  
  2943.     let filteringUsersAndTags = makeSettingsTextbox('Убирать посты этих юзеров или с этими тегами из общей ленты', 'filtered_users_and_tags', '', '@users and *tags separated with space or comma');
  2944.     filteringUsersAndTags.style = 'display: flex; flex-direction: column; align-items: stretch;';
  2945.     let keepHeadersCheckbox = makeSettingsCheckbox('Оставлять заголовки постов', 'filtered_posts_keep_header', true);
  2946.     let filterCommentsCheckbox = makeSettingsCheckbox('Также фильтровать комментарии этих юзеров', 'filter_comments_too', false);
  2947.  
  2948.     setContent(
  2949.       filteringFieldset,
  2950.       filteringLegend,
  2951.       wrapIntoTag(filteringUsersAndTags, 'p'),
  2952.       wrapIntoTag(keepHeadersCheckbox, 'p'),
  2953.       wrapIntoTag(filterCommentsCheckbox, 'p')
  2954.     );
  2955.   }
  2956.  
  2957.   let resetButton = document.createElement('button');
  2958.   { // Reset button
  2959.     resetButton.textContent = 'Reset userscript settings to default';
  2960.     resetButton.onclick = function(e){
  2961.       if (!confirm('Are you sure you want to reset Tweaks settings to default?')) { return; }
  2962.       GM_listValues().slice().forEach(key => GM_deleteValue(key));
  2963.       showUserscriptSettings();
  2964.       alert('Done!');
  2965.     };
  2966.   }
  2967.  
  2968.   let versionInfoFieldset = document.createElement('fieldset');
  2969.   { // Version info
  2970.     let versionInfoLegend = document.createElement('legend');
  2971.     versionInfoLegend.textContent = 'Version info';
  2972.     let ver1 = document.createElement('p');
  2973.     let ver2 = document.createElement('p');
  2974.     ver1.textContent = 'Userscript version: ' + GM_info.script.version;
  2975.     ver2.textContent = 'Greasemonkey (or your script runner) version: ' + GM_info.version;
  2976.     setContent(versionInfoFieldset, versionInfoLegend, ver1, ver2);
  2977.   }
  2978.  
  2979.   let support = document.createElement('p');
  2980.   support.innerHTML = 'Feedback and feature requests <a href="//juick.com/killy/?tag=userscript">here</a>.';
  2981.  
  2982.   let contentBlock = document.querySelector('#content > article');
  2983.   setContent(contentBlock, h1, uiFieldset, embeddingFieldset, filteringFieldset, resetButton, versionInfoFieldset, support);
  2984.   contentBlock.className = 'tweaksSettings';
  2985. }
  2986.  
  2987. function addTweaksSettingsButton() {
  2988.   let tabsList = document.querySelector('#pagetabs > ul');
  2989.   let liNode = document.createElement('li');
  2990.   let aNode = document.createElement('a');
  2991.   aNode.textContent = 'Tweaks';
  2992.   aNode.href = '#tweaks';
  2993.   aNode.onclick = (e => { e.preventDefault(); showUserscriptSettings(); });
  2994.   liNode.appendChild(aNode);
  2995.   tabsList.appendChild(liNode);
  2996. }
  2997.  
  2998. function updateUserRecommendationStats(userId, pagesPerCall) {
  2999.   let article = document.createElement('article');
  3000.   let userCounters = {};
  3001.   let totalRecs = 0;
  3002.  
  3003.   function recUpdate(depth, oldestMid, oldestDate) {
  3004.     if (depth <= 0) { return; }
  3005.  
  3006.     let beforeStr = (oldestMid) ? ('&before=' + oldestMid) : '';
  3007.     let url = `//juick.com/${userId}/?show=recomm${beforeStr}`;
  3008.     GM_xmlhttpRequest({
  3009.       method: 'GET',
  3010.       url: setProto(url),
  3011.       onload: function(response) {
  3012.         if (response.status != 200) {
  3013.           console.log(`${userId}: failed with ${response.status}, ${response.statusText}`);
  3014.           return;
  3015.         }
  3016.  
  3017.         const articleRe = /<article[\s\S]+?<\/article>/gmi;
  3018.         let articles = response.responseText.match(articleRe);
  3019.         if (!articles) {
  3020.           console.log('no more articles in response');
  3021.           return;
  3022.         }
  3023.  
  3024.         totalRecs = totalRecs + articles.length;
  3025.         let hasMore = (articles.length > 15);
  3026.         let oldestArticle = articles[articles.length - 1];
  3027.  
  3028.         const midRe = /data-mid="(\d+)"/i;
  3029.         const dateRe = /datetime\=\"([^\"]+) ([^\"]+)\"/i;
  3030.         let [, oldestMid] = midRe.exec(oldestArticle);
  3031.         let [, oldestDatePart, oldestTimePart] = dateRe.exec(oldestArticle);
  3032.         oldestDate = new Date(`${oldestDatePart}T${oldestTimePart}`);
  3033.  
  3034.         const userRe = /<span itemprop="name">([-\w]+)<\/span>/i;
  3035.         const userAvatarRe = /<img src="\/\/i\.juick\.com\/a\/\d+\.png" alt="[^\"]+"\/?>/i;
  3036.         let authors = articles.map(article => {
  3037.           let postAuthorId = (userRe.exec(article))[1];
  3038.           let postAuthorAvatar = (userAvatarRe.exec(article))[0];
  3039.           return {id: postAuthorId, avatar: postAuthorAvatar};
  3040.         });
  3041.         for (let i in authors) {
  3042.           let id = authors[i].id;
  3043.           let avatar = authors[i].avatar;
  3044.           if (id in userCounters) {
  3045.             userCounters[id].recs = userCounters[id].recs + 1;
  3046.           } else {
  3047.             userCounters[id] = {id: id, avatar: avatar, recs: 1};
  3048.           }
  3049.         }
  3050.  
  3051.         let sortedUsers = Object.values(userCounters).sort((a, b) => b.recs - a.recs);
  3052.  
  3053.         removeAllFrom(article);
  3054.  
  3055.         if (hasMore && (depth == 1)) {
  3056.           let moreButton = document.createElement('button');
  3057.           moreButton.style = 'float: right;';
  3058.           moreButton.textContent = 'Check older recommendations';
  3059.           moreButton.onclick = (e => recUpdate(pagesPerCall, oldestMid, oldestDate));
  3060.           article.appendChild(moreButton);
  3061.         }
  3062.  
  3063.         let datePNode = document.createElement('p');
  3064.         datePNode.textContent = `${totalRecs} recommendations since ${oldestDate.toLocaleDateString('ru-RU')}`;
  3065.         article.appendChild(datePNode);
  3066.  
  3067.         let avgPNode = document.createElement('p');
  3068.         let now = new Date();
  3069.         let days = ((now - oldestDate) / 1000 / 60 / 60 / 24);
  3070.         let avg = totalRecs / days;
  3071.         avgPNode.textContent = '' + avg.toFixed(3) + ' recommendations per day';
  3072.         article.appendChild(avgPNode);
  3073.  
  3074.         let userStrings = sortedUsers.map(x => `<li><a href="/${x.id}/">${x.avatar}${x.id}</a> / ${x.recs}</li>`);
  3075.         let ulNode = document.createElement('ul');
  3076.         ulNode.className = 'recUsers';
  3077.         ulNode.innerHTML = userStrings.join('');
  3078.         article.appendChild(ulNode);
  3079.  
  3080.         if (hasMore) {
  3081.           setTimeout(() => recUpdate(depth - 1, oldestMid, oldestDate), 100);
  3082.         } else {
  3083.           console.log('no more recommendations');
  3084.         }
  3085.       }
  3086.     });
  3087.  
  3088.   } // recUpdate
  3089.  
  3090.   let contentBlock = document.querySelector('section#content');
  3091.   setContent(contentBlock, article);
  3092.   recUpdate(pagesPerCall, undefined, undefined);
  3093. }
  3094.  
  3095. function addIRecommendLink() {
  3096.   let userId = getColumnUserName();
  3097.   let asideColumn = document.querySelector('aside#column');
  3098.   let ustatsList = asideColumn.querySelector('#ustats > ul');
  3099.   let li2 = ustatsList.querySelector('li:nth-child(2)');
  3100.   let liNode = document.createElement('li');
  3101.   let aNode = document.createElement('a');
  3102.   aNode.textContent = 'Я рекомендую';
  3103.   aNode.href = '#irecommend';
  3104.   aNode.onclick = (e => { e.preventDefault(); updateUserRecommendationStats(userId, 3); });
  3105.   liNode.appendChild(aNode);
  3106.   insertAfter(liNode, li2);
  3107. }
  3108.  
  3109. function addMentionsLink() {
  3110.   let userId = getColumnUserName();
  3111.   let asideColumn = document.querySelector('aside#column');
  3112.   let ustatsList = asideColumn.querySelector('#ustats > ul');
  3113.   let li2 = ustatsList.querySelector('li:nth-child(2)');
  3114.   let liNode = document.createElement('li');
  3115.   let aNode = document.createElement('a');
  3116.   aNode.textContent = 'Упоминания';
  3117.   aNode.href = '/?search=%40' + userId;
  3118.   liNode.appendChild(aNode);
  3119.   insertAfter(liNode, li2);
  3120. }
  3121.  
  3122. function addToggleBetaLink() {
  3123.   let aNode = document.createElement('a');
  3124.   aNode.id = 'toggleBetaLink';
  3125.   aNode.href = '#toggleBeta';
  3126.   aNode.textContent = isBeta ? 'beta - go to prod' : 'prod - go to beta';
  3127.   aNode.onclick = (e => {
  3128.     e.preventDefault();
  3129.     window.location.hostname = isBeta ? 'juick.com' : 'beta.juick.com';
  3130.   });
  3131.  
  3132.   document.getElementById('body').appendChild(aNode);
  3133. }
  3134.  
  3135. function makeElementExpandable(element) {
  3136.   let aNode = document.createElement('a');
  3137.   aNode.className = 'expandLink';
  3138.   aNode.innerHTML = '<span>Expand</span>';
  3139.   aNode.href = '#expand';
  3140.   aNode.onclick = (e => {
  3141.     e.preventDefault();
  3142.     element.classList.remove('expandable');
  3143.     element.removeChild(aNode);
  3144.   });
  3145.   element.appendChild(aNode);
  3146.   element.classList.add('expandable');
  3147. }
  3148.  
  3149. function limitArticlesHeight () {
  3150.   let maxHeight = window.innerHeight * 0.7;
  3151.   Array.from(document.querySelectorAll('#content article[data-mid] > p')).forEach(p => {
  3152.     if (p.offsetHeight > maxHeight) {
  3153.       makeElementExpandable(p);
  3154.     }
  3155.   });
  3156. }
  3157.  
  3158. function addStyle() {
  3159.   let article = document.querySelector('#content article') || document.querySelector('#content .msg-cont');
  3160.   let [br, bg, bb] = parseRgbColor(getComputedStyle(document.documentElement).backgroundColor, [255,255,255]);
  3161.   let [tr, tg, tb] = parseRgbColor(getComputedStyle(document.body).color, [34,34,34]);
  3162.   let [ar, ag, ab] = (article) ? parseRgbColor(getComputedStyle(article).backgroundColor, [br, bg, bb]) : [br, bg, bb];
  3163.   const rgba = (r,g,b,a) => `rgba(${r},${g},${b},${a})`;
  3164.   let bg10 = rgba(br, bg, bb, 1.0);
  3165.   let abg10 = rgba(ar, ag, ab, 1.0);
  3166.   let color10 = rgba(tr, tg, tb, 1.0);
  3167.   let color07 = rgba(tr, tg, tb, 0.7);
  3168.   let color03 = rgba(tr, tg, tb, 0.3);
  3169.   let color02 = rgba(tr, tg, tb, 0.2);
  3170.  
  3171.   if (GM_getValue('enable_tags_min_width', true)) {
  3172.     GM_addStyle('.tagsContainer a { min-width: 25px; display: inline-block; text-align: center; }');
  3173.   }
  3174.   GM_addStyle(`
  3175.     .embedContainer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin: 30px -3px 15px -3px; }
  3176.     .embedContainer > * { box-sizing: border-box; flex-grow: 1; margin: 3px; min-width: 49%; }
  3177.     .embedContainer > .compact { flex-grow: 0; }
  3178.     .embedContainer > .singleColumn { min-width: 90%; }
  3179.     .embedContainer > .codePost .desc { font-family: monospace; white-space: pre-wrap; font-size: 9pt; line-height: 120%; }
  3180.     .embedContainer .picture img { display: block; }
  3181.     .embedContainer img,
  3182.     .embedContainer video { max-width: 100%; max-height: 80vh; }
  3183.     .embedContainer audio { width: 100%; }
  3184.     .embedContainer iframe { overflow:hidden; resize: vertical; display: block; }
  3185.     .embedContainer > .embed { width: 100%; border: 1px solid ${color02}; padding: 8px; display: flex; flex-direction: column; }
  3186.     .embedContainer > .embed.loading,
  3187.     .embedContainer > .embed.failed { text-align: center; color: ${color07}; padding: 0; }
  3188.     .embedContainer > .embed.failed { cursor: pointer; }
  3189.     .embedContainer .embed .cts { margin: 0; }
  3190.     .embed .top,
  3191.     .embed .bottom { display: flex; flex-shrink: 0; justify-content: space-between; }
  3192.     .embed .top { margin-bottom: 8px; }
  3193.     .embed .date,
  3194.     .embed .date > a,
  3195.     .embed .likes > a,
  3196.     .embed .replies > a,
  3197.     .embed .title { color: ${color07}; }
  3198.     .embed .date { font-size: small; text-align: right; }
  3199.     .embed .likes,
  3200.     .embed .replies { font-size: small; white-space:nowrap; margin-left: 12px; }
  3201.     .embed .likes .icon,
  3202.     .embed .replies .icon { width: 20px; height: 20px; }
  3203.     .embed .desc { margin-bottom: 8px; max-height: 55vh; overflow-y: auto; }
  3204.     .twi.embed > .cts > .placeholder { display: inline-block; }
  3205.     .embedContainer > .embed.twi .cts > .placeholder { border: 0; }
  3206.     .embedContainer > .bandcamp:not(.loading):not(.cts) { max-width: 480px; }
  3207.     .juickEmbed > .top > .top-right { display: flex; flex-direction: column; flex: 1; }
  3208.     .juickEmbed > .top > .top-right > .top-right-1st { display: flex; flex-direction: row; justify-content: space-between; }
  3209.     .juickEmbed > .bottom > .right { margin-top: 5px; display: flex; flex: 0; }
  3210.     .gistEmbed .gist-file .gist-data .blob-wrapper,
  3211.     .gistEmbed .gist-file .gist-data article { max-height: 70vh; overflow-y: auto; }
  3212.     .gistEmbed.embed.loaded { border-width: 0px; padding: 0; }
  3213.     .wordpress .desc { max-height: 70vh; overflow-y: auto; line-height: 160%; }
  3214.     .xkcd .comic { display: block; margin: 0 auto; }
  3215.     .arxiv .top { flex-direction: column; }
  3216.     .arxiv .date { text-align: left; }
  3217.     .arxiv .bottom { margin-top: 8px; }
  3218.     .tumblr { max-height: 86vh; overflow-y: auto; }
  3219.     .tumblr.loading iframe { visibility: hidden; height: 0px; }
  3220.     .reddit { max-height: 75vh; overflow-y: auto; }
  3221.     .reddit iframe { resize: none; }
  3222.     .reddit.loading > blockquote,
  3223.     .reddit.loading > div { display: none; }
  3224.     .fbEmbed:not(.fallback) iframe { resize: none; }
  3225.     .fbEmbed.loading > div { visibility: hidden; height: 0px; }
  3226.     .imgur iframe { border-width: 0px; }
  3227.     .imgur.loading iframe { visibility: hidden; height: 0px; }
  3228.     .embedContainer > .gelbooru.embed,
  3229.     .embedContainer > .danbooru.embed,
  3230.     .embedContainer > .konachan.embed,
  3231.     .embedContainer > .yandere.embed { width: 49%; }
  3232.     .embedContainer > .booru.embed { position: relative; }
  3233.     .danbooru.embed.loaded { min-height: 130px; }
  3234.     .danbooru.embed .booru-tags { display: none; }
  3235.     .danbooru.embed:hover .booru-tags { display: block; }
  3236.     .booru.embed .bottom-right { position:absolute; bottom: 8px; right: 8px; font-size: small; text-align: right; color: ${color07}; display: flex; flex-direction: column; }
  3237.     article.nsfw .embedContainer img,
  3238.     article.nsfw .embedContainer iframe,
  3239.     .embed .rating_e,
  3240.     .embed img.nsfw { opacity: 0.1; }
  3241.     article.nsfw .embedContainer img:hover,
  3242.     article.nsfw .embedContainer iframe:hover,
  3243.     article.nsfw .embedContainer .msg-avatar img,
  3244.     .embed .rating_e:hover,
  3245.     .embed img.nsfw:hover { opacity: 1.0; }
  3246.     .embed.notEmbed { display: none; }
  3247.     .embedLink.arrow:not(.notEmbed):after { content: '\\00a0↓' } /* &nbsp; */
  3248.     .tweaksSettings * { box-sizing: border-box; }
  3249.     .tweaksSettings table { border-collapse: collapse; }
  3250.     .tweaksSettings tr { border-bottom: 1px solid transparent; }
  3251.     .tweaksSettings tr:hover { background: rgba(127,127,127,.1) }
  3252.     .tweaksSettings td > * { display: block; width: 100%; height: 100%; }
  3253.     .tweaksSettings > button { margin-top: 25px; }
  3254.     .tweaksSettings .ta-wrapper { width: 100%; height: 100%; }
  3255.     .tweaksSettings .ta-wrapper > textarea { width: 100%; height: 100%; }
  3256.     .tweaksSettings textarea.domains_whitelist { min-height: 72pt; }
  3257.     .embedContainer > .cts { width: 100%; }
  3258.     .embedContainer .cts > .placeholder { border: 1px dotted ${color03}; color: ${color07}; text-align: center; cursor: pointer; word-wrap: break-word; }
  3259.     .cts > .placeholder { position: relative; }
  3260.     .cts > .placeholder > .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; color: ${bg10}; -webkit-filter: drop-shadow( 0 0 10px ${color10} ); filter: drop-shadow( 0 0 10px ${color10} ); }
  3261.     .embed .cts .icon { display: flex; align-items: center; justify-content: center; }
  3262.     .embed .cts .icon > svg { max-width: 100px; max-height: 100px; }
  3263.     .filtered header { overflow: hidden; }
  3264.     .filtered .msg-avatar { margin-bottom: 0px; }
  3265.     .filteredComment.headless .msg-links { margin: 0px; }
  3266.     article.readonly > p,
  3267.     div.readonly > .msg-txt { opacity: 0.55; }
  3268.     .movable { transition: all 0.2s ease-out 0.2s; transition-property: margin, margin-top; }
  3269.     .movable.moved { position: absolute; z-index: 10; }
  3270.     .movable.hoverHighlight,
  3271.     .highlightable.hoverHighlight { outline: 1px solid ${color10} !important; }
  3272.     .movableContainer { position: relative; }
  3273.     .movableContainer > .placeholder { display: none; }
  3274.     .movableContainer .moved+.placeholder { display: block; }
  3275.     .recUsers img { height: 32px; margin: 2px; margin-right: 6px; vertical-align: middle; width: 32px; }
  3276.     .users.sorted > span { width: 300px; }
  3277.     a.virtualTag { border: 1px dotted ${color07}; border-radius: 15px; }
  3278.     #toggleBetaLink { display: block; position: fixed; top: 65px; right: 5px; }
  3279.     .expandable { max-height: 50vh; overflow-y: hidden; position: relative; }
  3280.     .expandable:before { content:''; pointer-events:none; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(to top, ${abg10} 15px, transparent 120px); }
  3281.     .expandable > a.expandLink { display: block; position:absolute; width: 100%; bottom: 2px; text-align: center; font-size: 10pt; color: ${color07}; }
  3282.     .expandable > a.expandLink > span { border: 1px dotted ${color07}; border-radius: 15px; padding: 0 15px 2px; background: ${abg10}; }
  3283.  
  3284.     #oldNewMessage { background: #e5e5e0; margin-bottom: 20px; padding: 0; display: flex; flex-direction: column; }
  3285.     #oldNewMessage * { box-sizing: border-box; }
  3286.     #oldNewMessage > textarea { resize: vertical; padding: 12px 16px; }
  3287.     #oldNewMessage.active { padding: 8px; }
  3288.     #oldNewMessage #bottomBlock { display: flex; flex-direction: row; }
  3289.     #oldNewMessage:not(.active) #bottomBlock,
  3290.     #oldNewMessage:not(.active) #charCounterBlock,
  3291.     #oldNewMessage:not(.active) .tagsContainer { display: none; }
  3292.     #oldNewMessage #bottomLeftBlock { flex-grow: 1; display: flex; flex-direction: column; max-width: 100%; }
  3293.     #oldNewMessage .tags,
  3294.     #oldNewMessage .tagsContainer,
  3295.     #oldNewMessage .subm,
  3296.     #oldNewMessage #charCounterBlock,
  3297.     #oldNewMessage #imgUploadBlock { margin-top: 6px; }
  3298.     #oldNewMessage.active textarea,
  3299.     #oldNewMessage .txt { padding: 2px 4px; }
  3300.     #oldNewMessage textarea,
  3301.     #oldNewMessage .imgLink,
  3302.     #oldNewMessage .tags { border: 1px solid #ccc; }
  3303.     #oldNewMessage .subm,
  3304.     #oldNewMessage .btn_like { background: #eeeee5; border: 1px solid #ccc; color: black; padding: 2px 4px; width: 150px; cursor: pointer; text-align: center; }
  3305.     #oldNewMessage .subm[disabled] { color: #999; }
  3306.     #imgUploadBlock > * { display: inline-block; }
  3307.     #imgUploadBlock .info { width: 25px; height: 25px; vertical-align: text-bottom; }
  3308.     #imgUploadBlock #image_upload { visibility: hidden; width: 0; position: absolute; }
  3309.     #imgUploadBlock .imgLink { width: 150px; }
  3310.     #oldNewMessage:not(.withImage) #imagePreview { display: none; }
  3311.     #oldNewMessage #imagePreview { position: relative; margin: 6px 0 0 6px; }
  3312.     #oldNewMessage #imagePreview img { display: block; max-height: 120px; max-width: 150px; }
  3313.     #clear_button { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  3314.     #clear_button > svg { position: absolute; right: 0%; top: 0%; width: 20%; height: 20%; }
  3315.     #clear_button:hover { background: rgba(255, 255, 255, 0.25); }
  3316.     .flexSpacer { flex-grow: 1; }
  3317.     #charCounterBlock > div { height: 100; }
  3318.     #charCounterBlock:not(.invalid) > div { background: #999; height: 1px; }
  3319.     #charCounterBlock.invalid { text-align: right; }
  3320.     #charCounterBlock.invalid > div { color: #c00; }
  3321.     ul#replies li .hoverPopup { display: inline-block; float: right; }
  3322.     .hoverPopup { position: relative; }
  3323.     .hoverPopup .hoverContainer { visibility: hidden; position: absolute; z-index: 1; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; background: ${abg10}; box-shadow: 0 0 3px rgba(0,0,0,.16); }
  3324.     .hoverPopup .hoverContainer > * { margin: 2px 4px; }
  3325.     .hoverPopup.expanded .hoverContainer,
  3326.     .hoverPopup:hover .hoverContainer { visibility: visible; }
  3327.     .hoverPopup { margin-left: 15px; }
  3328.     @keyframes highlight { 0% { outline-color: rgba(127, 127, 127 , 1.0); } 100% { outline-color: rgba(127, 127, 127 , 0.0); } }
  3329.     .blinkOnce { outline-width: 1px; outline-style: solid; animation: highlight 1s; }
  3330.     `);
  3331.   if (GM_getValue('unset_code_style', false)) {
  3332.     GM_addStyle(`
  3333.       pre { background: unset; color: unset; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 9pt; line-height: 120%; }
  3334.       `);
  3335.   }
  3336. }
  3337.  
  3338. // #endregion