From 685faad62f3651de95bda46dfadb9e5febc80c06 Mon Sep 17 00:00:00 2001 From: Muah Date: Mon, 30 Sep 2019 10:50:16 +0200 Subject: [PATCH] v3.4.1 --- README.md | 215 ++++++++++-------- logs/v3.4.0.txt | 8 - logs/v3.4.1.txt | 8 + ...4_create_media_manager_lock_list_table.php | 2 +- .../js/components/globalSearch/panel.vue | 24 +- .../assets/js/components/imageEditor/main.vue | 6 +- .../js/components/lazyLoading/cache.vue | 4 +- .../js/components/lazyLoading/normal.vue | 5 +- .../assets/js/components/manager.vue | 25 +- src/resources/assets/js/modules/Upload.js | 47 +++- src/resources/assets/js/modules/computed.js | 5 + src/resources/assets/js/modules/filtration.js | 4 +- src/resources/assets/js/modules/image.js | 4 +- src/resources/assets/js/modules/scroll.js | 8 +- src/resources/assets/js/modules/selection.js | 4 +- src/resources/assets/js/modules/utils.js | 6 +- src/resources/assets/js/modules/watch.js | 8 +- src/resources/assets/sass/manager.scss | 43 ++-- src/resources/views/_manager.blade.php | 16 +- 19 files changed, 255 insertions(+), 187 deletions(-) delete mode 100644 logs/v3.4.0.txt create mode 100644 logs/v3.4.1.txt diff --git a/README.md b/README.md index 504fd56..6e3fa4d 100644 --- a/README.md +++ b/README.md @@ -202,106 +202,123 @@
## Config -**config/mediaManager.php** - -```php -return [ - /* - * ignore files pattern - */ - 'ignore_files' => '/^\..*/', - - /* - * filesystem disk - */ - 'storage_disk' => 'public', - - /* - * manager controller - */ - 'controller' => '\ctf0\MediaManager\Controllers\MediaController', - - /* - * remove any file special chars except - */ - 'allowed_fileNames_chars' => '.\_\-\'\s\(\)\,', - - /* - * remove any folder special chars except (_ -) - */ - 'allowed_folderNames_chars' => '\_\-', - - /* - * disallow uploading files with the following mimetypes - * https://www.iana.org/assignments/media-types/media-types.xhtml - */ - 'unallowed_mimes' => ['php', 'java'], - - /* - * extra mime-types - */ - 'extended_mimes' => [ - 'image' => [ - 'binary/octet-stream', - ], - 'archive' => [ - 'application/x-tar', - 'application/zip', +- **config/mediaManager.php** + + ```php + return [ + /* + * ignore files pattern + */ + 'ignore_files' => '/^\..*/', + + /* + * filesystem disk + */ + 'storage_disk' => 'public', + + /* + * manager controller + */ + 'controller' => '\ctf0\MediaManager\Controllers\MediaController', + + /* + * remove any file special chars except + */ + 'allowed_fileNames_chars' => '.\_\-\'\s\(\)\,', + + /* + * remove any folder special chars except (_ -) + */ + 'allowed_folderNames_chars' => '\_\-', + + /* + * disallow uploading files with the following mimetypes + * https://www.iana.org/assignments/media-types/media-types.xhtml + */ + 'unallowed_mimes' => ['php', 'java'], + + /* + * extra mime-types + */ + 'extended_mimes' => [ + 'image' => [ + 'binary/octet-stream', + ], + 'archive' => [ + 'application/x-tar', + 'application/zip', + ], ], - ], - - /* - * when file names gets cleand up - */ - 'sanitized_text' => 'uniqid', - - /* - * display file last modification time as - * http://carbon.nesbot.com/docs/#api-formatting - */ - 'last_modified_format' => 'toDateString', - - /** - * hide file extension in files list - */ - 'hide_files_ext' => true, - - /* - * load image preview only when item is clicked ? - */ - 'lazy_load_image_on_click' => false, - - /* - * automatically invalidate cache after "in Minutes" - */ - 'cache_expires_after' => 60, - - /* - * in-order to get the folder items count & size - * we need to recursively get all the files inside the folders - * which could make the request take longer - */ - 'get_folder_info' => true, - - /** - * do you want to enable broadcasting the changes - * made by one user to others ? - * - * "laravel-echo" must be installed - */ - 'enable_broadcasting' => false, - - /** - * show "an itunes like" content ratio bar - */ - 'show_ratio_bar' => true, - - /* - * preview and remove files b4 uploading - */ - 'preview_files_before_upload' => true, -]; -``` + + /* + * when file names gets cleand up + */ + 'sanitized_text' => 'uniqid', + + /* + * display file last modification time as + * http://carbon.nesbot.com/docs/#api-formatting + */ + 'last_modified_format' => 'toDateString', + + /** + * hide file extension in files list + */ + 'hide_files_ext' => true, + + /* + * load image preview only when item is clicked ? + */ + 'lazy_load_image_on_click' => false, + + /* + * automatically invalidate cache after "in Minutes" + */ + 'cache_expires_after' => 60, + + /* + * in-order to get the folder items count & size + * we need to recursively get all the files inside the folders + * which could make the request take longer + */ + 'get_folder_info' => true, + + /** + * do you want to enable broadcasting the changes + * made by one user to others ? + * + * "laravel-echo" must be installed + */ + 'enable_broadcasting' => false, + + /** + * show "an itunes like" content ratio bar + */ + 'show_ratio_bar' => true, + + /* + * preview and remove files b4 uploading + */ + 'preview_files_before_upload' => true, + ]; + ``` + +- **config/database.php** + + ```php + 'connections' => [ + // ... + + 'mediamanager' => [ + 'driver' => 'mysql', // or whatever you want + 'database' => env('DB_DATABASE'), // or database_path('MediaManager.sqlite') + 'host' => env('DB_HOST'), + 'port' => env('DB_PORT'), + 'username' => env('DB_USERNAME'), + 'password' => env('DB_PASSWORD'), + ] + ] + ```
diff --git a/logs/v3.4.0.txt b/logs/v3.4.0.txt deleted file mode 100644 index e6d90d0..0000000 --- a/logs/v3.4.0.txt +++ /dev/null @@ -1,8 +0,0 @@ -- move db file from logs to database -- remove db connection auto register for Lock Files & Folder, check: https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder -- add support for laravel 6.0 -- some cleanup to the js code -- add support to preview files before uploading (along with total uploads & size) -- remove deprecated laravel helper methods -- fix incorrect upload panel img paths -- update date-fns imports \ No newline at end of file diff --git a/logs/v3.4.1.txt b/logs/v3.4.1.txt new file mode 100644 index 0000000..c2ac156 --- /dev/null +++ b/logs/v3.4.1.txt @@ -0,0 +1,8 @@ +- some cleanup +- fix scroll by row after upload +- fix autoscroll to item not firing when the manager panel height changes +- fix mysql-db id issue +- fix missing vue prop for search panel +- check if name of the file being uploaded already exists & ignore it, this way we dont need to wait for the upload to finish just to get an error +- update uploadpreview for small screens +- fix img size in uploadpreview \ No newline at end of file diff --git a/src/database/migrations/2018_10_06_100234_create_media_manager_lock_list_table.php b/src/database/migrations/2018_10_06_100234_create_media_manager_lock_list_table.php index 30bdb47..27e1e70 100644 --- a/src/database/migrations/2018_10_06_100234_create_media_manager_lock_list_table.php +++ b/src/database/migrations/2018_10_06_100234_create_media_manager_lock_list_table.php @@ -12,7 +12,7 @@ class CreateMediaManagerLockListTable extends Migration public function up() { Schema::create('locked', function (Blueprint $table) { - $table->integer('id'); + $table->bigIncrements('id'); $table->string('path'); }); } diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue index c05561d..cbf2ead 100644 --- a/src/resources/assets/js/components/globalSearch/panel.vue +++ b/src/resources/assets/js/components/globalSearch/panel.vue @@ -5,27 +5,30 @@
-
-

