<template>
<div id="image-manager">
- <div class="overlay" v-el="overlay" v-on="click: overlayClick" >
+ <div class="overlay" v-el:overlay @click="overlayClick">
<div class="image-manager-body">
<div class="image-manager-content">
<div class="image-manager-list">
- <div v-repeat="image: images">
+ <div v-for="image in images">
<img class="anim fadeIn"
- v-class="selected: (image==selectedImage)"
- v-attr="src: image.thumbnail, alt: image.name, title: image.name"
- v-on="click: imageClick(image)"
- v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'">
+ :class="{selected: (image==selectedImage)}"
+ :src="image.thumbs.gallery" :alt="image.title" :title="image.name"
+ @click="imageClick(image)"
+ :style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}">
</div>
- <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
+ <div class="load-more" v-show="hasMore" @click="fetchData">Load More</div>
</div>
</div>
- <button class="neg button image-manager-close" v-on="click: hide()">x</button>
+ <button class="neg button image-manager-close" @click="hide">x</button>
<div class="image-manager-sidebar">
- <h2 v-el="imageTitle">Images</h2>
+ <h2 v-el:image-title>Images</h2>
<hr class="even">
- <div class="dropzone-container" v-el="dropZone">
+ <div class="dropzone-container" v-el:drop-zone>
<div class="dz-message">Drop files or click here to upload</div>
</div>
<div class="image-manager-details anim fadeIn" v-show="selectedImage">
<hr class="even">
- <form v-on="submit: saveImageDetails" v-el="imageForm">
+ <form @submit="saveImageDetails" v-el:image-form>
<div class="form-group">
<label for="name">Image Name</label>
<input type="text" id="name" name="name" v-model="selectedImage.name">
<hr class="even">
<div v-show="dependantPages">
<p class="text-neg text-small">
- This image is used in the pages below, Click delete again to confirm you want to delete this image.
+ This image is used in the pages below, Click delete again to confirm you want to delete
+ this image.
</p>
<ul class="text-neg">
- <li v-repeat="page: dependantPages">
- <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a>
+ <li v-for="page in dependantPages">
+ <a :href="page.url" target="_blank" class="text-neg">{{ page.name }}</a>
</li>
</ul>
</div>
- <form v-on="submit: deleteImage" v-el="imageDeleteForm">
+ <form @submit="deleteImage" v-el:image-delete-form>
<button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
</form>
</div>
<div class="image-manager-bottom">
- <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i class="zmdi zmdi-square-right"></i>Select Image</button>
+ <button class="button pos anim fadeIn" v-show="selectedImage" @click="selectButtonClick"><i
+ class="zmdi zmdi-square-right"></i>Select Image
+ </button>
</div>
</div>
</div>
var Dropzone = require('dropzone');
module.exports = {
- data: function(){
+ data: function () {
return {
images: [],
hasMore: false,
selectedImage: false,
dependantPages: false,
deleteForm: {},
- token: document.querySelector('meta[name=token]').getAttribute('content')
+ token: document.querySelector('meta[name=token]').getAttribute('content'),
+ dataLoaded: false
+ }
+ },
+
+ props: {
+ imageType: {
+ type: String,
+ required: true
}
},
created: function () {
- // Get initial images
- this.fetchData(this.page);
window.ImageManager = this;
},
methods: {
fetchData: function () {
var _this = this;
- this.$http.get('/images/all/' + _this.page, function (data) {
+ this.$http.get('/images/' + _this.imageType + '/all/' + _this.page, function (data) {
_this.images = _this.images.concat(data.images);
_this.hasMore = data.hasMore;
_this.page++;
setupDropZone: function () {
var _this = this;
- var dropZone = new Dropzone(_this.$$.dropZone, {
- url: '/upload/image',
+ var dropZone = new Dropzone(_this.$els.dropZone, {
+ url: '/images/' + _this.imageType + '/upload',
init: function () {
var dz = this;
this.on("sending", function (file, xhr, data) {
dz.removeFile(file);
});
});
+ this.on('error', function (file, errorMessage, xhr) {
+ if (errorMessage.file) {
+ $(file.previewElement).find('[data-dz-errormessage]').text(errorMessage.file[0]);
+ }
+ console.log(errorMessage);
+ });
}
});
},
+ returnCallback: function (image) {
+ this.callback(image);
+ },
+
imageClick: function (image) {
var dblClickTime = 380;
var cTime = (new Date()).getTime();
if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
// DoubleClick
if (this.callback) {
- this.callback(image);
+ this.returnCallback(image);
}
this.hide();
} else {
selectButtonClick: function () {
if (this.callback) {
- this.callback(this.selectedImage);
+ this.returnCallback(this.selectedImage);
}
this.hide();
},
show: function (callback) {
this.callback = callback;
- this.$$.overlay.style.display = 'block';
+ this.$els.overlay.style.display = 'block';
+ // Get initial images if they have not yet been loaded in.
+ if (!this.dataLoaded) {
+ this.fetchData(this.page);
+ this.dataLoaded = true;
+ }
},
overlayClick: function (e) {
},
hide: function () {
- this.$$.overlay.style.display = 'none';
+ this.$els.overlay.style.display = 'none';
},
saveImageDetails: function (e) {
e.preventDefault();
var _this = this;
_this.selectedImage._token = _this.token;
- var form = $(_this.$$.imageForm);
+ var form = $(_this.$els.imageForm);
$.ajax('/images/update/' + _this.selectedImage.id, {
method: 'PUT',
data: _this.selectedImage
}).done(function () {
_this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
_this.selectedImage = false;
- $(_this.$$.imageTitle).showSuccess('Image Deleted');
- }).fail(function(jqXHR, textStatus) {
+ $(_this.$els.imageTitle).showSuccess('Image Deleted');
+ }).fail(function (jqXHR, textStatus) {
// Pages failure
- if(jqXHR.status === 400) {
+ if (jqXHR.status === 400) {
_this.dependantPages = jqXHR.responseJSON;
}
});
projects / bookstack / blobdiff