mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-06-04 17:04:32 +08:00
Reverted work on revisions
Improved linkage of drawings and image manager. Updated image updates to create new versions.
This commit is contained in:
Dan Brown
@ -229,16 +229,18 @@ function drawIoPlugin() {
|
||||
}
|
||||
|
||||
function showDrawingManager(mceEditor, selectedNode = null) {
|
||||
// TODO - Handle how image manager links in.
|
||||
pageEditor = mceEditor;
|
||||
currentNode = selectedNode;
|
||||
// Show image manager
|
||||
window.ImageManager.show(function (image) {
|
||||
|
||||
|
||||
// // Replace the actively selected content with the linked image
|
||||
// let html = `<a href="${image.url}" target="_blank">`;
|
||||
// html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
|
||||
// html += '</a>';
|
||||
// win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
|
||||
if (selectedNode) {
|
||||
let imgElem = selectedNode.querySelector('img');
|
||||
pageEditor.dom.setAttrib(imgElem, 'src', image.url);
|
||||
pageEditor.dom.setAttrib(selectedNode, 'drawio-diagram', image.id);
|
||||
} else {
|
||||
let imgHTML = `<div drawio-diagram="${image.id}" contenteditable="false"><img src="${image.url}"></div>`;
|
||||
pageEditor.insertContent(imgHTML);
|
||||
}
|
||||
}, 'drawio');
|
||||
}
|
||||
|
||||
@ -260,9 +262,9 @@ function drawIoPlugin() {
|
||||
if (currentNode) {
|
||||
DrawIO.close();
|
||||
let imgElem = currentNode.querySelector('img');
|
||||
let drawingId = currentNode.getAttribute('drawio-diagram');
|
||||
window.$http.put(window.baseUrl(`/images/drawing/upload/${drawingId}`), data).then(resp => {
|
||||
pageEditor.dom.setAttrib(imgElem, 'src', `${resp.data.url}?updated=${Date.now()}`);
|
||||
window.$http.post(window.baseUrl(`/images/drawing/upload`), data).then(resp => {
|
||||
pageEditor.dom.setAttrib(imgElem, 'src', resp.data.url);
|
||||
pageEditor.dom.setAttrib(currentNode, 'drawio-diagram', resp.data.id);
|
||||
}).catch(err => {
|
||||
window.$events.emit('error', trans('errors.image_upload_error'));
|
||||
console.log(err);
|
||||
@ -300,17 +302,23 @@ function drawIoPlugin() {
|
||||
|
||||
editor.addCommand('drawio', () => {
|
||||
let selectedNode = editor.selection.getNode();
|
||||
if (isDrawing(selectedNode)) {
|
||||
showDrawingManager(editor, selectedNode);
|
||||
} else {
|
||||
showDrawingEditor(editor);
|
||||
}
|
||||
showDrawingEditor(editor, isDrawing(selectedNode) ? selectedNode : null);
|
||||
});
|
||||
|
||||
editor.addButton('drawio', {
|
||||
type: 'splitbutton',
|
||||
tooltip: 'Drawing',
|
||||
image: window.baseUrl('/icon/drawing.svg?color=000000'),
|
||||
cmd: 'drawio'
|
||||
cmd: 'drawio',
|
||||
menu: [
|
||||
{
|
||||
text: 'Drawing Manager',
|
||||
onclick() {
|
||||
let selectedNode = editor.selection.getNode();
|
||||
showDrawingManager(editor, isDrawing(selectedNode) ? selectedNode : null);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
editor.on('dblclick', event => {
|
||||
|
||||
@ -24,9 +24,6 @@ const data = {
|
||||
searching: false,
|
||||
searchTerm: '',
|
||||
|
||||
revisions: [],
|
||||
selectedRevision: null,
|
||||
|
||||
imageUpdateSuccess: false,
|
||||
imageDeleteSuccess: false,
|
||||
deleteConfirm: false,
|
||||
@ -50,9 +47,11 @@ const methods = {
|
||||
},
|
||||
|
||||
hide() {
|
||||
if (this.$refs.dropzone) {
|
||||
this.$refs.dropzone.onClose();
|
||||
}
|
||||
this.showing = false;
|
||||
this.selectedImage = false;
|
||||
this.$refs.dropzone.onClose();
|
||||
this.$el.children[0].components.overlay.hide();
|
||||
},
|
||||
|
||||
@ -113,8 +112,6 @@ const methods = {
|
||||
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);
|
||||
@ -122,11 +119,6 @@ const methods = {
|
||||
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;
|
||||
@ -182,11 +174,6 @@ const methods = {
|
||||
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 = {
|
||||
|
||||
@ -41,20 +41,13 @@
|
||||
|
||||
<div class="image-manager-sidebar">
|
||||
|
||||
<dropzone ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
|
||||
<dropzone v-if="imageType !== 'drawio'" ref="dropzone" placeholder="{{ trans('components.image_dropzone') }}" :upload-url="uploadUrl" :uploaded-to="uploadedTo" @success="uploadSuccess"></dropzone>
|
||||
|
||||
<div class="inner">
|
||||
|
||||
<div class="image-manager-details anim fadeIn" v-if="selectedImage">
|
||||
|
||||
<div v-if="selectedRevision" class="image-manager-viewer">
|
||||
<a :href="selectedRevision.url" target="_blank" style="display: block;">
|
||||
<img :src="selectedRevision.url" :alt="selectedImage.name"
|
||||
:title="selectedImage.name">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="saveImageDetails" v-if="!selectedRevision">
|
||||
<form @submit.prevent="saveImageDetails">
|
||||
<div class="image-manager-viewer">
|
||||
<a :href="selectedImage.url" target="_blank" style="display: block;">
|
||||
<img :src="selectedImage.thumbs.display" :alt="selectedImage.name"
|
||||
@ -67,7 +60,7 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="!selectedRevision" class="clearfix">
|
||||
<div class="clearfix">
|
||||
<div class="float left">
|
||||
<button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
|
||||
|
||||
@ -91,28 +84,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{--Revisions View--}}
|
||||
<div v-show="imageType === 'drawio'">
|
||||
<hr>
|
||||
<h5>Revisions</h5>
|
||||
<table v-if="revisions.length > 0" class="table">
|
||||
<tr v-for="(revision, index) in revisions" :key="revision.id" :class="{'primary-background-light': selectedRevision === revision}" @click="selectRevision(revision)">
|
||||
<td>
|
||||
<span v-text="revision.revision"></span>
|
||||
<span class="italic text-muted" v-if="index === 0 && revision.path === selectedImage.path">(Current)</span>
|
||||
</td>
|
||||
<td class="text-small">
|
||||
<span v-text="(new Date(revision.created_at + 'Z')).toLocaleTimeString()"></span>
|
||||
<br>
|
||||
<span v-text="(new Date(revision.created_at + 'Z')).toLocaleDateString()"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p v-if="revisions.length === 0" class="text-muted italic">
|
||||
No revisions found
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user