74 lines
2.4 KiB
JavaScript
74 lines
2.4 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: {
|
|
Rows: [
|
|
/*{
|
|
Columns: [
|
|
{
|
|
"title": "0",
|
|
"description": "",
|
|
"yTVideoID": "",
|
|
"thumbnailURL": "",
|
|
"uploaded": "",
|
|
"yTChannelID": ""
|
|
}
|
|
]
|
|
}*/
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// Get new videos from the web api.
|
|
retrieve: function (event) {
|
|
// Wipe out all old entries.
|
|
this.Videos.Rows = [];
|
|
|
|
axios.get('/api/Videos')
|
|
.then(function (response) {
|
|
// Dimension counters and limits.
|
|
var maxcols = 4;
|
|
var colcounter = 0;
|
|
var rowcounter = 0;
|
|
|
|
// 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) + " ...";
|
|
}
|
|
|
|
// Handle creation of a new row.
|
|
if (colcounter == 0) {
|
|
Vue.set(this.Videos.Rows, rowcounter, []);
|
|
Vue.set(this.Videos.Rows[rowcounter], 'Columns', []);
|
|
}
|
|
|
|
// Add it to our array
|
|
this.Videos.Rows[rowcounter].Columns.push(x);
|
|
|
|
// So we get it all in groups of maxcols.
|
|
colcounter = colcounter + 1;
|
|
if (colcounter == maxcols) {
|
|
colcounter = 0;
|
|
rowcounter = rowcounter + 1;
|
|
}
|
|
}.bind(this));
|
|
}.bind(this))
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('load', function () {
|
|
vidholder.retrieve();
|
|
});
|