Улучшенная форма комментариев
Незнаю куда выложить, написал userscript для Tampermonkey (Chrome, Firefox), который улучшает форму комментариев.
  • Возможность закрепить форму внизу страницы
  • Автоматическое изменение высоты в зависимости от набранного текста
» код
// ==UserScript==
// @name XGM - Улучшенная форма для комментариев
// @description Улучшает вид формы комментариев
// @author https://xgm.guru/user/NazarPunk
// @license MIT
// @version 1.0
// @include /^https?:\/\/xgm\.guru.*$/
// @noframes
// @run-at document-end
// @source https://github.com/nazarpunk/XGM
// ==/UserScript==
'use strict';
document.addEventListener("DOMContentLoaded", () => {
	const $textarea = document.getElementById('input_comment');
	const $form = document.getElementById('comment_form');
	const $actions = document.querySelector('#comment_form .form-actions');
	if ($form === null || $textarea === null || $actions === null) { return; }

	$textarea.addEventListener('input', () => {
		$textarea.style.height = 'auto';
		$textarea.style.height = $textarea.scrollHeight + 'px';

	}, false);

	let br = document.querySelector('#comment_form > br');
	br.parentNode.removeChild(br);

	$form.setAttribute('style', `position: sticky; bottom: 0`);

	const style = window.getComputedStyle($textarea, null);
	const padding = parseInt(style.getPropertyValue('padding-left')) + parseInt(style.getPropertyValue('padding-right')) + 2;
	$textarea.setAttribute('style', `
										min-height: 100px;
										width: calc(100% - ${padding}px) !important;
										box-sizing: content-box;
										overflow: hidden;
										border-radius: 0;
										resize: none;
										z-index: 5;
										position: relative;`
	);

	$actions.setAttribute('style', `margin: 0`);
	$actions.innerHTML += `<label style="float: right"><input id="comment_form_stickyInput" type="checkbox" autocomplete="off"> закрепить</label>`;
	const $sticky = document.getElementById('comment_form_stickyInput');
	const key = 'comment-form-sticky';

	const recheck = () => {
		$form.style.position = $sticky.checked ? 'sticky' : 'static';
		localStorage[$sticky.checked ? 'removeItem' : 'setItem'](key, '');
		console.log($sticky.checked);
	};

	$sticky.checked = localStorage.getItem(key) === null;
	recheck();

	$sticky.addEventListener('change', recheck);

	$textarea.dispatchEvent(new Event('input', {
		'bubbles': false,
		'cancelable': true
	}));
});

Лучший ответ:
Короче, часть уже внедрена, часть можешь пилить - теперь тебе никто это делать не мешает)



Просмотров: 433

ScorpioT1000 #1 - 7 месяцев назад 0
  1. Оно работает в Chrome, Firefox, Yandex, Opera, Safari, Chrome for Android, Safari for iOS, Samsung Internet, Opera Mini, Edge, Puffin, Dolphin Browser?
  2. То же самое с разрешениями (320 - 640, 720 - 1024, 1280 - FHD, UHD)
NazarPunk #2 - 7 месяцев назад (отредактировано ) 0
Код написан на ES6, но его можно переписать под jquery, который есть на сайте.
Для вычисления высоты textarea используется scrollHeight.
Прикрепление формы к низу используется position:sicky и разрешение роли не играет.
прикреплены файлы
ScorpioT1000 #3 - 7 месяцев назад 0
Это всё прикольно, но надо тестировать по факту.
NazarPunk #4 - 7 месяцев назад 0
но надо тестировать по факту.
Всё тестировать нужно, я уже пару недостатов нашёл. Будет время, перепишу на jquery, который бы обновить не помешало, и поправлю.
ScorpioT1000 #5 - 7 месяцев назад 0
Если обновить, бутстрап посыпется. Бутстрап уже пробовали обновлять - дизайн посыпался)
NazarPunk #6 - 7 месяцев назад 0
Если обновить, бутстрап посыпется
Юзайте jquery-migrate чтоб не сыпалось.
ScorpioT1000:
Бутстрап уже пробовали обновлять - дизайн посыпался)
Можно же только bootstrap.js обновить и не трогать стили.
ScorpioT1000 #7 - 7 месяцев назад 0
Я цеплял bootstrap-responsive на ту же версию. Это давно напрашивается. Но пришли к выводу, что надо будет заняться новым дизайном целиком.
ScorpioT1000 #8 - 1 неделю назад 0

Короче, часть уже внедрена, часть можешь пилить - теперь тебе никто это делать не мешает)