Very rough base implementation of file renaming

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

@@ -23,6 +23,12 @@
     Managing Files for: {{ $server->name }}
 @endsection
 
+@section('scripts')
+    @parent
+    {!! Theme::js('js/vendor/async/async.min.js') !!}
+    {!! Theme::js('js/vendor/lodash/lodash.js') !!}
+@endsection
+
 @section('content')
 <div class="col-md-12">
     <div class="row">
@@ -50,128 +56,21 @@
             </div>
         </div>
     </div>
+    <ul id="fileOptionMenu" class="dropdown-menu" role="menu" style="display:none" >
+        <li data-action="move"><a tabindex="-1" href="#"><i class="fa fa-arrow-right"></i> Move</a></li>
+        <li data-action="rename"><a tabindex="-1" href="#"><i class="fa fa-pencil-square-o"></i> Rename</a></li>
+        <li><a tabindex="-1" href="#"><i class="fa fa-file-archive-o"></i> Compress</a></li>
+        <li class="divider"></li>
+        <li><a tabindex="-1" href="#"><i class="fa fa-download"></i> Download</a></li>
+        <li><a tabindex="-1" href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
+    </ul>
 </div>
+<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'index.js']) }}"></script>
+<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'actions.js']) }}"></script>
+<script src="{{ route('server.js', [$server->uuidShort, 'filemanager', 'contextmenu.js']) }}"></script>
 <script>
-    $(document).ready(function () {
+$(window).load(function () {
     $('.server-files').addClass('active');
-    });
-    $(window).load(function(){
-        var doneLoad = false;
-
-        // Show Loading Animation
-        function handleLoader (show) {
-
-            // Hide animation if no files displayed.
-            if ($('#load_files').height() < 5) { return; }
-
-            // Show Animation
-            if (show === true){
-                var height = $('#load_files').height();
-                var width = $('.ajax_loading_box').width();
-                var center_height = (height / 2) - 30;
-                var center_width = (width / 2) - 30;
-                $('#position_me').css({
-                    'top': center_height,
-                    'left': center_width,
-                    'font-size': '60px'
-                });
-                $(".ajax_loading_box").css('height', (height + 5)).fadeIn();
-            } else {
-                $('.ajax_loading_box').fadeOut(100);
-            }
-
-        }
-
-        function reloadActions () {
-            reloadActionClick();
-            reloadActionDelete();
-        }
-
-        // Handle folder clicking to load new contents
-        function reloadActionClick () {
-            $('a.load_new').click(function (e) {
-                e.preventDefault();
-                window.history.pushState(null, null, $(this).attr('href'));
-                loadDirectoryContents($.urlParam('dir', $(this).attr('href')));
-            });
-        }
-
-        // Handle Deleting Files
-        function reloadActionDelete () {
-            $('[data-action="delete_file"]').click(function (e) {
-                e.preventDefault();
-                var clicked = $(this);
-                var deleteItemPath = $(this).attr('href');
-
-                swal({
-                    type: 'warning',
-                    title: '',
-                    text: 'Are you sure you want to delete <code>' + clicked.data('name') + '</code>?',
-                    html: true,
-                    showCancelButton: true,
-                    showConfirmButton: true,
-                    closeOnConfirm: false,
-                    showLoaderOnConfirm: true
-                }, function () {
-                    $.ajax({
-                        type: 'DELETE',
-                        url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/file/' + deleteItemPath,
-                        headers: {
-                            'X-Access-Token': '{{ $server->daemonSecret }}',
-                            'X-Access-Server': '{{ $server->uuid }}'
-                        }
-                    }).done(function (data) {
-                        clicked.parent().parent().parent().parent().fadeOut();
-                        swal({
-                            type: 'success',
-                            title: 'File Deleted'
-                        });
-                    }).fail(function (jqXHR) {
-                        console.error(jqXHR);
-                        swal({
-                            type: 'error',
-                            title: 'Whoops!',
-                            html: true,
-                            text: 'An error occured while attempting to delete this file. Please try again.',
-                        });
-                    });
-                });
-
-            });
-        }
-
-        // Handle Loading Contents
-        function loadDirectoryContents (dir) {
-
-            handleLoader(true);
-            var outputContent;
-            var urlDirectory = (dir === null) ? '/' : dir;
-
-            $.ajax({
-                type: 'POST',
-                url: '{{ route('server.files.directory-list', $server->uuidShort) }}',
-                headers: { 'X-CSRF-Token': '{{ csrf_token() }}' },
-                data: { directory: urlDirectory }
-            }).done(function (data) {
-                handleLoader(false);
-                $("#load_files").slideUp(function () {
-                    $("#load_files").html(data).slideDown();
-                    $('[data-toggle="tooltip"]').tooltip();
-                    $('#internal_alert').slideUp();
-
-                    // Run Actions Again
-                    reloadActions();
-                });
-            }).fail(function (jqXHR) {
-                $("#internal_alert").html('<div class="alert alert-danger">An error occured while attempting to process this request. Please try again.</div>').show();
-                console.log(jqXHR);
-            });
-
-        }
-
-        // Load on Initial Page Load
-        loadDirectoryContents($.urlParam('dir'));
-
-    });
+});
 </script>
 @endsection

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

