Skip to content

S
sidekick
Commit 9a849b0d authored by Kevin Yumang's avatar Kevin Yumang
Browse files
Options

SERV-2286 - dropzone element

parent 362d1253
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 62 deletions
src/Views/Limitless/Dropzone/Attachments/dropzone.init.js
View file @ 9a849b0d
......@@ -11,8 +11,10 @@ Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any
Dropzone.autoDiscover = false;
$(document).off('click touchstart', '[data-dz-delete]');
$(document).on('click touchstart', '[data-dz-delete]', function (e)
{
$(document).on('click touchstart', '[data-dz-delete]', function (e) {
let file = $(this);
console.log(e);
// Prevent Click...
e.preventDefault();
......@@ -24,12 +26,12 @@ $(document).on('click touchstart', '[data-dz-delete]', function (e)
instance.get().on('pnotify.confirm', function() {
// Get trigger for backend.
$.get($(this).attr('href'), function (data) {
$.get(file.attr('href'), function (data) {
console.log("Data Loaded: " + data);
});
// Remove image
$(this).parents('[dz-container]').hide();
file.parents('[dz-container]').hide();
})
// On cancel
......@@ -41,46 +43,57 @@ $(document).on('click', '.DropzoneButton', function(e) {
e.preventDefault();
})
function init() {
let templateId = 'LimitlessDropzoneTemplate';
setDropzoneButtons();
setDropzoneTemplate();
setDropzone();
setDropzone(templateId);
}
function setDropzoneButtons() {
function initFiles(files, dropzoneId, templateId) {
let counter = 0;
if(files.length == 0) return;
files.forEach(function(file) {
let templateObject = $('#' + templateId).clone();
templateObject.show();
templateObject.find('img').attr('src', file.thumbnailurl);
templateObject.find('[data-dz-source]').attr('href', file.sourceurl);
templateObject.find('[data-dz-delete]').attr('href', file.deleteurl);
templateObject.find('[data-dz-name]').html(file.filename);
templateObject.find('[data-dz-size]').html(file.filesize);
templateObject.find('.align-items-start').css({'border':'1px dotted #888888'});
$('#' + dropzoneId).append(templateObject.html());
$('.DropzoneButton').each(function() {
counter++;
let buttonElement = $(this);
buttonElement.attr('id', 'DropzoneButton' + counter);
});
}
function setDropzoneTemplate() {
function setDropzoneButtons() {
let counter = 0;
$('.LimitlessDropzoneTemplate').each(function() {
$('.DropzoneButton').each(function() {
counter++;
let element = $(this);
element.attr('id', 'LimitlessDropzoneTemplate' + counter);
let buttonElement = $(this);
buttonElement.attr('id', 'DropzoneButton' + counter);
});
}
function setDropzone() {
function setDropzone(templateId) {
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;
let additionalConfig = element.attr('data-config') ? JSON.parse(element.attr('data-config')) : [];
let files = element.attr('data-files') ? JSON.parse(element.attr('data-files')) : [];
counter++;
// adds auto generated id if element has no id
......@@ -101,7 +114,7 @@ function setDropzone() {
thumbnailWidth: 120,
thumbnailHeight: 100,
acceptedFiles: "image/*,application/pdf",
previewTemplate: $('.LimitlessDropzoneTemplate:first').innerHTML,
previewTemplate: document.getElementById(templateId).innerHTML,
autoProcessQueue: true,
clickable:'#DropzoneButton' + counter,
success: function (file, response) {
......@@ -123,8 +136,6 @@ function setDropzone() {
'border': '1px solid #ff0000'
});
console.log(response);
// Greyscale thumbnail on error.
obj.find('img').css({
'-webkit-filter': 'grayscale(100%)',
......@@ -174,8 +185,12 @@ function setDropzone() {
},
error: function (file, response) {
console.log(response);
if(response.message == '') response.message = '"dropconfig" URL nicht gefunden.';
// Error Message
limitlessNotification.set('', file.name + ": " + response, 'error');
limitlessNotification.set('', file.name + ": " + response.message, 'error');
// Greyscale thumbnail on error.
$(file.previewTemplate).find('img').css({
......@@ -198,10 +213,10 @@ function setDropzone() {
additionalConfig
);
console.log(DZ);
// Start dropzone.
element.dropzone(DZ);
initFiles(files , element.attr('id'), templateId);
});
}
......
src/Views/Limitless/Dropzone/Config.php
View file @ 9a849b0d
......@@ -42,13 +42,12 @@
$this->assetAllocation = [
'Limitless::Dropzone' => [
'Attachments/dropzone.js',
'Attachments/dropzone.css',
'Attachments/dropzone.init.js',
'Attachments/dropzone.css'
]
];
}
/*
|--------------------------------------------------------------------------------------------
| Method "dropzone"
......@@ -58,9 +57,9 @@
{
return View('Limitless::Dropzone.Dropzone')
->withId($parameters['id'] ?? null)
->withButtonText($parameters['button-text'] ?? 'No Text')
->withButtonText($parameters['buttontext'] ?? 'No Text')
->withFiles($parameters['files'] ?? null)
->withDropConfig($parameters['drop-config'] ?? null);
->withConfig($parameters['dropconfig'] ?? null);
}
......
src/Views/Limitless/Dropzone/Documentation/Index.blade.php
View file @ 9a849b0d
......@@ -4,8 +4,82 @@
@section('Limitless::Content')
@Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
@Limitless::Dropzone
@Limitless::Dropzone
@Limitless::Dropzone([
'id' => 'MyDropzone1',
'files' => [
[
'sourceurl' => 'https://i.picsum.photos/id/254/200/300.jpg?hmac=VoOUXxjWvbLuWPBSHy_pbMAoLSYCaO-3drnOhwvA2yY',
'thumbnailurl' => 'https://i.picsum.photos/id/254/200/300.jpg?hmac=VoOUXxjWvbLuWPBSHy_pbMAoLSYCaO-3drnOhwvA2yY',
'deleteurl' => secure_url('/delete'),
'filesize' => '0.002 MB',
'filename' => 'MyFileName 1'
],
[
'sourceurl' => 'https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8',
'thumbnailurl' => 'https://i.picsum.photos/id/542/200/300.jpg?hmac=qD8M4ejDPlEc69pGT21BzB7CDiWOcElb_Ke7V8POjm8',
'deleteurl' => secure_url('/delete'),
'filesize' => '0.003 MB',
'filename' => 'MyFileName 2'
],
[
'sourceurl' => 'https://i.picsum.photos/id/774/200/300.jpg?hmac=HLVTa6awH1Il_dvZGTiqNsqGiyR5RgPXTkD_pBW9L48',
'thumbnailurl' => 'https://i.picsum.photos/id/774/200/300.jpg?hmac=HLVTa6awH1Il_dvZGTiqNsqGiyR5RgPXTkD_pBW9L48',
'deleteurl' => secure_url('/delete'),
'filesize' => '0.004 MB',
'filename' => 'MyFileName 3'
]
],
'buttontext' => 'Dropzone 1',
'dropconfig' => [
'maxFileSize' => 20,
'url' => secure_url('/upload'),
'params' => [
'Token' => @csrf
]
]
])
@Limitless::Dropzone([
'id' => 'MyDropzone2',
'files' => [
[
'sourceurl' => 'https://i.picsum.photos/id/94/200/300.jpg?hmac=CA7x5S3EdSeRqM9TK0RxiKTcx1R96lIncvKTjTP3beI',
'thumbnailurl' => 'https://i.picsum.photos/id/94/200/300.jpg?hmac=CA7x5S3EdSeRqM9TK0RxiKTcx1R96lIncvKTjTP3beI',
'deleteurl' => secure_url('/delete'),
'filesize' => '1 MB',
'filename' => 'MyFileName 4'
],
[
'sourceurl' => 'https://i.picsum.photos/id/574/200/300.jpg?hmac=8A2sOGZU1xgRXI46snJ80xNY3Yx-KcLVsBG-wRchwFg',
'thumbnailurl' => 'https://i.picsum.photos/id/574/200/300.jpg?hmac=8A2sOGZU1xgRXI46snJ80xNY3Yx-KcLVsBG-wRchwFg',
'deleteurl' => secure_url('/delete'),
'filesize' => '0.5 MB',
'filename' => 'MyFileName 5'
],
[
'sourceurl' => 'https://i.picsum.photos/id/546/200/300.jpg?hmac=WRVm_tMObPuM2HqJCr5D6N59Mboh73aqEno4MCuu5AE',
'thumbnailurl' => 'https://i.picsum.photos/id/546/200/300.jpg?hmac=WRVm_tMObPuM2HqJCr5D6N59Mboh73aqEno4MCuu5AE',
'deleteurl' => secure_url('/delete'),
'filesize' => '0.7 MB',
'filename' => 'MyFileName 6'
]
],
'buttontext' => 'Dropzone 2',
'dropconfig' => [
'maxFileSize' => 20,
'url' => secure_url('/upload'),
'params' => [
'Token' => @csrf
]
]
])
@Limitless::Dropzone([
'dropconfig' => [
'url' => '/upload',
]
])
@Limitless::CardStop
@stop
src/Views/Limitless/Dropzone/Dropzone.blade.php
View file @ 9a849b0d
<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 id="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>
@endforeach
@endif
</div>
</div>
</div>
<div @if($id) id="{{ $id }}" @endif
class="LimitlessDropzone d-flex flex-wrap align-items-stretch flex-row"
@if($config) data-config="{{ json_encode($config) }}" @endif
@if($files) data-files="{{ json_encode($files) }}" @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>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment