edbrz9
/
ed.brz9.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js added to animate div on copy

This commit is contained in:
edbrz9 2022-12-30 19:10:09 +01:00
parent e8328a86db
commit 070543f7c2
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
proj/y2t/assets/js/main.js
View File

@ -1,16 +1,22 @@
Vue.component('copbox',{ Vue.component('copbox',{
template : ` template : `
<div class="y2t-output"> <div class="y2t-output">
<div class="copied" v-bind:class="{ 'success': isSuccess}" ref="element"></div>
<div class="top" v-on:click="copyToClipboard"> <div class="top" v-on:click="copyToClipboard">
<span class="copylabel">Copy to clipboard</span><span class="byl-icon-copy"></span> <span class="copylabel">Copy to clipboard</span><span class="byl-icon-copy"></span>
</div> </div>
<div ref="textToCopy"> <div ref="textToCopy" class="promptext">
<slot></slot> <slot></slot>
</div> </div>
<div class="shader"></div> <div class="shader"></div>
</div> </div>
`, `,
data() {
return {
isSuccess: false
}
},
methods : { methods : {
copyToClipboard() { copyToClipboard() {
const textToCopy = this.$refs.textToCopy; const textToCopy = this.$refs.textToCopy;
@ -19,8 +25,15 @@ Vue.component('copbox',{
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
window.getSelection().addRange(range); window.getSelection().addRange(range);
document.execCommand('copy'); document.execCommand('copy');
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
this.successOk();
}, },
successOk(){
this.isSuccess = true;
this.$refs.element.addEventListener('animationend', () => {
this.isFaded = false;
});
}
} }
}) })