@@ -18,57 +18,57 @@
 {{-- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE --}}
 {{-- SOFTWARE. --}}
 <h4 class="nopad">/home/container{{ $directory['header'] }} &nbsp;<small><a href="/server/{{ $server->uuidShort }}/files/add/@if($directory['header'] !== '')?dir={{ $directory['header'] }}@endif" class="text-muted"><i class="fa fa-plus" data-toggle="tooltip" data-placement="top" title="Add New File(s)"></i></a></small></h4>
-<table class="table table-striped table-bordered table-hover">
+<table class="table table-striped table-bordered table-hover" id="file_listing">
     <thead>
         <tr>
             <th style="width:2%;text-align:center;"></th>
             <th style="width:45%">File Name</th>
             <th style="width:15%">Size</th>
             <th style="width:20%">Last Modified</th>
-            <th style="width:20%;text-align:center;">Options</th>
+            {{-- <th style="width:20%;text-align:center;">Options</th> --}}
         </tr>
     </thead>
     <tbody>
         @if (isset($directory['first']) && $directory['first'] === true)
             <tr>
                 <td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
-                <td><a href="/server/{{ $server->uuidShort }}/files" class="load_new">&larr;</a></a></td>
-                <td></td>
+                <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)
             <tr>
                 <td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
-                <td><a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory['link']) }}" class="load_new">&larr; {{ $directory['link_show'] }}</a></a></td>
-                <td></td>
+                <td><a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory['link']) }}" data-action="directory-view">&larr; {{ $directory['link_show'] }}</a></a></td>
                 <td></td>
                 <td></td>
+                {{-- <td></td> --}}
             </tr>
         @endif
         @foreach ($folders as $folder)
-            <tr>
-                <td><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
-                <td><a href="/server/{{ $server->uuidShort }}/files?dir=/@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" class="load_new">{{ $folder['entry'] }}</a></td>
-                <td>{{ $folder['size'] }}</td>
-                <td>{{ date('m/d/y H:i:s', $folder['date']) }}</td>
-                <td style="text-align:center;">
+            <tr class="align-middle" data-path="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}">
+                <td data-identifier="type"><i class="fa fa-folder-open" style="margin-left: 0.859px;"></i></td>
+                <td data-identifier="name" data-hash="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}"><a href="/server/{{ $server->uuidShort }}/files" data-action="directory-view">{{ $folder['entry'] }}</a></td>
+                <td data-identifier="size">{{ $folder['size'] }}</td>
+                <td data-identifier="modified">{{ date('m/d/y H:i:s', $folder['date']) }}</td>
+                {{-- <td class="text-center">
                     <div class="row" style="text-align:center;">
                         <div class="col-md-3 hidden-xs hidden-sm"></div>
                         <div class="col-md-3 hidden-xs hidden-sm">
                         </div>
                         <div class="col-md-3">
                             @can('delete-files', $server)
-                                <a href="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" data-action="delete_file" data-name="{{ $folder['entry'] }}"><span class="badge label-danger"><i class="fa fa-trash-o"></i></span></a>
+                                <a href="@if($folder['directory'] !== ''){{ rawurlencode($folder['directory']) }}/@endif{{ rawurlencode($folder['entry']) }}" data-action="delete_file" data-name="{{ $folder['entry'] }}"><button class="btn btn-danger btn-xxs"><i class="fa fa-trash-o"></i></button></a>
                             @endcan
                         </div>
                     </div>
-                </td>
+                </td> --}}
             </tr>
         @endforeach
         @foreach ($files as $file)
-            <tr>
+            <tr class="align-middle">
                 <td><i class="fa fa-file-text" style="margin-left: 2px;"></i></td>
                 <td>
                     @if(in_array($file['extension'], $extensions))
@@ -83,7 +83,7 @@
                 </td>
                 <td>{{ $file['size'] }}</td>
                 <td>{{ date('m/d/y H:i:s', $file['date']) }}</td>
-                <td style="text-align:center;">
+                {{-- <td style="text-align:center;">
                     <div class="row" style="text-align:center;">
                         <div class="col-md-3 hidden-xs hidden-sm">
                         </div>
@@ -98,7 +98,7 @@
                             @endcan
                         </div>
                     </div>
-                </td>
+                </td> --}}
             </tr>
         @endforeach
     </tbody>

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

