Произвести модификацию в jQuery UI и получить сжатый вариант?

Question

[Руслан Левиев]

Некоторое время назад я писал о том, что пишу некий «аналог jQuery Treeview». Благодаря подсказке nikitammf проблему «отпрыгивающего элемента» я поборол.

Но появилась другая проблема. Чтобы описать её, я сначала объясню каким образом плагин jQuery UI Draggable определяет находится ли в данный момент переносимый элемент над droppable-элементом.



В момент начала переноса захваченного элемента вызывается метод $.ui.ddmanager.prepareOffsets(this, event) (строка 152 файла /development-bundle/ui/jquery.ui.draggable.js). Этот метод запоминает в кэше абсолютные координаты всех droppable-элементов. Затем в процессе переноса draggable-элемента, его меняющиеся координаты постоянно сверяются с координатами droppable-элементов из кэша, и когда наступает пересечение координат — плагин опознаёт, что захваченный элемент оказался над тем-то droppable-элементом (т.е. наступает событие «hover»). Кэш координат droppable-элементов всегда рассчитывается только один раз — в момент начала переноса захваченного элемента.



Как это конфликтует с моим кодом? Как я уже писал, в момент наступления события «hover» у меня отсылается запрос на сервер, который возвращает список дочерних элементов, которые вставляются вложенным списком. Поскольку вставляется вложенный список, координаты последующих (лежащих ниже) droppable-элементов при этом меняются, но кэш координат об этом не знает.

В результате если захватить самый первый элемент, задержать над вторым элементом (дождавшись появления вложенного списка) и дальше вести его вниз, то третий и последующий элементы среагируют ещё задолго до того, как перетаскиваемый элемент реально окажется над ними (потому что в кэше координат остались старые координаты и он по-прежнему думает, что все droppable-элементы остались на своих изначальных местах).

Как решить эту проблему, впринципе понятно: пересчитать кэш координат (вызвать метод $.ui.ddmanager.prepareOffsets(this, event)) после вставки дочернего списка.

Но так просто вызвать этот метод не получается: его имя уже изменено в процессе компоновки и минимизации конструктором jQuery UI (я использую не гигантский архив с кучей js-файлов, а собранный конструктором один файл).

Как здесь быть? Как вызвать метод, имя которого уже «обфусцировано»?



Онлайн-пример собственно моей разработки тут.

Answer 1

[Руслан Левиев]

Решение уже нашёл сам. Как всегда всё оказалось гораздо проще: не заметил в документации, что у jQuery UI draggable есть опция refreshPositions и если её установить в true, то позиции droppable-элементов будут обновляться при каждом движении мыши.
С другой стороны, для экономии ресурсов компьютера, всё равно хотелось бы научиться обновлять позиции элементов не при каждом движении мыши, а только тогда, когда нужно, вызывая соответствующий метод.

Comments

[MyraJKee]

Может не стоит тогда пользоваться упакованным вариантом с «упакованными» ссылками на переменные?.. Неужели размер критичен?

[Руслан Левиев]

С учётом разницы в размере упакованного плагина (45 Кб.) и размере незапакованного плагина (≈1 Мб.) — да, критичен. Операции drag&drop, особенно с большим количеством элементов, и так ресурсоёмки, а тут ещё один только плагин будет весить мегабайт — страшно подумать какие тормоза могут испытывать пользователи.

Answer 2

[Mithgol]

Предлагаю Вам воспользоваться средством автоматической записи джаваскрипта в красивом виде, которое запишет сжатый код в структурированном виде, хотя, естественно, не восстановит первоначальные названия укороченных идентификаторов (переменных, полей, функций, методов, и так далее).

Затем, методом пристального вглядывания, Вы сможете определить в нём имя желаемого метода (сравнив его содержимое с известным Вам содержимым первоначального несжатого кода того же метода и убедившись в их логической одинаковости). Используйте найденное имя в своём вызове, и тем невозбранно достигнете желаемого.

Comments

[Руслан Левиев]

Классная штука, спасибо!

Answer 3

[Mithgol]

Более радикальным методом решения этой проблемы является отказ от стандартного конструктора-упаковщика, предлагаемого на сайте jQuery UI, и переход к собственноручному склеиванию желаемых файлов джаваскрипта встык, с дальнейшей упаковкою их собственноручно же — притом с именно такой упаковкою, которая не изменяет имена методов, так что не создаёт описанной Вами проблемы.

Для этой цели, например, можно использовать прославленный упаковщик Дина Эдвардса, поставив ему в настройках галочку «Base62 encode», но сняв галочку «Shrink variables».

Answer 4

[Disturbed]

Напишите feature request в их багтрекер :)

Answer 5

[3ds]

А почему если список был открыт и элементы подгрузились а потом закрыт, при повторном открытии они опять грузятся? Может сделать флаг, загружены или нет? Или это критично и пункты так часто обновляются? (немного оффquestion) (:

Comments

[Руслан Левиев]

Потому что это не рабочий пример, он ничего не запоминает (загружено или нет, перенесено или нет) и ничего не делает, кроме демонстрации функционала

Answer 6

[nikitammf]

можно воспользоваться методом «option» у draggable и выставлять опцию на пересчет при обновления после подгрузки элементов, потом снова убирать ее.