wikijs-fork/client/js/components/editor-image.js

99 lines
2.4 KiB
JavaScript
Raw Normal View History

2016-09-17 04:26:02 +00:00
let vueImage = new Vue({
el: '#modal-editor-image',
data: {
isLoading: false,
isLoadingText: '',
newFolderName: '',
newFolderShow: false,
2016-09-25 21:32:39 +00:00
fetchFromUrlURL: '',
fetchFromUrlShow: false,
folders: [],
currentFolder: '',
2016-09-25 21:32:39 +00:00
currentImage: '',
currentAlign: 'left',
images: []
2016-09-17 04:26:02 +00:00
},
methods: {
open: () => {
mdeModalOpenState = true;
$('#modal-editor-image').slideDown();
vueImage.refreshFolders();
},
2016-09-17 04:26:02 +00:00
cancel: (ev) => {
mdeModalOpenState = false;
$('#modal-editor-image').slideUp();
},
2016-09-25 21:32:39 +00:00
insertImage: (ev) => {
if(mde.codemirror.doc.somethingSelected()) {
mde.codemirror.execCommand('singleSelection');
}
let selImage = _.find(vueImage.images, ['uid', vueImage.currentImage]);
selImage.normalizedPath = (selImage.folder === '') ? selImage.filename : selImage.folder + '/' + selImage.filename;
selImage.titleGuess = _.startCase(selImage.basename);
let imageText = '![' + selImage.titleGuess + '](/uploads/' + selImage.normalizedPath + ' "' + selImage.titleGuess + '")';
switch(vueImage.currentAlign) {
case 'center':
imageText += '{.align-center}';
break;
case 'right':
imageText += '{.align-right}';
break;
case 'logo':
imageText += '{.pagelogo}';
break;
}
mde.codemirror.doc.replaceSelection(imageText);
vueImage.cancel();
},
newFolder: (ev) => {
vueImage.newFolderShow = true;
},
newFolderDiscard: (ev) => {
vueImage.newFolderShow = false;
},
2016-09-25 21:32:39 +00:00
fetchFromUrl: (ev) => {
vueImage.fetchFromUrlShow = true;
},
fetchFromUrlDiscard: (ev) => {
vueImage.fetchFromUrlShow = false;
},
selectFolder: (fldName) => {
vueImage.currentFolder = fldName;
vueImage.loadImages();
},
refreshFolders: () => {
vueImage.isLoading = true;
vueImage.isLoadingText = 'Fetching folders list...';
vueImage.currentFolder = '';
2016-09-25 21:32:39 +00:00
vueImage.currentImage = '';
Vue.nextTick(() => {
socket.emit('uploadsGetFolders', { }, (data) => {
vueImage.folders = data;
vueImage.loadImages();
});
});
},
loadImages: () => {
vueImage.isLoading = true;
vueImage.isLoadingText = 'Fetching images...';
Vue.nextTick(() => {
socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
2016-09-25 21:32:39 +00:00
vueImage.images = data;
vueImage.isLoading = false;
});
});
2016-09-25 21:32:39 +00:00
},
selectImage: (imageId) => {
vueImage.currentImage = imageId;
},
selectAlignment: (align) => {
vueImage.currentAlign = align;
2016-09-17 04:26:02 +00:00
}
}
});