Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки Страница 31

Session и localStorage – это, по сути, не HTML5, а скорее, собственные стандарты. Для хранения большого объема данных на стороне клиента существуют базы данных IndexDB и WebSQL. Однако локальное хранилище необычайно удобно в применении и более чем достаточно для наших нужд.

Для того чтобы сохранить состояние перечня и загружать его, когда пользователь возвращается на страницу, все, что нам нужно сделать, – это написать две функции, storestate() и retrievestate():

function storestate() {

localStorage.todolist = todo.innerHTML;

};

function retrievestate() {

if (localStorage.todolist) {

todo.innerHTML = localStorage.todolist;

}

};

Потом мы должны вызывать эти функции всякий раз, когда меняется перечень:

form.addEventListener('submit', function(ev) {

todo.innerHTML += '<li>' + field.value + '</li>';

field.value = '';

field.focus();

storestate();

ev.preventDefault();

}, false);

todo.addEventListener('click', function(ev) {

var t = ev.target;

if (t.tagName === 'LI') {

if (t.classList.contains('done')) {

t. parentNode.removeChild(t);

} else {

t. classList.add('done');

}

storestate();

};

ev.preventDefault();

}, false);

Мы извлекаем данные при повторной загрузке страницы:

document.addEventListener('DOMContentLoaded', retrievestate, false);

Вот оно! Кэширование всех интерфейсов в локальном хранилище может показаться грязным приемом, но на самом деле в этом нет ничего сомнительного. Так как HTML не слишком тяжеловесен, и у нас есть 5 MB памяти в браузерах, этот способ – простое решение распространенной проблемы.

Пример 2: Анимированные элементы страницы с использованием CSS3

[62]

Давайте еще раз быстренько взглянем на ловкий прием присвоения классов и делегирование событий. В этот раз мы поиграем с CSS и JavaScript для анимации разделов сайта без какой-либо библиотеки или инструмента анимации.

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

У нас есть несколько заголовков, изображений и поясняющих текстов на очень длинной странице – и это все. Код HTML очень прост: навигационное меню указывает на якоря в документе.

<header>

<h1>Cafe Vintage</h1>

88 Mountgrove Road, London N5 2LT, England

<nav>

<ul>

<li><a href="#cafe">The Cafe</a></li>

<li><a href="#fashion">Fashion</a></li>

<li><a href="#food">Food</a></li>

<li><a href="#gifts">Gifts</a></li>

</ul>

</nav>

</header>

<section>

<article id="cafe">[…]</article>

<article id="fashion">[…]</article>

<article id="food">[…]</article>

<article id="gifts">[…]</article>

</section>

<aside>

Opening hours:

© 2012 Cafe Vintage and Chris Heilmann

Это HTML старой школы, с несколькими новыми элементами, представленными Беном Шварцом в третьем разделе. Он работает во всех браузерах, а между навигацией и основным контентом существует логическая связь: ID (идентификаторы).

Когда доступен JavaScript, страница показывает один раздел за один раз. Также существует анимация для перемещения между разделами: последняя страница движется вверх, а новая опускается вниз. А описание перемещается справа налево (см. рис. 5.5–5.7.).

Чтобы это случилось, все, что нам требуется, это добавить и удалить несколько классов. Остальное происходит в CSS. Вот логика, которой мы придерживаемся:

• Применяем класс с названием js к «телу» документа и прячем все элементы article в CSS по селектору .jsarticle {…} (в этом случае позиционируем их абсолютно и передвигаем их в экране).

• К статье, выбранной пользователем, добавляем класс с названием current, который подменяется в CSS на .jsarticle.current {…}.

• Для того чтобы показать пользователю, где он находится, добавляем класс с названием current к меню ссылки, соответствующей текущей видимой статье.

Рисунок 5.4. Сайт простой кафешки с названием «Винтаж», где все разделы показаны один за другим

Сначала мы добавим класс с названием js к «телу» документа. Это позволит нам определить стили для версий с и без JavaScript. Потом мы возьмем элементы, которые нам нужны. В этом случае нам нужны первый элемент article и первая ссылка, потому что они будут доступны первыми по умолчанию.

