leftBreakpoint работает не корректно с динамической панелью


#1

Здравствуйте.

Панель не отображается при инициализации или ресайзе.
Если открыть панель вручную - открывается как cover, но без бэкдропа.

https://jsfiddle.net/ye7rokud/


#2

el: Dom7('<div id="panel" class="panel panel-left panel-cover"><div>qwe</div></div>'),

Так делать нельзя, в el должен быть HTMLElement


#3

Имеете ввиду вот так?
el: Dom7(’…’)[0]
Разницы вроде нет.


#4

Там должен быть селектор HTML-элемента, например так:
el: '#panel-test',


#5

Да, действительно, если сначала вставить панель в body, а потом передать селектор в конструктор - работает адекватно.
Ошибка в документации: https://framework7.io/docs/panel.html#panel-parameters
el должен быть именно селектором, а не HTMLElement, Dom7 или jQuery.

Хотя логика странновата - сначала создать и вставить, а потом искать по селектору.

Но тут же возникает следующая проблема - как удалить динамически созданную панель?
Метод destroy, визуально, не делает ничего (при ширине, большей breakpoint). Если удалить HTMLElement - удаляется содержимое, но “место” под панель остаётся:
https://jsfiddle.net/ye7rokud/1/


#6

Это баг, закиньте, пожалуйста, на ГитХаб.
Временное решение такое: обрабатывайте событие beforedestroy примерно так:

app.views.current.$el.css('margin-left', 0);


#7

В документации все верно, просто запись вида $('<div ....></div>') просто создает элемент, но никуда не вставлен.

Ошибку с методом destroy и breakpoint поправил


#8

Хм, это, очевидно, не так:

Спасибо!


#9

Созданный элемент в DOM не добавляется: https://github.com/nolimits4web/dom7/blob/master/src/%24.js у вас где-то ошибка.


#10

Естественно, я имел ввиду, не запись $(’…’) саму по себе, а в рамках контекста
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;