Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Синхронний перегляд двох вікон з різною висотою (веб форма + JavaScript)

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Достатньо просто можна написати скрипт для синхронного перегляду двох div`ів, які мають різну висоту, але чи можна написати щось таке ж просте, тільки щоб в цих вікнах вміст можна було не приблизно синхронізувати, а точно по основним вузлам? Тобто, щоб в обох вікнах початок кожного абзацу рівнявся по верхньому їх краю.

Для чого це потрібно? — для редактора, який в лівому вікні отримує текст з Markdown-синтаксисом, а в правому — видає текст оформлений в HTML. В інтернеті є дуже суперові рішення, але вони занадто важкі.

Ніхто не в курсі як можна розставляти токени в цих вікнах, щоб потім по ним можна було робити синхронізацію?

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Якщо це HTML, кидай собі атрибут name на параграф, або id. Тоді звичайний перехід за посиланням буде робити саме те що тобі треба.

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

Якщо різні вікна — вони мають між собою щось поділяти, якусь змінну. Навіть якщо нічого спільного окрім сесії — роби cookies.

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

Тобто, формально ці вікна можуть знаходитися навіть на інших кінцях земної кулі. Вся суть у тому, що їхні скрипти виконуються незалежно. Так онлайн-ігри працюють, і досить швидко це роблять.

Токени приховати взагалі не проблема. Це або параграф, або span якщо примудрися його вставити (а сам як гадаєш, чи не варто підсвітити редагований абзац) — надай їм якийсь клас. Можливо тимчасово, але це може в браузері викликати щоразу рендер усього текста — від тебе це не залежить.

Особисто я б з точністю не заморочувався. Чому так: досвід та знання як люди читають текст. Іншими словами, твоя краса прокрутки взагалі нікому не потрібна окрім тебе самого. Бо користувачу досить швидко набриднуть твої пікселі — йому працювати треба, а не гратися в твої заманухи. Іншими словами, що менше рухів на екрані, то менше ти відволікаєш користувача.

Я б зробив навіть жорсткіше — при редагуванні фрагмента я б у іншому вікні відмічав початок та кінець фрагмента чимось червоним. Це значно спростило би завдання користувача щоразу відшукати місце. Ба більше, саме цей фрагмент я б оновлював.

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

Що до токенів, я вважаю доцільним одразу розбити увесь текст на токени, але проблема може бути якщо абзац великий, тобто позиція на початку токена не задовольнить. Щось мені підказує, ти робиш це для мови програмування, там нема такого що багато тексту в безеперевному рядку. Але якщо це HTML — може бути. Тому рекомендую робити позицію на початку токена, якщо він порівняно невеликий (порівняти із площею компонента вимірянному в em). Якщо великий — порахувати літерали, або відсотки, або відносну кількість рядків. Що це дасть: навіть якщо буде неточність на деяких екранах, вона виявиться несуттєвою.

Ти маєш зрозуміти одне: ідеального рішення не існує як такого. Будь-який підхід даватиме незручність на деяких контекстах, це слідство самої відносності. Користувач може навіть сам зробити різний масштаб у вікнах, в тому числі несвідомо.

Якщо потрібен швидкий варіант, можна взагалі вирішити у лоба: ставити в неактивному вікні курсор на місце редагування, і позиціонувати компонент саме відносно курсора. Те саме можна робити з виділенням — це навіть більш безпечно, не буде проблем з IE.

Підписатись на коментарі