Большинство интернет ресурсов разный размер шрифта, бывает такое, что некоторые вообще не читабельные, где нужно увеличивать шрифт. Хотя эти компоненты служат для цели, они также могут отвлечь вас от того, что вас может заинтересовать на странице. Хороший пример возникает, когда вы читаете новостную статью, где ваш намеченный фокус находится исключительно на тексте. В подобных случаях вы можете смотреть на вторичные предметы. Как-то давно я уже писал такой скрипт и многим он понравился, даже не смотря на то, что по факту был кривой.
В этот раз я все передумал, переделал и представляю вашему вниманию, абсолютно новый "режим чтения".
Отличия от первой части внушительно, но основное предназначение тоже.
Отличительные особенности от первой версии заключаются в том, что вы можете выбрать для себя нужный цвет фона и размер шрифта.
Фон светлый с тёмными буквами и тёмный со светлыми.
Маленький и огромный шрифт.
А так же, это всё храниться в "памяти" браузера, т.е. когда вы зайдёте на сайт, то все изменения будут сохранены.
Как бонус, добавлена кнопка "наверх" и "прогресс" - который покажет на сколько вы близко к концу текста.
Если первая версия изначально имела вывод переменной $BRIEF или $MESSAGE$, то данная версия "вытаскивает" нужный текст откуда нужно вам.
И так, приступим к установке.
Установка скрипта
Для начала зайдите в
ПУ >
Управление дизайном >
Нужный модуль >
Страница материала и комментариев к нему Найдите тег, в который у вас выводится текст материала ($BRIEF$ или $MESSAGE$), и добавляем ему
id="RAgetContent".
Чтобы получилось, допустим, так:
<div id="RAgetContent" class="message">$MESSAGE$</div>
Опускаемся ниже и перед
</body> вставляем этот код:
<div class="rm-overlay rm-c-light rm-o-font">
<div class="rm-progress"></div>
<div class="rm-wrap">
<div class="rm-scroll_up">
<i class="fas fa-chevron-up"></i>
</div>
<div class="rm-top">
<div class="rm-title">
<span>$ENTRY_TITLE$</span>
</div>
<div class="rm-option">
<div class="rm-button rm-light" title="Сменить цвет фона">
<i class="far fa-lightbulb"></i>
</div>
<div class="rm-button rm-size" title="Изменить размер шрифта">
<i class="fas fa-text-height"></i>
</div>
<div class="rm-button rm-close" title="Закрыть режим просмотра">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<div class="rm-content"></div>
</div>
</div>
<script>
var elemOverlay = $('.rm-overlay'), getContent = $('#RAgetContent').html();
if(localStorage.getItem('LC_Light')==null || localStorage.getItem('LC_Light')=='false') var LC_Light = false; else var LC_Light = true;
if(localStorage.getItem('LC_Size')==null || localStorage.getItem('LC_Size')=='false') var LC_Size = false; else var LC_Size = true;
$(window).on('load',function(){
if(!LC_Light) elemOverlay.removeClass('rm-c-dark').addClass('rm-c-light'); else elemOverlay.removeClass('rm-c-light').addClass('rm-c-dark');
if(LC_Size) elemOverlay.addClass('rm-o-size'); else elemOverlay.removeClass('rm-o-size');
$('.rm-content').html(getContent);
});
elemOverlay.bind('scroll',function(){
var wrapHeight = $('.rm-wrap').height(), windowHeight = $(this).height();
if(wrapHeight>windowHeight) {
var scrollVal = $(this).scrollTop(),
progressSize = (100 * (scrollVal / (wrapHeight - windowHeight))) | 0;
$('.rm-progress').css('width',(progressSize > 100 ? 100 : progressSize)+'%');
$('.rm-scroll_up').css('visibility',(scrollVal > windowHeight ? 'visible' : 'hidden'));
}
});
$('.rm-scroll_up').on('click',function(){
$('.rm-overlay').scrollTop(0);
});
$('.rm-button').on('click',function(){
var isLight = $(this).hasClass('rm-light'), isSize = $(this).hasClass('rm-size'), isOpen = $(this).hasClass('rm-open'), isClose = $(this).hasClass('rm-close');
if(isLight) {
if(!LC_Light) {
LC_Light = true;
elemOverlay.removeClass('rm-c-light').addClass('rm-c-dark');
} else {
LC_Light = false;
elemOverlay.removeClass('rm-c-dark').addClass('rm-c-light');
}
localStorage.setItem('LC_Light',LC_Light);
}
if(isSize) {
if(LC_Size) {
LC_Size = false;
elemOverlay.removeClass('rm-o-size');
} else {
LC_Size = true;
elemOverlay.addClass('rm-o-size');
}
localStorage.setItem('LC_Size',LC_Size);
}
if(isOpen) {
$('body').css('overflow','hidden');
$('.rm-overlay').show().css('overflow-y','auto');
}
if(isClose) {
$('body').css('overflow','auto');
$('.rm-overlay').hide().css('overflow-y','hidden');
}
});
</script>
После заходим в
ПУ >
Управление дизайном >
Таблица стилей (CSS) и добавляем в конец этот код:
.rm-c-light {color: #2b2b2b;}
.rm-c-dark {color: #ecf0f1;}
.rm-button {display: block; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; cursor: pointer; position: relative;}
.rm-button.rm-c-light:hover, .rm-overlay.rm-c-light .rm-button:hover {background-color: rgba(43,43,43,.25);}
.rm-button.rm-c-dark:hover, .rm-overlay.rm-c-dark .rm-button:hover {background-color: rgba(236,240,241,.25);}
.rm-overlay {display: none; width: 100vw; height: 100vh; overflow: hidden; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; overflow: auto hidden;}
.rm-overlay.rm-c-light {background-color: #ecf0f1;}
.rm-overlay.rm-c-dark {background-color: #2b2b2b;}
.rm-overlay.rm-o-size .rm-content {font-size: 2em;}
.rm-overlay.rm-o-size .rm-button.rm-size {color: #1abc9c;}
.rm-wrap {display: block; min-width: calc(300px - 40px); width: calc(100% - 40px); max-width: calc(1000px - 40px); padding: 10px 20px; margin: 0 auto;}
.rm-top {display: block; width: 100%; height: 50px; margin: 0 0 10px;}
.rm-title, .rm-option, .rm-option .rm-button {display: inline-block; float: left;}
.rm-title {width: calc(100% - 160px); margin-right: 10px; height: 50px; line-height: 50px; font-size: 2em; font-weight: bold;}
.rm-title span {display: block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.rm-option {width: 150px;}
.rm-content {display: block; font-size: 1em;}
.rm-progress {display: block; width: 0; height: 3px; position: fixed; left: 0; top: 0; right: 0; background: #1abc9c; z-index: 2; pointer-events: none;}
.rm-scroll_up {display: block; width: 50px; height: 100%; line-height: 60px; text-align: center; position: fixed; top: 3px; bottom: 0; cursor: pointer; z-index: 1; margin-left: -55px; font-size: 20px; visibility: hidden;}
.rm-overlay.rm-c-light .rm-scroll_up {background-color: rgba(43,43,43,.1);}
.rm-overlay.rm-c-dark .rm-scroll_up {background-color: rgba(236,240,241,.1);}
.rm-overlay.rm-c-light .rm-scroll_up:hover {background-color: rgba(43,43,43,.25);}
.rm-overlay.rm-c-dark .rm-scroll_up:hover {background-color: rgba(236,240,241,.25);}
.rm-button, .rm-scroll_up {transition: all linear .2s;}
/* fixed */
.rm-content img,
.rm-content video,
.rm-content iframe {max-width: 100%; box-sizing: border-box;}
.rm-top::after {content: ''; display: block; clear: both;}
.rm-button {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
@media print, screen and (max-width: 1000px) {
.rm-scroll_up {margin-left: -30px; width: 30px;}
.rm-wrap {padding-left: 25px; padding-right: 5px;}
}
