SERV-2286 - dropzone element WIP

src/Views/Limitless/Dropzone/Attachments/dropzone.init.js

+Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
+Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
+Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
+Dropzone.prototype.defaultOptions.dictFileTooBig = "Die maximale Dateigröße beträgt {{maxFilesize}}MB.";
+Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
+Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
+Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
+Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
+Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
+Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";
+Dropzone.autoDiscover = false;
+
+$(document).off('click touchstart', '[data-dz-delete]');
+$(document).on('click touchstart', '[data-dz-delete]', function (e)
+{
+    console.log(e);
+    // Prevent Click...
+    e.preventDefault();
+
+    // Confirmation
+    let instance = limitlessNotification.set('Confirmation', 'Möchten Sie diese Datei wirklich löschen?', 'warning', true);
+
+    // On confirm
+    instance.get().on('pnotify.confirm', function() {
+
+        // Get trigger for backend.
+        $.get($(this).attr('href'), function (data) {
+            console.log("Data Loaded: " + data);
+        });
+
+        // Remove image
+        $(this).parents('[dz-container]').hide();
+    })
+
+    // On cancel
+    instance.get().on('pnotify.cancel', function() {
+
+    });
+})
+$(document).on('click', '.DropzoneButton', function(e) {
+    e.preventDefault();
+})
+
+
+function init() {
+    setDropzoneButtons();
+    setDropzoneTemplate();
+    setDropzone();
+}
+
+function setDropzoneButtons() {
+
+    let counter = 0;
+
+    $('.DropzoneButton').each(function() {
+        counter++;
+        let buttonElement = $(this);
+        buttonElement.attr('id', 'DropzoneButton' + counter);
+    });
+
+}
+
+function setDropzoneTemplate() {
+
+    let counter = 0;
+
+    $('.LimitlessDropzoneTemplate').each(function() {
+        counter++;
+        let element = $(this);
+        element.attr('id', 'LimitlessDropzoneTemplate' + counter);
+    });
+
+}
+
+function setDropzone() {
+
+    let counter = 0;
+
+    $('.LimitlessDropzone').each(function() {
+
+        let element = $(this);
+        let additionalConfig = element.attr('data-config') ?? null;
+        let files = element.attr('data-files') ? JSON.parse(element.attr('data-files')) : null;
+        counter++;
+
+        // adds auto generated id if element has no id
+        if(!element.attr('id')) {
+            let id = 'LimitlessDropzone' + counter;
+            element.attr('id', id);
+        }
+
+        // Queueindicator
+        let UIblocked = false;
+
+        // Define and extend dropzone object.
+        let DZ = $.extend({
+
+                maxFilesize: 20,
+                timeout: 90000,
+                method: "post",
+                thumbnailWidth: 120,
+                thumbnailHeight: 100,
+                acceptedFiles: "image/*,application/pdf",
+                previewTemplate: $('.LimitlessDropzoneTemplate:first').innerHTML,
+                autoProcessQueue: true,
+                clickable:'#DropzoneButton' + counter,
+                success: function (file, response) {
+
+                    // Saving successfull
+                    let obj = $(file.previewTemplate);
+                    obj.show();
+                    obj.find('img').attr('src', response.thumbnailurl);
+                    obj.find('[data-dz-source]').attr('href', response.sourceurl);
+                    obj.find('[data-dz-name]').html(response.filename);
+                    obj.find('[data-dz-size]').html(response.filesize);
+                    obj.find('[data-dz-delete]').attr('href', response.deleteurl);
+
+                    // Saving not successfull
+                    if (response.sourceurl == undefined) {
+                        obj.find('.list-icons').hide();
+
+                        obj.find('.align-items-start').css({
+                            'border': '1px solid #ff0000'
+                        });
+
+                        console.log(response);
+
+                        // Greyscale thumbnail on error.
+                        obj.find('img').css({
+                            '-webkit-filter': 'grayscale(100%)',
+                            '-moz-filter': 'grayscale(100%)',
+                            'filter': 'grayscale(100%)',
+                            'opacity': '0.5'
+                        });
+
+                        limitlessNotification.set('', file.name + ": Der Uploadserver ist derzeit nicht verfügbar.", 'error');
+                    }else{
+                        limitlessNotification.set('', 'Die Datei wurde erfolgreich hochgeladen.', 'success');
+                    }
+                },
+                processing: function () {
+
+                    if(UIblocked == true)
+                    {
+                        return false;
+                    }
+
+                    UIblocked = true;
+
+                    // Block UI while uploading...
+                    $.blockUI({
+                        message: '<i style="font-size: 5rem" class="icon-spinner6 spinner"></i>',
+                        overlayCSS: {
+                            backgroundColor: '#1b2024',
+                            opacity: 0.8,
+                            cursor: 'wait'
+                        },
+                        css: {
+                            border: 0,
+                            color: '#fff',
+                            padding: 0,
+                            backgroundColor: 'transparent'
+                        }
+                    });
+
+                },
+                queuecomplete: function () {
+
+                    // Unblock UI when complete...
+                    $.unblockUI();
+
+                    UIblocked = false;
+
+                },
+                error: function (file, response) {
+
+                    // Error Message
+                    limitlessNotification.set('', file.name + ": " + response, 'error');
+
+                    // Greyscale thumbnail on error.
+                    $(file.previewTemplate).find('img').css({
+                        '-webkit-filter': 'grayscale(100%)',
+                        '-moz-filter': 'grayscale(100%)',
+                        'filter': 'grayscale(100%)',
+                        'opacity': '0.5'
+                    });
+
+                    // Remove delete button on error.
+                    $(file.previewTemplate).find('.list-icons').hide();
+
+                    // Outline border in red on error.
+                    $(file.previewTemplate).find('.align-items-start').css({
+                        'border': '1px solid #ff0000'
+                    });
+
+                }
+            },
+            additionalConfig
+        );
+
+        console.log(DZ);
+
+        // Start dropzone.
+        element.dropzone(DZ);
+    });
+
+}
+
+$(document).ready(function() {
+    init();
+});
+
+// $(document).ready(function()
+// {
+//
+//     $('#<?php echo $array["id"]; ?>').find('button').click(function (e) {
+//         e.preventDefault();
+//     });
+//
+//
+//     <?php foreach($array['files'] as $file){ ?>
+//
+//     var obj = $('#limitlessdropzonetemplate').clone();
+//     obj.show();
+//     obj.find('img').attr('src','<?php echo $file["thumbnailurl"]; ?>');
+//     obj.find('[data-dz-source]').attr('href','<?php echo $file["sourceurl"]; ?>');
+//     obj.find('[data-dz-delete]').attr('href','<?php echo $file["deleteurl"]; ?>');
+//     obj.find('[data-dz-name]').html('<?php echo $file["filename"]; ?>');
+//     obj.find('[data-dz-size]').html('<?php echo $file["filesize"]; ?>');
+//     obj.find('.align-items-start').css({'border':'1px dotted #888888'});
+//
+//     $('#<?php echo $array["id"]; ?>').append(   obj.html()     );
+//
+//     <?php } ?>
+//
+// });
\ No newline at end of file

