Kopiowanie do schowka z informacją o skopiowaniu - czy można to uprościć?

pytanie zadane 22 października 2021 w JavaScript przez nigraS Początkujący (260 p.)

Skrypt działa poprawnie - natomiast pytanie brzmi czy da się go uprościć, aby nie tworzyć w HTML klas app1, app2, app3 ... itd... oraz po stronie JS by nie kopiować formułek.

Kod z działaniem skryptu:
https://codepen.io/wzajemnawymiana/pen/MWvygrR

1 odpowiedź

odpowiedź 24 października 2021 przez VBService Ekspert (256,580 p.)
wybrane 29 października 2021 przez nigraS

Najlepsza

Proponuję takie rozwiązanie przez użycie v-for i animacji css.

<div id="app">    
  <div v-for="link in links" class="button-copy-link">
    <span>URL copied!</span>
    <div :data-link="link.url" @click="copyLink">      
      {{link.name}}
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.5.2/clipboard-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


.button-copy-link{
    position: relative;
    width: 325px;
    height: 50px;
    font-family: "Nunito";
    background-color: var(--green-color);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.35s ease;
}

.button-copy-link:hover{
  letter-spacing: 0.25em;
  transform: scaleX(1.05);
}

.button-copy-link:active{
    transform: scale(1.00);
    letter-spacing: normal;
}

.button-copy-link span{
    position: absolute;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.00) translateY(10px);
    /* transition: transform 0.25s ease, opacity 0.15s ease, visibility 0.15s ease; */
}

.button-copy-link span.visible{
  animation: label_visible 5s ease-in-out;
  /*visibility: visible;
  opacity: 1;
  transform: scale(1.00) translateY(15px);*/
}
@keyframes label_visible {
  from      { visibility: hidden; opacity: 0; transform:translateY(0px); }
  10%, 90%  { visibility: visible; opacity: 1; transform:translateY(15px); }
  to        { visibility: hidden; opacity: 0; transform:translateY(0px); }
}

new Vue({
  el: "#app",
  data: {
    links: [
      { name: "Link 1", url: "https://www.link1.com" },
      { name: "Link 2", url: "https://www.link2.com" },
      { name: "Link 3", url: "https://www.link3.com" },
      { name: "Link 4", url: "https://www.link4.com" }
    ]
  },
  methods: {
    copyLink: function(e) { 
      if (e.target.dataset.link) {
        url = e.target.dataset.link;
        clipboard.writeText(url);
        
        label = e.target.parentNode.querySelector('span');
        label.classList.remove("visible");
        void label.offsetWidth;
        label.classList.add("visible");
      }
    }
  }
})

P.S.
Restart CSS Animation

komentarz 29 października 2021 przez nigraS Początkujący (260 p.)

To jest to. bardzo Ci dziękuję.

... hmm, ale chyba jednak to nie to.

Chciałem zrobić tabelkę 4 kolumny - tytuł, ulica, kod, adres - ko kliknięciu kopiowanie z informacją o skopiowaniu,

Podany kod jest super, tylko, że chyba nie uda się z niego zrobić tabelki?

komentarz 29 października 2021 przez VBService Ekspert (256,580 p.)
edycja 29 października 2021 przez VBService

Masz na myśli taką tabele?

<table>
<thead>
  <tr>
    <th>tytuł</th>
    <th>ulica</th>
    <th>kod</th>
    <th>adres</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>tytuł_1</td>
    <td>ulica_1</td>
    <td>kod_1</td>
    <td>adres_1</td>
  </tr>
  <tr>
    <td>tytuł_2</td>
    <td>ulica_2</td>
    <td>kod_2</td>
    <td>adres_2</td>
  </tr>
</tbody>
</table>

Jeżeli tak, to da się zrobić, powyższym kodem, po niewielkiej modyfikacji,

kliknięciu kopiowanie z informacją o skopiowaniu,

kopiowanie danych z całego wiersza w tabeli, też.

komentarz 30 października 2021 przez nigraS Początkujący (260 p.)

Tabelka wygląda tak:

<body>
	<div class="app">
