59 lines
2.0 KiB
JavaScript
59 lines
2.0 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.thumbnailURL"></a>
|
|
<div class="card-section" style="padding-top: 7px; padding-bottom: 7px;">
|
|
<p style="padding-top: 0px; padding-bottom: 0px; font-size: 12px;">{{ video.title }}</p>
|
|
</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.youtubeID;
|
|
|
|
// 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();
|
|
});
|