Skip to content

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

SERV-2286 - dropzone element

parent 362d1253
Show 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 ...@@ -11,8 +11,10 @@ Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any
Dropzone.autoDiscover = false; Dropzone.autoDiscover = false;
$(document).off('click touchstart', '[data-dz-delete]'); $(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); console.log(e);
// Prevent Click... // Prevent Click...
e.preventDefault(); e.preventDefault();
...@@ -24,12 +26,12 @@ $(document).on('click touchstart', '[data-dz-delete]', function (e) ...@@ -24,12 +26,12 @@ $(document).on('click touchstart', '[data-dz-delete]', function (e)
instance.get().on('pnotify.confirm', function() { instance.get().on('pnotify.confirm', function() {
// Get trigger for backend. // Get trigger for backend.
$.get($(this).attr('href'), function (data) { $.get(file.attr('href'), function (data) {
console.log("Data Loaded: " + data); console.log("Data Loaded: " + data);
}); });
// Remove image // Remove image
$(this).parents('[dz-container]').hide(); file.parents('[dz-container]').hide();
}) })
// On cancel // On cancel
...@@ -41,46 +43,57 @@ $(document).on('click', '.DropzoneButton', function(e) { ...@@ -41,46 +43,57 @@ $(document).on('click', '.DropzoneButton', function(e) {
e.preventDefault(); e.preventDefault();
}) })
function init() { function init() {
let templateId = 'LimitlessDropzoneTemplate';
setDropzoneButtons(); setDropzoneButtons();
setDropzoneTemplate(); setDropzone(templateId);
setDropzone();
} }
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; let counter = 0;
$('.LimitlessDropzoneTemplate').each(function() { $('.DropzoneButton').each(function() {
counter++; counter++;
let element = $(this); let buttonElement = $(this);
element.attr('id', 'LimitlessDropzoneTemplate' + counter); buttonElement.attr('id', 'DropzoneButton' + counter);
}); });
} }
function setDropzone() { function setDropzone(templateId) {
let counter = 0; let counter = 0;
$('.LimitlessDropzone').each(function() { $('.LimitlessDropzone').each(function() {
let element = $(this); let element = $(this);
let additionalConfig = element.attr('data-config') ?? 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')) : null; let files = element.attr('data-files') ? JSON.parse(element.attr('data-files')) : [];
counter++; counter++;
// adds auto generated id if element has no id // adds auto generated id if element has no id
...@@ -101,7 +114,7 @@ function setDropzone() { ...@@ -101,7 +114,7 @@ function setDropzone() {
thumbnailWidth: 120, thumbnailWidth: 120,
thumbnailHeight: 100, thumbnailHeight: 100,
acceptedFiles: "image/*,application/pdf", acceptedFiles: "image/*,application/pdf",
previewTemplate: $('.LimitlessDropzoneTemplate:first').innerHTML, previewTemplate: document.getElementById(templateId).innerHTML,
autoProcessQueue: true, autoProcessQueue: true,
clickable:'#DropzoneButton' + counter, clickable:'#DropzoneButton' + counter,
success: function (file, response) { success: function (file, response) {
...@@ -123,8 +136,6 @@ function setDropzone() { ...@@ -123,8 +136,6 @@ function setDropzone() {
'border': '1px solid #ff0000' 'border': '1px solid #ff0000'
}); });
console.log(response);
// Greyscale thumbnail on error. // Greyscale thumbnail on error.
obj.find('img').css({ obj.find('img').css({
'-webkit-filter': 'grayscale(100%)', '-webkit-filter': 'grayscale(100%)',
...@@ -174,8 +185,12 @@ function setDropzone() { ...@@ -174,8 +185,12 @@ function setDropzone() {
}, },
error: function (file, response) { error: function (file, response) {
console.log(response);
if(response.message == '') response.message = '"dropconfig" URL nicht gefunden.';
// Error Message // Error Message
limitlessNotification.set('', file.name + ": " + response, 'error'); limitlessNotification.set('', file.name + ": " + response.message, 'error');
// Greyscale thumbnail on error. // Greyscale thumbnail on error.
$(file.previewTemplate).find('img').css({ $(file.previewTemplate).find('img').css({
...@@ -198,10 +213,10 @@ function setDropzone() { ...@@ -198,10 +213,10 @@ function setDropzone() {
additionalConfig additionalConfig
); );
console.log(DZ);
// Start dropzone. // Start dropzone.
element.dropzone(DZ); element.dropzone(DZ);
initFiles(files , element.attr('id'), templateId);
}); });
} }
......
src/Views/Limitless/Dropzone/Config.php
View file @ 9a849b0d
...@@ -42,13 +42,12 @@ ...@@ -42,13 +42,12 @@
$this->assetAllocation = [ $this->assetAllocation = [
'Limitless::Dropzone' => [ 'Limitless::Dropzone' => [
'Attachments/dropzone.js', 'Attachments/dropzone.js',
'Attachments/dropzone.css',
'Attachments/dropzone.init.js', 'Attachments/dropzone.init.js',
'Attachments/dropzone.css'
] ]
]; ];
} }
/* /*
|-------------------------------------------------------------------------------------------- |--------------------------------------------------------------------------------------------
| Method "dropzone" | Method "dropzone"
...@@ -58,9 +57,9 @@ ...@@ -58,9 +57,9 @@
{ {
return View('Limitless::Dropzone.Dropzone') return View('Limitless::Dropzone.Dropzone')
->withId($parameters['id'] ?? null) ->withId($parameters['id'] ?? null)
->withButtonText($parameters['button-text'] ?? 'No Text') ->withButtonText($parameters['buttontext'] ?? 'No Text')
->withFiles($parameters['files'] ?? null) ->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 @@ ...@@ -4,8 +4,82 @@
@section('Limitless::Content') @section('Limitless::Content')
@Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22']) @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 @Limitless::CardStop
@stop @stop
src/Views/Limitless/Dropzone/Dropzone.blade.php
View file @ 9a849b0d
<form @if($id) id="{{ $id }}" @endif <div id="LimitlessDropzoneTemplate" style="display:none">
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 dz-container="true" style="flex-grow: 1; min-width:220px;">
<div class="card-body" style="padding: 7px;"> <div class="card-body" style="padding: 7px;">
<div class="d-flex align-items-start flex-nowrap" style="border: 1px solid #00bcd4; padding:5px;"> <div class="d-flex align-items-start flex-nowrap" style="border: 1px solid #00bcd4; padding:5px;">
...@@ -13,7 +7,9 @@ ...@@ -13,7 +7,9 @@
<div class="font-weight-semibold mr-2"> <div class="font-weight-semibold mr-2">
<div class="card-img-actions" style="width:130px; height:110px;"> <div class="card-img-actions" style="width:130px; height:110px;">
<a data-dz-source target="_blank" href="#"> <a data-dz-source target="_blank" href="#">
<img style="margin:5px; width:120px; height:100px;" data-dz-thumbnail alt=""> <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> <span class="card-img-actions-overlay card-img"><i class="icon-search4 icon-2x"></i></span>
</a> </a>
</div> </div>
...@@ -29,11 +25,14 @@ ...@@ -29,11 +25,14 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endforeach
@endif
<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"> <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 }} <b><i class="icon-drawer-in"></i></b> {{ $buttonText }}
</button> </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