Рисунки 5.5–5.7. Если JavaScript доступен, статьи на странице «оживают», когда пользователь нажимает на элемент навигации

document.body.classList.add('js');

var nav = document.querySelector('nav'),

article = document.querySelector('article'),

link = document.querySelector('nav a');

Мы установим их классы на current:

link.classList.add('current');

article.classList.add('current');

Остальные функции – это делегирование событий:

nav.addEventListener('click', function (ev) {

var t = ev.target;

if (t.tagName === 'A') {

article.classList.remove('current');

link.classList.remove('current');

article = document.querySelector(t.getAttribute('href'));

link = t;

article.classList.add('current');

link.classList.add('current');

}

}, false);

Теперь мы назначим обработчик нажатия в навигационном меню, проверим, что на ссылку щелкнули и удалим класс current из ссылки и из статьи, которая демонстрируется. Потом мы доходим до новой статьи, которую нужно показать, обращаясь к ней через атрибут href – ссылки, на которую щелкаем – и затем назначаем класс current новым элементам.

Это почти все, что нам нужно сделать. Другой случай, который нам нужно учесть, это когда пользователь попадает на сайт через ссылку, содержащую хеш (когда ссылка указывает на статью, которая показывается не по умолчанию); в этом случае нам нужно показать правильную статью. Для этого мы можем использовать два селектора:

if (document.location.hash) {

var cleanhash = document.location.hash.replace(/^#/, '');

article = document.querySelector(document.location.hash);

link = document.querySelector('nav a[href$=' + cleanhash + ']'

);

}

CSS-селектор проверяет, заканчивается ли ссылка тем, что мы передаем. Анимация сделана в CSS с использованием перемещений:

section {

overflow: hidden;

min-height: 340px;

position: relative;

}

article {

position: relative;

height: 350px;

}

body.js article {

width: 700px;

position: absolute;

top: -700px;

– webkit-transition: 0.8s;

– moz-transition: 0.8s;

– ms-transition: 0.8s;

– o-transition: 0.8s;

transition: 0.8s;

}

body.js article.current {

position: absolute;

top: 0;

}

Здесь мы видоизменяем статьи. Мы просто говорим браузеру расположить их относительно в разделе, когда JavaScript недоступен, и разместить их абсолютно на 700 пикселей над верхней частью контейнера, когда JavaScript доступен. Так как в разделе применяется overflow: hidden, они никогда не показываются.

Если статья текущая, значение top изменяется на 0, и статья перемещается сверху вниз.

Параграфы действуют по тому же принципу:

article p {

position: absolute;

left: 320px;

width: 370px;

}

js article p {

left: 900px;

opacity: 0;

– webkit-transition: 1s ease 0.7s;

– moz-transition: 1s ease 0.7s;

– ms-transition: 1s ease 0.7s;

– o-transition: 1s ease 0.7s;

transition: 1s ease 0.7s;

}

js article.current p {

position: absolute;

left: 320px;

width: 370px;

opacity: 1;

}

В этом примере мы создали 1-секундное перемещение с задержкой в 0,7 секунды. Обратите внимание, что мы анимируем и положение слева и прозрачность одним махом. И нам не нужно ничего делать в JavaScript.

Пример 3: Создание миниатюры изображения в браузере

[63]

Лучшее, что есть в HTML5, – это элемент canvas (холст). Казалось бы, это просто элемент для рисования (а без JavaScript он и вовсе лишен смысла), но он же является мощным средством для чтения и управления изображениями и видеоданными. Вместе с FileReader и функцией DragandDrop («перетащи и оставь») в современных браузерах мы можем добиться реального успеха. Почему бы нам не создавать миниатюры в браузере?

Рисунок 5.8. Перетаскивание с использованием canvas и FileReader

Рисунок 5.9. Созданные миниатюры

У большинства систем управления контентом и блогов есть загрузчики файлов для создания миниатюр из изображений. Поэтому давайте использовать их в качестве нашего резерва (к тому же мы здесь не будем погружаться в серверный код):