diff --git a/src/Button/Button.js b/src/Button/Button.js index 8ee0fc5..ed7ba22 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -1,20 +1,20 @@ -import style from "./style"; +import style from './style' function handleMouseOver() { - this.style.transform = "scale(1.2)"; + this.style.transform = 'scale(1.2)' } function handleMouseOut() { - this.style.transform = "scale(1)"; + this.style.transform = 'scale(1)' } export default function createButton(icon, handleMouseDown) { - const btn = document.createElement("div"); - btn.style.cssText = style; - btn.innerHTML = icon; - btn.onmousedown = handleMouseDown; - btn.onmouseover = handleMouseOver; - btn.onmouseout = handleMouseOut; + const btn = document.createElement('div') + btn.style.cssText = style + btn.innerHTML = icon + btn.onmousedown = handleMouseDown + btn.onmouseover = handleMouseOver + btn.onmouseout = handleMouseOut - return btn; + return btn } diff --git a/src/Button/ShareButton/ShareButton.js b/src/Button/ShareButton/ShareButton.js index 38fb8e9..26d25fd 100644 --- a/src/Button/ShareButton/ShareButton.js +++ b/src/Button/ShareButton/ShareButton.js @@ -1,4 +1,4 @@ -import Button from "../Button"; +import Button from '../Button' export function getParsedURL(url, username) { return url diff --git a/src/Tooltip/Arrow/Arrow.js b/src/Tooltip/Arrow/Arrow.js index 7d281ce..74f0c41 100644 --- a/src/Tooltip/Arrow/Arrow.js +++ b/src/Tooltip/Arrow/Arrow.js @@ -1,8 +1,8 @@ -import style from "./style"; +import style from './style' export default function Arrow(props) { - const arrow = document.createElement("div"); - arrow.style.cssText = style(props); + const arrow = document.createElement('div') + arrow.style.cssText = style(props) - return arrow; + return arrow } diff --git a/src/Tooltip/Arrow/style.js b/src/Tooltip/Arrow/style.js index 00d78b1..3fa33ae 100644 --- a/src/Tooltip/Arrow/style.js +++ b/src/Tooltip/Arrow/style.js @@ -1,11 +1,11 @@ const style = ({ arrowSize, backgroundColor, buttonSize, icons }) => - "position:absolute;" + - "border-left:" + arrowSize + "px solid transparent;" + - "border-right:" + arrowSize + "px solid transparent;" + - "border-top:" + arrowSize + "px solid " + backgroundColor + ";" + - "bottom:-" + (arrowSize - 1) + "px;" + - "left:" + ((buttonSize * icons.length) / 2 - arrowSize) + "px;" + - "width:0;" + - "height:0;" + 'position:absolute;' + + 'border-left:' + arrowSize + 'px solid transparent;' + + 'border-right:' + arrowSize + 'px solid transparent;' + + 'border-top:' + arrowSize + 'px solid ' + backgroundColor + ';' + + 'bottom:-' + (arrowSize - 1) + 'px;' + + 'left:' + ((buttonSize * icons.length) / 2 - arrowSize) + 'px;' + + 'width:0;' + + 'height:0;' export default style diff --git a/src/Tooltip/Tooltip.js b/src/Tooltip/Tooltip.js index b3fc0c6..424e874 100644 --- a/src/Tooltip/Tooltip.js +++ b/src/Tooltip/Tooltip.js @@ -1,5 +1,5 @@ -import { defaultStyle, mobileStyle, desktopStyle } from "./style"; -import Arrow from "./Arrow/Arrow"; +import { defaultStyle, mobileStyle, desktopStyle } from './style' +import Arrow from './Arrow/Arrow' export default function Tooltip(props) { const { @@ -12,21 +12,21 @@ export default function Tooltip(props) { icons, arrowSize, isMobile - } = props; + } = props - const tooltip = document.createElement("div"); - let buttonSize = iconSize + buttonMargin; - tooltip.className = "sharect"; + const tooltip = document.createElement('div') + let buttonSize = iconSize + buttonMargin + tooltip.className = 'sharect' - tooltip.style.cssText = defaultStyle(backgroundColor); + tooltip.style.cssText = defaultStyle(backgroundColor) if (isMobile) { - buttonSize = mobileIconSize + buttonMargin; - tooltip.style.cssText += mobileStyle(buttonSize); + buttonSize = mobileIconSize + buttonMargin + tooltip.style.cssText += mobileStyle(buttonSize) } else { - tooltip.style.cssText += desktopStyle(top, left); + tooltip.style.cssText += desktopStyle(top, left) } - tooltip.appendChild(icons.icons); + tooltip.appendChild(icons.icons) if (!isMobile) { const arrow = Arrow({ @@ -34,10 +34,10 @@ export default function Tooltip(props) { backgroundColor, buttonSize, icons - }); + }) - tooltip.appendChild(arrow); + tooltip.appendChild(arrow) } - return tooltip; + return tooltip } diff --git a/src/Tooltip/style.js b/src/Tooltip/style.js index 0ecb50e..9b5e6e6 100644 --- a/src/Tooltip/style.js +++ b/src/Tooltip/style.js @@ -1,18 +1,18 @@ export const defaultStyle = backgroundColor => - "line-height:0;" + - "transition:all .2s ease-in-out;" + - "background:" + backgroundColor + ";" + 'line-height:0;' + + 'transition:all .2s ease-in-out;' + + 'background:' + backgroundColor + ';' export const mobileStyle = buttonSize => - "position:fixed;" + - "bottom:calc(50% - 64px);" + - "left:0;" + - "width:" + buttonSize + "px;" + - "border-top-right-radius:5px;" + - "border-bottom-right-radius:5px;" + 'position:fixed;' + + 'bottom:calc(50% - 64px);' + + 'left:0;' + + 'width:' + buttonSize + 'px;' + + 'border-top-right-radius:5px;' + + 'border-bottom-right-radius:5px;' export const desktopStyle = (top, left) => - "position:absolute;" + - "border-radius:3px;" + - "top:" + top + "px;" + - "left:" + left + "px;" + 'position:absolute;' + + 'border-radius:3px;' + + 'top:' + top + 'px;' + + 'left:' + left + 'px;' diff --git a/src/helpers/appendIconStyles.js b/src/helpers/appendIconStyles.js index a1db256..109feef 100644 --- a/src/helpers/appendIconStyles.js +++ b/src/helpers/appendIconStyles.js @@ -1,11 +1,11 @@ export function appendIconStyle({iconColor}) { - const style = document.createElement("style"); - style.id = "sharect-style"; - style.innerHTML = `.sharect svg{fill:${iconColor};}`; - document.body.appendChild(style); + const style = document.createElement('style') + style.id = 'sharect-style' + style.innerHTML = `.sharect svg{fill:${iconColor};}` + document.body.appendChild(style) } export function appendMobileIconStyle(iconColor, mobileIconSize) { - const style = document.getElementById("sharect-style"); - style.innerHTML = `.sharect svg{fill:${iconColor};width:${mobileIconSize}px;height:${mobileIconSize}px;}`; + const style = document.getElementById('sharect-style') + style.innerHTML = `.sharect svg{fill:${iconColor};width:${mobileIconSize}px;height:${mobileIconSize}px;}` } diff --git a/src/helpers/attachEvents.js b/src/helpers/attachEvents.js index f166220..b60afa2 100644 --- a/src/helpers/attachEvents.js +++ b/src/helpers/attachEvents.js @@ -1,43 +1,43 @@ -import hasTooltipDrawn from "./hasTooltipDrawn"; -import hasSelection from "./hasSelection"; -import isSelectableElement from "./isSelectableElement"; -import moveTooltip from "./moveTooltip"; -import renderTooltip from "./renderTooltip"; -import { appendMobileIconStyle } from "./appendIconStyles"; +import hasTooltipDrawn from './hasTooltipDrawn' +import hasSelection from './hasSelection' +import isSelectableElement from './isSelectableElement' +import moveTooltip from './moveTooltip' +import renderTooltip from './renderTooltip' +import { appendMobileIconStyle } from './appendIconStyles' -let isMobile = false; +let isMobile = false function handleMouseUp(props) { setTimeout(function mouseTimeout() { if (hasTooltipDrawn()) { if (hasSelection() && isSelectableElement(props.selectableElements)) { - moveTooltip({ ...props, isMobile }); - return; + moveTooltip({ ...props, isMobile }) + return } else { - document.querySelector(".sharect").remove(); + document.querySelector('.sharect').remove() } } if (hasSelection() && isSelectableElement(props.selectableElements)) { - renderTooltip({ ...props, isMobile }); + renderTooltip({ ...props, isMobile }) } - }, 10); + }, 10) } function handlePointerUp(e, { iconColor, mobileIconSize }) { - if (e.pointerType !== "mouse" && e.isPrimary) { - isMobile = true; - appendMobileIconStyle(iconColor, mobileIconSize); - window.removeEventListener("pointerup", handlePointerUp); + if (e.pointerType !== 'mouse' && e.isPrimary) { + isMobile = true + appendMobileIconStyle(iconColor, mobileIconSize) + window.removeEventListener('pointerup', handlePointerUp) } } export default function attachEvents(props) { - window.addEventListener("mouseup", () => handleMouseUp(props), false); + window.addEventListener('mouseup', () => handleMouseUp(props), false) if (window.onpointerup !== undefined) { - window.addEventListener("pointerup", (e) => handlePointerUp(e, props), false); + window.addEventListener('pointerup', (e) => handlePointerUp(e, props), false) } else if (window.orientation !== undefined) { - isMobile = true; - appendMobileIconStyle(props); + isMobile = true + appendMobileIconStyle(props) } } diff --git a/src/helpers/getClosestElement.js b/src/helpers/getClosestElement.js index a91b4d6..6f830b9 100644 --- a/src/helpers/getClosestElement.js +++ b/src/helpers/getClosestElement.js @@ -1,13 +1,13 @@ export default function getClosestElement(element, ancestor) { if (Element.prototype.closest) { - return element.closest(ancestor); + return element.closest(ancestor) } else { // IE 9+ polyfill - let el = element; + let el = element do { - if (el.matches(ancestor)) return el; - el = el.parentNode; - } while (el !== null && el.nodeType === Node.ELEMENT_NODE); - return null; + if (el.matches(ancestor)) return el + el = el.parentNode + } while (el !== null && el.nodeType === Node.ELEMENT_NODE) + return null } } diff --git a/src/helpers/getTooltipPosition.js b/src/helpers/getTooltipPosition.js index 21a7fb3..c69692c 100644 --- a/src/helpers/getTooltipPosition.js +++ b/src/helpers/getTooltipPosition.js @@ -3,23 +3,23 @@ export function getDistanceFromTop() { window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop - ); + ) } export default function getTooltipPosition(props) { - const { iconSize, buttonMargin, arrowSize, icons } = props; + const { iconSize, buttonMargin, arrowSize, icons } = props const sel = window .getSelection() .getRangeAt(0) - .getBoundingClientRect(); + .getBoundingClientRect() - const buttonSize = iconSize + buttonMargin; + const buttonSize = iconSize + buttonMargin - const distanceFromTop = getDistanceFromTop(); + const distanceFromTop = getDistanceFromTop() - const top = sel.top + distanceFromTop - buttonSize - arrowSize; - const left = sel.left + (sel.width - buttonSize * icons.length) / 2; + const top = sel.top + distanceFromTop - buttonSize - arrowSize + const left = sel.left + (sel.width - buttonSize * icons.length) / 2 - return { top, left }; + return { top, left } } diff --git a/src/helpers/hasSelection.js b/src/helpers/hasSelection.js index fceb304..f059993 100644 --- a/src/helpers/hasSelection.js +++ b/src/helpers/hasSelection.js @@ -1,3 +1,3 @@ export default function hasSelection() { - return !!window.getSelection().toString(); + return !!window.getSelection().toString() } diff --git a/src/helpers/hasTooltipDrawn.js b/src/helpers/hasTooltipDrawn.js index ecff28a..ff1f112 100644 --- a/src/helpers/hasTooltipDrawn.js +++ b/src/helpers/hasTooltipDrawn.js @@ -1,3 +1,3 @@ export default function hasTooltipDrawn() { - return !!document.querySelector(".sharect"); + return !!document.querySelector('.sharect') } diff --git a/src/helpers/isSelectableElement.js b/src/helpers/isSelectableElement.js index 724d145..4b97a2b 100644 --- a/src/helpers/isSelectableElement.js +++ b/src/helpers/isSelectableElement.js @@ -1,4 +1,4 @@ -import getClosestElement from "./getClosestElement"; +import getClosestElement from './getClosestElement' export default function isSelectableElement(selectableElements) { const baseNode = window.getSelection().baseNode || window.getSelection().anchorNode diff --git a/src/helpers/moveTooltip.js b/src/helpers/moveTooltip.js index ad383b0..8ea68da 100644 --- a/src/helpers/moveTooltip.js +++ b/src/helpers/moveTooltip.js @@ -1,10 +1,10 @@ -import getTooltipPosition from "./getTooltipPosition"; +import getTooltipPosition from './getTooltipPosition' export default function moveTooltip(props) { - if (props.isMobile) return null; + if (props.isMobile) return null - const { top, left } = getTooltipPosition(props); - let tooltip = document.querySelector(".sharect"); - tooltip.style.top = `${top}px`; - tooltip.style.left = `${left}px`; + const { top, left } = getTooltipPosition(props) + let tooltip = document.querySelector('.sharect') + tooltip.style.top = `${top}px` + tooltip.style.left = `${left}px` } diff --git a/src/helpers/renderTooltip.js b/src/helpers/renderTooltip.js index 9f5e0fa..f04a2c4 100644 --- a/src/helpers/renderTooltip.js +++ b/src/helpers/renderTooltip.js @@ -1,14 +1,14 @@ -import Tooltip from "../Tooltip/Tooltip"; -import getTooltipPosition from "./getTooltipPosition"; +import Tooltip from '../Tooltip/Tooltip' +import getTooltipPosition from './getTooltipPosition' export default function renderTooltip(props) { - const { top, left } = getTooltipPosition(props); + const { top, left } = getTooltipPosition(props) const tooltipSettings = { ...props, top, left - }; + } - document.body.appendChild(Tooltip(tooltipSettings)); + document.body.appendChild(Tooltip(tooltipSettings)) }