From 85c4e79726d1c2d8688c92b0457b5961264f9440 Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sun, 16 Oct 2016 23:24:19 -0400 Subject: [PATCH] Completed Image Editor --- assets/js/app.js | 2 +- client/js/components/editor-image.js | 254 ++++++++++++++++----------- controllers/ws.js | 24 +++ libs/uploads-agent.js | 14 +- libs/uploads.js | 73 ++++++++ views/modals/editor-image.pug | 17 ++ 6 files changed, 277 insertions(+), 107 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 3ac0d9da..6e63a683 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1 +1 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,o){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=o;else if(document.selection&&document.selection.createRange){e.select();var a=document.selection.createRange();a.collapse(!0),a.moveEnd("character",o),a.moveStart("character",t),a.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var o=0;o=3?(a.searchactive=!0,a.searchload++,o.emit("search",{terms:e},function(e){a.searchres=e.match,a.searchsuggest=e.suggest,a.searchmovearr=_.concat([],a.searchres,a.searchsuggest),a.searchload>0&&a.searchload--})):(a.searchactive=!1,a.searchres=[],a.searchsuggest=[],a.searchmovearr=[],a.searchload=0)},searchmoveidx:function(e,t){e>0?a.searchmovekey=a.searchmovearr[e-1]?"res."+a.searchmovearr[e-1]._id:"sug."+a.searchmovearr[e-1]:a.searchmovekey=""}},methods:{useSuggestion:function(e){a.searchq=e},closeSearch:function(){a.searchq=""},moveSelectSearch:function(){if(!(a.searchmoveidx<1)){var e=a.searchmoveidx-1;a.searchmovearr[e]?window.location.assign("/"+a.searchmovearr[e]._id):a.searchq=a.searchmovearr[e]}},moveDownSearch:function(){a.searchmoveidx0&&a.searchmoveidx--}}});e("main").on("click",a.closeSearch)}if(e("#page-type-view").length&&!function(){var o="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",a=o+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(a),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),o.length+1,a.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var o=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(o)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+o))}),""!==o&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(o,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(o),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,o.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(a){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===o||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,o,a){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,o,a){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var n;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=!1;Vue.filter("filesize",function(e){return _.toUpper(filesize(e))});var i=new Vue({el:"#modal-editor-image",data:{isLoading:!1,isLoadingText:"",newFolderName:"",newFolderShow:!1,newFolderError:!1,fetchFromUrlURL:"",fetchFromUrlShow:!1,folders:[],currentFolder:"",currentImage:"",currentAlign:"left",images:[],uploadSucceeded:!1,postUploadChecks:0,deleteImageShow:!1,deleteImageId:0,deleteImageFilename:""},methods:{open:function(){a=!0,e("#modal-editor-image").slideDown(),i.refreshFolders()},cancel:function(t){a=!1,e("#modal-editor-image").slideUp()},insertImage:function(e){n.codemirror.doc.somethingSelected()&&n.codemirror.execCommand("singleSelection");var t=_.find(i.images,["_id",i.currentImage]);t.normalizedPath="f:"===t.folder?t.filename:t.folder.slice(2)+"/"+t.filename,t.titleGuess=_.startCase(t.basename);var o="!["+t.titleGuess+"](/uploads/"+t.normalizedPath+' "'+t.titleGuess+'")';switch(i.currentAlign){case"center":o+="{.align-center}";break;case"right":o+="{.align-right}";break;case"logo":o+="{.pagelogo}"}n.codemirror.doc.replaceSelection(o),i.cancel()},newFolder:function(t){i.newFolderName="",i.newFolderError=!1,i.newFolderShow=!0,_.delay(function(){e("#txt-editor-newfoldername").focus()},400)},newFolderDiscard:function(e){i.newFolderShow=!1},newFolderCreate:function(e){var t=new RegExp("^[a-z0-9][a-z0-9-]*[a-z0-9]$");return i.newFolderName=_.kebabCase(_.trim(i.newFolderName)),_.isEmpty(i.newFolderName)||!t.test(i.newFolderName)?void(i.newFolderError=!0):(i.newFolderDiscard(),i.isLoadingText="Creating new folder...",i.isLoading=!0,void Vue.nextTick(function(){o.emit("uploadsCreateFolder",{foldername:i.newFolderName},function(e){i.folders=e,i.currentFolder=i.newFolderName,i.images=[],i.isLoading=!1})}))},fetchFromUrl:function(t){i.fetchFromUrlURL="",i.fetchFromUrlShow=!0,_.delay(function(){e("#txt-editor-fetchimgurl").focus()},400)},fetchFromUrlDiscard:function(e){i.fetchFromUrlShow=!1},fetchFromUrlGo:function(e){i.fetchFromUrlDiscard(),i.isLoadingText="Fetching image...",i.isLoading=!0,Vue.nextTick(function(){o.emit("uploadsFetchFileFromURL",{folder:i.currentFolder,fetchUrl:i.fetchFromUrlURL},function(e){e.ok?i.waitUploadComplete():(i.isLoading=!1,t.pushError("Upload error",e.msg))})})},selectFolder:function(e){i.currentFolder=e,i.loadImages()},refreshFolders:function(){i.isLoadingText="Fetching folders list...",i.isLoading=!0,i.currentFolder="",i.currentImage="",Vue.nextTick(function(){o.emit("uploadsGetFolders",{},function(e){i.folders=e,i.loadImages()})})},loadImages:function(e){e||(i.isLoadingText="Fetching images...",i.isLoading=!0),Vue.nextTick(function(){o.emit("uploadsGetImages",{folder:i.currentFolder},function(t){i.images=t,e||(i.isLoading=!1),i.attachContextMenus()})})},selectImage:function(e){i.currentImage=e},selectAlignment:function(e){i.currentAlign=e},attachContextMenus:function(){var t=_.map(i.folders,function(e){return{name:""!==e?e:"/ (root)",icon:"fa-folder"}});e.contextMenu("destroy",".editor-modal-imagechoices > figure"),e.contextMenu({selector:".editor-modal-imagechoices > figure",appendTo:".editor-modal-imagechoices",position:function(t,o,a){e(t.$trigger).addClass("is-contextopen");var n=e(t.$trigger).position(),i={w:e(t.$trigger).width()/2,h:e(t.$trigger).height()/2};t.$menu.css({top:n.top+i.h,left:n.left+i.w})},events:{hide:function(t){e(t.$trigger).removeClass("is-contextopen")}},items:{rename:{name:"Rename",icon:"fa-edit",callback:function(e,t){alert("Clicked on "+e)}},move:{name:"Move to...",icon:"fa-folder-open-o",items:t},delete:{name:"Delete",icon:"fa-trash",callback:function(t,o){i.deleteImageId=_.toString(e(o.$trigger).data("uid")),i.deleteImageWarn(!0)}}}})},deleteImageWarn:function(e){if(e){var t=_.find(i.images,["_id",i.deleteImageId]);t?i.deleteImageFilename=t.filename:i.deleteImageFilename="this image"}i.deleteImageShow=e},deleteImageGo:function(){i.deleteImageWarn(!1),i.isLoadingText="Deleting image...",i.isLoading=!0,Vue.nextTick(function(){o.emit("uploadsDeleteFile",{uid:i.deleteImageId},function(e){i.loadImages()})})},waitUploadComplete:function(){i.postUploadChecks++,i.isLoadingText="Processing...";var e=i.images.length;i.loadImages(!0),Vue.nextTick(function(){_.delay(function(){e!==i.images.length?(i.postUploadChecks=0,i.isLoading=!1):i.postUploadChecks>5?(i.postUploadChecks=0,i.isLoading=!1,t.pushError("Unable to fetch new listing","Try again later")):i.waitUploadComplete()},2e3)})}}});e("#btn-editor-uploadimage input").on("change",function(o){e(o.currentTarget).simpleUpload("/uploads/img",{name:"imgfile",data:{folder:i.currentFolder},limit:20,expect:"json",allowedExts:["jpg","jpeg","gif","png","webp"],allowedTypes:["image/png","image/jpeg","image/gif","image/webp"],maxFileSize:3145728,init:function(e){i.uploadSucceeded=!1,i.isLoadingText="Preparing to upload...",i.isLoading=!0},progress:function(e){i.isLoadingText="Uploading..."+Math.round(e)+"%"},success:function(e){if(e.ok){var o=_.filter(e.results,["ok",!1]);o.length?(_.forEach(o,function(e){t.pushError("Upload error",e.msg)}),o.length figure"),e.contextMenu({selector:".editor-modal-imagechoices > figure",appendTo:".editor-modal-imagechoices",position:function(t,o,a){e(t.$trigger).addClass("is-contextopen");var n=e(t.$trigger).position(),i={w:e(t.$trigger).width()/2,h:e(t.$trigger).height()/2};t.$menu.css({top:n.top+i.h,left:n.left+i.w})},events:{hide:function(t){e(t.$trigger).removeClass("is-contextopen")}},items:{rename:{name:"Rename",icon:"fa-edit",callback:function(e,t){alert("Clicked on "+e)}},move:{name:"Move to...",icon:"fa-folder-open-o",items:t},delete:{name:"Delete",icon:"fa-trash",callback:function(t,o){i.deleteImageId=_.toString(e(o.$trigger).data("uid")),i.deleteImageWarn(!0)}}}})},deleteImageWarn:function(e){if(e){var t=_.find(i.images,["_id",i.deleteImageId]);t?i.deleteImageFilename=t.filename:i.deleteImageFilename="this image"}i.deleteImageShow=e},deleteImageGo:function(){i.deleteImageWarn(!1),i.isLoadingText="Deleting image...",i.isLoading=!0,Vue.nextTick(function(){o.emit("uploadsDeleteFile",{uid:i.deleteImageId},function(e){i.loadImages()})})},waitUploadComplete:function(){i.postUploadChecks++,i.isLoadingText="Processing...";var e=i.images.length;i.loadImages(!0),Vue.nextTick(function(){_.delay(function(){e!==i.images.length?(i.postUploadChecks=0,i.isLoading=!1):i.postUploadChecks>5?(i.postUploadChecks=0,i.isLoading=!1,t.pushError("Unable to fetch new listing","Try again later")):i.waitUploadComplete()},2e3)})}}});e("#btn-editor-uploadimage input").on("change",function(o){e(o.currentTarget).simpleUpload("/uploads/img",{name:"imgfile",data:{folder:i.currentFolder},limit:20,expect:"json",allowedExts:["jpg","jpeg","gif","png","webp"],allowedTypes:["image/png","image/jpeg","image/gif","image/webp"],maxFileSize:3145728,init:function(e){i.uploadSucceeded=!1,i.isLoadingText="Preparing to upload...",i.isLoading=!0},progress:function(e){i.isLoadingText="Uploading..."+Math.round(e)+"%"},success:function(e){if(e.ok){var o=_.filter(e.results,["ok",!1]);o.length?(_.forEach(o,function(e){t.pushError("Upload error",e.msg)}),o.length=0&&a&&(a.class+=" exit",Vue.set(t.mdl.children,o,a),_.delay(function(){t.mdl.children.splice(o,1)},500))}}]),e}(); \ No newline at end of file +"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a=3?(o.searchactive=!0,o.searchload++,a.emit("search",{terms:e},function(e){o.searchres=e.match,o.searchsuggest=e.suggest,o.searchmovearr=_.concat([],o.searchres,o.searchsuggest),o.searchload>0&&o.searchload--})):(o.searchactive=!1,o.searchres=[],o.searchsuggest=[],o.searchmovearr=[],o.searchload=0)},searchmoveidx:function(e,t){e>0?o.searchmovekey=o.searchmovearr[e-1]?"res."+o.searchmovearr[e-1]._id:"sug."+o.searchmovearr[e-1]:o.searchmovekey=""}},methods:{useSuggestion:function(e){o.searchq=e},closeSearch:function(){o.searchq=""},moveSelectSearch:function(){if(!(o.searchmoveidx<1)){var e=o.searchmoveidx-1;o.searchmovearr[e]?window.location.assign("/"+o.searchmovearr[e]._id):o.searchq=o.searchmovearr[e]}},moveDownSearch:function(){o.searchmoveidx0&&o.searchmoveidx--}}});e("main").on("click",o.closeSearch)}if(e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var n;!function(){var o=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var o=!1;Vue.filter("filesize",function(e){return _.toUpper(filesize(e))});var i=new Vue({el:"#modal-editor-image",data:{isLoading:!1,isLoadingText:"",newFolderName:"",newFolderShow:!1,newFolderError:!1,fetchFromUrlURL:"",fetchFromUrlShow:!1,folders:[],currentFolder:"",currentImage:"",currentAlign:"left",images:[],uploadSucceeded:!1,postUploadChecks:0,renameImageShow:!1,renameImageId:"",renameImageFilename:"",deleteImageShow:!1,deleteImageId:"",deleteImageFilename:""},methods:{open:function(){o=!0,e("#modal-editor-image").slideDown(),i.refreshFolders()},cancel:function(t){o=!1,e("#modal-editor-image").slideUp()},selectImage:function(e){i.currentImage=e},selectAlignment:function(e){i.currentAlign=e},insertImage:function(e){n.codemirror.doc.somethingSelected()&&n.codemirror.execCommand("singleSelection");var t=_.find(i.images,["_id",i.currentImage]);t.normalizedPath="f:"===t.folder?t.filename:t.folder.slice(2)+"/"+t.filename,t.titleGuess=_.startCase(t.basename);var a="!["+t.titleGuess+"](/uploads/"+t.normalizedPath+' "'+t.titleGuess+'")';switch(i.currentAlign){case"center":a+="{.align-center}";break;case"right":a+="{.align-right}";break;case"logo":a+="{.pagelogo}"}n.codemirror.doc.replaceSelection(a),i.cancel()},newFolder:function(t){i.newFolderName="",i.newFolderError=!1,i.newFolderShow=!0,_.delay(function(){e("#txt-editor-newfoldername").focus()},400)},newFolderDiscard:function(e){i.newFolderShow=!1},newFolderCreate:function(e){var t=new RegExp("^[a-z0-9][a-z0-9-]*[a-z0-9]$");return i.newFolderName=_.kebabCase(_.trim(i.newFolderName)),_.isEmpty(i.newFolderName)||!t.test(i.newFolderName)?void(i.newFolderError=!0):(i.newFolderDiscard(),i.isLoadingText="Creating new folder...",i.isLoading=!0,void Vue.nextTick(function(){a.emit("uploadsCreateFolder",{foldername:i.newFolderName},function(e){i.folders=e,i.currentFolder=i.newFolderName,i.images=[],i.isLoading=!1})}))},fetchFromUrl:function(t){i.fetchFromUrlURL="",i.fetchFromUrlShow=!0,_.delay(function(){e("#txt-editor-fetchimgurl").focus()},400)},fetchFromUrlDiscard:function(e){i.fetchFromUrlShow=!1},fetchFromUrlGo:function(e){i.fetchFromUrlDiscard(),i.isLoadingText="Fetching image...",i.isLoading=!0,Vue.nextTick(function(){a.emit("uploadsFetchFileFromURL",{folder:i.currentFolder,fetchUrl:i.fetchFromUrlURL},function(e){e.ok?i.waitChangeComplete(i.images.length,!0):(i.isLoading=!1,t.pushError("Upload error",e.msg))})})},renameImage:function(){var t=_.find(i.images,["_id",i.renameImageId]);i.renameImageFilename=t.basename||"",i.renameImageShow=!0,_.delay(function(){e("#txt-editor-renameimage").focus(),_.defer(function(){e("#txt-editor-renameimage").select()})},400)},renameImageDiscard:function(){i.renameImageShow=!1},renameImageGo:function(){i.renameImageDiscard(),i.isLoadingText="Renaming image...",i.isLoading=!0,Vue.nextTick(function(){a.emit("uploadsRenameFile",{uid:i.renameImageId,folder:i.currentFolder,filename:i.renameImageFilename},function(e){e.ok?i.waitChangeComplete(i.images.length,!1):(i.isLoading=!1,t.pushError("Rename error",e.msg))})})},moveImage:function(e,o){i.isLoadingText="Moving image...",i.isLoading=!0,Vue.nextTick(function(){a.emit("uploadsMoveFile",{uid:e,folder:o},function(e){e.ok?i.loadImages():(i.isLoading=!1,t.pushError("Rename error",e.msg))})})},deleteImageWarn:function(e){if(e){var t=_.find(i.images,["_id",i.deleteImageId]);i.deleteImageFilename=t.filename||"this image"}i.deleteImageShow=e},deleteImageGo:function(){i.deleteImageWarn(!1),i.isLoadingText="Deleting image...",i.isLoading=!0,Vue.nextTick(function(){a.emit("uploadsDeleteFile",{uid:i.deleteImageId},function(e){i.loadImages()})})},selectFolder:function(e){i.currentFolder=e,i.loadImages()},refreshFolders:function(){i.isLoadingText="Fetching folders list...",i.isLoading=!0,i.currentFolder="",i.currentImage="",Vue.nextTick(function(){a.emit("uploadsGetFolders",{},function(e){i.folders=e,i.loadImages()})})},loadImages:function(e){return e||(i.isLoadingText="Fetching images...",i.isLoading=!0),new Promise(function(t,o){Vue.nextTick(function(){a.emit("uploadsGetImages",{folder:i.currentFolder},function(a){i.images=a,e||(i.isLoading=!1),i.attachContextMenus(),t(!0)})})})},waitChangeComplete:function(e,a){a=!_.isBoolean(a)||a,i.postUploadChecks++,i.isLoadingText="Processing...",Vue.nextTick(function(){i.loadImages(!0).then(function(){i.images.length!==e===a?(i.postUploadChecks=0,i.isLoading=!1):i.postUploadChecks>5?(i.postUploadChecks=0,i.isLoading=!1,t.pushError("Unable to fetch updated listing","Try again later")):_.delay(function(){i.waitChangeComplete(e,a)},1500)})})},attachContextMenus:function(){var t=_.map(i.folders,function(t){return{name:""!==t?t:"/ (root)",icon:"fa-folder",callback:function(t,a){var o=_.toString(e(a.$trigger).data("uid")),n=_.nth(i.folders,t);i.moveImage(o,n)}}});e.contextMenu("destroy",".editor-modal-imagechoices > figure"),e.contextMenu({selector:".editor-modal-imagechoices > figure",appendTo:".editor-modal-imagechoices",position:function(t,a,o){e(t.$trigger).addClass("is-contextopen");var n=e(t.$trigger).position(),i={w:e(t.$trigger).width()/2,h:e(t.$trigger).height()/2};t.$menu.css({top:n.top+i.h,left:n.left+i.w})},events:{hide:function(t){e(t.$trigger).removeClass("is-contextopen")}},items:{rename:{name:"Rename",icon:"fa-edit",callback:function(e,t){i.renameImageId=_.toString(t.$trigger[0].dataset.uid),i.renameImage()}},move:{name:"Move to...",icon:"fa-folder-open-o",items:t},delete:{name:"Delete",icon:"fa-trash",callback:function(e,t){i.deleteImageId=_.toString(t.$trigger[0].dataset.uid),i.deleteImageWarn(!0)}}}})}}});e("#btn-editor-uploadimage input").on("change",function(a){var o=i.images.length;e(a.currentTarget).simpleUpload("/uploads/img",{name:"imgfile",data:{folder:i.currentFolder},limit:20,expect:"json",allowedExts:["jpg","jpeg","gif","png","webp"],allowedTypes:["image/png","image/jpeg","image/gif","image/webp"],maxFileSize:3145728,init:function(e){i.uploadSucceeded=!1,i.isLoadingText="Preparing to upload...",i.isLoading=!0},progress:function(e){i.isLoadingText="Uploading..."+Math.round(e)+"%"},success:function(e){if(e.ok){var a=_.filter(e.results,["ok",!1]);a.length?(_.forEach(a,function(e){t.pushError("Upload error",e.msg)}),a.length5?(i.postUploadChecks=0,i.isLoading=!1,t.pushError("Unable to fetch updated listing","Try again later")):_.delay(function(){i.waitChangeComplete(e,a)},1500)})})},attachContextMenus:function(){var t=_.map(i.folders,function(t){return{name:""!==t?t:"/ (root)",icon:"fa-folder",callback:function(t,a){var o=_.toString(e(a.$trigger).data("uid")),n=_.nth(i.folders,t);i.moveImage(o,n)}}});e.contextMenu("destroy",".editor-modal-imagechoices > figure"),e.contextMenu({selector:".editor-modal-imagechoices > figure",appendTo:".editor-modal-imagechoices",position:function(t,a,o){e(t.$trigger).addClass("is-contextopen");var n=e(t.$trigger).position(),i={w:e(t.$trigger).width()/2,h:e(t.$trigger).height()/2};t.$menu.css({top:n.top+i.h,left:n.left+i.w})},events:{hide:function(t){e(t.$trigger).removeClass("is-contextopen")}},items:{rename:{name:"Rename",icon:"fa-edit",callback:function(e,t){i.renameImageId=_.toString(t.$trigger[0].dataset.uid),i.renameImage()}},move:{name:"Move to...",icon:"fa-folder-open-o",items:t},delete:{name:"Delete",icon:"fa-trash",callback:function(e,t){i.deleteImageId=_.toString(t.$trigger[0].dataset.uid),i.deleteImageWarn(!0)}}}})}}});e("#btn-editor-uploadimage input").on("change",function(a){var o=i.images.length;e(a.currentTarget).simpleUpload("/uploads/img",{name:"imgfile",data:{folder:i.currentFolder},limit:20,expect:"json",allowedExts:["jpg","jpeg","gif","png","webp"],allowedTypes:["image/png","image/jpeg","image/gif","image/webp"],maxFileSize:3145728,init:function(e){i.uploadSucceeded=!1,i.isLoadingText="Preparing to upload...",i.isLoading=!0},progress:function(e){i.isLoadingText="Uploading..."+Math.round(e)+"%"},success:function(e){if(e.ok){var a=_.filter(e.results,["ok",!1]);a.length?(_.forEach(a,function(e){t.pushError("Upload error",e.msg)}),a.length=0&&o&&(o.class+=" exit",Vue.set(t.mdl.children,a,o),_.delay(function(){t.mdl.children.splice(a,1)},500))}}]),e}(); \ No newline at end of file diff --git a/client/js/components/editor-image.js b/client/js/components/editor-image.js index a774f793..74993f52 100644 --- a/client/js/components/editor-image.js +++ b/client/js/components/editor-image.js @@ -16,11 +16,15 @@ let vueImage = new Vue({ images: [], uploadSucceeded: false, postUploadChecks: 0, + renameImageShow: false, + renameImageId: '', + renameImageFilename: '', deleteImageShow: false, - deleteImageId: 0, + deleteImageId: '', deleteImageFilename: '' }, methods: { + open: () => { mdeModalOpenState = true; $('#modal-editor-image').slideDown(); @@ -30,6 +34,17 @@ let vueImage = new Vue({ mdeModalOpenState = false; $('#modal-editor-image').slideUp(); }, + + // ------------------------------------------- + // INSERT IMAGE + // ------------------------------------------- + + selectImage: (imageId) => { + vueImage.currentImage = imageId; + }, + selectAlignment: (align) => { + vueImage.currentAlign = align; + }, insertImage: (ev) => { if(mde.codemirror.doc.somethingSelected()) { @@ -57,6 +72,11 @@ let vueImage = new Vue({ vueImage.cancel(); }, + + // ------------------------------------------- + // NEW FOLDER + // ------------------------------------------- + newFolder: (ev) => { vueImage.newFolderName = ''; vueImage.newFolderError = false; @@ -90,6 +110,11 @@ let vueImage = new Vue({ }); }, + + // ------------------------------------------- + // FETCH FROM URL + // ------------------------------------------- + fetchFromUrl: (ev) => { vueImage.fetchFromUrlURL = ''; vueImage.fetchFromUrlShow = true; @@ -107,7 +132,7 @@ let vueImage = new Vue({ Vue.nextTick(() => { socket.emit('uploadsFetchFileFromURL', { folder: vueImage.currentFolder, fetchUrl: vueImage.fetchFromUrlURL }, (data) => { if(data.ok) { - vueImage.waitUploadComplete(); + vueImage.waitChangeComplete(vueImage.images.length, true); } else { vueImage.isLoading = false; alerts.pushError('Upload error', data.msg); @@ -117,22 +142,92 @@ let vueImage = new Vue({ }, - /** - * Select a folder - * - * @param {string} fldName The folder name - * @return {Void} Void - */ + // ------------------------------------------- + // RENAME IMAGE + // ------------------------------------------- + + renameImage: () => { + + let c = _.find(vueImage.images, ['_id', vueImage.renameImageId ]); + vueImage.renameImageFilename = c.basename || ''; + vueImage.renameImageShow = true; + _.delay(() => { + $('#txt-editor-renameimage').focus(); + _.defer(() => { $('#txt-editor-renameimage').select(); }); + }, 400); + }, + renameImageDiscard: () => { + vueImage.renameImageShow = false; + }, + renameImageGo: () => { + + vueImage.renameImageDiscard(); + vueImage.isLoadingText = 'Renaming image...'; + vueImage.isLoading = true; + + Vue.nextTick(() => { + socket.emit('uploadsRenameFile', { uid: vueImage.renameImageId, folder: vueImage.currentFolder, filename: vueImage.renameImageFilename }, (data) => { + if(data.ok) { + vueImage.waitChangeComplete(vueImage.images.length, false); + } else { + vueImage.isLoading = false; + alerts.pushError('Rename error', data.msg); + } + }); + }); + + }, + + // ------------------------------------------- + // MOVE IMAGE + // ------------------------------------------- + + moveImage: (uid, fld) => { + vueImage.isLoadingText = 'Moving image...'; + vueImage.isLoading = true; + Vue.nextTick(() => { + socket.emit('uploadsMoveFile', { uid: uid, folder: fld }, (data) => { + if(data.ok) { + vueImage.loadImages(); + } else { + vueImage.isLoading = false; + alerts.pushError('Rename error', data.msg); + } + }); + }); + }, + + // ------------------------------------------- + // DELETE IMAGE + // ------------------------------------------- + + deleteImageWarn: (show) => { + if(show) { + let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]); + vueImage.deleteImageFilename = c.filename || 'this image'; + } + vueImage.deleteImageShow = show; + }, + deleteImageGo: () => { + vueImage.deleteImageWarn(false); + vueImage.isLoadingText = 'Deleting image...'; + vueImage.isLoading = true; + Vue.nextTick(() => { + socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => { + vueImage.loadImages(); + }); + }); + }, + + // ------------------------------------------- + // LOAD FROM REMOTE + // ------------------------------------------- + selectFolder: (fldName) => { vueImage.currentFolder = fldName; vueImage.loadImages(); }, - /** - * Refresh folder list and load images from root - * - * @return {Void} Void - */ refreshFolders: () => { vueImage.isLoadingText = 'Fetching folders list...'; vueImage.isLoading = true; @@ -146,58 +241,66 @@ let vueImage = new Vue({ }); }, - /** - * Loads images in selected folder - * - * @return {Void} Void - */ loadImages: (silent) => { if(!silent) { vueImage.isLoadingText = 'Fetching images...'; vueImage.isLoading = true; } + return new Promise((resolve, reject) => { + Vue.nextTick(() => { + socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => { + vueImage.images = data; + if(!silent) { + vueImage.isLoading = false; + } + vueImage.attachContextMenus(); + resolve(true); + }); + }); + }); + }, + + waitChangeComplete: (oldAmount, expectChange) => { + + expectChange = (_.isBoolean(expectChange)) ? expectChange : true; + + vueImage.postUploadChecks++; + vueImage.isLoadingText = 'Processing...'; + Vue.nextTick(() => { - socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => { - vueImage.images = data; - if(!silent) { + vueImage.loadImages(true).then(() => { + if((vueImage.images.length !== oldAmount) === expectChange) { + vueImage.postUploadChecks = 0; + vueImage.isLoading = false; + } else if(vueImage.postUploadChecks > 5) { + vueImage.postUploadChecks = 0; vueImage.isLoading = false; + alerts.pushError('Unable to fetch updated listing', 'Try again later'); + } else { + _.delay(() => { + vueImage.waitChangeComplete(oldAmount, expectChange); + }, 1500); } - vueImage.attachContextMenus(); }); }); - }, - /** - * Select an image - * - * @param {String} imageId The image identifier - * @return {Void} Void - */ - selectImage: (imageId) => { - vueImage.currentImage = imageId; - }, - - /** - * Set image alignment - * - * @param {String} align The alignment - * @return {Void} Void - */ - selectAlignment: (align) => { - vueImage.currentAlign = align; }, - /** - * Attach right-click context menus to images and folders - * - * @return {Void} Void - */ + // ------------------------------------------- + // IMAGE CONTEXT MENU + // ------------------------------------------- + attachContextMenus: () => { let moveFolders = _.map(vueImage.folders, (f) => { return { name: (f !== '') ? f : '/ (root)', - icon: 'fa-folder' + icon: 'fa-folder', + callback: (key, opt) => { + let moveImageId = _.toString($(opt.$trigger).data('uid')); + let moveImageDestFolder = _.nth(vueImage.folders, key); + vueImage.moveImage(moveImageId, moveImageDestFolder); + } }; }); @@ -221,7 +324,8 @@ let vueImage = new Vue({ name: "Rename", icon: "fa-edit", callback: (key, opt) => { - alert("Clicked on " + key); + vueImage.renameImageId = _.toString(opt.$trigger[0].dataset.uid); + vueImage.renameImage(); } }, move: { @@ -233,60 +337,12 @@ let vueImage = new Vue({ name: "Delete", icon: "fa-trash", callback: (key, opt) => { - vueImage.deleteImageId = _.toString($(opt.$trigger).data('uid')); + vueImage.deleteImageId = _.toString(opt.$trigger[0].dataset.uid); vueImage.deleteImageWarn(true); } } } }); - }, - - deleteImageWarn: (show) => { - if(show) { - let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]); - if(c) { - vueImage.deleteImageFilename = c.filename; - } else { - vueImage.deleteImageFilename = 'this image'; - } - } - vueImage.deleteImageShow = show; - }, - - deleteImageGo: () => { - vueImage.deleteImageWarn(false); - vueImage.isLoadingText = 'Deleting image...'; - vueImage.isLoading = true; - Vue.nextTick(() => { - socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => { - vueImage.loadImages(); - }); - }); - }, - - waitUploadComplete: () => { - - vueImage.postUploadChecks++; - vueImage.isLoadingText = 'Processing...'; - - let currentUplAmount = vueImage.images.length; - vueImage.loadImages(true); - - Vue.nextTick(() => { - _.delay(() => { - if(currentUplAmount !== vueImage.images.length) { - vueImage.postUploadChecks = 0; - vueImage.isLoading = false; - } else if(vueImage.postUploadChecks > 5) { - vueImage.postUploadChecks = 0; - vueImage.isLoading = false; - alerts.pushError('Unable to fetch new listing', 'Try again later'); - } else { - vueImage.waitUploadComplete(); - } - }, 2000); - }); - } } @@ -294,6 +350,8 @@ let vueImage = new Vue({ $('#btn-editor-uploadimage input').on('change', (ev) => { + let curImageAmount = vueImage.images.length; + $(ev.currentTarget).simpleUpload("/uploads/img", { name: 'imgfile', @@ -346,7 +404,7 @@ $('#btn-editor-uploadimage input').on('change', (ev) => { finish: () => { if(vueImage.uploadSucceeded) { - vueImage.waitUploadComplete(); + vueImage.waitChangeComplete(curImageAmount, true); } else { vueImage.isLoading = false; } diff --git a/controllers/ws.js b/controllers/ws.js index ebb20698..f64a68bb 100644 --- a/controllers/ws.js +++ b/controllers/ws.js @@ -57,4 +57,28 @@ module.exports = (socket) => { }); }); + socket.on('uploadsRenameFile', (data, cb) => { + cb = cb || _.noop; + upl.moveUploadsFile(data.uid, data.folder, data.filename).then((f) => { + return cb({ ok: true }) || true; + }).catch((err) => { + return cb({ + ok: false, + msg: err.message + }) || true; + }); + }); + + socket.on('uploadsMoveFile', (data, cb) => { + cb = cb || _.noop; + upl.moveUploadsFile(data.uid, data.folder).then((f) => { + return cb({ ok: true }) || true; + }).catch((err) => { + return cb({ + ok: false, + msg: err.message + }) || true; + }); + }); + }; \ No newline at end of file diff --git a/libs/uploads-agent.js b/libs/uploads-agent.js index 7858d1d3..343b9570 100644 --- a/libs/uploads-agent.js +++ b/libs/uploads-agent.js @@ -66,7 +66,7 @@ module.exports = { let pInfo = self.parseUploadsRelPath(p); return self.processFile(pInfo.folder, pInfo.filename).then((mData) => { - return db.UplFile.create(mData); + return db.UplFile.findByIdAndUpdate(mData._id, mData, { upsert: true }); }).then(() => { return git.commitUploads('Uploaded ' + p); }); @@ -78,12 +78,7 @@ module.exports = { self._watcher.on('unlink', (p) => { let pInfo = self.parseUploadsRelPath(p); - return db.UplFile.findOneAndRemove({ - folder: 'f:' + pInfo.folder, - filename: pInfo.filename - }).then(() => { - return git.commitUploads('Deleted ' + p); - }); + return git.commitUploads('Deleted/Renamed ' + p); }); @@ -113,7 +108,10 @@ module.exports = { return db.UplFolder.remove({}).then(() => { return db.UplFolder.insertMany(_.map(folderNames, (f) => { - return { name: f }; + return { + _id: 'f:' + f, + name: f + }; })); }).then(() => { diff --git a/libs/uploads.js b/libs/uploads.js index 6800c12a..6b6686ba 100644 --- a/libs/uploads.js +++ b/libs/uploads.js @@ -6,6 +6,7 @@ const path = require('path'), multer = require('multer'), request = require('request'), url = require('url'), + farmhash = require('farmhash'), _ = require('lodash'); var regFolderName = new RegExp("^[a-z0-9][a-z0-9\-]*[a-z0-9]$"); @@ -231,6 +232,78 @@ module.exports = { }); + }, + + /** + * Move/Rename a file + * + * @param {String} uid The file ID + * @param {String} fld The destination folder + * @param {String} nFilename The new filename (optional) + * @return {Promise} Promise of the operation + */ + moveUploadsFile(uid, fld, nFilename) { + + let self = this; + + return db.UplFolder.findById('f:' + fld).then((folder) => { + if(folder) { + return db.UplFile.findById(uid).then((originFile) => { + + //-> Check if rename is valid + + let nameCheck = null; + if(nFilename) { + let originFileObj = path.parse(originFile.filename); + nameCheck = lcdata.validateUploadsFilename(nFilename + originFileObj.ext, folder.name); + } else { + nameCheck = Promise.resolve(originFile.filename); + } + + return nameCheck.then((destFilename) => { + + let originFolder = (originFile.folder && originFile.folder !== 'f:') ? originFile.folder.slice(2) : './'; + let sourceFilePath = path.resolve(self._uploadsPath, originFolder, originFile.filename); + let destFilePath = path.resolve(self._uploadsPath, folder.name, destFilename); + let preMoveOps = []; + + //-> Check for invalid operations + + if(sourceFilePath === destFilePath) { + return Promise.reject(new Error('Invalid Operation!')); + } + + //-> Delete DB entry + + preMoveOps.push(db.UplFile.findByIdAndRemove(uid)); + + //-> Move thumbnail ahead to avoid re-generation + + if(originFile.category === 'image') { + let fUid = farmhash.fingerprint32(folder.name + '/' + destFilename); + let sourceThumbPath = path.resolve(self._uploadsThumbsPath, originFile._id + '.png'); + let destThumbPath = path.resolve(self._uploadsThumbsPath, fUid + '.png'); + preMoveOps.push(fs.moveAsync(sourceThumbPath, destThumbPath)); + } else { + preMoveOps.push(Promise.resolve(true)); + } + + //-> Proceed to move actual file + + return Promise.all(preMoveOps).then(() => { + return fs.moveAsync(sourceFilePath, destFilePath, { + clobber: false + }); + }); + + }) + + }); + } else { + return Promise.reject(new Error('Invalid Destination Folder')); + } + }); + } }; \ No newline at end of file diff --git a/views/modals/editor-image.pug b/views/modals/editor-image.pug index e183f36b..7dcae08e 100644 --- a/views/modals/editor-image.pug +++ b/views/modals/editor-image.pug @@ -98,6 +98,23 @@ a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch + .modal(v-bind:class="{ 'is-active': renameImageShow }") + .modal-background + .modal-container + .modal-content + .card.is-fullwidth + header.card-header + p.card-header-title Rename Image + .card-content + .content + label.label Enter the new filename (without the extension) of the image: + p.control + input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename') + span.help.is-danger.is-hidden This filename is invalid! + footer.card-footer + a.card-footer-item(v-on:click="renameImageDiscard") Discard + a.card-footer-item(v-on:click="renameImageGo") Rename + .modal(v-bind:class="{ 'is-active': deleteImageShow }") .modal-background .modal-container