URL скопирован в буфер обмена!
Как добавить форму «Сообщить об ошибке» при выделении текста на Tilda
С помощью этой модификации пользователи сайта могут быстро сообщить об ошибке на странице. Выдели текст и клики по подсказке чтобы открыть форму, в в которую автоматически вставится выделенный текст. Отлично подойдет для блогов, новостных сайтов и интернет-магазинов, чтобы собирать правки и замечания к описаниям.
Модификация работает с включенным Autoscale в блоках
Модификация работает только cо стандартными блоками
Номер модификации в библиотеке TiCode
Переменная поля ошибки
Текст в кнопке
Блокировка поля ошибки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD138--><script>
(function () {
var tcIsPc = (function () {
try {
var tcW = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var tcTouch = (('ontouchstart' in window) || (navigator.maxTouchPoints || 0) > 0);
if (tcW < 960) return false;
if (tcTouch) return false;
return true;
} catch (e) {
return false;
}
})();
if (!tcIsPc) return;
function TiCodeTcOptEdit() {
return (0 + 0);
}
function TiCodeTiHash() {
return '#ti-correction';
}
function TiCodeFindField() {
return document.querySelector('textarea[name="correction"], [data-field-name="correction"] textarea');
}
function TiCodeSelTxt() {
var tcS = window.getSelection ? String(window.getSelection()) : '';
return (tcS || '').trim();
}
function TiCodeModeApply() {
var TCDta = TiCodeFindField();
if (!TCDta) return;
var tiAllow = TiCodeTcOptEdit();
if (tiAllow === 0) {
TCDta.readOnly = true;
TCDta.disabled = true;
TCDta.style.opacity = '0.6';
TCDta.style.pointerEvents = 'none';
} else {
TCDta.readOnly = false;
TCDta.disabled = false;
TCDta.style.opacity = '';
TCDta.style.pointerEvents = '';
}
}
function TiCodeClearTa() {
var tcTa = TiCodeFindField();
if (!tcTa) return;
var TCDwasDisabled = tcTa.disabled;
var tiWasRO = tcTa.readOnly;
tcTa.disabled = false;
tcTa.readOnly = false;
tcTa.value = '';
tcTa.dispatchEvent(new Event('input', { bubbles: true }));
tcTa.dispatchEvent(new Event('change', { bubbles: true }));
tcTa.disabled = TCDwasDisabled;
tcTa.readOnly = tiWasRO;
}
function TiCodeSetTa(tcTxt) {
var tildatcTa = TiCodeFindField();
if (!tildatcTa) return;
tildatcTa.disabled = false;
tildatcTa.readOnly = false;
tildatcTa.value = tcTxt;
tildatcTa.dispatchEvent(new Event('input', { bubbles: true }));
tildatcTa.dispatchEvent(new Event('change', { bubbles: true }));
tildatcTa.focus();
TiCodeModeApply();
}
function TiCodeEnsureTrigger() {
var tcHash = TiCodeTiHash();
var tcTr = document.querySelector('a[href="' + tcHash + '"]');
if (tcTr) return tcTr;
var tcA = document.createElement('a');
tcA.href = tcHash;
tcA.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0;pointer-events:none;';
tcA.setAttribute('aria-hidden', 'true');
tcA.className = 'ticodeHiddenPopupTrigger';
document.body.appendChild(tcA);
return tcA;
}
function TiCodePopupOpen() {
var tcHash = TiCodeTiHash();
if (location.hash !== tcHash) location.hash = tcHash.replace('#', '');
var tcTr = document.querySelector('a[href="' + tcHash + '"], a[href="#popup:' + tcHash.replace('#', '') + '"]');
if (!tcTr) tcTr = TiCodeEnsureTrigger();
if (tcTr) tcTr.click();
var tcPop = document.getElementById(tcHash.replace('#', ''));
if (tcPop) {
tcPop.style.display = 'block';
tcPop.classList.add('t-popup_show');
}
}
var tcBubble = null;
var tcSavedText = '';
function TiCodeRemoveBubble() {
if (tcBubble && tcBubble.parentNode) tcBubble.parentNode.removeChild(tcBubble);
tcBubble = null;
}
function TiCodeCreateBubble() {
if (tcBubble) return tcBubble;
tcBubble = document.createElement('button');
tcBubble.type = 'button';
tcBubble.textContent = 'Сообщить об ошибке';
tcBubble.style.cssText = [
'position:absolute',
'z-index:999999',
'padding:10px 14px',
'border:none',
'border-radius:10px',
'background:#6b6b6b',
'color:#fff',
'font-size:14px',
'line-height:1.2',
'font-family:Arial,sans-serif',
'cursor:pointer',
'box-shadow:0 8px 24px rgba(0,0,0,.18)',
'white-space:nowrap',
'opacity:0',
'transform:translateY(6px)',
'transition:opacity .18s ease, transform .18s ease'
].join(';');
tcBubble.addEventListener('mousedown', function (e) {
e.preventDefault();
e.stopPropagation();
});
tcBubble.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
var txt = tcSavedText || TiCodeSelTxt();
if (!txt) return;
TiCodePopupOpen();
setTimeout(function () {
TiCodeClearTa();
TiCodeSetTa(txt);
}, 250);
TiCodeRemoveBubble();
});
document.body.appendChild(tcBubble);
requestAnimationFrame(function () {
if (!tcBubble) return;
tcBubble.style.opacity = '1';
tcBubble.style.transform = 'translateY(0)';
});
return tcBubble;
}
function TiCodeShowBubble() {
var sel = window.getSelection ? window.getSelection() : null;
if (!sel || sel.rangeCount === 0) {
TiCodeRemoveBubble();
return;
}
var txt = TiCodeSelTxt();
if (!txt) {
TiCodeRemoveBubble();
return;
}
var range = sel.getRangeAt(0);
var rect = range.getBoundingClientRect();
if (!rect || (!rect.width && !rect.height)) {
TiCodeRemoveBubble();
return;
}
tcSavedText = txt;
var bubble = TiCodeCreateBubble();
var bubbleRect = bubble.getBoundingClientRect();
var top = window.scrollY + rect.bottom + 10;
var left = window.scrollX + rect.left + (rect.width / 2) - (bubbleRect.width / 2);
if (top + bubbleRect.height > window.scrollY + window.innerHeight - 10) {
top = window.scrollY + rect.top - bubbleRect.height - 10;
}
if (left < 10) left = 10;
if (left + bubbleRect.width > window.scrollX + window.innerWidth - 10) {
left = window.scrollX + window.innerWidth - bubbleRect.width - 10;
}
bubble.style.top = top + 'px';
bubble.style.left = left + 'px';
}
document.addEventListener('mouseup', function () {
setTimeout(function () {
if (TiCodeSelTxt()) {
TiCodeShowBubble();
}
}, 30);
});
document.addEventListener('scroll', function () {
if (tcBubble && TiCodeSelTxt()) {
TiCodeShowBubble();
}
}, true);
document.addEventListener('mousedown', function (e) {
if (tcBubble && tcBubble.contains(e.target)) return;
setTimeout(function () {
if (!TiCodeSelTxt()) {
TiCodeRemoveBubble();
}
}, 30);
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' || e.keyCode === 27) {
TiCodeRemoveBubble();
}
});
document.addEventListener('DOMContentLoaded', function () {
TiCodeModeApply();
});
})();
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Отчет об ошибке
1. Создаем popup форму BF502N и указываем в контенте ссылку для открытия #ti-correction
2. Добавляем в форме "Поле ввода в несколько строк" указываем имя переменой correction
Добавляем второе многострочное поле (с другой переменной) чтобы пользователь мог написать свой вариант текста. При необходимости можно добавить и любые другие поля. Важно: поле с переменной correction должно быть одно, именно в него подставляется выделенный фрагмент текста.
3. Указываем дополнительные настройки в генераторе:
Блокировка поля ошибки — если включено, то текст ошибки в поле нельзя будет изменить;
Текст в кнопке — можно задать свой текст, который будет отображаться во всплывающей плашке;
Переменная поля ошибки — можно указать свою переменную для поля ошибки.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под блоком формы.
Примечание: мод работает только на ПК. Чтобы открыть форму, нужно выделить текст и кликнуть по всплывающей плашке
2. Добавляем в форме "Поле ввода в несколько строк" указываем имя переменой correction
Добавляем второе многострочное поле (с другой переменной) чтобы пользователь мог написать свой вариант текста. При необходимости можно добавить и любые другие поля. Важно: поле с переменной correction должно быть одно, именно в него подставляется выделенный фрагмент текста.
3. Указываем дополнительные настройки в генераторе:
Блокировка поля ошибки — если включено, то текст ошибки в поле нельзя будет изменить;
Текст в кнопке — можно задать свой текст, который будет отображаться во всплывающей плашке;
Переменная поля ошибки — можно указать свою переменную для поля ошибки.
5. Копируем готовый код из генератора и вставляем в HTML блок T123. Блок кода размещаем под блоком формы.
Примечание: мод работает только на ПК. Чтобы открыть форму, нужно выделить текст и кликнуть по всплывающей плашке
Съешь ещё этих мягких французских булок, да выпей чаю!
Выдели любой фрагмент текста на странице и чтобы появилось меню "сообщить об ошибке"
