Merge pull request #12883 from xundeenergie/easy-image-attach

[frio] Easy image attach
This commit is contained in:
Hypolite Petovan 2023-03-19 19:10:53 -04:00 committed by GitHub
commit 7f4d399fc8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 635 additions and 34 deletions

View file

@ -29,6 +29,7 @@
"asika/simple-console": "^1.0",
"bacon/bacon-qr-code": "^2.0.0",
"divineomega/password_exposed": "^2.8",
"enyo/dropzone": "^5.9",
"ezyang/htmlpurifier": "^4.7",
"friendica/json-ld": "^1.0",
"geekwright/po": "^2.0",

38
composer.lock generated
View file

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "5af9ac9003f4653f3aa1860dd5a4d821",
"content-hash": "c9e005c79c8556215c30a66c470659eb",
"packages": [
{
"name": "asika/simple-console",
@ -550,6 +550,42 @@
"description": "This PHP package provides a `password_exposed` helper function, that uses the haveibeenpwned.com API to check if a password has been exposed in a data breach.",
"time": "2019-01-25T12:00:28+00:00"
},
{
"name": "enyo/dropzone",
"version": "v5.9.3",
"source": {
"type": "git",
"url": "https://github.com/dropzone/dropzone-packagist.git",
"reference": "286b2dc1f1195bd12169e4c9d5f91cfbe46e245f"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/dropzone/dropzone-packagist/zipball/286b2dc1f1195bd12169e4c9d5f91cfbe46e245f",
"reference": "286b2dc1f1195bd12169e4c9d5f91cfbe46e245f",
"shasum": ""
},
"type": "library",
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Matias Meno",
"email": "m@tias.me",
"homepage": "http://www.yesmeno.com"
}
],
"description": "Handles drag and drop of files for you.",
"homepage": "http://www.dropzonejs.com",
"keywords": [
"drag and drop",
"dragndrop",
"file upload",
"upload"
],
"time": "2021-09-21T17:03:36+00:00"
},
{
"name": "ezyang/htmlpurifier",
"version": "v4.14.0",

View file

@ -1139,7 +1139,7 @@ function photos_content(App $a)
'$preview' => DI::l10n()->t('Preview'),
'$loading' => DI::l10n()->t('Loading...'),
'$qcomment' => $qcomment,
'$rand_num' => Crypto::randomDigits(12)
'$rand_num' => Crypto::randomDigits(12),
]);
}
}
@ -1194,7 +1194,7 @@ function photos_content(App $a)
'$submit' => DI::l10n()->t('Submit'),
'$preview' => DI::l10n()->t('Preview'),
'$qcomment' => $qcomment,
'$rand_num' => Crypto::randomDigits(12)
'$rand_num' => Crypto::randomDigits(12),
]);
}
@ -1268,7 +1268,7 @@ function photos_content(App $a)
'$submit' => DI::l10n()->t('Submit'),
'$preview' => DI::l10n()->t('Preview'),
'$qcomment' => $qcomment,
'$rand_num' => Crypto::randomDigits(12)
'$rand_num' => Crypto::randomDigits(12),
]);
}
}

View file

@ -253,11 +253,14 @@ class Page implements ArrayAccess
'$touch_icon' => $touch_icon,
'$block_public' => intval($config->get('system', 'block_public')),
'$stylesheets' => $this->stylesheets,
'$likeError' => $l10n->t('Like not successfull'),
'$dislikeError' => $l10n->t('Dislike not successfull'),
'$announceError' => $l10n->t('Sharing not successfull'),
'$srvError' => $l10n->t('Backend error'),
'$netError' => $l10n->t('Network error'),
'$likeError' => $l10n->t('Like not successfull'),
'$dislikeError' => $l10n->t('Dislike not successfull'),
'$announceError' => $l10n->t('Sharing not successfull'),
'$srvError' => $l10n->t('Backend error'),
'$netError' => $l10n->t('Network error'),
// Dropzone
'$max_imagesize' => round(\Friendica\Util\Strings::getBytesFromShorthand($config->get('system', 'maximagesize')) / 1000000, 1),
]) . $this->page['htmlhead'];
}

View file