src/Views/Limitless/Dropzone/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-06-30 02:31:57
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Dropzone;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::Dropzone' => 'dropzone',
+        ];
+
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::Dropzone' => [
+                    'Attachments/dropzone.js',
+                    'Attachments/dropzone.init.js',
+                    'Attachments/dropzone.css'
+                ]
+            ];
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "dropzone"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function dropzone($parameters)
+        {
+            return View('Limitless::Dropzone.Dropzone')
+                ->withId($parameters['id'] ?? null)
+                ->withButtonText($parameters['button-text'] ?? 'No Text')
+                ->withFiles($parameters['files'] ?? null)
+                ->withDropConfig($parameters['drop-config'] ?? null);
+        }
+
+
+    }
+
+
+

src/Views/Limitless/Dropzone/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
+        @Limitless::Dropzone
+        @Limitless::Dropzone
+    @Limitless::CardStop
+
+@stop

src/Views/Limitless/Dropzone/Dropzone.blade.php

+<form @if($id) id="{{ $id }}" @endif
+    class="LimitlessDropzone d-flex flex-wrap align-items-stretch flex-row"
+     @if($dropConfig) data-config="{{ json_encode($dropConfig) }}" @endif
+>
+    @if($files)
+        @foreach($files as $file)
+            <div class="LimitlessDropzoneTemplate" style="display:none">
+                <div dz-container="true" style="flex-grow: 1; min-width:220px;">
+                    <div class="card-body" style="padding: 7px;">
+                        <div class="d-flex align-items-start flex-nowrap" style="border: 1px solid #00bcd4; padding:5px;">
+                            <div style="text-align: center;">
+                                <div>
+                                    <div class="font-weight-semibold mr-2">
+                                        <div class="card-img-actions" style="width:130px; height:110px;">
+                                            <a data-dz-source target="_blank" href="#">
+                                                <img style="margin:5px; width:120px; height:100px;" data-dz-thumbnail alt="">
+                                                <span class="card-img-actions-overlay card-img"><i class="icon-search4 icon-2x"></i></span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <small>
+                                        <span style="text-transform: uppercase" data-dz-name></span> (<span class="DropzoneFilesize text-muted" data-dz-size></span>)
+                                    </small>
+                                </div>
+                            </div>
+                            <div class="list-icons list-icons-extended ml-auto">
+                                <a data-dz-delete href="#" class="list-icons-item"><i class="icon-bin text-grey top-0"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    @endif
+
+    <button style="margin:7px;" class="DropzoneButton btn btn-secondary btn-labeled btn-labeled-left btn-block">
+        <b><i class="icon-drawer-in"></i></b> {{ $buttonText }}
+    </button>
+</form>

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -11,7 +11,7 @@
 
 @section('Limitless::Javascript')
     <script src="{{ secure_url("/ceetrox/sidekick/resource/public/Elements/notification/notification.sample.js") }}" defer></script>
