☰

Samlib Reader

Делает самиздатовские текста более читабельными: смена фона на тёмный, смена шрифта на verdana, смена цвета текста на светлый, текст выровнен по ширине строки, добавлен автоматический перенос слов. Дополнительно добавлено окно настроек, позволяющее изменить ширину текста, тип и размер шрифта, цвет общего фона страницы, а также принудительно сменить цвет текста, в случае, когда автор вручную установил цвет части текста. Работает также на zhurnal.lib.ru, budclub.ru

  1. // ==UserScript==
  2. // @name Samlib Reader
  3. // @description Делает самиздатовские текста более читабельными: смена фона на тёмный, смена шрифта на verdana, смена цвета текста на светлый, текст выровнен по ширине строки, добавлен автоматический перенос слов. Дополнительно добавлено окно настроек, позволяющее изменить ширину текста, тип и размер шрифта, цвет общего фона страницы, а также принудительно сменить цвет текста, в случае, когда автор вручную установил цвет части текста. Работает также на zhurnal.lib.ru, budclub.ru
  4. // @copyright 2019, Angens (https://openuserjs.org/users/angens)
  5. // @license MIT
  6. // @version 3.0.1
  7. // @match http://samlib.ru/*
  8. // @match http://zhurnal.lib.ru/*
  9. // @match http://budclub.ru/*
  10. // @grant none
  11. // @namespace https://greasyfork.org/users/386214
  12. // ==/UserScript==
  13. //
  14. // ==OpenUserJS==
  15. // @author angens
  16. // ==/OpenUserJS==
  17.  
  18.  
  19.  
  20. /* Функция простановки мягких дефисов в каждое слово */
  21. const rules = [
  22.     [/[йъь][аеёиоуыэюяАЕЁИОУЫЭЮЯбвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯбвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ]/g, 1],
  23.     [/[аеёиоуыэюя][аеёиоуыэюяАЕЁИОУЫЭЮЯ]/g, 1],
  24.     [/[бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯ][аеёиоуыэюяАЕЁИОУЫЭЮЯ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ]/g, 2],
  25.     [/[бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯ]/g, 2],
  26.     [/[аеёиоуыэюяАЕЁИОУЫЭЮЯ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯ]/g, 2],
  27.     [/[аеёиоуыэюяАЕЁИОУЫЭЮЯ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][бвгджзклмнпрстфхцчшщБВГДЖЗКЛМНПРСТ][аеёиоуыэюяАЕЁИОУЫЭЮЯ]/g, 3]
  28.   ]
  29. function replacer(match) {
  30.   let pos = 0
  31.   rules.forEach(rule => {
  32.     if(rule[0].test(match)){pos = rule[1]}
  33.   })
  34.   let result = match
  35.   if(pos != 0) {result = match.slice(0, pos) + "­" + match.slice(pos)}
  36.   return result
  37. }
  38. function process_text(text) {
  39.   
  40.   let text_2 = text
  41.   rules.forEach(rule => {
  42.     while(text_2.match(rule[0]) != null) {
  43.       text_2 = text_2.replaceAll(rule[0], replacer)
  44.     }
  45.   })
  46.   
  47.   return text_2
  48. }
  49.  
  50.  
  51. class samlibReader {
  52.   constructor() {
  53.     this.init_styles()
  54.     this.init_text_and_description()
  55.     this.init_controls()
  56.     
  57.     let main_container = document.createElement('div')
  58.     main_container.classList.add('samlibReader', 'mainContainer')
  59.     
  60.     let sub_container = document.createElement('div')
  61.     sub_container.classList.add('samlibReader', 'subContainer')
  62.     
  63.     main_container.append(sub_container, this.description)
  64.     sub_container.append(this.controls, this.new_element)
  65.     document.body.append(this.styles, main_container)
  66.     
  67.     this.new_element.innerHTML = process_text(this.new_element.innerHTML)
  68.   }
  69.    
  70.   /* Парсим блок текста и блок описания */
  71.   init_text_and_description() {
  72.     let lines = document.querySelectorAll('hr')
  73.     let tail = document.createElement('div')
  74.     while (lines[lines.length - 3].nextSibling){
  75.       tail.append(lines[lines.length - 3].nextSibling)
  76.     }
  77.     let descLines = tail.querySelectorAll('hr')
  78.     
  79.     // Создаём блок описания
  80.     this.description = document.createElement('div')
  81.     while (descLines[descLines.length - 2].nextSibling){
  82.       this.description.append(descLines[descLines.length - 2].nextSibling)
  83.     }
  84.     this.description.insertBefore(descLines[descLines.length - 2], this.description.firstChild)
  85.     
  86.     // Создаём блок текста
  87.     this.new_element = document.createElement('div')
  88.     while (tail.firstChild){
  89.         this.new_element.append(tail.firstChild)
  90.       }
  91.       tail = null
  92.     
  93.     this.new_element.classList.add('samlibReader', 'newElement')
  94.     this.description.classList.add('samlibReader', 'description')
  95.   }
  96.   
  97.   /* Создём блок настроек */
  98.   init_controls() {
  99.     this.controls = document.createElement('div')
  100.     this.controls.classList.add('samlibReader', 'controls')
  101.     
  102.     let controls_container = document.createElement('div')
  103.     controls_container.classList.add('samlibReader', 'controlsContainer')    
  104.     let controls_overlay = document.createElement('a')
  105.     controls_overlay.classList.add('samlibReader', 'controlsOverlay')    
  106.     this.controls_content = document.createElement('div')
  107.     this.controls_content.classList.add('samlibReader', 'controlsContent')
  108.     
  109.     controls_overlay.addEventListener('click', () => {
  110.       if(controls_overlay.classList.contains('active')){
  111.         this.controls_content.style.setProperty('display', "none")
  112.         this.controls_height = this.controls_height_d
  113.         controls_overlay.classList.remove('active')
  114.         this.set_styles()      
  115.       }else{
  116.         this.controls_content.style.setProperty('display', "flex")
  117.         this.controls_height = this.controls_content.offsetHeight
  118.         controls_overlay.classList.add('active')
  119.         this.set_styles()        
  120.       }
  121.     })
  122.     
  123.     controls_overlay.innerText = "⚙"
  124.     
  125.     this.controls.append(controls_container)
  126.     controls_container.append(controls_overlay, this.controls_content)
  127.     
  128.     this.set_controls()
  129.   }
  130.   set_controls() {
  131.     let width_control = this.create_width_control()
  132.     let font_control = this.create_font_control()
  133.     
  134.     let background_control = this.create_list_block('Сделать весь фон тёмным')
  135.     let font_color_control = this.create_list_block('Принудительно применить стили шрифта')
  136.     let font_bgcolor_control = this.create_list_block('Принудительно сменить цвет фона в тексте')
  137.     
  138.     background_control.addEventListener('click', () => {
  139.       if(background_control.classList.contains("active")){
  140.         this.body_bgcolor = "#212127"
  141.         this.body_color = "white"
  142.         this.body_link_color = this.link_color
  143.         this.body_link_color_v = this.link_color_v
  144.         this.set_styles()
  145.       } else {
  146.         this.body_bgcolor = ""
  147.         this.body_color = ""
  148.         this.body_link_color = ""
  149.         this.body_link_color_v = ""
  150.         this.set_styles()
  151.       }
  152.     })
  153.     font_color_control.addEventListener('click', () => {
  154.       if(font_color_control.classList.contains("active")){
  155.         this.font_font = "inherit"
  156.         this.font_size = "inherit"
  157.         this.font_color = "inherit"
  158.         this.font_align = "justify"
  159.         this.set_styles()
  160.       } else {
  161.         this.font_font = ""
  162.         this.font_size = ""
  163.         this.font_color = ""
  164.         this.font_align = ""
  165.         this.set_styles()
  166.       }
  167.     })
  168.     font_bgcolor_control.addEventListener('click', () => {
  169.       if(font_bgcolor_control.classList.contains("active")){
  170.         this.font_bgcolor = "inherit"
  171.         this.set_styles()
  172.       } else {
  173.         this.font_bgcolor = ""
  174.         this.set_styles()
  175.       }
  176.     })
  177.     
  178.     background_control.click()
  179.     
  180.     this.controls_content.append(width_control, font_control, background_control, font_color_control, font_bgcolor_control)
  181.   }
  182.   create_width_control() {
  183.     let ui = document.createElement('div')
  184.     let buttonbox = document.createElement('div')
  185.     let sliderbox = document.createElement('div')
  186.     let s30 = document.createElement('button')
  187.     let s40 = document.createElement('button')
  188.     let s50 = document.createElement('button')
  189.     let slider = document.createElement('input')
  190.     let value = document.createElement('a')
  191.     let preview = document.createElement('div')
  192.     
  193.     ui.append(buttonbox, sliderbox)
  194.     buttonbox.append(s30, s40, s50)
  195.     sliderbox.append(slider, value)
  196.     this.new_element.prepend(preview)
  197.     
  198.     slider.setAttribute('type', "range")
  199.     slider.min = 1
  200.     slider.max = 100
  201.     slider.value = 40
  202.     slider.step = 1
  203.     
  204.     sliderbox.addEventListener('mouseover', () => {
  205.       document.querySelector(".samlibReader.previewBox").style.setProperty('width', `calc(${slider.value}vw - 66px)`)
  206.       document.querySelector(".samlibReader.previewBox").style.setProperty('display', "block")
  207.     })
  208.     sliderbox.addEventListener('mouseleave', () => {
  209.       document.querySelector(".samlibReader.previewBox").style.setProperty('display', "none")
  210.     })
  211.     slider.addEventListener('input', () => {
  212.       document.querySelector(".samlibReader.previewBox").style.setProperty('width', `calc(${slider.value}vw - 66px)`)
  213.       value.innerText = slider.value + "%"
  214.     })
  215.     slider.addEventListener('change', () => {
  216.       this.text_width = slider.value
  217.       value.innerText = slider.value + "%"
  218.       this.set_styles()
  219.     })
  220.     s30.addEventListener('click', () => {
  221.       this.text_width = 30
  222.       slider.value = 30
  223.       value.innerText = 30 + "%"
  224.       this.set_styles()
  225.     })
  226.     s40.addEventListener('click', () => {
  227.       this.text_width = 40
  228.       slider.value = 40
  229.       value.innerText = 40 + "%"
  230.       this.set_styles()
  231.     })
  232.     s50.addEventListener('click', () => {
  233.       this.text_width = 50
  234.       slider.value = 50
  235.       value.innerText = 50 + "%"
  236.       this.set_styles()
  237.     })
  238.     
  239.     value.innerText = this.text_width
  240.     s30.innerText = 30 + "%"
  241.     s40.innerText = 40 + "%"
  242.     s50.innerText = 50 + "%"
  243.     
  244.     s40.click()
  245.     
  246.     ui.classList.add('samlibReader', 'controls', 'widthControl')
  247.     buttonbox.classList.add('samlibReader', 'controls', 'buttonbox')
  248.     sliderbox.classList.add('samlibReader', 'controls', 'sliderbox')
  249.     preview.classList.add('samlibReader', 'previewBox')
  250.     
  251.     return ui
  252.   }
  253.   create_font_control() {
  254.     let ui = document.createElement('div')
  255.     let family_box = document.createElement('div')
  256.     let size_box = document.createElement('div')
  257.     let family_selector = document.createElement('select')
  258.     let family_input = document.createElement('input')
  259.     let size_minus = document.createElement('button')
  260.     let size_plus = document.createElement('button')
  261.     let size_value = document.createElement('a')
  262.     
  263.     ui.append(family_box, size_box)
  264.     family_box.append(family_selector, family_input)
  265.     size_box.append(size_minus, size_value, size_plus)
  266.     
  267.     ui.classList.add('samlibReader', 'controls', 'fontControl')
  268.     family_box.classList.add('samlibReader', 'controls', 'familyBox')
  269.     size_box.classList.add('samlibReader', 'controls', 'sizeBox')
  270.     
  271.     let options = ["verdana", "arial", "roboto", "roboto condensed", "собственный"]
  272.     options.forEach(optionText => {
  273.       let option = document.createElement('option')
  274.       option.text = optionText
  275.       family_selector.add(option)
  276.     })
  277.     
  278.     family_selector.addEventListener('input', () => {
  279.       if(family_selector.selectedIndex != options.length-1){
  280.         this.text_font = options[family_selector.selectedIndex]
  281.         family_input.style.setProperty('display', "none")
  282.         this.set_styles()
  283.       } else {
  284.         this.text_font = family_input.value
  285.         family_input.style.setProperty('display', "block")
  286.         this.set_styles()
  287.       }
  288.     })
  289.     family_input.addEventListener('input', () => {
  290.       this.text_font = family_input.value
  291.       this.set_styles()
  292.     })
  293.     size_plus.addEventListener('click', () => {
  294.       this.text_size += 1
  295.       size_value.innerText = this.text_size
  296.       this.set_styles()
  297.     })
  298.     size_minus.addEventListener('click', () => {
  299.       this.text_size -= 1
  300.       size_value.innerText = this.text_size
  301.       this.set_styles()
  302.     })
  303.     
  304.     family_input.style.setProperty('display', "none")
  305.     size_plus.innerText = "+"
  306.     size_minus.innerText = "−"
  307.     size_value.innerText = this.text_size
  308.     
  309.     return ui
  310.   }
  311.   create_list_block(text) {
  312.     let ui = document.createElement('div')
  313.     let input = document.createElement('input')
  314.     let label = document.createElement('label')
  315.     
  316.     label.innerText = text
  317.     input.setAttribute('type', "checkbox")
  318.     ui.append(input, label)
  319.     
  320.     ui.classList.add('samlibReader', 'controls', 'listBlock')
  321.     
  322.     ui.addEventListener('click', () => {
  323.       if(ui.classList.contains('active')) {
  324.         ui.classList.remove('active')
  325.         input.checked = false
  326.       } else {
  327.         ui.classList.add('active')
  328.         input.checked = true
  329.       }
  330.     })
  331.     
  332.     return ui
  333.   }
  334.   
  335.   /* Создаём блок стилей */
  336.   init_styles() {
  337.     this.styles = document.createElement('style')
  338.     
  339.     this.controls_width = 40
  340.     this.controls_height = 40
  341.     this.controls_height_d = 40
  342.     this.controls_content_width = 400
  343.     this.background_color = "#212127"
  344.     this.text_width = 100
  345.     this.text_font = "verdana"
  346.     this.text_size = 18
  347.     this.font_font = ""
  348.     this.font_size = ""
  349.     this.font_color = ""
  350.     this.font_bgcolor = ""
  351.     this.font_align = ""
  352.     this.link_color = "#A4A4AA"
  353.     this.link_color_v = "#FEE6FB"
  354.     
  355.     this.body_bgcolor = ""
  356.     this.body_color = ""
  357.     this.body_link_color = ""
  358.     this.body_link_color_v = ""
  359.     
  360.     this.set_styles()
  361.   }
  362.   set_styles() {
  363.     this.styles.innerHTML = `
  364.       body{
  365.         background-color: ${this.body_bgcolor};
  366.         color: ${this.body_color};
  367.       }
  368.       a[href] {
  369.         color: ${this.body_link_color};
  370.       }
  371.       a[href]:visited {
  372.         color: ${this.body_link_color_v};
  373.       }
  374.       font[color="#555555"] {
  375.         color: ${this.body_color};
  376.       }
  377.       .samlibReader.mainContainer{
  378.         display: flex;
  379.         flex-direction: column;
  380.       }
  381.       .samlibReader.subContainer{
  382.         font-family: ${this.text_font};
  383.         font-size: ${this.text_size};
  384.         background-color: ${this.background_color};
  385.         color: wheat;
  386.         display: flex;
  387.         flex-direction: row;
  388.         position: relative;
  389.       }
  390.       .samlibReader a[href]{
  391.         color: ${this.link_color};
  392.       }
  393.       .samlibReader a[href]:visited{
  394.         color: ${this.link_color_v};
  395.       }
  396.       .samlibReader font{
  397.         color: ${this.font_color};
  398.         font-size: ${this.font_size};
  399.         font-family: ${this.font_font};
  400.       }
  401.       .samlibReader.newElement{
  402.         margin: 0 auto 0 auto;
  403.         text-align: justify;
  404.         width: ${this.text_width}vw;
  405.         padding-right: ${this.controls_width}px;
  406.       }
  407.       .samlibReader.newElement *{
  408.         font-family: ${this.font_font};
  409.         font-size: ${this.font_size};
  410.         background-color: ${this.font_bgcolor};
  411.         color: ${this.font_color};
  412.         text-align: ${this.font_align};
  413.         overflow-wrap: break-word;
  414.       }
  415.       .samlibReader.newElement img{
  416.         max-width: 100%;
  417.         height: auto;
  418.       }
  419.       .samlibReader.previewBox{
  420.         display: none;
  421.         box-sizing: border-box;
  422.         left: ${this.controls_width}px;
  423.         right: 0px;
  424.         margin: auto;
  425.         pointer-events: none;
  426.         position: absolute;
  427.         border: 5px solid cyan;
  428.         border-style: solid;
  429.         border-color: cyan;
  430.         border-width: 0px 5px 0px 5px;
  431.         height: 100%;
  432.       }
  433.       .samlibReader.controls > * {
  434.         font-family: Segoe UI;
  435.         font-size: 14px;
  436.         color: white;
  437.         user-select: none;
  438.         margin: 1px;
  439.       }
  440.       .samlibReader.controls{
  441.         width: ${this.controls_width}px;
  442.       }
  443.       .samlibReader.controls > button {
  444.         height: 20px;
  445.         border-width: 1px 1px 0px 1px;
  446.         border-style: solid;
  447.         border-color: white;
  448.         background-color: transparent;
  449.         border-radius: 5px;
  450.       }
  451.       .samlibReader.controls > button:hover {
  452.         border-width: 2px 2px 0px 2px;
  453.       }
  454.       .samlibReader.controls > button:active {
  455.         border-width: 2px 2px 0px 2px;
  456.         background-color: rgba(255,255,255,0.2);
  457.       }
  458.       .samlibReader.controlsContainer{
  459.         width: ${this.controls_width}px;
  460.         position: sticky;
  461.         top: 30%;
  462.         display: flex;
  463.         flex-direction: row;
  464.       }
  465.       .samlibReader.controlsOverlay{
  466.         width: ${this.controls_width}px;
  467.         height: ${this.controls_height}px;
  468.         
  469.         border-color: white;
  470.         border-width: 1px 1px 1px 1px;
  471.         border-style: solid;
  472.         border-radius: 15px 15px 15px 15px;
  473.         
  474.         font-size: ${this.controls_width - 10}px;
  475.         text-align: center;
  476.       }
  477.       .samlibReader.controlsOverlay:hover{
  478.         background-color: rgba(255,255,255,0.1);
  479.       }
  480.       .samlibReader.controlsOverlay.active{
  481.         height: ${this.controls_height - 2}px;
  482.         
  483.         border-color: white;
  484.         border-width: 1px 0px 1px 1px;
  485.         border-style: solid;
  486.         border-radius: 15px 0px 0px 15px;
  487.       }
  488.       .samlibReader.controlsContent{
  489.         width: ${this.controls_content_width}px;
  490.         background-color: ${this.background_color};
  491.         position: absolute;
  492.         left: ${this.controls_width}px;
  493.         
  494.         display: none;
  495.         flex-direction: column;
  496.         
  497.         border-color: white;
  498.         border-width: 1px 1px 1px 0px;
  499.         border-style: solid;
  500.         border-radius: 0px 15px 15px 0px;
  501.       }
  502.       .samlibReader.controls.widthControl{
  503.         width: ${this.controls_content_width}px;
  504.         display: flex;
  505.         flex-direction: column;
  506.       }
  507.       .samlibReader.controls.buttonbox{
  508.         display: flex;
  509.         flex-direction: row;
  510.       }
  511.       .samlibReader.controls.sliderbox{
  512.         width: ${this.controls_content_width}px;
  513.         display: flex;
  514.         flex-direction: row;
  515.       }
  516.       .samlibReader.controls.sliderbox > input{
  517.         flex-grow: 1;
  518.       }
  519.       .samlibReader.controls.sliderbox > a{
  520.         margin: 0px 2px 0px 2px;
  521.       }
  522.       .samlibReader.controls.fontControl{
  523.         width: ${this.controls_content_width}px;
  524.         display: flex;
  525.         flex-direction: column;
  526.       }
  527.       .samlibReader.controls.familyBox{
  528.         display: flex;
  529.         flex-direction: row;
  530.       }
  531.       .samlibReader.controls.familyBox > * {
  532.         color: black;
  533.       }
  534.       .samlibReader.controls.sizeBox{
  535.         display: flex;
  536.         flex-direction: row;
  537.       }
  538.       .samlibReader.controls.listBlock{
  539.         width: ${this.controls_content_width}px;
  540.         display: flex;
  541.         flex-direction: row;
  542.         white-space: nowrap;
  543.       }
  544.       .samlibReader.controls.listBlock:hover{
  545.         text-decoration: underline;
  546.       }
  547.       .samlibReader.controls.listBlock.active{
  548.         text-decoration: underline;
  549.       }
  550.       .samlibReader.controls.listBlock > input{
  551.         appearance: none;
  552.         width: 20px;
  553.         height: 20px;
  554.         border-radius: 20px;
  555.         background-color: transparent;
  556.         border-style: solid;
  557.         border-width: 1px 1px 0px 1px;
  558.         border-color: white;
  559.       }
  560.       .samlibReader.controls.listBlock > input:hover{
  561.         border-width: 2px 2px 0px 2px;
  562.       }
  563.       .samlibReader.controls.listBlock > input:checked{
  564.         border-width: 2px 2px 0px 2px;
  565.         background-color: #005CC8;
  566.       }
  567.     `
  568.   }
  569. }
  570.  
  571.  
  572. function main() {
  573.   let mRef = /http:\/\/(zhurnal\.lib\.ru|samlib\.ru|budclub\.ru)\/.\/.+\/.+\.shtml/
  574.   let exRef = /http:\/\/(zhurnal\.lib\.ru|samlib\.ru|budclub\.ru)\/.\/.+\/(index|stat).+\.shtml/
  575.   let currRef = window.location.href
  576.   
  577.   if (mRef.test(currRef) && !exRef.test(currRef)) {
  578.     let a = new samlibReader()
  579.   }  
  580. }
  581.  
  582. document.addEventListener("DOMContentLoaded", main())