<!-- partial:index.partial.html -->
<table id="table">
    <thead>

      <th id="ID" scope="col">ID</th>
      <th id="comp-1" scope="col">Ulica</th>
      <th id="comp-2" scope="col">Kod</th>
      <th id="comp-3" scope="col">Adres</th>
      <th id="comp-4" scope="col">Tytuł</th>
    </thead>
    <tbody>
      <tr id="feature-1" scope="row">
        <td headers="ID" class="feature">
			
                <div class="button-copy-link" @click="copyLink('100')">
                   100
	               <span :class="{ 'visible' : isVisible }">skopiowane!</span>
		        </div>
            
	    </td>
        <td headers="comp-1">demo</td>
        <td headers="comp-2">00-000</td>
        <td headers="comp-3">demoA</td>
        <td headers="comp-4">demoB</td>
      </tr>
      
      <tr id="feature-2" scope="row">
       <td headers="ID" class="feature">
			
                <div class="button-copy-link" @click="copyLink('200')">
                   200
	               <span :class="{ 'visible' : isVisible }">skopiowane!</span>
		        </div>
                 
       </td>
        <td headers="comp-1">demo2</td>
        <td headers="comp-2">21-210</td>
        <td headers="comp-3">demoA2</td>
        <td headers="comp-4">demoB2</td>
      </tr>
      
      <tr id="feature-3" scope="row">
        <td headers="ID" class="feature">
			
                <div class="button-copy-link" @click="copyLink('300')">
                   300
	               <span :class="{ 'visible' : isVisible }">skopiowane!</span>
		        </div>
            
	    </td>
        <td headers="comp-1">demo3</td>
        <td headers="comp-2">33-030</td>
        <td headers="comp-3">demoA3</td>
        <td headers="comp-4">demoB3</td>
      </tr>
      
    </tbody>
</table>


</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.5.2/clipboard-polyfill.js"></script>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script><script  src="./script.js"></script>

</body>

new Vue({
		el: '.app',
		data: {
			isVisible: false
		},
		methods: {
			copyLink: function(url) {
				clipboard.writeText(url)
				this.isVisible = true
				setTimeout(this.hideLabel, 5000)
			},

			hideLabel: function() { 
				this.isVisible = false
			}
		},
		delimiters: ['${', '}']
	})

@import url("//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");
table tr {
  box-shadow: inset 0 -1px 0 #fff;
}
table tr:nth-child(even) {
  background: rgba(8, 136, 240, 0.05);
}

#tableEditor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

table {
  border-collapse: separate;
  line-height: 1.65;
  text-align: center;
  width: 100%;
  margin-bottom: 4em;
}

tbody:hover td, tbody:hover td:after {
  color: transparent;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
tbody:hover tr:hover td {
  text-shadow: none;
  cursor: pointer;
  background: #d5d5e9;
  color: #32373d;
}
tbody:hover tr:hover td.desc {
  color: currentColor;
}
tbody:hover tr:hover td.no:after {
  text-shadow: none;
  color: #FF655D;
}
tbody:hover tr:hover td.yes:after {
  text-shadow: none;
  color: #68c249;
}

caption {
  margin: 2em auto;
  font-size: 2em;
}

th {
  background: #0888F0;
  color: #ffffff;
  padding: .875em 1em;
  font-size: 1.125em;
}

td {
  padding: .625em 1em;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.feature {
  color: #0888F0;
  background: #e6e6f2;
  font-weight: bold;
  text-transform: uppercase;
}

.desc {
  font-size: 85%;
  margin: .25em;
}

#tableEditor {
  padding: 2em;
  margin: 10vh 10vw;
  background: #0888F0;
}
#tableEditor td {
  width: 100%;
}
#tableEditor .features {
  display: none;
}

.btn {
  font-size: 2em;
  color: #0888F0;
  text-decoration: none;
  tex-transform: uppercase;
  text-align: center;
  border: 2px solid currentColor;
  padding: .25em .75em;
}
.btn#done {
  color: white;
}










.button-copy-link{
    position: relative;
    width: 325px;
    height: 50px;
    font-family: "Nunito";
    background-color: var(--green-color);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.35s ease;
}

.button-copy-link:hover{
  letter-spacing: 0.25em;
  transform: scaleX(1.05);
}

.button-copy-link:active{
    transform: scale(1.00);
    letter-spacing: normal;
}

.button-copy-link span{
    position: absolute;
    color: #830D0D;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.00) translateY(10px);
    transition: transform 0.25s ease, opacity 0.15s ease, visibility 0.15s ease;
}

.button-copy-link span.visible{
    visibility: visible;
    opacity: 1;
    transform: scale(1.00) translateY(15px);
}

komentarz 30 października 2021 przez VBService Ekspert (256,580 p.)

<body>
    <div class="app">
