Показать сообщение отдельно
  #26 (permalink)  
Старый 11.09.2022, 22:00
Аватар для Alikberov
Кандидат Javascript-наук
Отправить личное сообщение для Alikberov Посмотреть профиль Найти все сообщения от Alikberov
 
Регистрация: 16.08.2018
Сообщений: 112

Идeально было бы использовать фоном element нумератора, как я понял. Который, к сожалению, в FF только и работает.

На данный момент я попытался использовать фоновый наблюдатель мутаций:
// Create an observer instance linked to the callback function
window.user_observer = new MutationObserver(WatchMutations);
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Start observing the target node for configured mutations
window.user_observer.observe(document, config);

function WatchMutations(mutations, observer) {
	for(var mutation of mutations) {
		// examine new nodes, is there anything to highlight?
		for(var node of mutation.addedNodes) {
			// we track only elements, skip other nodes (e.g. text nodes)
			if(node instanceof HTMLElement) {
				// check the inserted element for being a code snippet
				if(node.matches("textarea[data-lines]")) {
					node.addBuddy();
				}
			}
		}
	}
}
Который выполняет свою функцию и сам добавляет нумератор строк к каждому текстовому полю с флагом «data-lines». Не знаю, как сильно это скажется на производительности и просто экспериментирую…

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

Да, эти два "товарища" помещены внутрь div вместе с header и footer.
Но, как Вы понимаете, это для визуального акцента на демострацию того, что я хочу. А в идеале должен быть собственно сам textarea без каких-либо сущностей, чтобы засорять вёрстку лишним матрёшиством (чем грешит абсолютное большинство сайтов).

P.S.: Есть ещё вариант с canvas-фоном…
Ответить с цитированием