Merge pull request #12883 from xundeenergie/easy-image-attach
[frio] Easy image attach
This commit is contained in:
Hypolite Petovan
GitHub
commit
7f4d399fc8
12 changed files with 635 additions and 34 deletions
|
|
@ -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
38
composer.lock
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
}
|
||||
|
||||
|
|
|
|||
63
view/js/dropzone-factory.js
Normal file
63
view/js/dropzone-factory.js
Normal 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);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
467
view/theme/frio/css/dropzone.frio.css
Normal file
467
view/theme/frio/css/dropzone.frio.css
Normal 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;
|
||||
}
|
||||
1
view/theme/frio/css/dropzone.min.frio.css
Normal file
1
view/theme/frio/css/dropzone.min.frio.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 *}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue