60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
$(document).foundation();
|
|
|
|
// How many chars at most for the description.
|
|
var maxcharsdescriptionfield = 100;
|
|
|
|
// Grid if images.
|
|
var vidholder = new Vue({
|
|
el: '#vidholder-0',
|
|
data: {
|
|
Videos: []
|
|
},
|
|
// Template has wrapping div because v-for can't be in root it seems.
|
|
template: `
|
|
<div>
|
|
<div class="grid-x large-up-6">
|
|
<div v-for="video in Videos" class="cell">
|
|
<div class="card curvedbottom" style="background-color:#ddd9d4; margin:6px;2px;6px;">
|
|
<a :href="video.url"><img :src="video.thumbnail"></a>
|
|
<div class="card-section" style="padding: 7px 5px 7px">
|
|
<div style="font-size: 14px; padding-bottom:10px;">{{ video.title }}</div>
|
|
<div style="font-size: 10px; text-align:right">{{ video.channel }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
</div>
|
|
`,
|
|
methods: {
|
|
// Get new videos from the web api.
|
|
retrieve: function (event) {
|
|
// Wipe out all old entries.
|
|
this.Videos = [];
|
|
|
|
axios.get('/api/Videos')
|
|
.then(function (response) {
|
|
// And fill it with all the retrieved entries.
|
|
response.data.forEach(function (x) {
|
|
// Trim description if needed.
|
|
if (x.description.length > maxcharsdescriptionfield) {
|
|
x.description = x.description.substring(0, maxcharsdescriptionfield) + " ...";
|
|
}
|
|
|
|
// Generate a new URL by adding the YT ID.
|
|
x.url = "https://www.youtube.com/watch?v=" + x.id;
|
|
|
|
// Add it to our array
|
|
this.Videos.push(x);
|
|
}.bind(this));
|
|
}.bind(this))
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('load', function () {
|
|
vidholder.retrieve();
|
|
});
|