Страница 1 из 2
[3.2] Пользователькие настройки видимости headerbar
Добавлено: 08.03.2019 17:49
Leo Angel
Нужно сделать расширение или просто некий функционал для "украшательства".
Чтобы каждый пользователь по своему выбору мог "убирать" со страниц форума headerbar.
То есть примерно как в расширении liveSearch - живой поиск (как в Гугле).
То есть, существует некая иконка-кнопка, которая "прячет" или показывает всё, что есть в headerbar.
При этом выбор пользователя запоминается в данном браузере на данном устройстве.
Наверное, использовать нужно display: none;
в стилях headerbar.
Проблема для меня - как сделать кнопку (не саму кнопку, а событие по работе кнопки) и как запоминать выбор пользователя.
Может, кто поможет... Расскажет... Или сделает...
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 09.03.2019 8:55
Татьяна5
Раз не требуется убирать код вообще, то можно это организовать через js, запоминать выбор в localStorage
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 09.03.2019 11:54
Leo Angel
Спасибо!
Попробую. Если что не пойдёт буду обращаться...
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 15:54
Leo Angel
А можно взять за основу экст Collapsible Forum Categories, переписать его, изменив действия с Categories на действия с headerbar?
Логика и действия те же..
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 17:48
Татьяна5
Leo Angel, если хотите, то можно всё, но по мне это выйдет неоправданно сложно ("с нуля" проще)
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 17:50
Leo Angel
Ещё бы знать как "с нуля"...
Никогда не писал экстов.
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 17:54
Татьяна5
Leo Angel, в форуме "для авторов" информации куча (а на вашу задачу, насколько помню, вообще хватит минимума, конфигурационного файлика и шаблонов, php можно не задействовать)
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 18:02
Sheer
Татьяна5 писал(а): ↑10.03.2019 17:54
вообще хватит минимума
css+js
Настройки хранить в куки. Куку создавать в js-скрипте. На этой конференции так реализовано сворачивание/разворачивание правил форума. Вот тут наверху, на розовой плашке галочка справа: можно увидеть как это работает.
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 18:59
Sheer
Ну как-то так
Отправлено спустя 4 минуты 41 секунду:
Блин... попутал. Сделал для
navbar
, а не для
headerbar
но принцип тот же.
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 10.03.2019 20:44
Leo Angel
Всем спасибо!
Сейчас посмотрим!!!
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 11.03.2019 1:38
Leo Angel
Переделал, поставил где хочется. Работает...
Одна проблема. )))
Вместе с сокрытием headerbar скрывается и стрелка открытия.
Видать, уже поздно и голова не варит...
Не могу "вытащить" стрелку из headerbar, чтобы не пропадала...
Вот файл css:
Код: Выделить всё
.headerbar > strong:first-child a.collapse {
position: fixed;
top: -6px;
font-size: 18px;
z-index: 7000;
right: 15px;
}
.headerbar > strong:first-child a.collapse:after {
content: '\f077';
font-family: FontAwesome;
font-size: 15px;
line-height: 10px;
font-weight: normal;
font-style: normal;
text-indent: 0;
}
div.headerbar.collapsed > strong:first-child a.collapse:after {
content: '\f078';
}
.headerbar > hidden {
display: none;
}
А вот скрипт:
Код: Выделить всё
/**
* Parse document block
*/
function parse($container) {
'use strict';
var test = document.createElement('div'),
oldBrowser = (typeof test.style.borderRadius === 'undefined'),
$body = $('body');
}
function getCookie(name, value, config)
{
var expr, cookie;
config = $.extend({
prefix: '',
path: '/'
}, typeof config === 'object' ? config : {});
expr = new RegExp('(^| )' + config.prefix + name + '=([^;]+)(;|$)');
cookie = expr.exec(document.cookie);
if (cookie)
{
return decodeURIComponent(cookie[2]);
}
else
{
return null;
}
}
function setCookie (name, value, config)
{
config = $.extend({
prefix: '',
path: '/'
}, typeof config === 'object' ? config : {});
document.cookie = config.prefix + name + '=' + encodeURIComponent(value)
+ (config.expires === undefined ? '' : ';expires=' + config.expires.toUTCString())
+ (config.path ? ';path=' + config.path : '')
+ (config.domain ? ';domain=' + config.domain : '');
return value;
}
function deleteCookie (name, value, config)
{
config = $.extend({
prefix: '',
path: '/'
}, typeof config === 'object' ? config : {});
document.cookie = config.prefix + name + '='
+ (config.path ? '; path=' + config.path : '')
+ (config.domain ? '; domain=' + config.domain : '')
+ '; expires=Thu, 01-Jan-70 00:00:01 GMT';
return null;
}
jQuery(function($) {
'use strict';
var result;
var config = {
prefix: '',
name: 'headerbar_rules',
value: 'false',
path: '/',
expires: new Date()
};
config.expires.setFullYear(config.expires.getFullYear() + 1);
result = getCookie(config.name, config.value, config);
if (result == 'false')
{
$('div.headerbar').addClass('hidden');
$('div.headerbar').addClass('collapsed');
}
$('.headerbar').prepend('<strong><a class="collapse" href="#" title="Свернуть/Развернуть панель заголовка"/></strong>');
$('.headerbar').find('a.collapse').click(function(e) {
e.preventDefault();
$('div.headerbar').slideToggle('slow', function() {});
if (result == 'false') {
deleteCookie(config.name, config);
$('div.headerbar').removeClass('collapsed');
}
else {
setCookie(config.name, 'false', config);
$('div.headerbar').addClass('collapsed');
}
});
parse($('body'));
});
Может, кто подскажет...
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 11.03.2019 6:42
Татьяна5
В html её вытаскивайте
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 11.03.2019 13:36
Leo Angel
Чёт не вылазит...
Ступор какой-то...
Аж стыдно...
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 11.03.2019 18:07
Sheer
Потому что
Это полностью скрывает блок
headerbar
вместе с кнопкой. Должно быть
Код: Выделить всё
.headerbar .inner > hidden {
display: none;
}
что будет скрывать блок
inner
который находится внутри
headerbar
. Сама кнопка вставляется сразу после
Код: Выделить всё
<div class="headerbar" role="banner"><strong><a class="collapse" href="#"></a></strong>
<div class="inner">
Получается так
- Screenshot_2019-03-11 ваш_домен ru - Главная страница.png (11.17 КБ) 314 просмотров
- Screenshot_2019-03-11 ваш_домен ru - Главная страница(1).png (4.65 КБ) 314 просмотров
Если нужно скрыть
headerbar
полностью, нужно выносить кнопку
<a class="collapse" href="#"></a>
куда-то в другое место.
Отправлено спустя 2 минуты 41 секунду:
... или присваивать
headerbar
класс, в который сделает его прозрачным -
background: none;
Re: [3.2] Пользователькие настройки видимости headerbar
Добавлено: 12.03.2019 1:08
Leo Angel
Всё сделано!!!
Всем спасибо за помощь!!!