112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
Vue.component('rssdate', {
|
|
template: `
|
|
<section class="rss-date">
|
|
<p>When you loaded that page, the correct pubDate string was:</p>
|
|
<h4>
|
|
<copyme>{{ pubDate }}</copyme>
|
|
</h4>
|
|
</section>
|
|
`,
|
|
computed : {
|
|
pubDate () {
|
|
const date = new Date()
|
|
return date.toUTCString()
|
|
}
|
|
}
|
|
})
|
|
|
|
Vue.component('copyme', {
|
|
template: `
|
|
<section class="copyme-containter" v-on:click="copyToClipboard">
|
|
<span class="copypopup" v-bind:class="{ 'success': isCopied}" ref="element">Copied!</span>
|
|
<section class="copyme" ref="copyThis">
|
|
<slot></slot>
|
|
</section>
|
|
</section>
|
|
`,
|
|
data() {
|
|
return {
|
|
isCopied: false
|
|
}
|
|
},
|
|
methods : {
|
|
copyToClipboard() {
|
|
const textToCopy = this.$refs.copyThis;
|
|
const range = document.createRange();
|
|
range.selectNode(textToCopy);
|
|
window.getSelection().removeAllRanges();
|
|
window.getSelection().addRange(range);
|
|
document.execCommand('copy');
|
|
window.getSelection().removeAllRanges();
|
|
this.copyDone();
|
|
},
|
|
copyDone(){
|
|
this.isCopied = true;
|
|
this.$refs.element.addEventListener('animationend', () => {
|
|
this.isCopied = false;
|
|
});
|
|
}
|
|
}
|
|
})
|
|
|
|
Vue.component('ppbut' ,{
|
|
template : `
|
|
<div>
|
|
<button
|
|
class="ppbut"
|
|
v-bind:class="{ playing: isPlaying }"
|
|
v-on:click="pp">
|
|
</button>
|
|
<audio ref="audioElm" preload="none">
|
|
<source v-bind:src="audiourl">
|
|
</audio>
|
|
</div>
|
|
`,
|
|
data () {
|
|
return {
|
|
isPlaying : false
|
|
}
|
|
},
|
|
props: ['audiourl'],
|
|
methods: {
|
|
pp (e) {
|
|
if (!this.isPlaying) {
|
|
this.mutePage();
|
|
this.isPlaying = !this.isPlaying;
|
|
this.$refs.audioElm.load();
|
|
this.$refs.audioElm.play();
|
|
this.$refs.audioElm.addEventListener("ended",
|
|
function() {
|
|
this.isPlaying = false;
|
|
console.log(this.isPlaying);
|
|
alert("The audio has ended");
|
|
});
|
|
|
|
} else {
|
|
this.isPlaying = !this.isPlaying;
|
|
this.$refs.audioElm.pause();
|
|
}
|
|
},
|
|
mutePage () {
|
|
var x = document.getElementsByTagName("audio");
|
|
var i;
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].pause();
|
|
}
|
|
var y = document.getElementsByClassName("ppbut");
|
|
for (i = 0; i < y.length; i++) {
|
|
y[i].classList.remove("playing");
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
let vm = new Vue({
|
|
data () {
|
|
return {
|
|
name: 'test'
|
|
}
|
|
}
|
|
}).$mount('#root')
|
|
|