From 8c772fa01d0472977b4c1da29666f21b2b15bba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakobus=20Sch=C3=BCrz?= <jakobus.schuerz@schuerz.at>
Date: Wed, 15 Mar 2023 04:46:46 +0100
Subject: [PATCH 1/3] create factory for dropzones

---
 mod/photos.php                             |  2 +-
 src/Module/Item/Compose.php                |  2 +-
 view/theme/frio/templates/comment_item.tpl | 42 +---------------------
 view/theme/frio/templates/head.tpl         |  2 ++
 4 files changed, 5 insertions(+), 43 deletions(-)

diff --git a/mod/photos.php b/mod/photos.php
index d7d806bfc2..06c0d1946a 100644
--- a/mod/photos.php
+++ b/mod/photos.php
@@ -1141,7 +1141,7 @@ function photos_content(App $a)
 						'$qcomment' => $qcomment,
 						'$rand_num' => Crypto::randomDigits(12),
 						// Dropzone
-						'$max_imagesize' => floor(Strings::getBytesFromShorthand(DI::config()->get('system', 'maximagesize')) / 1000000),
+						'$max_imagesize' => floor(\Friendica\Util\Strings::getBytesFromShorthand(DI::config()->get('system', 'maximagesize')) / 1000000),
 					]);
 				}
 			}
diff --git a/src/Module/Item/Compose.php b/src/Module/Item/Compose.php
index d1744b9d72..2f60eebc34 100644
--- a/src/Module/Item/Compose.php
+++ b/src/Module/Item/Compose.php
@@ -242,7 +242,7 @@ class Compose extends BaseModule
 			]),
 
 			// Dropzone
-			'$max_imagesize' => floor(Strings::getBytesFromShorthand(DI::config()->get('system', 'maximagesize')) / 1000000),
+			'$max_imagesize' => floor(\Friendica\Util\Strings::getBytesFromShorthand(DI::config()->get('system', 'maximagesize')) / 1000000),
 		]);
 	}
 }
diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl
index 00ca396d11..c4fcb9f627 100644
--- a/view/theme/frio/templates/comment_item.tpl
+++ b/view/theme/frio/templates/comment_item.tpl
@@ -67,45 +67,5 @@
 
 <script>
 	Dropzone.autoDiscover = false;
-	var dropzone{{$id}} = new Dropzone( '#dropzone-{{$id}}', {
-		paramName: 'userfile', // The name that will be used to transfer the file
-		maxFilesize: {{$max_imagesize}}, // MB
-		url: '/media/photo/upload?response=url&album=',
-		accept: function(file, done) {
-			done();
-		},
-		init: function() {
-			this.on('success', function(file, serverResponse) {
-				var target = $('#comment-edit-text-{{$id}}')
-				var resp = $(serverResponse).find('div#content').text()
-				if (target.setRangeText) {
-					//if setRangeText function is supported by current browser
-					target.setRangeText(' ' + $.trim(resp) + ' ')
-				} else {
-					target.focus()
-					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
-				setTimeout(function(){
-					dropzone{{$id}}.removeFile(file);
-				},5000);
-			});
-		},
-	});
-	
-	// 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') {
-				// adds the file to your dropzone instance
-				dropzone{{$id}}.addFile(item.getAsFile())
-			}
-		})
-	});
+	dzFactory.setupDropzone('#dropzone-{{$id}}', $('#comment-edit-text-{{$id}}'), {{$max_imagesize}}); 
 </script>
diff --git a/view/theme/frio/templates/head.tpl b/view/theme/frio/templates/head.tpl
index 478f190562..13104aa6a0 100644
--- a/view/theme/frio/templates/head.tpl
+++ b/view/theme/frio/templates/head.tpl
@@ -140,6 +140,8 @@
 	{{/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"> var dzFactory = new DzFactory();</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 *}}

From 358f010bc3d5c75feb961886cc63cf60f90fc276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakobus=20Sch=C3=BCrz?= <jakobus.schuerz@schuerz.at>
Date: Wed, 15 Mar 2023 04:47:20 +0100
Subject: [PATCH 2/3] create factory

---
 view/js/dropzone-factory.js | 63 +++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 view/js/dropzone-factory.js

diff --git a/view/js/dropzone-factory.js b/view/js/dropzone-factory.js
new file mode 100644
index 0000000000..fe6c4448b2
--- /dev/null
+++ b/view/js/dropzone-factory.js
@@ -0,0 +1,63 @@
+var DzFactory = function () {
+	this.createDropzone = function(element, target, maxImagesize) {
+		return new Dropzone( element, {
+			paramName: 'userfile', // The name that will be used to transfer the file
+			maxFilesize: maxImagesize, // MB
+			url: '/media/photo/upload?response=url&album=',
+			accept: function(file, done) {
+				done();
+			},
+			init: function() {
+				this.on('success', function(file, serverResponse) {
+					var _target = $(target)
+					var resp = $(serverResponse).find('div#content').text()
+					if (_target.setRangeText) {
+						//if setRangeText function is supported by current browser
+						_target.setRangeText(' ' + $.trim(resp) + ' ')
+					} else {
+						_target.focus()
+						document.execCommand('insertText', false /*no UI*/, ' ' + $.trim(resp) + ' ');
+					}
+				});
+				this.on('complete', function(file) {
+					var 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(element, target, maxImagesize) {
+		var dropzone = this.createDropzone(element, target, maxImagesize)
+		$(element).on('paste', function(event) {
+
+			dzFactory.copyPaste(event, dropzone);
+		})
+	};
+}
+

From 4fac699f98d36009bc5204cd26f0f32f1d2c1b26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakobus=20Sch=C3=BCrz?= <jakobus.schuerz@schuerz.at>
Date: Wed, 15 Mar 2023 05:52:41 +0100
Subject: [PATCH 3/3] attach dropzone only when opening comment

---
 view/theme/frio/templates/comment_item.tpl | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl
index c4fcb9f627..5926e787ff 100644
--- a/view/theme/frio/templates/comment_item.tpl
+++ b/view/theme/frio/templates/comment_item.tpl
@@ -67,5 +67,8 @@
 
 <script>
 	Dropzone.autoDiscover = false;
-	dzFactory.setupDropzone('#dropzone-{{$id}}', $('#comment-edit-text-{{$id}}'), {{$max_imagesize}}); 
+	$('[id=comment-{{$id}}]').on('click', function() {
+		dzFactory.setupDropzone('#dropzone-{{$id}}', $('#comment-edit-text-{{$id}}'), {{$max_imagesize}}); 
+		$('[id=comment-{{$id}}]').prop('click', null).off('click')
+	});
 </script>