Немного баловства с JS/HTML5



У js-библиотеки Prototype есть вспомогательная библиотечка Window, позволяющая создавать на странице сайта модальные окна (со всеми плюшками в виде сворачивания, закрывания, ресайза и перетаскивания).

Легким движением, а именно переопределением методов minimize и restore можно сделать, чтобы окошки не просто сворачивались, а убирались в какой-то угол страниц в виде небольших кнопок (панель задач в Windows помните?).

И вот задача, чтобы эти свернутые кнопки не исчезали при переходе между страницами сайта.

Для этого воспользуемся идеей: при сворачивании окон мы делаем еще одну дополнительную операцию, а именно считываем свойства окна и записываем их в локальное хранилище с помощью технологии Web Storage (localStorage). Для работы с этим хранилищем я воспользовался библиотекой http://www.jstorage.info

Кусочек из метода минимизации:

minimize: function(id, event) {
var win = this.getWindow(id);
...
var winProps = jQuery.jStorage.get('winProps');
var newWinProps = {
'id': id,
'className': win.options.className,
'title': win.options.title,
'minWidth': win.options.minWidth,
'width': win.options.width,
'height': win.options.height,
'url': win.options.url,
'recenterAuto': win.options.recenterAuto,
'destroyOnClose': win.options.destroyOnClose,
'showEffectOptions': win.options.showEffectOptions,
'top': jQueryElement.css('top'),
'left': jQueryElement.css('left')
};
winProps[id] = newWinProps;
jQuery.jStorage.set('winProps',winProps);
...

(есть возможность хранить несколько окон)

При открытии любой страницы запускаем код ниже, который считывает данные из хранилища (по сути это просто параметры окна, которые передаются в конструктор нового окна), инициализирует для каждого окна объект Window (который так же добавляет нужные элементы в DOM) и отображает соответствующую “свернутую” кнопочку в углу страницы.

var winProps = jQuery.jStorage.get('winProps');
if (!jQuery.isEmptyObject(winProps)) {
// get from localStorage
for (var winId in winProps) {
var win = new Window(winProps[winId]);

// Create a dock element
var element = document.createElement('span');
element.className = 'dock_icon';
element.style.display = 'none';
element.win = win;
$('dock').appendChild(element);
Event.observe(element, 'mouseup', Windows.restore);
$(element).update(win.getTitle());
new Effect.Appear(element)
}
}

Ну и в методе restore не забываем добавить кусочек, отвечающий за удаление данного окна из списка в localStorage, т.к. оно уже не требуется к “перетаскиванию” между страницами, когда открыто, а не свернуто.

restore: function(event) {
...
// remove from localStorage
var winProps = jQuery.jStorage.get('winProps');
delete winProps[element.win.getId()];
jQuery.jStorage.set('winProps',winProps);
...

Share Button