ציטוט נוח
בעקבות האתגר ש@ישראל-חבר הציב לי (או ה"הרמה להנחתה", מאיפה המילים האלו מגיעים? )
הנה התוצאה:
הקוד:
(function () {
let timeOut = null;
let processing = false;
document.addEventListener('selectionchange', () => {
if (processing || !document.body.classList.contains('page-topic')) return;
setTimeout(()=> {
$('.quoter').tooltip('destroy').remove();
}, 100);
if (timeOut) clearTimeout(timeOut);
$('#quoter-anchor').remove();
timeOut = setTimeout(showQuoter, 250);
});
let mouseDown = 0;
document.addEventListener('mousedown', () => {
++mouseDown;
});
document.addEventListener('mouseup', () => {
--mouseDown;
});
function showQuoter () {
if (mouseDown) return setTimeout(showQuoter, 250);
let selection = document.getSelection();
if (selection.isCollapsed) return;
let anchorElement = selection.anchorNode.nodeType === 3 ? selection.anchorNode.parentNode : selection.anchorNode;
let focusElement = selection.focusNode.nodeType === 3 ? selection.focusNode.parentNode : selection.focusNode;
let postElement = focusElement.closest('[component="post"]');
let postContentElement = postElement.querySelector('[component="post/content"]');
let selectionRange = selection.getRangeAt(0);
if (postElement && anchorElement.closest('[component="post"]') === postElement /* the selection doesn't span more than 1 post */) {
processing = true;
let selectionIsBackward = selection.anchorNode !== selectionRange.startContainer ||
(selection.anchorNode === selection.focusNode && selection.anchorOffset > selection.focusOffset);
// clamp selection to the post content, and make sure that the focus is within a text node
let count = 0; // make sure not to loop forever...
while (selection.focusNode.nodeType !== 3 || focusElement.closest('[component="post/content"]') === null) {
if (count > 100) break;
if (selectionIsBackward) {
selection.modify('extend', 'forward', 'character');
} else {
selection.modify('extend', 'backward', 'character');
}
focusElement = selection.focusNode.nodeType === 3 ? selection.focusNode.parentNode : selection.focusNode;
count++;
}
setTimeout(() => processing = false);
selectionRange = selection.getRangeAt(0).cloneRange();
selectionRange.collapse(selectionIsBackward);
selectionRange.insertNode($('<span id="quoter-anchor"></span>')[0]);
let quoterAnchor = document.getElementById('quoter-anchor');
let { top, left } = $(quoterAnchor).offset();
let quoter = $(`<i title="צטט" style="display: hidden" class="fa fa-quote-right quoter"></i>`);
$(document.body).append(quoter);
if (selectionIsBackward) {
top -= quoter[0].clientHeight + 4;
} else {
top += parseFloat(getComputedStyle(quoterAnchor).lineHeight);
}
left -= quoter[0].clientWidth / 2;
quoter.css({ top: top + 'px', left: left + 'px' })
.tooltip()
.click((e) => {
console.log(document.getSelection());
postElement.querySelector('[component="post/quote"]').click();
});
}
}
})();
CSS
.quoter {
position: absolute;
padding: 7px;
color: white;
background-color: #ff3366;
border-radius: 5px;
cursor: pointer;
user-select: none;
opacity: 50%;
}
.quoter:hover {
opacity: 100%;
}