{{ listCount }}

-

{{ trans('found') }}

+

+ {{ listCount }} +

+

+ {{ trans('found') }} +

-
  • -
    @@ -64,7 +67,9 @@
  • -

    {{ trans('nothing_found') }} !!

    +

    + {{ trans('nothing_found') }} !! +

    • @@ -95,7 +100,8 @@ export default { search: '', noData: false, linkCopied: false, - firstRun: false + firstRun: false, + showPanel: false } }, computed: { diff --git a/src/resources/assets/js/components/imageEditor/main.vue b/src/resources/assets/js/components/imageEditor/main.vue index f182488..ac2b294 100644 --- a/src/resources/assets/js/components/imageEditor/main.vue +++ b/src/resources/assets/js/components/imageEditor/main.vue @@ -428,10 +428,8 @@ export default { imageSmoothingQuality: 'high' }).toDataURL(type) - this.$nextTick(() => { - // reset the auto crop selection we made - this.clearSelection() - }) + // reset the auto crop selection we made + this.$nextTick(this.clearSelection) return url }, diff --git a/src/resources/assets/js/components/lazyLoading/cache.vue b/src/resources/assets/js/components/lazyLoading/cache.vue index 690a9f7..359fdc6 100644 --- a/src/resources/assets/js/components/lazyLoading/cache.vue +++ b/src/resources/assets/js/components/lazyLoading/cache.vue @@ -87,9 +87,7 @@ export default { watch: { src(val) { if (val) { - this.$nextTick(() => { - this.sendDimensionsToParent() - }) + this.$nextTick(this.sendDimensionsToParent) } } } diff --git a/src/resources/assets/js/components/lazyLoading/normal.vue b/src/resources/assets/js/components/lazyLoading/normal.vue index c282223..b23a1b2 100644 --- a/src/resources/assets/js/components/lazyLoading/normal.vue +++ b/src/resources/assets/js/components/lazyLoading/normal.vue @@ -41,10 +41,7 @@ export default { if (val) { this.fetchImg().then((img) => { this.src = img - - this.$nextTick(() => { - this.sendDimensionsToParent() - }) + this.$nextTick(this.sendDimensionsToParent) }) } } diff --git a/src/resources/assets/js/components/manager.vue b/src/resources/assets/js/components/manager.vue index f86a47a..55dbfab 100644 --- a/src/resources/assets/js/components/manager.vue +++ b/src/resources/assets/js/components/manager.vue @@ -119,6 +119,7 @@ export default { filterdList: [], folders: [], selectedUploadPreviewList: [], + selectedUploadPreviewExistList: [], selectedUploadPreview: { img: null, type: null, @@ -172,13 +173,11 @@ export default { }, updated: debounce(function() { if (this.firstRun) { - this.scrollByRow() + this.updateScrollByRow() if (this.selectedFileIs('video') || this.selectedFileIs('audio')) { this.destroyPlyr() - this.$nextTick(() => { - this.initPlyr() - }) + this.$nextTick(this.initPlyr) } if (!this.introIsOn) { @@ -186,8 +185,6 @@ export default { ? this.noScroll('add') : this.noScroll('remove') } - - this.firstRun = false } }, 250), beforeDestroy() { @@ -341,7 +338,7 @@ export default { } } } - /* end of no bulk selection */ + // end of no bulk selection // we have files if (this.allItemsCount) { @@ -386,7 +383,7 @@ export default { this.$refs.vis.click() } } - /* end of we have files */ + // end of we have files // toggle file details sidebar if (key == 't' && !this.smallScreen) { @@ -394,14 +391,15 @@ export default { this.saveUserPref() } } - /* end of search is not focused */ + // end of search is not focused // cancel search else if (key == 'esc') { this.resetInput('searchFor') } } - /* end of modal isnt visible */ + // end of modal isnt visible + // when modal is visible else { if (this.isActiveModal('preview_modal')) { @@ -414,13 +412,14 @@ export default { this.navigation(e) } + // hide modal if (key == 'esc' && !this.isActiveModal('imageEditor_modal')) { this.toggleModal() } } - /* end of modal is visible */ + // end of modal is visible - // when upload preview visible + // when upload preview is visible if (this.waitingForUpload) { // proceed with upload if (key == 'enter') { @@ -444,7 +443,7 @@ export default { } } }, - /* end of short cuts */ + // end of short cuts refresh() { EventHub.fire('clear-global-search') diff --git a/src/resources/assets/js/modules/Upload.js b/src/resources/assets/js/modules/Upload.js index 8e8cb41..41fbd59 100644 --- a/src/resources/assets/js/modules/Upload.js +++ b/src/resources/assets/js/modules/Upload.js @@ -1,3 +1,4 @@ +import debounce from 'lodash/debounce' import Dropzone from 'dropzone' export default { @@ -28,7 +29,8 @@ export default { // cancel pending upload EventHub.listen('clear-pending-upload', this.removeAllFiles(true)) - this.on('removedfile', (file) => { + // remove + this.on('removedfile', debounce((file) => { manager.selectedUploadPreviewList = this.files if (file.name == manager.selectedUploadPreview.name) { @@ -38,8 +40,9 @@ export default { if (!this.files.length) { manager.clearUploadPreview(previewContainer) } - }) + }, 100)) + // add this.on('addedfile', (file) => { let fileList = this.files @@ -57,8 +60,8 @@ export default { let el = file.previewElement + manager.addToPreExistenceList(file) manager.selectedUploadPreviewList = fileList - // toggle stuff manager.UploadArea = false manager.toolBar = false manager.infoSidebar = false @@ -83,6 +86,7 @@ export default { } }) + // upload preview this.on('thumbnail', (file, dataUrl) => { file.previewElement.classList.remove('is-hidden') }) @@ -92,6 +96,7 @@ export default { this.removeAllFiles() manager.clearUploadPreview(previewContainer) }) + // start the upload manager.$refs['process-dropzone'].addEventListener('click', () => { // because dz is dump @@ -104,7 +109,13 @@ export default { }) } } - : {} + : { + init: function () { + this.on('addedfile', (file) => { + manager.addToPreExistenceList(file) + }) + } + } let options = { url: manager.routes.upload, @@ -126,10 +137,14 @@ export default { return done(manager.trans('upload_in_progress')) } + if (manager.checkPreExistence(file)) { + return done(manager.trans('already_exists')) + } + allFiles++ done() }, - sending(file, xhr, formData) { + sending: function (file, xhr, formData) { uploadProgress += parseFloat(100 / allFiles) manager.progressCounter = `${Math.round(uploadProgress)}%` @@ -152,7 +167,7 @@ export default { } }) }, - errormultiple(file, res) { + errormultiple: function (file, res) { file = Array.isArray(file) ? file[0] : file manager.showNotif(`"${file.name}" ${res}`, 'danger') this.removeFile(file) @@ -184,20 +199,22 @@ export default { // upload panel new Dropzone('#new-upload', options) // drag & drop on empty area - new Dropzone('.__stack-container', Object.assign(options, { - clickable: false - })) + new Dropzone('.__stack-container', Object.assign(options, {clickable: false})) }, + clearUploadPreview(previewContainer) { previewContainer.classList.remove('show') this.$nextTick(() => { this.waitingForUpload = false this.toolBar = true + this.smallScreenHelper() this.selectedUploadPreviewList = [] + this.selectedUploadPreviewExistList = [] this.selectedUploadPreview = {} }) }, + // not used yet updateDropZoneFile(i, data) { Dropzone.instances.some((item) => { let files = item.files @@ -208,6 +225,18 @@ export default { }) }, + // already uploaded checks + addToPreExistenceList(file) { + this.filesNamesList.some((item) => { + if (item == file.name && this.selectedUploadPreviewExistList.indexOf(item) < 0) { + this.selectedUploadPreviewExistList.push(item) + } + }) + }, + checkPreExistence(file) { + return this.selectedUploadPreviewExistList.some((item) => item == file.name) + }, + // show large preview changeUploadPreviewFile(e) { e.stopPropagation() diff --git a/src/resources/assets/js/modules/computed.js b/src/resources/assets/js/modules/computed.js index f793a9b..26956f2 100644 --- a/src/resources/assets/js/modules/computed.js +++ b/src/resources/assets/js/modules/computed.js @@ -5,6 +5,11 @@ export default { filesList() { return this.$refs.filesList.children }, + filesNamesList() { + return this.files.items.map((item) => { + return item.name + }) + }, allFiles() { if (this.filteredItemsCount) { return this.filterdList diff --git a/src/resources/assets/js/modules/filtration.js b/src/resources/assets/js/modules/filtration.js index ae84292..d1eef25 100644 --- a/src/resources/assets/js/modules/filtration.js +++ b/src/resources/assets/js/modules/filtration.js @@ -89,9 +89,7 @@ export default { this.updateSearchCount() } - this.$nextTick(() => { - EventHub.fire('start-img-observing') - }) + this.$nextTick(EventHub.fire('start-img-observing')) }, // search diff --git a/src/resources/assets/js/modules/image.js b/src/resources/assets/js/modules/image.js index 15e07d6..34ee47e 100644 --- a/src/resources/assets/js/modules/image.js +++ b/src/resources/assets/js/modules/image.js @@ -21,9 +21,7 @@ export default { return this.config.lazyLoad }, lazyImageActivate(url) { - this.$nextTick(() => { - EventHub.fire('lazy-image-activate', url) - }) + this.$nextTick(EventHub.fire('lazy-image-activate', url)) }, lazySelectFirst() { if (this.fileTypeIs(this.allFiles[0], 'folder')) { diff --git a/src/resources/assets/js/modules/scroll.js b/src/resources/assets/js/modules/scroll.js index c783b10..7534180 100644 --- a/src/resources/assets/js/modules/scroll.js +++ b/src/resources/assets/js/modules/scroll.js @@ -32,7 +32,11 @@ export default { scrollToFile(file) { if (file) { file.click() - this.scrollToSelected(file) + + // make sure scrolling fires + setTimeout(() => { + this.scrollToSelected(file) + }, 500) } }, scrollToSelected(file) { @@ -52,7 +56,7 @@ export default { element: bc.$el }) }, - scrollByRow() { + updateScrollByRow() { const cont = this.$refs['__stack-files'] ? this.$refs['__stack-files'].$el : null if (cont) { diff --git a/src/resources/assets/js/modules/selection.js b/src/resources/assets/js/modules/selection.js index eaf399d..0bbd548 100644 --- a/src/resources/assets/js/modules/selection.js +++ b/src/resources/assets/js/modules/selection.js @@ -2,9 +2,7 @@ export default { methods: { /* Item */ selectFirst() { - this.$nextTick(() => { - this.scrollToFile(this.getElementByIndex(0)) - }) + this.$nextTick(this.scrollToFile(this.getElementByIndex(0))) }, isSelected(file) { return this.selectedFile == file diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js index 3c29ce1..df38815 100644 --- a/src/resources/assets/js/modules/utils.js +++ b/src/resources/assets/js/modules/utils.js @@ -215,11 +215,15 @@ export default { } }, 500) - this.toolBar = true + if (!this.waitingForUpload) { + this.toolBar = true + } this.smallScreen = false this.smallScreenHelper() } } + + this.updateScrollByRow() }, showNotif(msg, s = 'success', duration = 3) { let title diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js index 1e38e5e..8132aee 100644 --- a/src/resources/assets/js/modules/watch.js +++ b/src/resources/assets/js/modules/watch.js @@ -15,9 +15,7 @@ export default { } if (this.checkForFolders) { - this.$nextTick(() => { - this.updateMoveList() - }) + this.$nextTick(this.updateMoveList) } return this.updateLs({'selectedFileName': val.name}) @@ -108,9 +106,7 @@ export default { // because the files gets removed & readded to the dom // which will put the images back to its init state "no-preview" - this.$nextTick(() => { - EventHub.fire('start-search-observing') - }) + this.$nextTick(EventHub.fire('start-search-observing')) }, searchItemsCount(val) { if (this.allItemsCount == undefined || val == this.allItemsCount) { diff --git a/src/resources/assets/sass/manager.scss b/src/resources/assets/sass/manager.scss index afa6e86..27cfa59 100644 --- a/src/resources/assets/sass/manager.scss +++ b/src/resources/assets/sass/manager.scss @@ -185,7 +185,6 @@ .sidebar { display: flex; flex-wrap: wrap; - height: fit-content; } } @@ -193,15 +192,12 @@ align-items: center; display: flex; flex-direction: column; + height: 100%; justify-content: center; - padding: 1rem; + overflow-y: scroll; position: relative; width: 100%; - img { - height: 100%; - } - p { background: $black; bottom: 1rem; @@ -239,6 +235,31 @@ } } +@include media('max', 1087) { + #uploadPreview.show { + flex-direction: column; + + .sidebar-container { + border-bottom: 2px dashed darken($active_theme, 5%); + border-right: none; + height: unset; + max-width: unset; + min-height: fit-content; + overflow-x: auto; + + .sidebar { + flex-wrap: nowrap; + } + } + + .preview p { + bottom: unset; + left: 0; + top: 1rem; + } + } +} + .dz-success-mark, .dz-error-message, .dz-error-mark, @@ -247,10 +268,8 @@ } .dz-preview { - align-items: flex-end; display: flex; - flex-direction: column; - height: fit-content; + flex: 0 0 auto; padding: 1rem; position: relative; @@ -1078,8 +1097,6 @@ } /* Progress bar */ -@include media('max', 768) { - .progress-bar strong { - display: none; - } +.progress-bar strong { + display: none; } diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php index 4fae64a..1d9b73e 100644 --- a/src/resources/views/_manager.blade.php +++ b/src/resources/views/_manager.blade.php @@ -1,5 +1,6 @@ {{-- component --}} -

    @{{ selectedUploadPreview.name }}

    - + {{-- loadings --}} @@ -739,7 +741,6 @@ class="link image" :src="selectedFilePreview.picture" :alt="selectedFile.name" class="image"/> - @@ -903,7 +904,10 @@ class="__sidebar-info" {{-- zip --}} -
    + {{ csrf_field() }} @@ -968,7 +972,6 @@ class="__sidebar-swipe-hidden" @swiperight="toggleInfoSidebar(), saveUserPref()" @swipeleft="toggleInfoSidebar(), saveUserPref()"> - {{-- ====================================================================== --}} @@ -1310,7 +1313,8 @@ class="button is-warning" - +
    @include('MediaManager::partials.modal-files-info')