SERV-2286 - dropzone element WIP

src/Views/Limitless/Dropzone/Attachments/dropzone.css

+/*
+ * The MIT License
+ * Copyright (c) 2012 Matias Meno <m@tias.me>
+ */
+@-webkit-keyframes passing-through {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30%, 70% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        -moz-transform: translateY(-40px);
+        -ms-transform: translateY(-40px);
+        -o-transform: translateY(-40px);
+        transform: translateY(-40px); } }
+@-moz-keyframes passing-through {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30%, 70% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        -moz-transform: translateY(-40px);
+        -ms-transform: translateY(-40px);
+        -o-transform: translateY(-40px);
+        transform: translateY(-40px); } }
+@keyframes passing-through {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30%, 70% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(-40px);
+        -moz-transform: translateY(-40px);
+        -ms-transform: translateY(-40px);
+        -o-transform: translateY(-40px);
+        transform: translateY(-40px); } }
+@-webkit-keyframes slide-in {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); } }
+@-moz-keyframes slide-in {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); } }
+@keyframes slide-in {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(40px);
+        -moz-transform: translateY(40px);
+        -ms-transform: translateY(40px);
+        -o-transform: translateY(40px);
+        transform: translateY(40px); }
+    30% {
+        opacity: 1;
+        -webkit-transform: translateY(0px);
+        -moz-transform: translateY(0px);
+        -ms-transform: translateY(0px);
+        -o-transform: translateY(0px);
+        transform: translateY(0px); } }
+@-webkit-keyframes pulse {
+    0% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); }
+    10% {
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        -o-transform: scale(1.1);
+        transform: scale(1.1); }
+    20% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); } }
+@-moz-keyframes pulse {
+    0% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); }
+    10% {
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        -o-transform: scale(1.1);
+        transform: scale(1.1); }
+    20% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); } }
+@keyframes pulse {
+    0% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); }
+    10% {
+        -webkit-transform: scale(1.1);
+        -moz-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        -o-transform: scale(1.1);
+        transform: scale(1.1); }
+    20% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1); } }
+.dropzone, .dropzone * {
+    box-sizing: border-box; }
+
+.dropzone {
+    min-height: 150px;
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    background: white;
+    padding: 20px 20px; }
+.dropzone.dz-clickable {
+    cursor: pointer; }
+.dropzone.dz-clickable * {
+    cursor: default; }
+.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
+    cursor: pointer; }
+.dropzone.dz-started .dz-message {
+    display: none; }
+.dropzone.dz-drag-hover {
+    border-style: solid; }
+.dropzone.dz-drag-hover .dz-message {
+    opacity: 0.5; }
+.dropzone .dz-message {
+    text-align: center;
+    margin: 2em 0; }
+.dropzone .dz-message .dz-button {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit; }
+.dropzone .dz-preview {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    margin: 16px;
+    min-height: 100px; }
+.dropzone .dz-preview:hover {
+    z-index: 1000; }
+.dropzone .dz-preview:hover .dz-details {
+    opacity: 1; }
+.dropzone .dz-preview.dz-file-preview .dz-image {
+    border-radius: 20px;
+    background: #999;
+    background: linear-gradient(to bottom, #eee, #ddd); }
+.dropzone .dz-preview.dz-file-preview .dz-details {
+    opacity: 1; }
+.dropzone .dz-preview.dz-image-preview {
+    background: white; }
+.dropzone .dz-preview.dz-image-preview .dz-details {
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    -ms-transition: opacity 0.2s linear;
+    -o-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear; }
+.dropzone .dz-preview .dz-remove {
+    font-size: 14px;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+    border: none; }
+.dropzone .dz-preview .dz-remove:hover {
+    text-decoration: underline; }
+.dropzone .dz-preview:hover .dz-details {
+    opacity: 1; }
+.dropzone .dz-preview .dz-details {
+    z-index: 20;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    font-size: 13px;
+    min-width: 100%;
+    max-width: 100%;
+    padding: 2em 1em;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.9);
+    line-height: 150%; }
+.dropzone .dz-preview .dz-details .dz-size {
+    margin-bottom: 1em;
+    font-size: 16px; }
+.dropzone .dz-preview .dz-details .dz-filename {
+    white-space: nowrap; }
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+    border: 1px solid rgba(200, 200, 200, 0.8);
+    background-color: rgba(255, 255, 255, 0.8); }
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+    overflow: hidden;
+    text-overflow: ellipsis; }
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+    border: 1px solid transparent; }
+.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
+    background-color: rgba(255, 255, 255, 0.4);
+    padding: 0 0.4em;
+    border-radius: 3px; }
+.dropzone .dz-preview:hover .dz-image img {
+    -webkit-transform: scale(1.05, 1.05);
+    -moz-transform: scale(1.05, 1.05);
+    -ms-transform: scale(1.05, 1.05);
+    -o-transform: scale(1.05, 1.05);
+    transform: scale(1.05, 1.05);
+    -webkit-filter: blur(8px);
+    filter: blur(8px); }
+.dropzone .dz-preview .dz-image {
+    border-radius: 20px;
+    overflow: hidden;
+    width: 120px;
+    height: 120px;
+    position: relative;
+    display: block;
+    z-index: 10; }
+.dropzone .dz-preview .dz-image img {
+    display: block; }
+.dropzone .dz-preview.dz-success .dz-success-mark {
+    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
+.dropzone .dz-preview.dz-error .dz-error-mark {
+    opacity: 1;
+    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
+.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
+    pointer-events: none;
+    opacity: 0;
+    z-index: 500;
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    margin-left: -27px;
+    margin-top: -27px; }
+.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
+    display: block;
+    width: 54px;
+    height: 54px; }
+.dropzone .dz-preview.dz-processing .dz-progress {
+    opacity: 1;
+    -webkit-transition: all 0.2s linear;
+    -moz-transition: all 0.2s linear;
+    -ms-transition: all 0.2s linear;
+    -o-transition: all 0.2s linear;
+    transition: all 0.2s linear; }
+.dropzone .dz-preview.dz-complete .dz-progress {
+    opacity: 0;
+    -webkit-transition: opacity 0.4s ease-in;
+    -moz-transition: opacity 0.4s ease-in;
+    -ms-transition: opacity 0.4s ease-in;
+    -o-transition: opacity 0.4s ease-in;
+    transition: opacity 0.4s ease-in; }
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+    -webkit-animation: pulse 6s ease infinite;
+    -moz-animation: pulse 6s ease infinite;
+    -ms-animation: pulse 6s ease infinite;
+    -o-animation: pulse 6s ease infinite;
+    animation: pulse 6s ease infinite; }
+.dropzone .dz-preview .dz-progress {
+    opacity: 1;
+    z-index: 1000;
+    pointer-events: none;
+    position: absolute;
+    height: 16px;
+    left: 50%;
+    top: 50%;
+    margin-top: -8px;
+    width: 80px;
+    margin-left: -40px;
+    background: rgba(255, 255, 255, 0.9);
+    -webkit-transform: scale(1);
+    border-radius: 8px;
+    overflow: hidden; }
+.dropzone .dz-preview .dz-progress .dz-upload {
+    background: #333;
+    background: linear-gradient(to bottom, #666, #444);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    -webkit-transition: width 300ms ease-in-out;
+    -moz-transition: width 300ms ease-in-out;
+    -ms-transition: width 300ms ease-in-out;
+    -o-transition: width 300ms ease-in-out;
+    transition: width 300ms ease-in-out; }
+.dropzone .dz-preview.dz-error .dz-error-message {
+    display: block; }
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+    opacity: 1;
+    pointer-events: auto; }
+.dropzone .dz-preview .dz-error-message {
+    pointer-events: none;
+    z-index: 1000;
+    position: absolute;
+    display: block;
+    display: none;
+    opacity: 0;
+    -webkit-transition: opacity 0.3s ease;
+    -moz-transition: opacity 0.3s ease;
+    -ms-transition: opacity 0.3s ease;
+    -o-transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease;
+    border-radius: 8px;
+    font-size: 13px;
+    top: 130px;
+    left: -10px;
+    width: 140px;
+    background: #be2626;
+    background: linear-gradient(to bottom, #be2626, #a92222);
+    padding: 0.5em 1.2em;
+    color: white; }
+.dropzone .dz-preview .dz-error-message:after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 64px;
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #be2626; }
\ No newline at end of file

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
+        // Default Toasters
+        @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
+        // Session Toasters
+        @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
 
     })