@ -0,0 +1,63 @@
var DzFactory = function () {
this.createDropzone = function(dropSelector, textareaElementId) {
return new Dropzone(dropSelector, {
paramName: 'userfile', // The name that will be used to transfer the file
maxFilesize: max_imagesize, // MB
url: '/media/photo/upload?album=',
acceptedFiles: 'image/*',
clickable: true,
accept: function(file, done) {
done();
},
init: function() {
this.on('success', function(file, serverResponse) {
const targetTextarea = document.getElementById(textareaElementId);
if (targetTextarea.setRangeText) {
//if setRangeText function is supported by current browser
targetTextarea.setRangeText(' ' + $.trim(serverResponse) + ' ');
} else {
targetTextarea.focus();
document.execCommand('insertText', false /*no UI*/, '\n' + $.trim(serverResponse) + '\n');
}
});
this.on('complete', function(file) {
const dz = this;
// 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
setTimeout(function(){
dz.removeFile(file);
},5000);
});
},
paste: function(event){
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
items.forEach((item) => {
if (item.kind === 'file') {
// adds the file to your dropzone instance
dz.addFile(item.getAsFile());
}
})
},
});
};
this.copyPaste = function(event, dz) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
items.forEach((item) => {
if (item.kind === 'file') {
// adds the file to your dropzone instance
dz.addFile(item.getAsFile());
}
})
};
this.setupDropzone = function(dropSelector, textareaElementId) {
var dropzone = this.createDropzone(dropSelector, textareaElementId);
$(dropSelector).on('paste', function(event) {
dzFactory.copyPaste(event, dropzone);
})
};
}

View file

@ -1,11 +1,11 @@
<div class="generic-page-wrapper">
<h2>{{$l10n.compose_title}}</h2>
{{if $l10n.always_open_compose}}
{{if $l10n.always_open_compose}}
<p>{{$l10n.always_open_compose nofilter}}</p>
{{/if}}
<div id="profile-jot-wrapper">
<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="return" value="{{$return_path}}" />-->*}}
<input type="hidden" name="post_id_random" value="{{$rand_num}}" />
<input type="hidden" name="post_type" value="{{$posttype}}" />
<input type="hidden" name="wall" value="{{$wall}}" />
@ -13,11 +13,11 @@
<div id="jot-title-wrap">
<input type="text" name="title" id="jot-title" class="jothidden jotforms form-control" placeholder="{{$l10n.placeholdertitle}}" title="{{$l10n.placeholdertitle}}" value="{{$title}}" tabindex="1" dir="auto" />
</div>
{{if $l10n.placeholdercategory}}
{{if $l10n.placeholdercategory}}
<div id="jot-category-wrap">
<input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$l10n.placeholdercategory}}" title="{{$l10n.placeholdercategory}}" value="{{$category}}" tabindex="2" dir="auto" />
</div>
{{/if}}
{{/if}}
<p class="comment-edit-bb-{{$id}} comment-icon-list">
<span>
@ -46,21 +46,22 @@
</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" style="overflow:scroll">
<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">
<input type="text" name="location" class="form-control" id="jot-location" value="{{$location}}" placeholder="{{$l10n.location_set}}"/>
<button type="button" class="btn btn-sm template-icon" id="profile-location"
data-title-set="{{$l10n.location_set}}"
data-title-disabled="{{$l10n.location_disabled}}"
data-title-unavailable="{{$l10n.location_unavailable}}"
data-title-clear="{{$l10n.location_clear}}"
title="{{$l10n.location_set}}"
tabindex="6">
data-title-set="{{$l10n.location_set}}"
data-title-disabled="{{$l10n.location_disabled}}"
data-title-unavailable="{{$l10n.location_unavailable}}"
data-title-clear="{{$l10n.location_clear}}"
title="{{$l10n.location_set}}"
tabindex="6">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</button>
</span>
@ -94,3 +95,6 @@
</form>
</div>
</div>
<script>
dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
</script>

View file

@ -0,0 +1,467 @@
@-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: 1px solid rgba(0, 0, 0, 0.3);
background: white;
padding: 2px 2px;
}
.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;
}
.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;
}

File diff suppressed because one or more lines are too long

View file

@ -291,6 +291,10 @@ function editpost(url) {
$("#profile-jot-form #jot-category-wrap").hide();
}
// To make dropzone fileupload work on editing a comment, we need to
// attach a new dropzone to modal
dzFactory.setupDropzone('#jot-text-wrap', 'profile-jot-text');
modal.show();
$("#jot-popup").show();
linkPreview = $("#profile-jot-text").linkPreview();