@@ -0,0 +1,69 @@
+"use strict";
+
+// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+class FileActions {
+    constructor() {
+        //
+    }
+
+    run() {
+        this.directoryClick();
+        this.rightClick();
+    }
+
+    rightClick() {
+        $('#file_listing > tbody').on('contextmenu', event => {
+            event.preventDefault();
+            const parent = $(event.target).parent();
+
+            $('#fileOptionMenu').appendTo('body');
+            $('#fileOptionMenu').data('invokedOn', $(event.target)).show().css({
+                position: 'absolute',
+                left: event.pageX,
+                top: event.pageY,
+            });
+
+            // Handle Events
+            var Context = new ContextMenuActions(parent);
+            $('#fileOptionMenu li[data-action="move"]').unbind().on('click', e => {
+                Context.move();
+            });
+
+            $('#fileOptionMenu li[data-action="rename"]').unbind().on('click', e => {
+                Context.rename();
+            });
+
+            $(window).click(() => {
+                $('#fileOptionMenu').hide();
+            });
+        });
+    }
+
+    directoryClick() {
+        $('a[data-action="directory-view"]').on('click', function (event) {
+            event.preventDefault();
+            window.location.hash = encodeURIComponent($(this).parent().data('hash') || '');
+            Files.list();
+        });
+    }
+}
+
+window.Actions = new FileActions;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+class ContextMenuActions {
+    constructor(element) {
+        this.element = element;
+    }
+
+    destroy() {
+        this.element = undefined;
+    }
+
+    move() {
+        alert($(this.element).data('path'));
+    }
+
+    rename() {
+        var desiredElement = $(this.element).find('td[data-identifier="name"]');
+        var linkElement = desiredElement.find('a');
+        var currentName = linkElement.html();
+        var editField = `<input class="form-control input-sm" type="text" value="${currentName}" />`;
+        desiredElement.find('a').remove();
+        desiredElement.html(editField);
+
+        const inputField = desiredElement.find('input');
+        inputField.focus();
+
+        inputField.on('blur keypress', e => {
+            // Save Field
+            if (e.type === 'blur' || (e.type === 'keypress' && e.which !== 13)) {
+                // Escape Key Pressed, don't save.
+                if (e.which === 27 || e.type === 'blur') {
+                    desiredElement.html(linkElement);
+                    inputField.remove();
+                }
+                return;
+            }
+
+            $.ajax({
+                type: 'POST',
+                headers: {
+                    'X-Access-Token': '{{ $server->daemonSecret }}',
+                    'X-Access-Server': '{{ $server->uuid }}'
+                },
+                contentType: 'application/json; charset=utf-8',
+                url: '{{ $node->scheme }}://{{ $node->fqdn }}:{{ $node->daemonListen }}/server/files/rename',
+                timeout: 10000,
+                data: JSON.stringify({
+                    from: currentName,
+                    to: inputField.val(),
+                }),
+            }).done(data => {
+                this.element.attr('data-path', inputField.val());
+                desiredElement.attr('data-hash', inputField.val());
+                desiredElement.html(linkElement.html(inputField.val()));
+                inputField.remove();
+                Actions.run();
+            }).fail(jqXHR => {
+                console.error(jqXHR);
+                var error = 'An error occured while trying to process this request.';
+                if (typeof jqXHR.responseJSON !== 'undefined' && typeof jqXHR.responseJSON.error !== 'undefined') {
+                    error = jqXHR.responseJSON.error;
+                }
+                swal({
+                    type: 'error',
+                    title: '',
+                    text: error,
+                });
+            });
+        });
+    }
+}

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

@@ -0,0 +1,91 @@
+"use strict";
+
+// Copyright (c) 2015 - 2016 Dane Everitt <dane@daneeveritt.com>
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+class FileManager {
+    constructor() {
+        this.list(this.decodeHash());
+    }
+
+    reload() {
+        $('[data-toggle="tooltip"]').tooltip();
+    }
+
+    list(path) {
+        if (_.isUndefined(path)) {
+            path = this.decodeHash();
+        }
+
+        this.loader(true);
+        $.ajax({
+            type: 'POST',
+            url: '{{ route('server.files.directory-list', $server->uuidShort) }}',
+            headers: {
+                'X-CSRF-Token': '{{ csrf_token() }}',
+            },
+            data: {
+                directory: path,
+            },
+        }).done(data => {
+            $('#load_files').slideUp().html(data).slideDown(() => {
+                Actions.run();
+            });
+            $('#internal_alert').slideUp();
+        }).fail(jqXHR => {
+            swal({
+                type: 'error',
+                title: 'File Error',
+                text: 'An error occured while attempting to process this request. Please try again.',
+            });
+            this.list('/');
+            console.log(jqXHR);
+        }).always(() => {
+            this.loader(false);
+        });
+    }
+
+    loader(show) {
+        if ($('#load_files').height() < 5) return;
+
+        if (show === true){
+            var height = $('#load_files').height();
+            var width = $('.ajax_loading_box').width();
+            var center_height = (height / 2) - 30;
+            var center_width = (width / 2) - 30;
+
+            $('#position_me').css({
+                'top': center_height,
+                'left': center_width,
+                'font-size': '60px'
+            });
+
+            $('.ajax_loading_box').css('height', (height + 5)).fadeIn();
+        } else {
+            $('.ajax_loading_box').fadeOut(100);
+        }
+    }
+
+    decodeHash() {
+        return decodeURIComponent(window.location.hash.substring(1));
+    }
+
+}
+
+window.Files = new FileManager;