☰

StackOverflow extended

Copy code to clipboard; hiding and saving the state of the "Blog", "Meta" blocks by clicking; adding links to all questions of the author and all questions only with tags of the current question to the user's card; stretching and restoring page content for better reading of code listings; redirecting from localized versions of the site to an English-language domain with a search for the current question.

  1. // ==UserScript==
  2. // @name        StackOverflow extended
  3. // @namespace   https://github.com/XelaNimed
  4. // @version     0.10.1-SNAPSHOT
  5. // @description Copy code to clipboard; hiding and saving the state of the "Blog", "Meta" blocks by clicking; adding links to all questions of the author and all questions only with tags of the current question to the user's card; stretching and restoring page content for better reading of code listings; redirecting from localized versions of the site to an English-language domain with a search for the current question.
  6. // @author      XelaNimed
  7. // @copyright   2021, XelaNimed (https://github.com/XelaNimed)
  8. // @match       https://*.stackoverflow.com/*
  9. // @match       https://*.meta.stackoverflow.com/*
  10. // @grant       GM_getResourceText
  11. // @grant       GM_addStyle
  12. // @homepageURL https://github.com/XelaNimed/ruSO
  13. // @supportURL  https://github.com/XelaNimed/ruSO/issues
  14. // @iconURL     https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=32
  15. // @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js#sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==
  16. // @require     https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.6.1/js/iziModal.min.js#sha512-lR/2z/m/AunQdfBTSR8gp9bwkrjwMq1cP0BYRIZu8zd4ycLcpRYJopB+WsBGPDjlkJUwC6VHCmuAXwwPHlacww==
  17. // @resource    IZI_MODAL https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.6.1/css/iziModal.min.css#sha512-3c5WiuZUnVWCQGwVBf8XFg/4BKx48Xthd9nXi62YK0xnf39Oc2FV43lIEIdK50W+tfnw2lcVThJKmEAOoQG84Q==
  18. // @license     MIT
  19. // ==/UserScript==
  20.  
  21. const $ = window.jQuery;
  22.  
  23. $.fn.extend({
  24.     toggleText: function(a, b){
  25.         return this.text(this.text() == b ? a : b);
  26.     }
  27. });
  28.  
  29. /**
  30.  * Root object
  31.  */
  32. const ruSO = {
  33.     $sidebar: $('#sidebar'),
  34.     $content: $('#content'),
  35.     $container: $('body>.container'),
  36.     $fullWidthBtn: null,
  37.     /**
  38.      * Keys for access to Local Storage values.
  39.      */
  40.     lsKeys: {
  41.         metaBlockIsVisible: 'so-ext-metaBlockIsVisible',
  42.         nativeLang: 'so-ext-nativeLanguage',
  43.         useSearchRedirectBtn: 'so-ext-useSearchRedirectBtn',
  44.         addLinkToMeta: 'so-ext-addLinkToMeta',
  45.         toggleMetaBlock: 'so-ext-toggleMetaBlock',
  46.         appLang: 'so-ext-appLang'
  47.     },
  48.     strings: {
  49.         clickToToggle: 'Скрыть/показать',
  50.         setFullWidth: 'Растянуть',
  51.         resetFullWidth: 'Восстановить',
  52.         copy: 'Копировать',
  53.         copied: 'Скопировано',
  54.         canNotCopy: 'Упс, ошибка',
  55.         intoClipboard: 'В буфер'
  56.     },
  57.  
  58.     /**
  59.      * Checks if a value with the specified key exists in local storage.
  60.      * @param {string} key Value key in local storage
  61.      * @returns Returns true if the value with the specified key is present in local storage, is not null or an empty string, false otherwise.
  62.      */
  63.     isLSNotInitForKey: function(key) { return localStorage[key] === undefined || localStorage[key] == null || localStorage[key] === ''; },
  64.     setLSDefaults: function() {
  65.  
  66.         if(this.isLSNotInitForKey(this.lsKeys.nativeLang)) {
  67.             const lang = navigator.language || navigator.userLanguage;
  68.             if(this.getSupportedSubDomains().includes(lang)) {
  69.                 localStorage[this.lsKeys.nativeLang] = lang;
  70.             } else {
  71.                 localStorage[this.lsKeys.useSearchRedirectBtn] = false;
  72.             }
  73.         }
  74.         if(this.isLSNotInitForKey(this.lsKeys.useSearchRedirectBtn)) {
  75.            localStorage[this.lsKeys.useSearchRedirectBtn] = true;
  76.         }
  77.         if(this.isLSNotInitForKey(this.lsKeys.toggleMetaBlock)) {
  78.            localStorage[this.lsKeys.toggleMetaBlock] = true;
  79.         }
  80.         if(this.isLSNotInitForKey(this.lsKeys.metaBlockIsVisible)) {
  81.             localStorage[this.lsKeys.metaBlockIsVisible] = true;
  82.         }
  83.         return this;
  84.     },
  85.     isUseSearchRedirectBtn: function() { return localStorage[this.lsKeys.useSearchRedirectBtn] == 'true'; },
  86.     getNativeLang: function() { return localStorage[this.lsKeys.nativeLang]; },
  87.     isNativeLang: function(lang) { return localStorage[this.lsKeys.nativeLang] === lang; },
  88.     addLinkToMeta: function() { return localStorage[this.lsKeys.addLinkToMeta] == 'true'; },
  89.     toggleMetaBlock: function() { return localStorage[this.lsKeys.toggleMetaBlock] == 'true'; },
  90.     getSupportedSubDomains: function() { return ['ru', 'es', 'pt', 'ja']; },
  91.     
  92.     addSettingsModalDialog: function() {
  93.  
  94.         let options = this.getSupportedSubDomains()
  95.                         .flatMap((l) => '<option value="' + l + '"' + (this.isNativeLang(l) ? ' selected="selected"' : '') + '>' + l + '</option>' )
  96.                         .join('');
  97.  
  98.         $(document.body).append(`<div id="iziModal" style="display: none;">
  99.  
  100.                                     <div class="izi-content">
  101.  
  102.                                         <div class="d-flex ai-center jc-space-between p16">
  103.                                             <label class="flex--item s-label p0" for="so-ext-search-btn-toggle">
  104.                                                 <div class="d-flex ai-center">Use redirect to enSO</div>
  105.                                                 <p class="s-description">When this option is enabled, a button redirecting the current search to the English-language StackOverflow site will be added at the end of the search field.</p>
  106.                                             </label>
  107.                                             <div class="flex--item s-toggle-switch">
  108.                                                 <input id="so-ext-search-btn-toggle" type="checkbox"${this.isUseSearchRedirectBtn() ? 'checked="checked"' : ''}>
  109.                                                 <div class="s-toggle-switch--indicator"></div>
  110.                                             </div>
  111.                                         </div>
  112.  
  113.                                         <div id="so-ext-native-language-block" class="d-flex ai-center jc-space-between p16${this.isUseSearchRedirectBtn() ? '' : ' o50 pe-none'}">
  114.                                             <label class="s-label flex--item" for="so-ext-native-language">Native language
  115.                                                 <p class="s-description">The two-letter code for the subdomain of the regional StackOverflow site. Used when redirecting search queries to the English version and vice versa.</p>
  116.                                             </label>
  117.                                             <div class="d-flex">
  118.                                                 <select id="so-ext-native-language" class="flex--item s-input" style="width: 75px;" autofocus="true">
  119.                                                     ${options}
  120.                                                 </select>
  121.                                             </div>
  122.                                         </div>
  123.  
  124.                                         <div class="d-flex ai-center jc-space-between p16">
  125.                                             <label class="flex--item s-label p0" for="so-ext-add-meta-link">
  126.                                                 <div class="d-flex ai-center">Add a link to the side menu</div>
  127.                                                 <p class="s-description">If this option is enabled, a link to the Meta will be added to the side menu of the StackOverflow site, and a link to the StackOverflow site will be added to the Meta site.</p>
  128.                                             </label>
  129.                                             <div class="flex--item s-toggle-switch">
  130.                                                 <input id="so-ext-add-meta-link" type="checkbox"${this.addLinkToMeta() ? 'checked="checked"' : ''}>
  131.                                                 <div class="s-toggle-switch--indicator"></div>
  132.                                             </div>
  133.                                         </div>
  134.  
  135.                                         <div class="d-flex ai-center jc-space-between p16">
  136.                                             <label class="flex--item s-label p0" for="so-ext-toggle-meta-block">
  137.                                                 <div class="d-flex ai-center">Minimize the Meta block</div>
  138.                                                 <p class="s-description">If this option is enabled, the Meta block with popular questions can be minimized and maximized with the state saved in the local storage.</p>
  139.                                             </label>
  140.                                             <div class="flex--item s-toggle-switch">
  141.                                                 <input id="so-ext-toggle-meta-block" type="checkbox"${this.toggleMetaBlock() ? 'checked="checked"' : ''}>
  142.                                                 <div class="s-toggle-switch--indicator"></div>
  143.                                             </div>
  144.                                         </div>
  145.  
  146.                                         <div class="d-flex ai-center p16 button-panel">
  147.                                             <button class="flex--item s-btn s-btn__filled" role="button" value="cancel">Cancel</button>
  148.                                             <button class="flex--item s-btn s-btn__filled" role="button" value="save">Save</button>
  149.                                             <button class="flex--item s-btn s-btn__primary" role="button" value="save-reload">Save and reload</button>
  150.                                         </div>
  151.  
  152.                                     </div>
  153.  
  154.                                 </div>`);
  155.         return this;
  156.     },
  157.     addCSSStyles: function() {
  158.  
  159.         'use strict';
  160.  
  161.         GM_addStyle(GM_getResourceText("IZI_MODAL"));
  162.         GM_addStyle('#iziModal { background-color: var(--theme-content-background-color); box-shadow: 0px 0px 2px 0px var(--theme-button-color); }'+
  163.                     '#iziModal * { font-family: var(--theme-body-font-family); }' +
  164.                     '#iziModal .iziModal-header-title, #iziModal label { color: var(--theme-body-font-color); }' +
  165.                     '#iziModal .iziModal-header-subtitle { color: var(--theme-footer-link-color); }' +
  166.                     '#iziModal .iziModal-header .iziModal-button-close { background: ' +
  167.                                                                         'url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAl' +
  168.                                                                         'CAYAAADFniADAAAACXBIWXMAAAsTAAALEwEAmpwYAAADIklEQVRYhe2XTWjUQ' +
  169.                                                                         'BSA1/qHP+A//oAgqCcVFA9W7WYSu1YPBfWwIFWbmSys+FM9qcfFiqggFMWDJ/' +
  170.                                                                         'EmFfWooCfRg4gXZRWUaruzSX8Ei9aTRbu+l0x2s9mNu8lmC0IehCTz8+Z7782' +
  171.                                                                         'bvMRikUQSyX8ouYS2xlC0Dq7QLk7UHp2ohw1Z3f1pf8/caQXBBfMyO6PL7DXc' +
  172.                                                                         'p+BecF95wn7kCe3XJW1n04G4xA7BYkOlxekfnbCsLtPHOqEP8jJ9AW2j5ZD00' +
  173.                                                                         'SBRV4UOU4jFZsCCvUXPEKZjuIbi6dWVYzMteaK2wvg74LHfAn6IE21zqFCg9K' +
  174.                                                                         'LD8j7empxXzzwu0S0A98EEk+lEaGBc1o6gh6yLHse2AsnMqjUPx6CHPyfSiyC' +
  175.                                                                         '0zwXYF96RWtoQUK6tawkoGxchu4xtepyuResNoh70mvdme3o27iWYcxvB9PZj' +
  176.                                                                         'y+B5QITyVkNQoOCaCNu7QjI5EzesrRzuv6qBmUCEPXQkw3XTGFltF+Gf5CS1I' +
  177.                                                                         'RAQQoBHvqIiQ6YHSm3snmN/TWJGlgGhhxz9TnCY+9QKI7sUCIormiSUj+Ni5b' +
  178.                                                                         'CVYLWATCiFddueDwQFXrogFNx397lDhACQ/i+L7xha4V2nDLexFfaYkb1HF/i' +
  179.                                                                         'Ggoy5IRa4Wq2/0mPeHnIZO2FCEXWdbyiw/K61n9h5rzFGZ3q++wTH5PinXpkN' +
  180.                                                                         'in21IwCUlXlei1Tuobo99dPUK9GNvqF0op1r5p4aIycX+oYyJBqvln1eWVYtK' +
  181.                                                                         '90egzbVgqZvfQOhlJ1TQnmttK8FBvqeic9NbyAo0zLIPBGObMMnOmEJe15O6V' +
  182.                                                                         '4fGAogFoOrvwmrr5jK6/j2lTxG+/DbZ5D0cjvr4LoZGMgWrBJECk+BlSfMRX1' +
  183.                                                                         'UCWgYFn/CSwMNVwm2FMMoLK33NIaafStk5Ue7noKwbQoFCMUsP+CIMMtfK5TD' +
  184.                                                                         'sMhZ/HGoHJtp0RW6Cw9fezw856Be3xYakFPAY51YqBU3MRZ+hL6H5yelGp2Nu' +
  185.                                                                         'fr7R/ekVjYFyJZsMjnHIPQ0QLzy+puBvu+40QN9ShoV/HHgMt0HoaUAcwozEn' +
  186.                                                                         '+rEHzaYSKJJJIQ5C/46/lP65NjdQAAAABJRU5ErkJggg==\') no-repeat 50% 50%;' +
  187.                                                                         'width: 48px; }' +
  188.                     '#iziModal .izi-content { background-color: var(--theme-content-background-color); }' +
  189.                     '#iziModal .izi-content > div { border-bottom: 1px solid var(--theme-content-border-color); }' +
  190.                     '#iziModal .izi-content > div:last-child { border-bottom: 0; }' +
  191.                     '#iziModal label {  }' +
  192.                     '#iziModal .s-description { color: var(--theme-footer-link-color); }' +
  193.                     '#iziModal .button-panel { justify-content: flex-end; background-color: var(--theme-footer-background-color); }' +
  194.                     '#iziModal .button-panel button { margin-left: 10px; }' +
  195.                     'body > div.iziModal-overlay { backdrop-filter: blur(1px); }' +
  196.                     'body > .container, #content { transition: all 0.5s ease-in-out; }' +
  197.                     'body > div.container.fullWidth, ' +
  198.                     'body > div.container.fullWidth #content { max-width: 100% !important;  }');
  199.  
  200.         return this;
  201.     },
  202.  
  203.     init: function() {
  204.         return this.setLSDefaults()
  205.             .addSettingsModalDialog()
  206.             .addCSSStyles();
  207.     },
  208.     addButtons: function () {
  209.         let self = this,
  210.         addScriptSettings = function() {
  211.             $('<li><ol class="nav-links"><a href="#" class="nav-links--link">UserScript settings</a></li></ol></li>')
  212.                 .on('click', 'a', function(e) {
  213.                     e.preventDefault();
  214.                     e.stopPropagation();
  215.                     $("#iziModal").iziModal({
  216.                         title: 'Extended StackOverflow Settings',
  217.                         subtitle: 'All settings are saved in the local storage and will take effect when the page reloads',
  218.                         headerColor: 'var(--theme-footer-background-color)',
  219.                         // background: 'rgba(78, 78, 71, 1)',
  220.                         // icon: '.close-icon',
  221.                         // iconText: null,
  222.                         //iconColor: 'var(--theme-body-font-color)',
  223.                         width: 600,
  224.                         radius: 'var(--br-sm)',
  225.                         borderBottom: false,
  226.                         zindex: 9999,
  227.                         focusInput: true,
  228.                         bodyOverflow: false,
  229.                         // fullscreen: true,
  230.                         // openFullscreen: false,
  231.                         appendToOverlay: 'body', // or false
  232.                         overlay: true,
  233.                         overlayClose: true,
  234.                         // overlayColor: 'rgba(0, 0, 0, 0.3)'
  235.                     }).iziModal('open');
  236.                 })
  237.                 .insertAfter($('#left-sidebar nav > ol > li').last());
  238.  
  239.          $('#iziModal')
  240.             .on('click', 'button', function(e) {
  241.                  if(e.target.value.startsWith('save')) {
  242.                      localStorage[self.lsKeys.nativeLang] = $('#so-ext-native-language option:selected').val();
  243.                      localStorage[self.lsKeys.useSearchRedirectBtn] = $('#so-ext-search-btn-toggle').is(':checked');
  244.                      localStorage[self.lsKeys.addLinkToMeta] = $('#so-ext-add-meta-link').is(':checked');
  245.                      localStorage[self.lsKeys.toggleMetaBlock] = $('#so-ext-toggle-meta-block').is(':checked');
  246.                  }
  247.                  if(e.target.value.endsWith('reload')) {
  248.                      document.location.reload();
  249.                  }
  250.                  $('#iziModal').iziModal('close');
  251.             })
  252.             .on('change', 'input', function(e) {
  253.                if(e.target.id == 'so-ext-search-btn-toggle') {
  254.                    $('#so-ext-native-language-block')[e.target.checked ? 'removeClass' : 'addClass']('o50 pe-none');
  255.                }
  256.             });
  257.         },
  258.         addWatchedTags = function () {
  259.             let tags = [],
  260.             urlPrefix = window.location.origin + '/questions/tagged/';
  261.             $('.js-watched-tag-list a.user-tag').each(function (idx, itm) {
  262.                 let url = itm.href;
  263.                 tags.push(url.substring(url.lastIndexOf('/') + 1));
  264.             });
  265.             if (tags.length) {
  266.                 let url = urlPrefix + tags.join('+or+');
  267.                 let $header = self.$sidebar.find(".js-tag-preferences-container > div").first().find("h2");
  268.                 if ($header.length > 0) {
  269.  
  270.                     $header[0].innerHTML = '<a class="post-tag user-tag" href="' + url + '">' + $header.text() + '</a>';
  271.                 }
  272.             }
  273.         },
  274.         addMetaToggles = function () {
  275.             if(!self.toggleMetaBlock()) {
  276.                 return;
  277.             }
  278.             let showHideMetas = function ($elem) {
  279.                 let isVisible = localStorage[self.lsKeys.metaBlockIsVisible] === 'true';
  280.                 let $elems = $elem.parent().children('li.s-sidebarwidget--item');
  281.                 $elems.each(function(idx, itm){
  282.                     let $itm = $(itm);
  283.                     if(isVisible)
  284.                     {
  285.                         $itm.removeAttr('style');
  286.                     } else {
  287.                          $itm.attr('style', 'display: none !important');
  288.                     }
  289.                 });
  290.             };
  291.             self.$sidebar
  292.             .find('div.s-sidebarwidget li.s-sidebarwidget--header')
  293.             .each(function (idx, itm) {
  294.                 let $itm = $(itm);
  295.                 $itm
  296.                 .attr('title', ruSO.strings.clickToToggle)
  297.                 .css('cursor', 'pointer')
  298.                 .on('click', function (e) {
  299.                     let isVisible = localStorage.getItem(self.lsKeys.metaBlockIsVisible) === 'true';
  300.                     localStorage.setItem(self.lsKeys.metaBlockIsVisible, !isVisible);
  301.                     showHideMetas($(e.target));
  302.                 });
  303.                 showHideMetas($itm);
  304.             });
  305.         },
  306.         addLinkToMeta = function () {
  307.             if(!self.addLinkToMeta()) {
  308.                 return;
  309.             }
  310.             const isMeta = window.location.host.includes('meta.');
  311.             const link = isMeta ? window.location.host.split('.').filter(part => part !== 'meta').join('.')
  312.                                 : 'meta.' + window.location.host;
  313.             const linkText = isMeta ? 'StackOverflow' : 'Meta';
  314.             $('<li><ol class="nav-links"><a href="https://' + link + '" class="nav-links--link">' + linkText + '</a></ol></li>').insertAfter($('#left-sidebar nav > ol > li').last());
  315.         },
  316.         addFullWidth = function () {
  317.             let $header = $('#question-header');
  318.             self.$fullWidthBtn = $header.find('div').clone();
  319.             self.$fullWidthBtn.attr('id', 'set-full-width-btn').find('a')
  320.             .removeClass('s-btn__primary')
  321.             .addClass('s-btn__filled')
  322.             .attr('href', '#')
  323.             .text(self.strings.setFullWidth)
  324.             .on('click', function (e) {
  325.                 e.preventDefault();
  326.                 e.stopPropagation();
  327.                 self.$container.toggleClass('fullWidth');
  328.                 $(this).toggleText(self.strings.setFullWidth, self.strings.resetFullWidth);
  329.             });
  330.             $header.append(self.$fullWidthBtn);
  331.         },
  332.         addRedirectToSO = function () {
  333.             if(!self.isUseSearchRedirectBtn()) {
  334.                 return;
  335.             }
  336.             let localPrefix = self.getNativeLang() + '.';
  337.             let isLocalSO = location.host.substr(0, 3) === localPrefix;
  338.             let btnText = isLocalSO ? 'en' : self.getNativeLang();
  339.             let $btn = $('<div class="print:d-none"><a href="#" class="s-btn s-btn__filled s-btn__xs s-btn__icon ws-nowrap">' + btnText + '</a></div>');
  340.             $btn.insertAfter($('#search'));
  341.             $btn.on('click', function () {
  342.                 location.host = isLocalSO ? location.host.substr(localPrefix.length)
  343.                                         : localPrefix + location.host;
  344.             });
  345.         };
  346.         addWatchedTags();
  347.         addMetaToggles();
  348.         addLinkToMeta();
  349.         addFullWidth();
  350.         addRedirectToSO();
  351.         addScriptSettings();
  352.         return this;
  353.     },
  354.     addAuthorQuestionsLinks: function () {
  355.         let $userDetails = $('div.owner > div.user-info > div.user-details');
  356.         if ($userDetails.length > 0) {
  357.             let $postTags = $('div.post-taglist').find('a.post-tag');
  358.             let tags = [];
  359.             for (const $postTag of $postTags) {
  360.                 tags.push('[' + $postTag.href.split('/').slice(-1).pop() + ']');
  361.             }
  362.             let tagsUrl = tags.join('+or+');
  363.             for (const userDetail of $userDetails) {
  364.                 const $userDetail = $(userDetail);
  365.                 const $userUrl = $userDetail.find('a');
  366.                 const userName = $userUrl.text();
  367.                 const userId = $userUrl[0].href.split('/')[4];
  368.                 const baseSearchUrl = `https://ru.stackoverflow.com/search?tab=newest&q=user%3A${userId}+is%3Aq`;
  369.                 let elem = `<span>? <a href="${baseSearchUrl}" title="Все вопросы ${userName}">все</a>`;
  370.                 if (tags.length > 0) {
  371.                     elem += `, <a href="${baseSearchUrl}+${tagsUrl}" title="Вопросы ${userName} с метками текущего вопроса">с такими-же метками</a>`;
  372.                 }
  373.                 elem += '</span>';
  374.                 $(elem).insertAfter($userDetail);
  375.             }
  376.         }
  377.         return this;
  378.     },
  379.     selectElemText: function(elem) {
  380. 		const range = document.createRange();
  381.         range.selectNodeContents(elem);
  382.         const sel = window.getSelection();
  383.         sel.removeAllRanges();
  384.         sel.addRange(range);
  385.     },
  386.     getSelectedText: function() {
  387.         let text = '';
  388.         if (window.getSelection) {
  389.             text = window.getSelection();
  390.         } else if (document.getSelection) {
  391.             text = document.getSelection();
  392.         } else if (document.selection) {
  393.             text = document.selection.createRange().text;
  394.         }
  395.         return text;
  396.     },
  397.     copyToClipboard: function(text) {
  398.         if (window.clipboardData && window.clipboardData.setData) {
  399.             return window.clipboardData.setData("Text", text);
  400.         } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
  401.             const textarea = document.createElement("textarea");
  402.             textarea.textContent = text;
  403.             textarea.style.position = "fixed";
  404.             document.body.appendChild(textarea);
  405.             textarea.select();
  406.             try {
  407.                 return document.execCommand("copy");
  408.             } catch (ex) {
  409.                 console.warn("Copy to clipboard failed", ex);
  410.                 return false;
  411.             } finally {
  412.                 document.body.removeChild(textarea);
  413.             }
  414.         }
  415.     },
  416. 	addCopyToClipboard: function() {
  417.  
  418. 		const self = this;
  419.  
  420.         $('.snippet-ctas').each(function() {
  421.             const $el = $(this);
  422.             const $availableBtn = $el.find('.copySnippet');
  423.             const $snipBtn = $availableBtn.clone();
  424.             $snipBtn.val(self.strings.intoClipboard);
  425.             $snipBtn.click(function() {
  426.  
  427.                 let code = "";
  428.  
  429.                 $snipBtn.closest('.snippet-code').find('pre > code').each(function() {
  430.                     self.selectElemText(this);
  431.                     let selectedText = self.getSelectedText();
  432.                     code += selectedText + '\n';
  433.                     window.getSelection().removeAllRanges();
  434.                 });
  435.  
  436.                 if(self.copyToClipboard(code)) {
  437.                     $snipBtn.val(self.strings.copied);
  438.                 } else {
  439.                     $snipBtn.val(self.strings.canNotCopy);
  440.                 }
  441.  
  442.                 setTimeout(function () {
  443.                     $snipBtn.val(self.strings.intoClipboard);
  444.                 }, 2000);
  445.             });
  446.             $availableBtn.after($snipBtn);
  447.         });
  448.  
  449.         $("pre").each(function () {
  450.  
  451.             const $pre = $(this);
  452.             const $parent = $pre.parent();
  453.  
  454.             if($parent.hasClass('snippet-code')) {
  455.                 const padding = ($parent.innerWidth() - $parent.width()) / 2;
  456.                 $pre.wrapAll('<div style="position: relative; padding-bottom: ' + padding + 'px;"></div>');
  457.             } else {
  458.                 $pre.wrapAll('<div style="position: relative;"></div>');
  459.             }
  460.  
  461.             const $btn = $("<button class='copy-code-button s-btn s-btn__filled s-btn__xs'>" + self.strings.copy + "</button>");
  462.             $btn.css({
  463.                 "position": "absolute",
  464.                 "top": "6px",
  465.                 "right": "12px",
  466.                 "display": "none"
  467.             });
  468.             $pre.append($btn);
  469.  
  470.             let $container = $btn.siblings("code");
  471.             $pre.hover(function () {
  472.                 $btn.css("display", "block");
  473.             }, function () {
  474.                 $btn.css("display", "none");
  475.             });
  476.  
  477.             setTimeout(function () {
  478.                 if ($container.length == 0) {
  479.                     $pre.contents().filter(function () {
  480.                         return this.className !== "copy-code-button";
  481.                     }).wrapAll('<code style= "overflow-x: auto; padding: 0px;"></code>');
  482.                     $container = $btn.siblings("code").get(0);
  483.                 } else {
  484.                     $container = $container.get(0);
  485.                 }
  486.             }, 0);
  487.  
  488.             $btn.click(function () {
  489.                 self.selectElemText($container);
  490.                 const selectedText = self.getSelectedText();
  491.                 let buttonNewText = "";
  492.                 if (self.copyToClipboard(selectedText)) {
  493.                     buttonNewText = self.strings.copied;
  494.                 } else {
  495.                     buttonNewText = self.strings.canNotCopy;
  496.                 }
  497.                 window.getSelection().removeAllRanges();
  498.                 $(this).text(buttonNewText);
  499.                 const that = this;
  500.                 setTimeout(function () {
  501.                     $(that).text(self.strings.copy);
  502.                 }, 400);
  503.             });
  504.         });
  505.         return this;
  506.     }
  507. };
  508.  
  509. ruSO.init();
  510.  
  511. window.addEventListener('load', function () {
  512.     ruSO
  513.     .addButtons()
  514.     .addAuthorQuestionsLinks()
  515.     .addCopyToClipboard();
  516. }, false);