bitPickups/friendica_2020-09-1_sharedHosting
1
0
Fork 0
Code Pull requests Activity

improve image-upload

Browse source 
* create dropzone for editing in jot-modal
* customize css for dropzone to make it more beautiful (smaller
  margin/paddings...)
* change position of dropzone-element dircetly to textarea, so button
  for upload is small and under textarea (it's more clear)
* remove previews after upload. this shows the upload-progress, but
  preview is not needed after upload. you can't do anything with the
  preview, and dialog gets too big. You see successful upload, when
  bb-code link to image is inserted on cursor-position in textarea
This commit is contained in:
Jakobus Schürz 2023-03-14 10:38:03 +01:00
commit 2403932a83
7 changed files with 563 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

27
view/templates/item/compose.tpl
View file

@ -4,7 +4,7 @@
<p>{{$l10n.always_open_compose nofilter}}</p>
{{/if}}
<div id="profile-jot-wrapper">
<form class="comment-edit-form dropzone" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="compose/{{$type}}" method="post">
<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="compose/{{$type}}" method="post">
{{*<!--<input type="hidden" name="return" value="{{$return_path}}" />-->*}}
<input type="hidden" name="post_id_random" value="{{$rand_num}}" />
<input type="hidden" name="post_type" value="{{$posttype}}" />
@ -46,10 +46,11 @@
</button>
</span>
</p>
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto">{{$body}}</textarea>
</p>
<div id="dropzone-{{$id}}" class="dropzone">
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize" name="body" placeholder="{{$l10n.default}}" rows="7" tabindex="3" dir="auto" dir="auto">{{$body}}</textarea>
</p>
</div>
<p class="comment-edit-submit-wrapper">
{{if $type == 'post'}}
<span role="presentation" class="form-inline">
@ -71,7 +72,6 @@
<span role="presentation" id="character-counter" class="grey text-info"></span>
<button type="button" class="btn btn-defaul" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
<button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
<div id="dz-previewsCompose" class="dropzone-previews"></div>
</p>
<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
@ -99,12 +99,9 @@
// getMByte() is from view/theme/frio/js/dropzone-frio.js
// to workaround dysfunctional php Strings:getBytesFromShorthand
Dropzone.autoDiscover = false;
var dropzoneCompose = new Dropzone( '#comment-edit-form-{{$id}}', {
var dropzoneCompose = new Dropzone( '#dropzone-{{$id}}', {
paramName: "userfile", // The name that will be used to transfer the file
maxFilesize: getMBytes('{{$max_imagesize}}'), // MB
previewsContainer: '#dz-previewsCompose',
preventDuplicates: true,
clickable: true,
url: "/media/photo/upload?response=url&album=",
accept: function(file, done) {
done();
@ -121,10 +118,18 @@
document.execCommand('insertText', false /*no UI*/, $.trim(resp));
}
});
this.on("complete", function(file) {
// Remove just uploaded file from dropzone, makes interface more clear.
// Image can be seen in posting-preview
// We need preview to get optical feedback about upload-progress.
// you see success, when the bb-code link for image is inserted
this.removeFile(file);
});
},
});
$('#comment-edit-form-{{$id}}').on('paste', function(event){
// Enables Copy&Paste for this dropzone
$('#dropzone-{{$id}}').on('paste', function(event){
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
items.forEach((item) => {
if (item.kind === 'file') {