ninabreznik
7 years ago
committed by
yann300
parent
73ead83353
commit
5d0b690242
@ -0,0 +1,32 @@ |
||||
var yo = require('yo-yo') |
||||
// -------------- copyToClipboard ----------------------
|
||||
const copy = require('clipboard-copy') |
||||
var addTooltip = require('./tooltip') |
||||
// -------------- styling ----------------------
|
||||
var csjs = require('csjs-inject') |
||||
var remixLib = require('remix-lib') |
||||
var styleGuide = remixLib.ui.styleGuide |
||||
var styles = styleGuide() |
||||
|
||||
var css = csjs` |
||||
.copyIcon { |
||||
margin-left: 5px; |
||||
cursor: pointer; |
||||
} |
||||
` |
||||
|
||||
module.exports = function copyToClipboard (getContent) { |
||||
var copyIcon = yo`<i title="Copy value to clipboard" class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>` |
||||
copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard |
||||
copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard } |
||||
copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard } |
||||
copyIcon.onclick = (event) => { |
||||
event.stopPropagation() |
||||
var copiableContent = getContent() |
||||
if (copiableContent) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
|
||||
copy(copiableContent) |
||||
addTooltip(event) |
||||
} |
||||
} |
||||
return copyIcon |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
var yo = require('yo-yo') |
||||
// -------------- styling ----------------------
|
||||
var csjs = require('csjs-inject') |
||||
var remixLib = require('remix-lib') |
||||
var styleGuide = remixLib.ui.styleGuide |
||||
var styles = styleGuide() |
||||
|
||||
var css = csjs` |
||||
.tooltip { |
||||
visibility: hidden; |
||||
width: 100px; |
||||
background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor}; |
||||
color: ${styles.remix.tooltip_CopyToClipboard_Color}; |
||||
font-weight: bold; |
||||
font-size: 12px; |
||||
text-transform: initial; |
||||
text-align: center; |
||||
border-radius: 3px; |
||||
padding: 5px 0; |
||||
position: absolute; |
||||
z-index: 1; |
||||
bottom: 160%; |
||||
left: 100%; |
||||
margin-left: -60px; |
||||
opacity: 0; |
||||
transition: opacity 1s; |
||||
} |
||||
.tooltip::after { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 100%; |
||||
left: 50%; |
||||
margin-left: -5px; |
||||
border-width: 5px; |
||||
border-style: solid; |
||||
border-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor} transparent transparent transparent; |
||||
} |
||||
` |
||||
|
||||
module.exports = function addTooltip (event) { |
||||
var icon = event.target |
||||
icon.style.position = 'relative' |
||||
var tooltip = yo`<div class=${css.tooltip}>Copied!</div>` |
||||
icon.appendChild(tooltip) |
||||
var copiedToolbox = event.target.children[0] |
||||
copiedToolbox.style.visibility = 'visible' |
||||
copiedToolbox.style.opacity = 1 |
||||
setTimeout(function () { |
||||
copiedToolbox.style.visibility = 'hidden' |
||||
copiedToolbox.style.opacity = 0 |
||||
}, 1000) |
||||
} |
||||
Loading…
Reference in new issue