В проекте используется старая, как экскременты мамонта, библиотека YUI2.
С ее помощью показываются всплывающие окошки, причем на странице их может быть несколько штук одновременно (последовательно открываются одна из другой, но при этом в DOM они расположены на одном уровне, сиблингами)
Проблема с закрытием по ESCAPE - закрываются все сразу, хотя нужно чтобы закрывалась только последняя.
Код создания окна:
var panel = new YAHOO.widget.Panel(id, {...});
Обработчик :
panel.cfg.queueProperty("keylisteners", new YAHOO.util.KeyListener(document, { keys: 27 }, {
fn: panel.hide,
scope: panel,
correctScope: true
}));
Никакого правильного решения я так и нее нашел и пришлось написать свой костыль.
Суть костыля - сразу после создания окошка, создаем ему атрибут
tabindex=1.
Теперь, ему можно передать фокус и соответственно, можно ловить на нем события типа "
keyup".
Далее создал отдельный объект с массивом открытых окон - при создании нового окна он добавляется в массив и ему передается фокус. При закрытии окна, из массива удаляется последний элемент, и тому элементу который теперь оказался последним, передаем фокус.
Вот его код:
function FormsQueue() {
this._queue = [];
this.add = function(elem) {
if (elem instanceof YAHOO.widget.Panel) {
this._queue.push(elem.element);
} else {
this._queue.push(elem);
};
return this.focusLastElement();
};
this.getLastElem = function () {
var lastElem = this._queue[this._queue.length - 1];
return lastElem;
}
this.pop = function() {
this._queue.pop();
return this.focusLastElement();
};
this.focusLastElement = function() {
console.log('this._queue.length =', this._queue.length);
if (this._queue.length > 0) {
var lastElem = this.getLastElem();
lastElem.focus();
return lastElem;
}
};
};
Суть вопроса - не нравится мне это решение, хотя и работает без проблем... Велосипед на костылях.
Как бы вы это решили?