Здравствуйте.
Панель не отображается при инициализации или ресайзе.
Если открыть панель вручную - открывается как cover, но без бэкдропа.
el: Dom7('<div id="panel" class="panel panel-left panel-cover"><div>qwe</div></div>'),
Так делать нельзя, в el должен быть HTMLElement
Имеете ввиду вот так?
el: Dom7(’…’)[0]
Разницы вроде нет.
Там должен быть селектор HTML-элемента, например так:
el: '#panel-test',
Да, действительно, если сначала вставить панель в body, а потом передать селектор в конструктор - работает адекватно.
Ошибка в документации: https://framework7.io/docs/panel.html#panel-parameters
el должен быть именно селектором, а не HTMLElement, Dom7 или jQuery.
Хотя логика странновата - сначала создать и вставить, а потом искать по селектору.
Но тут же возникает следующая проблема - как удалить динамически созданную панель?
Метод destroy, визуально, не делает ничего (при ширине, большей breakpoint). Если удалить HTMLElement - удаляется содержимое, но “место” под панель остаётся:
https://jsfiddle.net/ye7rokud/1/
Это баг, закиньте, пожалуйста, на ГитХаб.
Временное решение такое: обрабатывайте событие beforedestroy примерно так:
app.views.current.$el.css('margin-left', 0);
1 Like
В документации все верно, просто запись вида $('<div ....></div>') просто создает элемент, но никуда не вставлен.
Ошибку с методом destroy и breakpoint поправил
Созданный элемент в DOM не добавляется: https://github.com/nolimits4web/dom7/blob/master/src/%24.js у вас где-то ошибка.
Естественно, я имел ввиду, не запись $(’…’) саму по себе, а в рамках контекста
app.panel.create({
el: $(’…’),
})
Панель вставляется в документ вот здесь: panel-class.js#L196
Т.е. созданный HTMLElement вставляется в документ при вызове метода Panel.open().
Проблема в том, что метод Panel.setBreakpoint срабатывает при инициализации панели до вызова Panel.open, а в этом случае ломается логика if (!wasVisible) panel-class.js#L101 и $el.width (panel-class.js#L107) равен 0.
Необходимо вызвать метод Panel.setBreakpoint после добавления панели в дерево, ориентировочно здесь: panel-class.js#L202
И дополнительно, в методе Panel.setBreakpoint проверять, вставлен ли $el в документ:
const wasVisible = $el.hasClass('panel-visible-by-breakpoint') && $el.parents(document).length > 0;