You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.5 KiB
53 lines
1.5 KiB
|
|
// Library item
|
|
var LibraryItem = {
|
|
template: `
|
|
<div class="col-xs-12 col-md-6 col-lg-4 library-col" v-on:click="onClick">
|
|
<div class="media library-item">
|
|
<img v-if="image" class="mr3 library-item-image" v-bind:src="prefix+image"></img>
|
|
<div v-else class="mr3 library-item-image" style="background-image: url(images/generic-book.png)"></div>
|
|
<div class="media-body">
|
|
<h5 class="mt-0 library-item-title">{{title}}</h5>
|
|
{{author}}
|
|
</div>
|
|
<img v-show="spinner" src="images/spinner-light.gif" class="library-item-spinner"/>
|
|
<img v-if="image" v-bind:src="prefix+image" v-on:error="onImageError" style="visibility:hidden;width:0px;height:0px;"/>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: ['title', 'author', 'image', 'url', 'prefix', 'spinner'],
|
|
methods: {
|
|
onClick: function() {
|
|
this.$emit('clicked');
|
|
},
|
|
onImageError: function() {
|
|
this.$emit('imageerror');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Library Viewer component
|
|
var LibraryViewer = {
|
|
components: {'library-item': LibraryItem},
|
|
template: `
|
|
<div class="row">
|
|
<library-item v-for="(item,i) in library.database" :key="item.file"
|
|
v-bind:ref="'item'+(i++)"
|
|
v-bind:title="item.title"
|
|
v-bind:author="item.author"
|
|
v-bind:image="item.image"
|
|
v-bind:url="item.file"
|
|
v-bind:prefix="library.information.imageprefix"
|
|
v-on:clicked="bookClicked(item)"
|
|
v-on:imageerror="item.image=''"
|
|
v-bind:spinner="item.spinner">
|
|
</library-item>
|
|
</div>
|
|
`,
|
|
props: ['library'],
|
|
methods: {
|
|
bookClicked: function(book) {
|
|
this.$emit('bookselected', book);
|
|
}
|
|
}
|
|
};
|