Commit a2806d87 authored by Ale's avatar Ale

feat: Add copytoclipboard

parent 122cbefc
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -468,4 +468,11 @@ window.onload = ()=>{
var latlon = hoodsearch.value.split(",");
map.setView(latlon, 17);
});
document.querySelectorAll('[data-copy]').forEach( function(i){
const value = i.dataset.copy;
i.addEventListener('click', function(e){
i.classList.add('success');
navigator.clipboard.writeText(value).then(i => {});
});
} );
};
......@@ -641,18 +641,40 @@ select:hover {
.share img {
max-width: 20px; }
.share img:hover {
cursor: pointer;
opacity: 0.75; }
.share__label {
opacity: 0.75;
cursor: pointer; }
cursor: pointer;
margin-left: 1.6rem; }
.share__items {
display: none;
margin-left: 1.6rem; }
margin-left: 0.8rem; }
.share__items.visible {
display: inline-block; }
@keyframes fadeinout {
0% {
opacity: 0; }
50% {
opacity: 1; }
100% {
opacity: 0; } }
[data-copy].success:after {
content: "Has copiado la URL del video al portapapeles";
position: absolute;
padding: 0.8rem;
background-color: #41ad33;
color: white;
z-index: 500000;
animation: fadeinout 3s 1 forwards;
font-size: 1.4rem;
margin-left: 1.6rem; }
.timeline-wrapper {
padding: 1.6rem; }
......
This diff is collapsed.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
\ No newline at end of file
......@@ -2,13 +2,36 @@
.share img
max-width: 20px
&:hover
cursor: pointer
opacity: .75
.share__label
opacity: .75
cursor: pointer
margin-left: $m
.share__items
display: none
margin-left: $m
margin-left: $m/2
.share__items.visible
display: inline-block
@keyframes fadeinout
0%
opacity: 0
50%
opacity: 1
100%
opacity: 0
[data-copy].success:after
content: "Has copiado la URL del video al portapapeles"
position: absolute
padding: $m/2
background-color: #41ad33
color: white
z-index: 500000
animation: fadeinout 3s 1 forwards
font-size: 1.4rem
margin-left: $m
......@@ -14,8 +14,8 @@
<a href="http://www.facebook.com/sharer.php?s=100&p[url]={{ request.build_absolute_uri }}#{{ pk }}&p[title]={{ title }}" target="_blank">
<img src="{% static '/site/img/icons/facebook.svg' %}" />
</a>
<a href="mailto:?body={{ title }}: {{ request.build_absolute_uri }}#{{ pk }}" target="_blank">
<img src="{% static '/site/img/icons/mail.svg' %}" />
</a>
<span class="clipboard-action" data-copy="{{ request.build_absolute_uri }}#{{ pk }}">
<img src="{% static '/site/img/icons/clipboard.svg' %}" />
</span>
</div>
</div>
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