-    <script src="{{ secure_url("/ceetrox/sidekick/resource/public/Elements/notification/modal.sample.js") }}" defer></script>
+    <script src="{{ secure_url("/ceetrox/sidekick/resource/public/Elements/modal/modal.sample.js") }}" defer></script>
 
     @Limitless::InitNotifications
 @stop
@@ -41,6 +41,7 @@
             @Limitless::SideNavMenuItem(['url' => '?page=Element.Copyright', 'target' => '_self', 'icon' => 'icon-info22', 'title' => 'Copyright'])
             @Limitless::SideNavMenuItem(['url' => '?page=Dashboard', 'target' => '_self', 'icon' => 'icon-stats-bars', 'title' => 'Dashboard'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.Divider', 'target' => '_self', 'icon' => 'icon-minus2', 'title' => 'Divider'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Dropzone', 'target' => '_self', 'icon' => 'icon-drawer-in', 'title' => 'Dropzone'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.Legend', 'target' => '_self', 'icon' => 'icon-vcard', 'title' => 'Legend'])
             @Limitless::SideNavMenuItem(['url' => '?page=Listgroup', 'target' => '_self', 'icon' => 'icon-list-unordered', 'title' => 'List Group'])
             @Limitless::SideNavMenuItem(['url' => '?page=Element.LoremIpsum', 'target' => '_self', 'icon' => 'icon-bubble-lines3', 'title' => 'Lorem Ipsum'])

src/Views/Limitless/Notification/Init.blade.php

@@ -2,30 +2,30 @@
 
     $(document).ready(function() {
 
-        let limitlessNotifications = new LimitlessNotification();
+        let limitlessNotification = new LimitlessNotification();
 
         // Default Toasters
-        @if(isset($errors)) @foreach($errors->all() as $data) limitlessNotifications.set('', "{{ $data }}", 'error'); @endforeach @endif
-        @if(isset($infos)) @foreach($infos as $data) limitlessNotifications.set('', "{{ $data }}", 'info'); @endforeach @endif
-        @if(isset($warnings)) @foreach($warnings as $data) limitlessNotifications.set('', "{{ $data }}", 'warning'); @endforeach @endif
-        @if(isset($successes)) @foreach($successes as $data) limitlessNotifications.set('', "{{ $data }}", 'success'); @endforeach @endif
+        @if(isset($errors)) @foreach($errors->all() as $data) limitlessNotification.set('', "{{ $data }}", 'error'); @endforeach @endif
+        @if(isset($infos)) @foreach($infos as $data) limitlessNotification.set('', "{{ $data }}", 'info'); @endforeach @endif
+        @if(isset($warnings)) @foreach($warnings as $data) limitlessNotification.set('', "{{ $data }}", 'warning'); @endforeach @endif
+        @if(isset($successes)) @foreach($successes as $data) limitlessNotification.set('', "{{ $data }}", 'success'); @endforeach @endif
         @if(isset($hiddens)) @foreach($hiddens as $data) console.log("{{ $data }}"); @endforeach @endif
-        @if(isset($error)) limitlessNotifications.set('', "{{ $error }}", 'error'); @endif
-        @if(isset($success)) limitlessNotifications.set('', "{{ $success }}", 'success'); @endif
-        @if(isset($warning)) limitlessNotifications.set('', "{{ $warning }}", 'warning'); @endif
-        @if(isset($info)) limitlessNotifications.set('', "{{ $info }}", 'info'); @endif
+        @if(isset($error)) limitlessNotification.set('', "{{ $error }}", 'error'); @endif
+        @if(isset($success)) limitlessNotification.set('', "{{ $success }}", 'success'); @endif
+        @if(isset($warning)) limitlessNotification.set('', "{{ $warning }}", 'warning'); @endif
+        @if(isset($info)) limitlessNotification.set('', "{{ $info }}", 'info'); @endif
         @if(isset($hidden)) console.log("{{ $hidden }}"); @endif
 
         // Session Toasters
-        @if(Session::has('errors')) @foreach(Session::get('errors') as $data) limitlessNotifications.set('', "{{ $data }}", 'error'); @endforeach @endif
-        @if(Session::has('infos')) @foreach(Session::get('infos') as $data) limitlessNotifications.set('', "{{ $data }}", 'info'); @endforeach @endif
-        @if(Session::has('warnings')) @foreach(Session::get('warnings') as $data) limitlessNotifications.set('', "{{ $data }}", 'warning'); @endforeach @endif
-        @if(Session::has('successes')) @foreach(Session::get('successes') as $data) limitlessNotifications.set('', "{{ $data }}", 'success'); @endforeach @endif
+        @if(Session::has('errors')) @foreach(Session::get('errors') as $data) limitlessNotification.set('', "{{ $data }}", 'error'); @endforeach @endif
+        @if(Session::has('infos')) @foreach(Session::get('infos') as $data) limitlessNotification.set('', "{{ $data }}", 'info'); @endforeach @endif
+        @if(Session::has('warnings')) @foreach(Session::get('warnings') as $data) limitlessNotification.set('', "{{ $data }}", 'warning'); @endforeach @endif
+        @if(Session::has('successes')) @foreach(Session::get('successes') as $data) limitlessNotification.set('', "{{ $data }}", 'success'); @endforeach @endif
         @if(Session::has('hiddens')) @foreach(Session::get('hiddens') as $data) console.log("{{ $data }}"); @endforeach @endif
-        @if(Session::has('error')) limitlessNotifications.set('', "{{ Session::get('error') }}", 'error'); @endif
-        @if(Session::has('success')) limitlessNotifications.set('', "{{ Session::get('success') }}", 'success'); @endif
-        @if(Session::has('warning')) limitlessNotifications.set('', "{{ Session::get('warning') }}", 'warning'); @endif
-        @if(Session::has('info')) limitlessNotifications.set('', "{{ Session::get('info') }}", 'info'); @endif
+        @if(Session::has('error')) limitlessNotification.set('', "{{ Session::get('error') }}", 'error'); @endif
+        @if(Session::has('success')) limitlessNotification.set('', "{{ Session::get('success') }}", 'success'); @endif
+        @if(Session::has('warning')) limitlessNotification.set('', "{{ Session::get('warning') }}", 'warning'); @endif
+        @if(Session::has('info')) limitlessNotification.set('', "{{ Session::get('info') }}", 'info'); @endif
         @if(Session::has('hidden')) console.log("{{ Session::get('hidden') }}"); @endif
 
     })