171 lines
3.6 KiB
JavaScript
171 lines
3.6 KiB
JavaScript
Vue.component('nicon', {
|
|
template: `
|
|
<span v-bind:class="name">
|
|
</span>
|
|
`,
|
|
props : ['name']
|
|
})
|
|
|
|
Vue.component('rnav', {
|
|
template: `
|
|
<span class="rnav" v-on:click="toggle" v-bind:class="{ 'tagged': tag.isTrue}">
|
|
<slot></slot>
|
|
</span>
|
|
`,
|
|
props : ['tag'],
|
|
methods: {
|
|
toggle() {
|
|
vm.$data.isFresh = false
|
|
this.tag.isTrue = !this.tag.isTrue
|
|
}
|
|
}
|
|
})
|
|
|
|
Vue.component('ritem', {
|
|
template: `
|
|
<section class="ritem" v-show="tags.some(o => o.isTrue === true) || fresh">
|
|
<slot></slot>
|
|
</section>
|
|
`,
|
|
props : {
|
|
tags: Array,
|
|
fresh: Boolean
|
|
}
|
|
})
|
|
|
|
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',
|
|
check: 'check2',
|
|
isFresh: true,
|
|
tags: {
|
|
arts: { isTrue: false },
|
|
tech: { isTrue: false },
|
|
afk: { isTrue: false },
|
|
science: { isTrue: false },
|
|
|
|
zet: { isTrue: false },
|
|
|
|
cinema: { isTrue: false },
|
|
|
|
music: { isTrue: false },
|
|
compo: { isTrue: false },
|
|
writing: { isTrue: false },
|
|
|
|
creativity: { isTrue: false },
|
|
|
|
selfhost: { isTrue: false },
|
|
web: { isTrue: false },
|
|
privacy: { isTrue: false },
|
|
productivity: { isTrue: false },
|
|
mental: { isTrue: false },
|
|
|
|
general: { isTrue: false }
|
|
}
|
|
}
|
|
}
|
|
}).$mount('#root') |