New button in file manager that triggers the right click menu

Enable’s support on mobile devices and those who cannot right click
(blessed be them)

closes #182

CHANGELOG.md

@@ -6,6 +6,7 @@ This project follows [Semantic Versioning](http://semver.org) guidelines.
 ## v0.5.4 (Bodacious Boreopterus)
 ### Added
 * Changing node configuration values now automatically makes a call to the daemon and updates the configuration there. Changing daemon tokens now does not require any intervention, and takes effect immediately. SSL & Port configurations will still require a daemon reboot.
+* New button in file manager that triggers the right click menu to enable support on mobile devices and those who cannot right click (blessed be them).
 
 ### Changed
 * File uploads now account for a maximum file size that is assigned for the daemon, and gives cleaner errors when that limit is reached.

resources/views/server/files/list.blade.php

@@ -21,13 +21,14 @@
     <thead>
         <tr>
             <th style="width:2%;text-align:center;"><i class="fa fa-refresh muted muted-hover use-pointer" data-action="reload-files"></i></th>
-            <th style="width:45%">File Name</th>
+            <th style="width:55%">File Name</th>
             <th style="width:15%">Size</th>
             <th style="width:20%">Last Modified</th>
+            <th style="width:8%"></th>
         </tr>
         <tr id="headerTableRow" data-currentdir="{{ $directory['header'] }}">
             <th><i class="fa fa-folder-open"></i></th>
-            <th colspan="3">
+            <th colspan="4">
                 <code>/home/container{{ $directory['header'] }}</code>
                 <small>
                     <a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted">
@@ -44,6 +45,7 @@
                 <td><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">&larr;</a></a></td>
                 <td></td>
                 <td></td>
+                <td></td>
             </tr>
         @endif
         @if (isset($directory['show']) && $directory['show'] === true)
@@ -54,6 +56,7 @@
                 </td>
                 <td></td>
                 <td></td>
+                <td></td>
             </tr>
         @endif
         @foreach ($folders as $folder)
@@ -73,6 +76,7 @@
                         {{ $carbon->diffForHumans() }}
                     @endif
                 </td>
+                <td><button class="btn btn-xxs btn-default" data-action="toggleMenu" style="padding:0px 6px;"><i class="fa fa-ellipsis-h"></i></button></td>
             </tr>
         @endforeach
         @foreach ($files as $file)
@@ -149,6 +153,7 @@
                         {{ $carbon->diffForHumans() }}
                     @endif
                 </td>
+                <td><button class="btn btn-xxs btn-default" data-action="toggleMenu" style="padding:0px 6px;"><i class="fa fa-ellipsis-h"></i></button></td>
             </tr>
         @endforeach
     </tbody>

resources/views/server/js/filemanager/contextmenu.blade.php

@@ -56,102 +56,109 @@ class ContextMenuClass {
     }
 
     rightClick() {
-        $('#file_listing > tbody td').on('contextmenu', event => {
+        $('[data-action="toggleMenu"]').on('mousedown', () => {
-
-            const parent = $(event.target).closest('tr');
-            const menu = $(this.makeMenu(parent));
-
-            if (parent.data('type') === 'disabled') return;
             event.preventDefault();
+            this.showMenu(event);
+        });
+        $('#file_listing > tbody td').on('contextmenu', event => {
+            this.showMenu(event);
+        });
+    }
 
-            $(menu).appendTo('body');
+    showMenu(event) {
-            $(menu).data('invokedOn', $(event.target)).show().css({
+        const parent = $(event.target).closest('tr');
-                position: 'absolute',
+        const menu = $(this.makeMenu(parent));
-                left: event.pageX,
-                top: event.pageY,
-            });
 
-            this.activeLine = parent;
+        if (parent.data('type') === 'disabled') return;
-            this.activeLine.addClass('active');
+        event.preventDefault();
 
-            @can('download-files', $server)
+        $(menu).appendTo('body');
-                if (parent.data('type') === 'file') {
+        $(menu).data('invokedOn', $(event.target)).show().css({
-                    $(menu).find('li[data-action="download"]').removeClass('hidden');
+            position: 'absolute',
-                }
+            left: event.pageX - 150,
-            @endcan
+            top: event.pageY,
+        });
 
-            @can('compress-files', $server)
+        this.activeLine = parent;
-                if (parent.data('type') === 'folder') {
+        this.activeLine.addClass('active');
-                    $(menu).find('li[data-action="compress"]').removeClass('hidden');
-                }
-            @endcan
 
-            @can('decompress-files', $server)
+        @can('download-files', $server)
-                if (_.without(['application/zip', 'application/gzip', 'application/x-gzip'], parent.data('mime')).length < 3) {
+            if (parent.data('type') === 'file') {
-                    $(menu).find('li[data-action="decompress"]').removeClass('hidden');
+                $(menu).find('li[data-action="download"]').removeClass('hidden');
-                }
+            }
-            @endcan
+        @endcan
 
-            // Handle Events
+        @can('compress-files', $server)
-            const Actions = new ActionsClass(parent, menu);
+            if (parent.data('type') === 'folder') {
-            @can('move-files', $server)
+                $(menu).find('li[data-action="compress"]').removeClass('hidden');
-                $(menu).find('li[data-action="move"]').unbind().on('click', e => {
+            }
-                    e.preventDefault();
+        @endcan
-                    Actions.move();
-                });
-            @endcan
 
-            @can('copy-files', $server)
+        @can('decompress-files', $server)
-                $(menu).find('li[data-action="copy"]').unbind().on('click', e => {
+            if (_.without(['application/zip', 'application/gzip', 'application/x-gzip'], parent.data('mime')).length < 3) {
-                    e.preventDefault();
+                $(menu).find('li[data-action="decompress"]').removeClass('hidden');
-                    Actions.copy();
+            }
-                });
+        @endcan
-            @endcan
 
-            @can('move-files', $server)
+        // Handle Events
-                $(menu).find('li[data-action="rename"]').unbind().on('click', e => {
+        const Actions = new ActionsClass(parent, menu);
-                    e.preventDefault();
+        @can('move-files', $server)
-                    Actions.rename();
+            $(menu).find('li[data-action="move"]').unbind().on('click', e => {
-                });
-            @endcan
-
-            @can('compress-files', $server)
-                $(menu).find('li[data-action="compress"]').unbind().on('click', e => {
-                    e.preventDefault();
-                    Actions.compress();
-                });
-            @endcan
-
-            @can('decompress-files', $server)
-                $(menu).find('li[data-action="decompress"]').unbind().on('click', e => {
-                    e.preventDefault();
-                    Actions.decompress();
-                });
-            @endcan
-
-            @can('create-files', $server)
-                $(menu).find('li[data-action="folder"]').unbind().on('click', e => {
-                    e.preventDefault();
-                    Actions.folder();
-                });
-            @endcan
-
-            @can('download-files', $server)
-                $(menu).find('li[data-action="download"]').unbind().on('click', e => {
-                    e.preventDefault();
-                    Actions.download();
-                });
-            @endcan
-
-            $(menu).find('li[data-action="delete"]').unbind().on('click', e => {
                 e.preventDefault();
-                Actions.delete();
+                Actions.move();
             });
+        @endcan
 
-            $(window).on('click', () => {
+        @can('copy-files', $server)
-                $(menu).remove();
+            $(menu).find('li[data-action="copy"]').unbind().on('click', e => {
-                if(!_.isNull(this.activeLine)) this.activeLine.removeClass('active');
+                e.preventDefault();
+                Actions.copy();
             });
+        @endcan
+
+        @can('move-files', $server)
+            $(menu).find('li[data-action="rename"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.rename();
+            });
+        @endcan
+
+        @can('compress-files', $server)
+            $(menu).find('li[data-action="compress"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.compress();
+            });
+        @endcan
+
+        @can('decompress-files', $server)
+            $(menu).find('li[data-action="decompress"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.decompress();
+            });
+        @endcan
+
+        @can('create-files', $server)
+            $(menu).find('li[data-action="folder"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.folder();
+            });
+        @endcan
+
+        @can('download-files', $server)
+            $(menu).find('li[data-action="download"]').unbind().on('click', e => {
+                e.preventDefault();
+                Actions.download();
+            });
+        @endcan
+
+        $(menu).find('li[data-action="delete"]').unbind().on('click', e => {
+            e.preventDefault();
+            Actions.delete();
+        });
+
+        $(window).on('click', () => {
+            $(menu).remove();
+            if(!_.isNull(this.activeLine)) this.activeLine.removeClass('active');
         });
     }