Blogger Navbar

По моему мнению, навигационная панель в начале каждой страницы блога бывает несовместима с выбранным дизайном блога или просто назойливо отвлекает. Возникает разумный вопрос - как это спрятать. Далее показано, как это можно сделать.
1. Скрытая панель
Давайте зайдем в панель управления блогом, найдем вкладки Дизайн и Изменить HTML. В текстовом поле после строки <head> добавим разметку для стиля и внесем следующий код:
Выглядит неплохо. Однако, тем самым мы ограничили себя и своих посетителей - навигационная панель визуально недоступна. Лучшим решением было бы прятать панель и показывать при необходимости. То есть панель должна быть переключаемой. Для этого потребуется добавить немного javascript-кода. Хотя показ и сокрытие можно осуществить и без помощи javascript, только средствами CSS. Но, в дальнейшем, нам потребуется добавить немного кода. Поэтому уже на данном этапе начинаем кодировать.
2. Переключаемая панель
И так. Наша первоначальная цель была - скрыть панель, и мы ее уже достигли. Но теперь нам нужна панель переключаемая. Переключение панели будет производится по какому либо событию. Лучшим кандидатом представляются клавиатурные комбинации. При разработке была выбрана комбинация клавиш CTRL+ALT+SHIFT - одновременно зажать клавиш CTRL, ALT и SHIFT (в первой редакции этой статьи предлагалась комбинация CTRL+`, но, как оказалось, не самая удобная). Одно нажатие комбинации включает (отображает) панель, повторное - выключает (скрывает).

Клавиатурный обработчик устанавливается по окончании загрузки страницы. Так как панель уже отключена с помощью стилевого правила, то это предотвратит моргание панели между окончанием загрузки и установкой обработчика. Вот код: 
var navbar;

function initToggler()
{
    navbar = document.getElementById('navbar');
};

function toggleNavbar(e)
{
    var e = e || event;

    // Ctrl+Alt+Shift
    if ( e.shiftKey && e.altKey && e.ctrlKey ) {
        navbar.style.display = navbar.style.display == 'none' 
            ? 'block' 
            : 'none';
    }

    return e.returnValue;
};

if ( window.attachEvent ) {
    window.attachEvent('onload', initToggler);
    document.attachEvent('onkeydown', toggleNavbar);
} else {
    window.addEventListener('load', initToggler, false);
    window.addEventListener('keydown', toggleNavbar, false);
}
Вернемся снова в панель управления, Дизайн, Изменит HTML. Мы снова будем менять шаблон страницы. Этот код надо поместить после предыдущего контейнера стилевых правил внутри
Функция initToggler инициализирует переменную navbar, ссылку на блочный элемент "navbar", содержащий навигационную панель.

Функция toggleNavbar анализирует нажатия клавиш и при обнаружении необходимой комбинации CTRL+ALT+SHIFT меняет состояние панели (block - видимая, none - невидимая).

Оставшиеся несколько строк инициализируют обработчики загрузки страницы load/onload, и нажатия клавиш keydown/onkeydown.

И так. Панель скрыта изначально. Для ее включения/выключения используется специальная комбинация клавиш CTRL+ALT+SHIFT. Уже хорошо. Но при переходе на другую страницу блога панель снова исчезнет. Это не настолько плохо, чтобы печалиться, ведь панель не так сильно нужна, да и клавиши были выбраны весьма удачно - под левой рукой. Но было бы еще лучше, если бы я при открытой панели на этой странице перешел на другую и обнаружил панель там тоже открытой. Необходимо сохранять состояние панели между страницами.
3. Сохраняемая панель
Состояние панели будет храниться в куках - небольшой порции информации, хранимой локально на компьютере пользователя. Для организации работы с куками создадим небольшой фрагмент кода: 
var cookie = {
    get: function(name)
    {
        var list = document.cookie.split(';');
        for (var i = 0; i < list.length; i++) {
            var c = list[i].replace(/^\s+/, '').split('=');
            if ( c[0] == name ) {
                return c[1];
            }
        }
        return null;
    },
    set: function(name, value, domain, expires, path, secure)
    {
        document.cookie = name + '=' + escape(value) +
            ((expires) ? '; expires=' + expires.toGMTString() : '') +
            ((path) ? '; path=' + path : '') +
            ((domain) ? '; domain=' + domain : '') +
            ((secure) ? '; secure' : '');
    }
};
Будучи любителем классов, я реализовал две функции: чтения cookie.get() и записи cookie.set() в виде методов пользовательского объекта cookie. Я не придумал ничего нового - это общеизвестные алгоритмы, их можно найти в интернете практически везде. Поместим код объекта в шаблон страниц блога. А также внесем изменения (см. ниже) в существующий код: 
...
function initToggler()
{
    navbar = document.getElementById('navbar');
    navbar.style.display = cookie.get('nonavbar') || 'none';
};

function toggleNavbar(e)
{
...
        navbar.style.display = navbar.style.display == 'none' 
            ? 'block' 
            : 'none';
        cookie.set(
            'nonavbar', 
            navbar.style.display, 
            window.location.hostname, 
            new Date(new Date().getFullYear() + 10, 0, 1), 
            '/', 
            false);
...
При инициализации страницы устанавливается состояние панели, ранее сохраненное в куках. Если их нет, то устанавливается 'none', значение по умолчанию - закрытая панель (значит либо это первый визит на страницу, либо куки были вычищены, либо куки запрещены - последний вариант очень сомнителен в настоящее время). Текущее состояние панели navbar.style.display моментально сохраняется
  • -- в куках под именем 'nonavbar',
  • -- для текущего домена - window.location.hostname,
  • -- сроком не позднее первого января примерно через 10 лет - new Date(new Date().getFullYear() + 10, 0, 1) (достаточный долгий срок чтобы считать, что значение хранится "вечно").
4. Завершающие штрихи
Осталось сделать небольшой штрих - огранить весь код вызовом безымянной функции с единственной целью - убрать все вспомогательные переменные и функции из глобальной области видимости. 
(function()
{

var cookie = {
    get: function(name)
    {
        var list = document.cookie.split(';');
        for (var i = 0; i < list.length; i++) {
            var c = list[i].replace(/^\s+/, '').split('=');
            if ( c[0] == name ) {
                return c[1];
            }
        }
        return null;
    },
    set: function(name, value, domain, expires, path, secure)
    {
        document.cookie = name + '=' + escape(value) +
            ((expires) ? '; expires=' + expires.toGMTString() : '') +
            ((path) ? '; path=' + path : '') +
            ((domain) ? '; domain=' + domain : '') +
            ((secure) ? '; secure' : '');
    }
};

var navbar;

function initToggler()
{
    navbar = document.getElementById('navbar');
    navbar.style.display = cookie.get('nonavbar') || 'none';
};

function toggleNavbar(e)
{
    var e = e || event;
    var target = e.target || e.srcElement;

    // Ctrl+Alt+Shift
    if ( e.shiftKey && e.altKey && e.ctrlKey ) {
        navbar.style.display = navbar.style.display == 'none' 
            ? 'block' 
            : 'none';
        cookie.set(
            'nonavbar', 
            navbar.style.display, 
            window.location.hostname, 
            new Date(new Date().getFullYear() + 10, 0, 1), 
            '/', 
            false);
    }

    return e.returnValue;
};

if ( window.attachEvent ) {
    window.attachEvent('onload', initToggler);
    document.attachEvent('onkeydown', toggleNavbar);
} else {
    window.addEventListener('load', initToggler, false);
    window.addEventListener('keydown', toggleNavbar, false);
}

})();
1 коммент.

1 comment:

  1. Julembo20 June 2010 at 16:33:00 GMT+4

    Полезная статья спасибо.
    Я пока пользуюсь следующей фишкой:
    #navbar-iframe {
    opacity:0.0;
    height: 10px;
    filter:alpha(Opacity=0)
    }
    #navbar-iframe:hover {
    opacity:1.0;
    height: 30px;
    filter:alpha(Opacity=100, FinishedOpacity=100)
    border: 2px;
    }

    ReplyDelete

Subscribe to: Posts (Atom)