move jot popup handling to template, port photo selector to vanilla javascript and enable it for comments if applicable

7 files changed, 171 insertions, 98 deletions

diff --git a/Zotlabs/Lib/ThreadItem.php b/Zotlabs/Lib/ThreadItem.php
index e0db98eb3..d0fa1e587 100644
--- a/Zotlabs/Lib/ThreadItem.php
+++ b/Zotlabs/Lib/ThreadItem.php
@@ -803,7 +803,7 @@ class ThreadItem {
 			'$eduline' => t('Underline'),
 			'$edquote' => t('Quote'),
 			'$edcode' => t('Code'),
-			'$edimg' => t('Image'),
+			'$edimg' => t('Embed (existing) photo from your photo albums'),
 			'$edatt' => t('Attach/Upload file'),
 			'$edurl' => t('Insert Link'),
 			'$edvideo' => t('Video'),
diff --git a/Zotlabs/Module/Embedphotos.php b/Zotlabs/Module/Embedphotos.php
index ed5b24724..767cfbb92 100644
--- a/Zotlabs/Module/Embedphotos.php
+++ b/Zotlabs/Module/Embedphotos.php
@@ -43,7 +43,7 @@ class Embedphotos extends \Zotlabs\Web\Controller {
 			$arr = explode('/', $href);
 			$resource_id = array_pop($arr);
 			$x = self::photolink($resource_id);
-			if($x) 
+			if($x)
 				json_return_and_die(array('status' => true, 'photolink' => $x, 'resource_id' => $resource_id));
 			json_return_and_die(array('errormsg' => 'Error retrieving resource ' . $resource_id, 'status' => false));
 		}
diff --git a/include/conversation.php b/include/conversation.php
index 6dfefa707..942811449 100644
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -1104,11 +1104,9 @@ function status_editor($x, $popup = false, $module='') {
 
 function hz_status_editor($x, $popup = false) {
 
-	$o = '';
-
 	$c = channelx_by_n($x['profile_uid']);
 	if($c && $c['channel_moved'])
-		return $o;
+		return;
 
 	$webpage   = ((x($x,'webpage')) ? $x['webpage'] : '');
 	$plaintext = true;
@@ -1327,17 +1325,13 @@ function hz_status_editor($x, $popup = false) {
 		'$customjotheaders' => '',
 		'$custommoretoolsdropdown' => '',
 		'$custommoretoolsbuttons' => '',
-		'$customsubmitright' => []
+		'$customsubmitright' => [],
+		'$popup' => $popup
 	];
 
 	call_hooks('jot_tpl_filter',$tplmacros);
 
-	$o .= replace_macros($tpl, $tplmacros);
-	if ($popup === true) {
-		$o = '<div id="jot-popup" style="display:none">' . $o . '</div>';
-	}
-
-	return $o;
+	return replace_macros($tpl, $tplmacros);
 }
 
 
diff --git a/view/js/main.js b/view/js/main.js
index e1a97dde0..cfdd82315 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -447,16 +447,18 @@ function inserteditortag(BBcode, id) {
 }
 
 function insertCommentAttach(comment,id) {
-
 	activeCommentID = id;
 	activeCommentText = comment;
-
 	$('body').css('cursor', 'wait');
-
 	$('#invisible-comment-upload').trigger('click');
-
 	return false;
+}
 
+function insertCommentEmbed(comment,id) {
+	activeCommentID = id;
+	activeCommentText = comment;
+	initializeEmbedPhotoDialog();
+	return false;
 }
 
 function insertCommentURL(comment, id) {
@@ -1734,6 +1736,35 @@ function addeditortext(data) {
 	}
 }
 
+// Add text to active comment region if set, otherwise add to main editor
+function addActiveEditorText(data) {
+    if (activeCommentID) {
+        const textarea = document.getElementById('comment-edit-text-' + activeCommentID);
+
+        if (textarea) {
+            let currentText = textarea.value;
+
+            // Clear the textarea if it matches the active comment text
+            if (currentText === activeCommentText) {
+                currentText = '';
+            }
+
+            textarea.classList.add('expanded');
+            openMenu('comment-tools-' + activeCommentID);
+            textarea.value = currentText + data;
+            textarea.focus();
+            textarea.click();
+            preview_comment(activeCommentID);
+        }
+
+        // Reset activeCommentID after processing
+        activeCommentID = 0;
+    } else {
+        addeditortext(data);
+        preview_post();
+    }
+}
+
 function makeid(length) {
 	var result = '';
 	var characters = 'abcdef0123456789';
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 1dc7ad88b..0a59f8831 100644
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -37,15 +37,18 @@
 							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edcode}}" onclick="insertbbcomment('{{$comment}}','code', {{$id}}); return false;">
 								<i class="bi bi-code comment-icon"></i>
 							</button>
-						<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edhighlighter}}" onclick="insertbbcomment('{{$comment}}','mark', {{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edhighlighter}}" onclick="insertbbcomment('{{$comment}}','mark', {{$id}}); return false;">
 								<i class="bi bi-highlighter comment-icon"></i>
 							</button>
 						</div>
 						<div class="btn-group me-2">
 							{{if $can_upload}}
-							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edatt}}" onclick="insertCommentAttach('{{$comment}}',{{$id}}); return false;">
+							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edatt}}" onclick="insertCommentAttach('{{$comment}}', {{$id}}); return false;">
 								<i class="bi bi-paperclip comment-icon"></i>
 							</button>
