☰

Juick tweaks

Feature testing

目前为 2017-11-10 提交的版本，查看 最新版本。

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