View file

@ -37,12 +37,14 @@
<i class="fa fa-quote-left"></i>
</button>
</span>
</p>
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}" dir="auto">{{$default}}</textarea>
</p>
{{if $qcomment}}
<p>
</p>
<div id="dropzone-{{$id}}" class="dropzone" style="overflow:scroll">
<p>
<textarea id="comment-edit-text-{{$id}}" class="dropzone comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}" dir="auto">{{$default}}</textarea>
</p>
</div>
{{if $qcomment}}
<p>
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option>
{{foreach $qcomment as $qc}}
@ -51,7 +53,6 @@
</select>
</p>
{{/if}}
<p class="comment-edit-submit-wrapper">
{{if $preview}}
<button type="button" class="btn btn-default comment-edit-preview" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
@ -64,3 +65,15 @@
<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
</div>
<script>
$('[id=comment-fake-text-{{$id}}]').on('focus', function() {
dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
$('[id=comment-fake-text-{{$id}}]').prop('focus', null).off('focus');
$('[id=comment-{{$id}}]').prop('click', null).off('click');
});
$('[id=comment-{{$id}}]').on('click', function() {
dzFactory.setupDropzone('#dropzone-{{$id}}', 'comment-edit-text-{{$id}}');
$('[id=comment-fake-text-{{$id}}]').prop('focus', null).off('focus');
$('[id=comment-{{$id}}]').prop('click', null).off('click');
});
</script>

View file

@ -55,6 +55,8 @@
media="screen" />
<link rel="stylesheet" href="view/theme/frio/css/font-awesome.custom.css?v={{$smarty.const.FRIENDICA_VERSION}}"
type="text/css" media="screen" />
<link rel="stylesheet" href="view/theme/frio/css/dropzone.min.frio.css?v={{$smarty.const.FRIENDICA_VERSION}}"
type="text/css" media="screen" />
{{foreach $stylesheets as $stylesheetUrl => $media}}
<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="{{$media}}" />
@ -137,6 +139,9 @@
<script type="text/javascript" src="view/theme/frio/js/hovercard.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
{{/if}}
<script type="text/javascript" src="view/theme/frio/js/textedit.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
<script type="text/javascript" src="vendor/enyo/dropzone/dist/min/dropzone.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
<script type="text/javascript" src="view/js/dropzone-factory.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
<script type="text/javascript"> max_imagesize = {{$max_imagesize}}; var dzFactory = new DzFactory(); Dropzone.autoDiscover = false; </script>
{{* Include the strings which are needed for some js functions (e.g. translation)
They are loaded into the html <head> so that js functions can use them *}}

View file

@ -99,7 +99,7 @@
{{/if}}
{{* The jot text field in which the post text is inserted *}}
<div id="jot-text-wrap">
<div id="jot-text-wrap" class="dropzone" style="overflow:scroll">
<textarea rows="2" cols="64" class="profile-jot-text form-control text-autosize" id="profile-jot-text" name="body" placeholder="{{$share}}" onFocus="jotTextOpenUI(this);" onBlur="jotTextCloseUI(this);" style="min-width:100%; max-width:100%;" dir="auto">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
</div>
@ -152,6 +152,7 @@
<div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
</form>
<div id="dz-preview-jot" class="dropzone-preview"></div>
{{if $content}}<script type="text/javascript">initEditor();</script>{{/if}}
</div>
@ -162,9 +163,9 @@
{{* The jot modal - We use a own modal for the jot and not the standard modal
from the page template. This is because the special structure of the jot
(e.g.jot navigation tabs in the modal titel area).
The in the frio theme the jot will loaded regulary and is hidden by default.)
Then in the frio theme the jot will loaded regulary and is hidden by default.)
The js function jotShow() loads the jot into the modal. With this structure we
can load different content into the jot moadl (e.g. the item edit jot)
can load different content into the jot modal (e.g. the item edit jot)
*}}
<div id="jot-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
@ -172,9 +173,12 @@ can load different content into the jot moadl (e.g. the item edit jot)
</div>
</div>
<script type="text/javascript">
$('iframe').load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
</script>
<script>
dzFactory.setupDropzone('#jot-text-wrap', 'profile-jot-text');
</script>