solovyov.net

TwinSpark.Morph

Оце нещодавно стрельнуло мені позакривати гештальти на гітхабі, а то маринувалися деякі понад рік. І найцікавіший був прикладом з валідації форми для твінспарку, типу як валідувати на сервері взаємо-залежні поля. Але, об'єктивно кажучи (маю надію що Андрій не образиться :-), сам код виглядав трошки як запинування ногами.

Таке буває, коли тобі треба вже проблему вирішити, а не архітектуру будувати, ти ногами якось запинуєш — головне, щоб працювало. Worse is better.

На моє щастя, це була не мій біль, тому я міг дозволити собі маринацію. 🤣 Короч, прийшло натхнення, і я пішов будувати солюшен.

Найскладніше, авжеж, не зібрати дані з форми — це якраз вирішується просто, перевісив хендлер на форму з кожного поля і вуаля. Але потім оновити ту форму — ось де собака зарита (і, власне, основна причина отого запинування ногами, я так розумію).

Авжеж, можна вигадати якийсь обман, і оновлювати форму шматочками, але тоді заготовочки для помилок треба мати у верстці заздалегідь, та й взагалі звучить дуже крихко — а хочеться-то навпаки, кльовий і непробивний приклад, як воно все добре працює.

Якщо ви стежите за попередніми серіями, то увесь сенс підходу в тому, що ми отримуємо новий HTML і замінюємо ним старий. Я намагався прилаштувати це до форми — шукати де там фокус, ловити, встановлювати його назад. Авжеж нічого не працює. Курсор іноді трошки не туди стає, під час перескакування курсора з поля в поле взагалі немає document.activeElement, то ти навіть не знаєш, куди ставити, але самий прикол, це, авжеж, те, що заміна форми вбиває всі івенти в черзі, посилання на неї в пам'яті, ну карочє.

Тобто у мене при змінах у формі валідація, а при сабміті — і валідація, і сабміт. Запит для сабміту вже полетів, але приходить назад — а його рідна форма десь вже просто в замиканні зависла і гудбай. Uphill battle. Абсолютне відчуття, що ти в дитинстві йдеш у школу і назад у завірюху вгору в обидві сторони. 😡

Піду, думаю, подивлюся ще раз на idiomorph. Не зря ж його чувак написав, повинен вирішувати всі трабли. А він наче й вирішує, але розміром більш ніж половина ТвінСпарку. 🐸 очевидно придавила мене, і я в найкращих традиціях NIH взяв і написав заново. 🎉

І вийшла чверть. Без жартів, 250 рядочків, і це навіть з деякими доробками. Мабуть, чувак джавіст, бо деякі місця ну дуже розлаписті (я йому навіть пул реквест заслав, хехе). Ну і я пару довгих, але нерелевантних, моментів пропустив — типу парсінгу хтмлю (в мене вже готовий елемент), чи оновлення тегу head (ну здається що вже зроби повний релоад, та й все).

І я щось так пройнявся результатом, що зняв відео про те, як працює алгоритм морфінгу (і про прикольні анімації). 😁 Enjoy!

(@ tg)