v3.5.0

- remove browser caching to give chance to new features - data are now being paginated and loaded on scroll, check #104 - fix lots of weird styling - config, rdme, wiki are updated
ctf0 · Nov 9, 2019 · fd3cab2 · fd3cab2
1 parent 8c9e1c1
commit fd3cab2
Show file tree

Hide file tree

Showing 25 changed files with 219 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@
 - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)
 
     ```bash
-    yarn add vue vue-ls vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js
+    yarn add vue vue-ls vue-infinite-loading vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js
     ```
 
 - add this one liner to your main js file and run `npm run watch` to compile your `js/css` files.
@@ -98,7 +98,7 @@
         * parentheses ()
         * comma ,
         */
-        'allowed_fileNames_chars' => '\._-\'\s\(\),',
+        'allowed_fileNames_chars' => '\._\-\'\s\(\),',
 
         /*
         * remove any folder special chars except
@@ -185,6 +185,11 @@
         * Locked items table name (defaults to "locked")
         */
         'table_locked' => 'locked',
+
+        /*
+        * loaded chunk amount "pagination"
+        */
+        'pagination_amount' => 50,
     ];
 
     ```

diff --git a/logs/v3.4.3.txt b/logs/v3.4.3.txt
diff --git a/logs/v3.5.0.txt b/logs/v3.5.0.txt
@@ -0,0 +1,4 @@
+- remove browser caching to give chance to new features
+- data are now being paginated and loaded on scroll, check https://github.com/ctf0/Laravel-Media-Manager/issues/104
+- fix lots of weird styling
+- config, rdme, wiki are updated
diff --git a/src/Controllers/MediaController.php b/src/Controllers/MediaController.php
@@ -53,11 +53,13 @@ public function __construct()
         $this->unallowedMimes = $config['unallowed_mimes'];
         $this->LMF            = $config['last_modified_format'];
         $this->GFI            = $config['get_folder_info'] ?? true;
+        $this->pag_amount     = $config['pagination_amount'] ?? 50;
 
         $this->storageDisk     = app('filesystem')->disk($this->fileSystem);
         $this->storageDiskInfo = app('config')->get("filesystems.disks.{$this->fileSystem}");
         $this->baseUrl         = $this->storageDisk->url('/');
-        $this->db              = app('db')->connection($config['database_connection'] ?? 'mediamanager')->table($config['table_locked'] ?? 'locked');
+        $this->db              = app('db')->connection($config['database_connection'] ?? 'mediamanager')
+                                            ->table($config['table_locked'] ?? 'locked');
 
         $this->storageDisk->addPlugin(new ListWith());
     }
@@ -74,16 +76,17 @@ public function index()
 
     public function globalSearch()
     {
-        return collect($this->getFolderContent('/', true))->reject(function ($item) { // remove unwanted
-            return preg_grep($this->ignoreFiles, [$item['path']]) || $item['type'] == 'dir';
-        })->map(function ($file) {
-            return $file = [
-                'name'                   => $file['basename'],
-                'type'                   => $file['mimetype'],
-                'path'                   => $this->resolveUrl($file['path']),
-                'dir'                    => $file['dirname'] != '' ? $file['dirname'] : '/',
-                'last_modified_formated' => $this->getItemTime($file['timestamp']),
-            ];
-        })->values()->all();
+        return collect($this->getFolderContent('/', true))
+                ->reject(function ($item) { // remove unwanted
+                    return preg_grep($this->ignoreFiles, [$item['path']]) || $item['type'] == 'dir';
+                })->map(function ($file) {
+                    return $file = [
+                        'name'                   => $file['basename'],
+                        'type'                   => $file['mimetype'],
+                        'path'                   => $this->resolveUrl($file['path']),
+                        'dir'                    => $file['dirname'] != '' ? $file['dirname'] : '/',
+                        'last_modified_formated' => $this->getItemTime($file['timestamp']),
+                    ];
+                })->values()->all();
     }
 }
diff --git a/src/Controllers/Modules/GetContent.php b/src/Controllers/Modules/GetContent.php
@@ -3,9 +3,37 @@
 namespace ctf0\MediaManager\Controllers\Moduels;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Collection;
+use Illuminate\Pagination\Paginator;
+use Illuminate\Pagination\LengthAwarePaginator;
 
 trait GetContent
 {
+    /**
+     * helper to paginate array.
+     *
+     * @param [type] $items
+     * @param int    $perPage
+     * @param [type] $page
+     */
+    public function paginate($items, $perPage = 10, $page = null)
+    {
+        $pageName = 'page';
+        $page     = $page ?: (Paginator::resolveCurrentPage($pageName) ?: 1);
+        $items    = $items instanceof Collection ? $items : Collection::make($items);
+
+        return new LengthAwarePaginator(
+            $items->forPage($page, $perPage)->values(),
+            $items->count(),
+            $perPage,
+            $page,
+            [
+                'path'     => Paginator::resolveCurrentPath(),
+                'pageName' => $pageName,
+            ]
+        );
+    }
+
     /**
      * get files in path.
      *
@@ -28,7 +56,7 @@ public function getFiles(Request $request)
             'dirs'   => $this->getDirectoriesList($request->dirs),
             'files'  => [
                 'path'  => $folder,
-                'items' => $this->getData($folder),
+                'items' => $this->paginate($this->getData($folder), $this->pag_amount),
             ],
         ]);
     }

diff --git a/src/config/mediaManager.php b/src/config/mediaManager.php
@@ -26,7 +26,7 @@
      * parentheses ()
      * comma ,
      */
-    'allowed_fileNames_chars' => '\._-\'\s\(\),',
+    'allowed_fileNames_chars' => '\._\-\'\s\(\),',
 
     /*
      * remove any folder special chars except
@@ -113,4 +113,9 @@
      * Locked items table name (defaults to "locked")
      */
     'table_locked' => 'locked',
+
+    /*
+     * loaded chunk amount "pagination"
+     */
+    'pagination_amount' => 50,
 ];
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -31,7 +31,7 @@
 
             <transition-group name="mm-gs"
                               tag="ul"
-                              class="columns is-multiline">
+                              class="columns is-multiline m-0">
                 <li v-for="(item, i) in filterdList"
                     :key="`${i}-${item.name}`"
                     v-list-rendered="[i, filterdList, orch]"
@@ -206,9 +206,7 @@ export default {
             this.showPanelWatcher(val)
 
             if (val) {
-                this.$nextTick(() => {
-                    this.$refs.search.focus()
-                })
+                this.$nextTick(() => this.$refs.search.focus())
             } else {
                 this.$nextTick(() => {
                     this.noData = false
@@ -220,9 +218,7 @@ export default {
             this.getList()
 
             if (!this.firstRun) {
-                this.$nextTick(() => {
-                    this.firstRun = true
-                })
+                this.$nextTick(() => this.firstRun = true)
             }
         },
         firstRun(val) {

diff --git a/src/resources/assets/js/components/imageEditor/filters/controls.vue b/src/resources/assets/js/components/imageEditor/filters/controls.vue
@@ -1,25 +1,31 @@
 <template>
-    <div v-tippy="{arrow: true, theme: 'mm'}" :title="filterName">
+    <div v-tippy="{arrow: true, theme: 'mm'}"
+         :title="filterName">
         <section v-if="!isControlable">
             <button v-tippy="{html: '#contentpopup2', interactive: true, trigger: 'click', theme: 'mm'}"
                     :class="{'is-active': isUsed()}"
                     :disabled="processing"
                     class="btn-plain">
-                <span class="icon"><icon :name="processing ? 'spinner' : icon" :pulse="processing"/></span>
+                <span class="icon"><icon :name="processing ? 'spinner' : icon"
+                                         :pulse="processing"/></span>
             </button>
 
             <div id="contentpopup2">
                 <div class="level is-marginless">
                     <transition name="mm-list">
-                        <div v-show="range != 0" class="level-item">
-                            <p class="heading is-marginless link" @click="resetFilter()">
+                        <div v-show="range != 0"
+                             class="level-item">
+                            <p class="heading is-marginless link"
+                               @click="resetFilter()">
                                 <span class="icon"><icon name="times"/></span>
                             </p>
                         </div>
                     </transition>
 
                     <div class="level-item">
-                        <p class="title is-5 is-marginless">{{ range }}</p>
+                        <p class="title is-5 is-marginless">
+                            {{ range }}
+                        </p>
                     </div>
                 </div>
 
@@ -39,7 +45,8 @@
                 class="btn-plain"
                 @click="update()">
             <span class="icon">
-                <icon :name="processing ? 'spinner' : icon" :pulse="processing"/>
+                <icon :name="processing ? 'spinner' : icon"
+                      :pulse="processing"/>
             </span>
         </button>
     </div>
@@ -105,6 +112,7 @@ export default {
                         ((min - val) * 100 / total).toFixed(2)
                     )) + '%'
                     item.style.setProperty('--length', perc)
+
                     return item.classList.add('range-neg')
                 }
                 // 0 > +
@@ -116,6 +124,7 @@ export default {
                         (calc * 100 / total).toFixed(2)
                     ) + '%'
                     item.style.setProperty('--length', perc)
+
                     return item.classList.add('range-pos')
                 }
             }
@@ -134,9 +143,7 @@ export default {
             if (val) {
                 this.wasReset = true
                 this.resetFilter()
-                this.$nextTick(() => {
-                    this.wasReset = false
-                })
+                this.$nextTick(() => this.wasReset = false)
             }
         },
         range(val) {

diff --git a/src/resources/assets/js/components/imageEditor/main.vue b/src/resources/assets/js/components/imageEditor/main.vue
@@ -1,5 +1,6 @@
 <template>
-    <div ref="editor" class="card __editor">
+    <div ref="editor"
+         class="card __editor">
         <!-- btns -->
         <div class="top">
             <div class="__top-toolbar">
@@ -47,7 +48,8 @@
                             :title="trans('crop_reset_filters')"
                             class="btn-plain"
                             @click="resetFilters()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
+                                                 :pulse="processing"/></span>
                     </button>
                 </div>
             </div>
@@ -64,12 +66,16 @@
 
             <div class="__cropper">
                 <!-- img -->
-                <figure :style="{'opacity': processing ? 0 : 1}" class="image">
-                    <img id="cropper" :src="url" crossOrigin>
+                <figure :style="{'opacity': processing ? 0 : 1}"
+                        class="image">
+                    <img id="cropper"
+                         :src="url"
+                         crossOrigin>
                 </figure>
 
                 <!-- loading -->
-                <div v-show="processing" class="__loader">
+                <div v-show="processing"
+                     class="__loader">
                     <div class="ball-grid-pulse">
                         <div/><div/><div/><div/><div/><div/><div/><div/><div/>
                     </div>
@@ -84,8 +90,10 @@
                                :zoom="{min: 1, max: 15}"
                                class="__diff is-draggable"
                                @movment="onDiffDrag">
-                    <icon slot="icon-left" name="arrow-left"/>
-                    <icon slot="icon-right" name="arrow-right"/>
+                    <icon slot="icon-left"
+                          name="arrow-left"/>
+                    <icon slot="icon-right"
+                          name="arrow-right"/>
                 </image-compare>
 
                 <!-- presets -->
@@ -97,14 +105,16 @@
                          class="__caman-presets"/>
 
                 <!-- operations -->
-                <div :style="hiddenBtns" class="__bottom-toolbar">
+                <div :style="hiddenBtns"
+                     class="__bottom-toolbar">
                     <!-- reset everything -->
                     <button v-tippy="{arrow: true, theme: 'mm'}"
                             :disabled="processing || !hasChanged"
                             :title="trans('crop_reset')"
                             class="btn-plain"
                             @click="operations('reset')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
+                                                 :pulse="processing"/></span>
                     </button>
 
                     <!-- clear -->
@@ -113,7 +123,8 @@
                             :title="trans('clear')"
                             class="btn-plain"
                             @click="operations('clear')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'ban'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'ban'"
+                                                 :pulse="processing"/></span>
                     </button>
 
                     <!-- apply -->
@@ -122,7 +133,8 @@
                             :title="trans('crop_apply')"
                             class="btn-plain"
                             @click="applyChanges()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'check'" :pulse="processing"/></span>
+                        <span class="icon"><icon :name="processing ? 'spinner' : 'check'"
+                                                 :pulse="processing"/></span>
                     </button>
                 </div>
             </div>
@@ -291,9 +303,11 @@ export default {
                     break
                 case 'zoom-in':
                     cropper.zoom(0.1)
+
                     return this.hasChanged = true
                 case 'zoom-out':
                     cropper.zoom(-0.1)
+
                     return this.hasChanged = true
                 case 'rotate-left':
                     cropper.rotate(-this.rotation)
@@ -348,9 +362,7 @@ export default {
                 cropper.setDragMode(this.dragMode) // active btn
                 this.resetFilters()
 
-                this.$nextTick(() => {
-                    this.reset = false
-                })
+                this.$nextTick(() => this.reset = false)
             })
         },
         clearSelection() {
@@ -429,7 +441,7 @@ export default {
             }).toDataURL(type)
 
             // reset the auto crop selection we made
-            this.$nextTick(this.clearSelection)
+            this.$nextTick(() => this.clearSelection())
 
             return url
         },

diff --git a/src/resources/assets/js/components/manager.vue b/src/resources/assets/js/components/manager.vue
@@ -36,7 +36,8 @@ export default {
         usageIntroBtn: require('./usageIntro/button.vue').default,
         usageIntroPanel: require('./usageIntro/panel.vue').default,
         videoDimension: require('./utils/video-dim.vue').default,
-        uploadPreview: require('./utils/upload-preview.vue').default
+        uploadPreview: require('./utils/upload-preview.vue').default,
+        InfiniteLoading: require('vue-infinite-loading').default
     },
     name: 'media-manager',
     mixins: [
@@ -175,7 +176,7 @@ export default {
 
             if (this.selectedFileIs('video') || this.selectedFileIs('audio')) {
                 this.destroyPlyr()
-                this.$nextTick(this.initPlyr)
+                this.$nextTick(() => this.initPlyr())
             }
 
             if (!this.introIsOn) {