Commit f76ca41e authored by Chad Woolley's avatar Chad Woolley

WIP - fix bug with tooltip not going away when clicking in selection

parent f41f6181
Pipeline #118070724 failed with stages
in 9 minutes and 46 seconds
(function () {
'use strict'
// TODO: This function is still not called sometimes upon page reload (in dev, at least)...
console.log('ENTERING WRAPPER FUNCTION FOR highlight-tooltip')
if (document.readyState !== 'loading') {
initHighlightTooltip()
......@@ -13,26 +14,39 @@
function initHighlightTooltip() {
console.log('SETTING UP LISTENERS FOR highlight-tooltip')
// document.body.addEventListener('mousedown', update);
document.body.addEventListener('click', onClick);
document.body.addEventListener('mouseup', update)
document.addEventListener('input', update)
document.addEventListener('keydown', event => update(event, true))
window.addEventListener('scroll', update)
document.scrollingElement.addEventListener('scroll', update)
}
function onClick(event) {
// onClick causes selection to go away, so destroy the tooltip unless:
// 1. We just created it (i.e. just did a 'mouseup' event, or
// 2. We clicked on the tooltip itself
console.log('IN ONCLICK')
if (window.creatingTooltip) {
console.log('CREATING TOOLTIP, NOT DESTROYING FROM ONCLICK')
window.creatingTooltip = undefined;
return;
}
const clickedTooltip = $(event.target).closest('.highlight-tooltip').length !== 0
if (
window.tooltipPopper && !clickedTooltip
) {
console.log('DESTROYING FROM ONCLICK')
destroyTooltip();
}
}
function update(event, hide) {
console.log(`CALLING update FROM EVENT: ${event.type}`)
const selection = document.getSelection()
const range = selection && selection.rangeCount && selection.getRangeAt(0)
const boundingClientRect = (range && range.getBoundingClientRect()) || {width: 0}
// TODO: There is currently a bug if you click IN the current selection
// the mouseup event fires while there is still a selection, before the event
// causes it to be deselected, so the tooltip stays displayed.
// We need to detect if the mouseup event was within the current selection,
// and if so, go ahead and destroy the tooltip.
if (boundingClientRect.width <= 1 || hide) {
if (hide || boundingClientRect.width <= 1 || isClickInRect(event, boundingClientRect)) {
console.log('DESTROYING TOOLTIP!')
// either we want to hide it or there is not currently a valid selection,
// so destroy the tooltip if it exist and return
......@@ -46,68 +60,75 @@
console.log('CREATING TOOLTIP!')
// create popper and element if they don't yet exist
createTooltip(selection, boundingClientRect)
if (event.type === 'mouseup') {
window.creatingTooltip = true;
}
}
window.tooltipPopper.update()
}
function createTooltip(selection, boundingClientRect) {
const tooltipElement = createTooltipElement(selection);
createTooltipPopper(boundingClientRect, tooltipElement);
}
function createTooltip(selection, boundingClientRect) {
const tooltipElement = createTooltipElement(selection)
createTooltipPopper(boundingClientRect, tooltipElement)
}
function createTooltipElement(selection) {
// create the containing element
const tooltipElement = document.createElement('div')
tooltipElement.setAttribute('class', 'highlight-tooltip')
function createTooltipElement(selection) {
// create the containing element
const tooltipElement = document.createElement('div')
tooltipElement.setAttribute('class', 'highlight-tooltip')
// build the tweet link html content
const tweetHtml = buildTweetHtml(selection.toString())
// build the tweet link html content
const tweetHtml = buildTweetHtml(selection.toString())
// append the tweet link html content
tooltipElement.innerHTML = tweetHtml
document.querySelector('body').appendChild(tooltipElement)
// append the tweet link html content
tooltipElement.innerHTML = tweetHtml
document.querySelector('body').appendChild(tooltipElement)
return tooltipElement;
}
return tooltipElement
}
function createTooltipPopper(boundingClientRect, tooltipElement) {
const virtualElement = {
getBoundingClientRect: () => (boundingClientRect),
};
const popperOptions = {
placement: "top",
modifiers: { offset: { offset: "0,5" } },
}
window.tooltipPopper = Popper.createPopper(virtualElement, tooltipElement, popperOptions);
function createTooltipPopper(boundingClientRect, tooltipElement) {
const virtualElement = {
getBoundingClientRect: () => (boundingClientRect),
}
function destroyTooltip() {
const tooltipElement = window.tooltipPopper.state.elements.popper;
document.querySelector('body').removeChild(tooltipElement);
window.tooltipPopper = undefined
const popperOptions = {
placement: 'top',
modifiers: {offset: {offset: '0,5'}},
}
window.tooltipPopper = Popper.createPopper(
virtualElement,
tooltipElement,
popperOptions,
)
}
function destroyTooltip() {
const tooltipElement = window.tooltipPopper.state.elements.popper
document.querySelector('body').removeChild(tooltipElement)
window.tooltipPopper = undefined
}
function buildTweetHtml(rawTweetText) {
const tweetText = buildTweetText(rawTweetText)
const tweetUrl = encodeURI(window.location.href);
const tweetTags = 'gitlab,handbook';
const tweetHref = `https://twitter.com/intent/tweet?url=${tweetUrl}&text=${tweetText}&hashtags=${tweetTags}`;
const tweetAnchorText = '<i class="fab fa-twitter"></i><span class="sr-only">Share on Twitter\n</span>';
const tweetHtml = `<a class="tweet-highlight-link" href="${tweetHref}" target="_blank">${tweetAnchorText}</a>`;
function buildTweetHtml(rawTweetText) {
const tweetText = buildTweetText(rawTweetText)
const tweetUrl = encodeURI(window.location.href)
const tweetTags = 'gitlab,handbook'
const tweetHref = `https://twitter.com/intent/tweet?url=${tweetUrl}&text=${tweetText}&hashtags=${tweetTags}`
const tweetAnchorText = '<i class="fab fa-twitter"></i><span class="sr-only">Share on Twitter\n</span>'
const tweetHtml = `<a class="tweet-highlight-link" href="${tweetHref}" target="_blank">${tweetAnchorText}</a>`
return tweetHtml;
}
return tweetHtml
}
function buildTweetText(rawTweetText) {
// twitter will ellipsify, but no need to send more than max - link width...
const maxTextLength = 265
// max lenght of 265 is a guess at whether ellipses will be needed or not after twitter trims text and adds link
const maybeEllipses = rawTweetText.length > maxTextLength ? '...' : ''
const trimmedRawTweetText = rawTweetText.substring(0, maxTextLength)
// twitter knows to preserve trailing ellipses and quote
const tweetText = encodeURI(`"${trimmedRawTweetText}${maybeEllipses}"`)
function buildTweetText(rawTweetText) {
// twitter will ellipsify, but no need to send more than max - link width...
const maxTextLength = 265
// max lenght of 265 is a guess at whether ellipses will be needed or not after twitter trims text and adds link
const maybeEllipses = rawTweetText.length > maxTextLength ? '...' : ''
const trimmedRawTweetText = rawTweetText.substring(0, maxTextLength)
// twitter knows to preserve trailing ellipses and quote
const tweetText = encodeURI(`"${trimmedRawTweetText}${maybeEllipses}"`)
return tweetText
}
return tweetText
}
}());
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment