1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-31 08:02:42 +01:00
BookStack/resources/assets/js/vues/image-manager.js

212 lines
5.7 KiB
JavaScript
Raw Normal View History

const dropzone = require('./components/dropzone');
let page = 0;
let previousClickTime = 0;
let previousClickImage = 0;
let dataLoaded = false;
let callback = false;
let baseUrl = '';
let preSearchImages = [];
let preSearchHasMore = false;
const data = {
images: [],
imageType: false,
uploadedTo: false,
selectedImage: false,
dependantPages: false,
showing: false,
view: 'all',
hasMore: false,
searching: false,
searchTerm: '',
revisions: [],
selectedRevision: null,
imageUpdateSuccess: false,
imageDeleteSuccess: false,
deleteConfirm: false,
};
const methods = {
show(providedCallback, imageType = null) {
callback = providedCallback;
this.showing = true;
this.$el.children[0].components.overlay.show();
// Get initial images if they have not yet been loaded in.
if (dataLoaded && imageType === this.imageType) return;
if (imageType) {
this.imageType = imageType;
this.resetState();
}
this.fetchData();
dataLoaded = true;
},
hide() {
this.showing = false;
this.selectedImage = false;
this.$refs.dropzone.onClose();
this.$el.children[0].components.overlay.hide();
},
fetchData() {
let url = baseUrl + page;
let query = {};
if (this.uploadedTo !== false) query.page_id = this.uploadedTo;
if (this.searching) query.term = this.searchTerm;
this.$http.get(url, {params: query}).then(response => {
this.images = this.images.concat(response.data.images);
this.hasMore = response.data.hasMore;
page++;
});
},
setView(viewName) {
this.view = viewName;
this.resetState();
this.fetchData();
},
resetState() {
this.cancelSearch();
this.images = [];
this.hasMore = false;
this.deleteConfirm = false;
page = 0;
baseUrl = window.baseUrl(`/images/${this.imageType}/${this.view}/`);
},
searchImages() {
if (this.searchTerm === '') return this.cancelSearch();
// Cache current settings for later
if (!this.searching) {
preSearchImages = this.images;
preSearchHasMore = this.hasMore;
}
this.searching = true;
this.images = [];
this.hasMore = false;
page = 0;
baseUrl = window.baseUrl(`/images/${this.imageType}/search/`);
this.fetchData();
},
cancelSearch() {
this.searching = false;
this.searchTerm = '';
this.images = preSearchImages;
this.hasMore = preSearchHasMore;
},
imageSelect(image) {
let dblClickTime = 300;
let currentTime = Date.now();
let timeDiff = currentTime - previousClickTime;
let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
this.revisions = [];
this.selectedRevision = null
if (isDblClick) {
this.callbackAndHide(image);
} else {
this.selectedImage = image;
this.deleteConfirm = false;
this.dependantPages = false;
if (this.imageType === 'drawio') {
this.$http.get(window.baseUrl(`/images/revisions/${image.id}`)).then(resp => {
this.revisions = resp.data;
})
}
}
previousClickTime = currentTime;
previousClickImage = image.id;
},
callbackAndHide(imageResult) {
if (callback) callback(imageResult);
this.hide();
},
saveImageDetails() {
let url = window.baseUrl(`/images/update/${this.selectedImage.id}`);
this.$http.put(url, this.selectedImage).then(response => {
this.$events.emit('success', trans('components.image_update_success'));
}).catch(error => {
if (error.response.status === 422) {
let errors = error.response.data;
let message = '';
Object.keys(errors).forEach((key) => {
message += errors[key].join('\n');
});
this.$events.emit('error', message);
}
});
},
deleteImage() {
if (!this.deleteConfirm) {
let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
this.$http.get(url).then(resp => {
this.dependantPages = resp.data;
}).catch(console.error).then(() => {
this.deleteConfirm = true;
});
return;
}
this.$http.delete(`/images/${this.selectedImage.id}`).then(resp => {
this.images.splice(this.images.indexOf(this.selectedImage), 1);
this.selectedImage = false;
this.$events.emit('success', trans('components.image_delete_success'));
this.deleteConfirm = false;
});
},
getDate(stringDate) {
return new Date(stringDate);
},
uploadSuccess(event) {
this.images.unshift(event.data);
this.$events.emit('success', trans('components.image_upload_success'));
},
selectRevision(revision) {
let rev = (this.selectedRevision === revision) ? null : revision;
this.selectedRevision = rev;
}
};
const computed = {
uploadUrl() {
return window.baseUrl(`/images/${this.imageType}/upload`);
}
};
function mounted() {
window.ImageManager = this;
this.imageType = this.$el.getAttribute('image-type');
this.uploadedTo = this.$el.getAttribute('uploaded-to');
baseUrl = window.baseUrl('/images/' + this.imageType + '/all/')
}
module.exports = {
mounted,
methods,
data,
computed,
components: {dropzone},
};