<!-- partial:index.partial.html -->
<table id="table">
    <thead>
 
      <th id="ID" scope="col">ID</th>
      <th id="comp-1" scope="col">Ulica</th>
      <th id="comp-2" scope="col">Kod</th>
      <th id="comp-3" scope="col">Adres</th>
      <th id="comp-4" scope="col">Tytuł</th>
    </thead>
    <tbody>
      <tr id="feature-1" scope="row">
        <td headers="ID" class="feature">
             
                <div class="button-copy-link" data-link="100" @click="copyLink">
                   100
                   <span>skopiowane!</span>
                </div>
             
        </td>
        <td headers="comp-1">demo</td>
        <td headers="comp-2">00-000</td>
        <td headers="comp-3">demoA</td>
        <td headers="comp-4">demoB</td>
      </tr>
       
      <tr id="feature-2" scope="row">
       <td headers="ID" class="feature">
             
                <div class="button-copy-link" data-link="200" @click="copyLink">
                   200
                   <span>skopiowane!</span>
                </div>
                  
       </td>
        <td headers="comp-1">demo2</td>
        <td headers="comp-2">21-210</td>
        <td headers="comp-3">demoA2</td>
        <td headers="comp-4">demoB2</td>
      </tr>
       
      <tr id="feature-3" scope="row">
        <td headers="ID" class="feature">
             
                <div class="button-copy-link" data-link="300" @click="copyLink">
                   300
                   <span>skopiowane!</span>
                </div>
             
        </td>
        <td headers="comp-1">demo3</td>
        <td headers="comp-2">33-030</td>
        <td headers="comp-3">demoA3</td>
        <td headers="comp-4">demoB3</td>
      </tr>
       
    </tbody>
</table>
 
 
</div>
 
 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.5.2/clipboard-polyfill.js"></script>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script><script  src="./script.js"></script>
 
</body>

@import url("//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");
table tr {
  box-shadow: inset 0 -1px 0 #fff;
}
table tr:nth-child(even) {
  background: rgba(8, 136, 240, 0.05);
}
 
#tableEditor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
body {
  font-family: 'Source Sans Pro', sans-serif;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
 
table {
  border-collapse: separate;
  line-height: 1.65;
  text-align: center;
  width: 100%;
  margin-bottom: 4em;
}
 
tbody:hover td, tbody:hover td:after {
  color: transparent;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
tbody:hover tr:hover td {
  text-shadow: none;
  cursor: pointer;
  background: #d5d5e9;
  color: #32373d;
}
tbody:hover tr:hover td.desc {
  color: currentColor;
}
tbody:hover tr:hover td.no:after {
  text-shadow: none;
  color: #FF655D;
}
tbody:hover tr:hover td.yes:after {
  text-shadow: none;
  color: #68c249;
}
 
caption {
  margin: 2em auto;
  font-size: 2em;
}
 
th {
  background: #0888F0;
  color: #ffffff;
  padding: .875em 1em;
  font-size: 1.125em;
}
 
td {
  padding: .625em 1em;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
 
.feature {
  color: #0888F0;
  background: #e6e6f2;
  font-weight: bold;
  text-transform: uppercase;
}
 
.desc {
  font-size: 85%;
  margin: .25em;
}
 
#tableEditor {
  padding: 2em;
  margin: 10vh 10vw;
  background: #0888F0;
}
#tableEditor td {
  width: 100%;
}
#tableEditor .features {
  display: none;
}
 
.btn {
  font-size: 2em;
  color: #0888F0;
  text-decoration: none;
  tex-transform: uppercase;
  text-align: center;
  border: 2px solid currentColor;
  padding: .25em .75em;
}
.btn#done {
  color: white;
}
 
 
 
 
 
 
 
 
 
 
.button-copy-link{
    position: relative;
    width: 325px;
    height: 50px;
    font-family: "Nunito";
    background-color: var(--green-color);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.35s ease;
}
 
.button-copy-link:hover{
  letter-spacing: 0.25em;
  transform: scaleX(1.05);
}
 
.button-copy-link:active{
    transform: scale(1.00);
    letter-spacing: normal;
}
 
.button-copy-link span{
    position: absolute;
    color: #830D0D;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    visibility: hidden;
    opacity: 0;
    transform: scale(1.00) translateY(10px);
}
 
.button-copy-link span.visible{
  animation: label_visible 5s ease-in-out;
}

@keyframes label_visible {
  from      { visibility: hidden; opacity: 0; transform:translateY(0px); }
  10%, 90%  { visibility: visible; opacity: 1; transform:translateY(15px); }
  to        { visibility: hidden; opacity: 0; transform:translateY(0px); }
}

new Vue({
        el: '.app',
        data: {
            isVisible: false
        },
        methods: {
            copyLink: function(e) {
              if (e.target.dataset.link) {
                url = e.target.dataset.link;
                clipboard.writeText(url);

                label = e.target.parentNode.querySelector('span');
                label.classList.remove("visible");
                void label.offsetWidth;
                label.classList.add("visible");
              }
            }
        },
        delimiters: ['${', '}']
})

1	komentarz 31 października 2021 przez nigraS Początkujący (260 p.) Dzięki, próbowałem sam rozwiązać ten problem, ale mi się ie udawało. Bardzo dziękuję za pomoc.