+							<button title="{{$edimg}}" class="btn btn-outline-secondary btn-sm border-0" onclick="insertCommentEmbed('{{$comment}}', {{$id}}); return false;">
+								<i class="bi bi-file-image comment-icon"></i>
+							</button>
 							{{/if}}
 							<button class="btn btn-outline-secondary btn-sm border-0" title="{{$edurl}}" onclick="insertCommentURL('{{$comment}}',{{$id}}); return false;">
 								<i class="bi bi-link-45deg comment-icon"></i>
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 3d93fcde9..399b9e27b 100644
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -403,86 +403,123 @@ var activeCommentText = '';
 	}
 
 
-    var initializeEmbedPhotoDialog = function () {
-        $('.embed-photo-selected-photo').each(function (index) {
-            $(this).removeClass('embed-photo-selected-photo');
-        });
-        getPhotoAlbumList();
-        $('#embedPhotoModalBodyAlbumDialog').off('click');
-        $('#embedPhotoModal').modal('show');
-    };
-
-    var choosePhotoFromAlbum = function (album) {
-        $.post("embedphotos/album", {name: album},
-            function(data) {
-                if (data['status']) {
-                    $('#embedPhotoModalLabel').html("{{$modalchooseimages}}");
-                    $('#embedPhotoModalBodyAlbumDialog').html('\
-                            <div><div class="nav nav-pills flex-column">\n\
-                                <li class="nav-item"><a class="nav-link" href="#" onclick="initializeEmbedPhotoDialog();return false;">\n\
-                                    <i class="bi bi-chevron-left"></i>&nbsp\n\
-                                    {{$modaldiffalbum}}\n\
-                                    </a>\n\
-                                </li>\n\
-                            </div><br></div>')
-                    $('#embedPhotoModalBodyAlbumDialog').append(data['content']);
-                    $('#embedPhotoModalBodyAlbumDialog').click(function (evt) {
-                        evt.preventDefault();
-                        var image = document.getElementById(evt.target.id);
-                        if (typeof($(image).parent()[0]) !== 'undefined') {
-                            var imageparent = document.getElementById($(image).parent()[0].id);
-                            $(imageparent).toggleClass('embed-photo-selected-photo');
-                            var href = $(imageparent).attr('href');
-                            $.post(
-				"embedphotos/photolink",
-				{href: href},
-                                function(ddata) {
-                                    if (ddata['status']) {
-                                        addeditortext(ddata['photolink']);
-										preview_post();
-                                    } else {
-                                        window.console.log("{{$modalerrorlink}}" + ':' + ddata['errormsg']);
-                                    }
-                                    return false;
-                                },
-				'json'
-			    );
-                        }
-                    });
-                    $('#embedPhotoModalBodyAlbumListDialog').addClass('d-none');
-                    $('#embedPhotoModalBodyAlbumDialog').removeClass('d-none');
-                } else {
-                    window.console.log("{{$modalerroralbum}} " + JSON.stringify(album) + ':' + data['errormsg']);
-                }
-                return false;
-            },
-        'json');
-    };
-
-    var getPhotoAlbumList = function () {
-        $.post("embedphotos/albumlist", {},
-            function(data) {
-                if (data['status']) {
-                    var albums = data['albumlist']; //JSON.parse(data['albumlist']);
-                    $('#embedPhotoModalLabel').html("{{$modalchoosealbum}}");
-                    $('#embedPhotoModalBodyAlbumList').html('<ul class="nav nav-pills flex-column"></ul>');
-                    for(var i=0; i<albums.length; i++) {
-                        var albumName = albums[i].text;
-			var jsAlbumName = albums[i].jstext;
-			var albumLink = '<li class="nav-item">';
-			albumLink += '<a class="nav-link" href="#" onclick="choosePhotoFromAlbum(\'' + jsAlbumName + '\'); return false;">' + albumName + '</a>';
-                        albumLink += '</li>';
-                        $('#embedPhotoModalBodyAlbumList').find('ul').append(albumLink);
-                    }
-                    $('#embedPhotoModalBodyAlbumDialog').addClass('d-none');
-                    $('#embedPhotoModalBodyAlbumListDialog').removeClass('d-none');
-                } else {
-                    window.console.log("{{$modalerrorlist}}" + ':' + data['errormsg']);
-                }
-                return false;
-            },
-        'json');
-    };
+	const initializeEmbedPhotoDialog = () => {
+		// Remove the 'embed-photo-selected-photo' class from all selected photos
+		const selectedPhotos = document.querySelectorAll('.embed-photo-selected-photo');
+		selectedPhotos.forEach(photo => {
+			photo.classList.remove('embed-photo-selected-photo');
+		});
+
+		// Fetch the photo album list
+		getPhotoAlbumList();
+
+		// Remove any existing click event listeners on the modal body
+		const modalBodyAlbumDialog = document.getElementById('embedPhotoModalBodyAlbumDialog');
+		modalBodyAlbumDialog.replaceWith(modalBodyAlbumDialog.cloneNode(true)); // This effectively removes all event listeners
+
+		// Show the modal
+		const modal = new bootstrap.Modal(document.getElementById('embedPhotoModal'));
+		modal.show();
+	};
+
+	const choosePhotoFromAlbum = (album) => {
+
+		const params = new URLSearchParams();
+		params.append('name', album);
+
+		fetch('embedphotos/album', {
+			method: 'POST',
+			body: params
+		})
+		.then(response => response.json())
+		.then(data => {
+			if (data.status) {
+
+				const modalLabel = document.getElementById('embedPhotoModalLabel');
+				const modalBody = document.getElementById('embedPhotoModalBodyAlbumDialog');
+
+				modalLabel.innerHTML = '{{$modalchooseimages}}';
+				modalBody.innerHTML = '<div><div class="nav nav-pills flex-column"><li class="nav-item"><a class="nav-link" href="#" onclick="initializeEmbedPhotoDialog(); return false;"><i class="bi bi-chevron-left"></i>&nbsp;{{$modaldiffalbum}}</a></li></div><br></div>';
+				modalBody.innerHTML += data.content;
+
+				// Make sure the loaded script is executed
+				const scripts = modalBody.querySelectorAll('script');
+				scripts.forEach(script => {
+					const scriptContent = script.textContent || script.innerText;
+					eval(scriptContent);  // Execute the script
+				});
+
+				modalBody.addEventListener('click', (evt) => {
+					evt.preventDefault();
+					const image = document.getElementById(evt.target.id);
+					if (image && image.parentElement) {
+						const imageParent = image.parentElement;
+						imageParent.classList.toggle('embed-photo-selected-photo');
+						const href = imageParent.getAttribute('href');
+
+						const params = new URLSearchParams();
+						params.append('href', href);
+
+						fetch('embedphotos/photolink', {
+							method: 'POST',
+							body: params
+						})
+						.then(response => response.json())
+						.then(ddata => {
+							if (ddata.status) {
+								addActiveEditorText(ddata.photolink);
+								preview_post();
+							} else {
+								console.error("{{$modalerrorlink}}: " + ddata.errormsg);
+							}
+						});
+					}
+				});
+
+				document.getElementById('embedPhotoModalBodyAlbumListDialog').classList.add('d-none');
+				modalBody.classList.remove('d-none');
+			} else {
+				console.error("{{$modalerroralbum}} " + JSON.stringify(album) + ': ' + data.errormsg);
+			}
+		})
+		.catch(error => {
+			console.error("Error fetching album:", error);
+		});
+	};
+
+
+	const getPhotoAlbumList = () => {
+		fetch('embedphotos/albumlist', {
+			method: 'POST',
+		})
+		.then(response => response.json())
+		.then(data => {
+			if (data.status) {
+				const albums = data.albumlist;
+				const modalLabel = document.getElementById('embedPhotoModalLabel');
+				const modalBodyList = document.getElementById('embedPhotoModalBodyAlbumList');
+
+				modalLabel.innerHTML = '{{$modalchoosealbum}}';
+				modalBodyList.innerHTML = '<ul class="nav nav-pills flex-column"></ul>';
+
+				albums.forEach(album => {
+					const albumName = album.text;
+					const jsAlbumName = album.jstext;
+					const albumLink = '<li class="nav-item"><a class="nav-link" href="#" onclick="choosePhotoFromAlbum(\'' + jsAlbumName + '\'); return false;">' + albumName + '</a></li>';
+					modalBodyList.querySelector('ul').innerHTML += albumLink;
+				});
+
+				document.getElementById('embedPhotoModalBodyAlbumDialog').classList.add('d-none');
+				document.getElementById('embedPhotoModalBodyAlbumListDialog').classList.remove('d-none');
+			} else {
+				console.error("{{$modalerrorlist}}: " + data.errormsg);
+			}
+		})
+		.catch(error => {
+			console.error("Error fetching album list:", error);
+		});
+	};
+
 
     //
     // initialize drag-drop
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 9c9d649aa..60bbe26cb 100644
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -1,3 +1,7 @@
+{{if $popup}}
+<div id="jot-popup" style="display:none">
+{{/if}}
+
 <input id="invisible-wall-file-upload" type="file" name="files" style="visibility:hidden;position:absolute;top:-50;left:-50;width:0;height:0;" multiple>
 <input id="invisible-comment-upload" type="file" name="files" style="visibility:hidden;position:absolute;top:-50;left:-50;width:0;height:0;" multiple>
 <form id="profile-jot-form" action="{{$action}}" method="post" class="acl-form" data-form_id="profile-jot-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}' data-bang='{{$bang}}'>
@@ -282,6 +286,10 @@
 
 {{$acl}}
 
+{{if $popup}}
+</div>
+{{/if}}
+
 {{if $feature_expire}}
 <!-- Modal for item expiry-->
 <div class="modal" id="expiryModal" tabindex="-1" role="dialog" aria-labelledby="expiryModalLabel" aria-hidden="true">