Режим чтения 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;}
}

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-60
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Комментарии
Всего 3
ответить
BLAzER 26.09.18 в 08:37
Я не эксперт, но вроде демо-пример не от этого материала
ответить
BLAzER 26.09.18 в 08:51
Запутался, удалите оба комментария
ответить
CbIPoK2513 30.09.18 в 23:34
@BLAzER, от этого, просто я не указал куда тыкать надо biggrin
Комментарии могут оставлять только зарегистрированные пользователи.