Делаю комментарии к текстовым блокам как на медиуме
Использовал блок dropdown
в котором popup
как то так
{
block : 'dropdown',
mods : { switcher : 'link' },
switcher : {
block : 'comments-counter',
mix : { block : 'link', mods : { pseudo : true }},
comments : 'ololo'
},
popup : {
block : 'popup',
mods : { theme : 'comments' },
directions : ['right-top'],
mainOffset : 17,
secondaryOffset : -15,
viewportOffset : 20,
content : 'комментарии'
}
}
Мне нужно двинуть body
в лево при нажатии на переключатель. Сдвиг делается через css
добавлением к body
класса.
Открывается popup
, все вроде бы хорошо, но после анимации сдвига и скрола мышкой popup
почему то пересчитывает свою позицию не правильно.
Вот видео баги https://yadi.sk/i/RXsm_X0ycpgfn
И видео если не двигать body
https://yadi.sk/i/0-hxIvVtcpqKh
В какую строну смотреть? Помогите.
@voischev можешь собрать минимальный тесткейс, на котором воспроизводится и закоммитить куда-то?
@voischev на базе project-stub в ветоньку в своем форке ;-)
так, если я негде не затупил, то:
Для проверки я в месте, где применяется offset() (из первого пункта) накостылял такое:
где
pagePos
- это offset блокаpage
, который ты двигаешь. Ну и потом дальше передал эти новые значения. Т.е. бага и правда есть, но нужно глубже вкурить все эти рассчеты.Я понял) Это у вас такой фильтр — если собрал и не воспроизводиться то где то у меня проблема)))
Сейчас соберу посмотрим воспроизведётся ли
нене, я подтверждаю, что такая магия есть - я проверил у себя локально
Отлично. Есть подтверждение. Тогда оставлю это здесь и пойду работать дальше
Подпишите меня на ищью в
bem-components
если она будетЗаписал видео если не двигать
body
в двигать контейнер внутри https://yadi.sk/i/0-hxIvVtcpqKhда достаточно просто собрать simple и в собранном примере прям в девтулзе "сдвинуть" блок
page
влево - при скролле попап сдвинется влево на столько жехотя, багом это тоже не назовешь - скорее всего, это особенность реализации. Если ты будешь двигать не
body
, а обертку контента, то тебе достаточно просто вызывать методredraw()
при сдвиге этой самой обертки. Попробуй так и отпишись, плз@sipayRT с
redraw()
все ясно. Но как сделать что бы попап двигался вместе с анимацией сдвига контента? Как в этом видео - https://yadi.sk/i/RXsm_X0ycpgfn Это выглядит естественно.Если не двигаем
body
то не понятно как манипулироватьpopup
во время движения обертки. Он же во время открытия падает в конецbody
. Кажетсяbody
даже правильнее двигать. Просто не нужно передавать попапу отрицательный офсет.Либо научить
popup
открываться в указанном месте dom-дерева.так, а почему не подходит
_target_anchor
? там же ты и можешь указывать к какой dom-ноде привязываться. или я не так тебя понял?@sipayRT ну я использовал для реализации блок
dropdown
и там похоже такого нет. Сейчас по умолчанию попап открывается в конце боди. Если есть подскажи.А, dropdown. Там по умолчанию установлен этот моификатор. Давай тогда подитожим - тебе нужно, чтобы при сдвиге обертки попап так же плавно сдвигался, не отрываясь от родителя?
@sipayRT да. Как в первом видео, до
redraw()
по скролу.так, я сейчас у себя закостылял так: в popup_target_anchor.js немного переписал метод
_calcTargetDimensions
(да-да, я знаю, что он приватный). Добавил перед return вот такое условие:После этого все заработало с изменением offset'а у body. Но я еще посижу и придумаю как это правильно сделать :)
@sipayRT :+1:
@sipayRT :+1: Спасибо мил человек) Кажется в правильном направлении думаешь
Короче, дело в том, что при установке css-свойства
left
для попапа, браузер начинает считать не от экрана, а от самогоbody
, которое сдвинуто. Поэтому у нас получается, что в js мы правильно рассчитываем offset'ы, но в css это же число приводит к другим результатам. В общем, завел ишью, приасайнил автора блока - https://github.com/bem/bem-components/issues/1111 Варианта, кроме того, что я написал в ишью, я не придумал. Может, Дима придумает что-то покрасивееКрасивый номер ишью)
козырный ;) ну и бага козырная
https://github.com/bem/bem-components/pull/1117 - пофиксили, можно закрывать