Страница 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
Спасибо!
Попробую. Если что не пойдёт буду обращаться... :lol:

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
Ещё бы знать как "с нуля"... :cry:
Никогда не писал экстов. :roll:

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
Ну как-то так
ext.rar
(3.06 КБ) 101 скачивание
Отправлено спустя 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
Чёт не вылазит...
Ступор какой-то...
Аж стыдно... :facepalm:

Re: [3.2] Пользователькие настройки видимости headerbar

Добавлено: 11.03.2019 18:07
Sheer
Потому что

Код: Выделить всё

.headerbar > hidden {
	display: none;
}
Это полностью скрывает блок 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
Screenshot_2019-03-11 ваш_домен ru - Главная страница.png (11.17 КБ) 314 просмотров
Screenshot_2019-03-11 ваш_домен ru - Главная страница(1).png
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
Всё сделано!!!
Всем спасибо за помощь!!!