» »

Режим чтения v2 для сайта uCoz

Режим чтения v2 для сайта uCoz

Большинство интернет ресурсов разный размер шрифта, бывает такое, что некоторые вообще не читабельные, где нужно увеличивать шрифт. Хотя эти компоненты служат для цели, они также могут отвлечь вас от того, что вас может заинтересовать на странице. Хороший пример возникает, когда вы читаете новостную статью, где ваш намеченный фокус находится исключительно на тексте. В подобных случаях вы можете смотреть на вторичные предметы. Как-то давно я уже писал такой скрипт и многим он понравился, даже не смотря на то, что по факту был кривой.
В этот раз я все передумал, переделал и представляю вашему вниманию, абсолютно новый "режим чтения".

Отличия от первой части внушительно, но основное предназначение тоже.

Отличительные особенности от первой версии заключаются в том, что вы можете выбрать для себя нужный цвет фона и размер шрифта.
Фон светлый с тёмными буквами и тёмный со светлыми.
Маленький и огромный шрифт.
А так же, это всё храниться в "памяти" браузера, т.е. когда вы зайдёте на сайт, то все изменения будут сохранены.
Как бонус, добавлена кнопка "наверх" и "прогресс" - который покажет на сколько вы близко к концу текста.

Если первая версия изначально имела вывод переменной $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;}
}


Источник
Демо
21.09.2018 Просмотров: 229 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
waak
waak 21.09.2018 21:111
+1
для интереса посмотрел скрипт и сразу ошибка в яндексе не работает! при включении режима прокрутка страницы не возможна
CbIPoK2513
CbIPoK2513 21.09.2018 21:532
0
Ох этот хромиум.. Попробую разобраться.
Snoopak
Snoopak 22.09.2018 09:413
+1
Chrome v.69.0.3497.81 не работает прокрутка с включенным режимом.
Kosten
Kosten 22.09.2018 15:594
0
С обновлением дизайн и тот изменился, скачал Uran, посмотрим, да в контакте есть их официальная группа.
CbIPoK2513
CbIPoK2513 23.09.2018 07:025
0
Исправил ошибку с не отображающимся скроллом.
В демо всё ок, на моём сайт код обновил, здесь тоже код обновлён.
tanicheva92
tanicheva92 07.10.2018 12:016
0
У меня почему-то этот скрипт не работает. Я так думаю, должна появится какая-нибудь кнопочка для перехода в режим чтения, но ничего нет.
CbIPoK2513
CbIPoK2513 10.10.2018 18:458
0
Каким-то мифическим образом я забыл указать кнопку открытия.

Она будет такой

Код
<div class="rm-button rm-open rm-c-light" title="Открыть режим просмотра"><i class="fas fa-book-reader"></i></div>
DESTEQ
DESTEQ 12.10.2018 08:4910
0
Для отображения кнопки чтения также понадобятся подключённые шрифтовые иконки на сайте, пример как их подключить: http://zornet.ru/load....-0-7069
na3uTuB4uk
na3uTuB4uk 07.10.2018 15:067
0
В Яндекс Браузере и так есть режим чтения, и смена фона и смена шрифта там тоже присутствует, поэтому не для всех данный скрипт будет полезен.
CbIPoK2513
CbIPoK2513 10.10.2018 18:469
0
Не у всех есть Яндекс браузер, это раз.
Второе, не имею представления, как браузер поймёт, что конкретно должен прочитать пользователь.
Ну и в третьих, я никого не заставляю ставить этот скрипт. Делал его чисто в целях практики, не больше.
avatar