Fix: #3289, fix: #3246 - Redesign the expand/collapse note structure to ensure we have an anchor for the shared note

9 files changed, 45 insertions, 70 deletions

diff --git a/app/Functions/FunctionsPrint.php b/app/Functions/FunctionsPrint.php
index 8cf586a265..a8a70f8bbe 100644
--- a/app/Functions/FunctionsPrint.php
+++ b/app/Functions/FunctionsPrint.php
@@ -90,42 +90,51 @@ class FunctionsPrint
     {
         $text .= Functions::getCont($nlevel, $nrec);
 
-        // Check if shared note (we have already checked that it exists)
         if (preg_match('/^0 @(' . Gedcom::REGEX_XREF . ')@ NOTE/', $nrec, $match)) {
-            $note  = Factory::note()->make($match[1], $tree);
-            $label = 'SHARED_NOTE';
-            $html  = Filter::formatText($note->getNote(), $tree);
+            // Shared note.
+            $note = Factory::note()->make($match[1], $tree);
+            // It must exist.
+            assert($note instanceof Note);
+
+            $label      = I18N::translate('Shared note');
+            $html       = Filter::formatText($note->getNote(), $tree);
+            $first_line = '<a href="' . e($note->url()) . '">' . $note->fullName() . '</a>';
         } else {
-            $note  = null;
-            $label = 'NOTE';
+            // Inline note.
+            $label = I18N::translate('Note');
             $html  = Filter::formatText($text, $tree);
-        }
 
-        if (strpos($text, "\n") === false) {
-            // A one-line note? strip the block-level tags, so it displays inline
-            return GedcomTag::getLabelValue($label, strip_tags($html, '<a><strong><em>'));
-        }
+            // Only one line?  Remove block-level attributes and skip expand/collapse.
+            if (strpos($text, "\n") === false) {
+                return
+                    '<div class="fact_NOTE">' .
+                    I18N::translate(
+                        '<span class="label">%1$s:</span> <span class="field" dir="auto">%2$s</span>',
+                        $label,
+                        strip_tags($html, '<a><strong><em>')
+                    ) .
+                    '</div>';
+            }
 
-        if ($tree->getPreference('EXPAND_NOTES')) {
-            // A multi-line note, and we're expanding notes by default
-            return GedcomTag::getLabelValue($label, $html);
+            [$text] = explode("\n", strip_tags($text));
+            $first_line = Str::limit($text, 50, I18N::translate('…'));
         }
 
-        // A multi-line note, with an expand/collapse option
-        $element_id = Uuid::uuid4()->toString();
-        // NOTE: class "note-details" is (currently) used only by some third-party themes
-        if ($note) {
-            $first_line = '<a href="' . e($note->url()) . '">' . $note->fullName() . '</a>';
-        } else {
-            [$text] = explode("\n", strip_tags($html));
-            $first_line = Str::limit($text, 100, I18N::translate('…'));
-        }
+        $id       = 'collapse-' . Uuid::uuid4()->toString();
+        $expanded = (bool) $tree->getPreference('EXPAND_NOTES');
 
         return
-            '<div class="fact_NOTE"><span class="label">' .
-            '<a href="#" onclick="expand_layer(\'' . $element_id . '\'); return false;"><i id="' . $element_id . '_img" class="icon-plus"></i></a> ' . GedcomTag::getLabel($label) . ':</span> ' . '<span id="' . $element_id . '-alt">' . $first_line . '</span>' .
+            '<div class="fact_NOTE">' .
+            '<a href="#' . e($id) . '" role="button" data-toggle="collapse" aria-controls="' . e($id) . '" aria-expanded="' . ($expanded ? 'true' : 'false') . '">' .
+            view('icons/expand') .
+            view('icons/collapse') .
+            '</a> ' .
+            '<span class="label">' . $label . ':</span> ' .
+            $first_line .
             '</div>' .
-            '<div class="note-details" id="' . $element_id . '" style="display:none">' . $html . '</div>';
+            '<div id="' . e($id) . '" class="collapse ' . ($expanded ? 'show' : '') . '">' .
+            $html .
+            '</div>';
     }
 
     /**
diff --git a/app/Functions/FunctionsPrintFacts.php b/app/Functions/FunctionsPrintFacts.php
index 754f5f157f..ba2bf15649 100644
--- a/app/Functions/FunctionsPrintFacts.php
+++ b/app/Functions/FunctionsPrintFacts.php
@@ -598,26 +598,21 @@ class FunctionsPrintFacts
                     if (!$spos2) {
                         $spos2 = strlen($factrec);
                     }
-                    $srec      = substr($factrec, $spos1, $spos2 - $spos1);
-                    $lt        = preg_match_all("/$nlevel \w+/", $srec, $matches);
-                    $data      .= '<div class="fact_SOUR">';
-                    $elementID = Uuid::uuid4()->toString();
-                    if ($tree->getPreference('EXPAND_SOURCES')) {
-                        $plusminus = 'icon-minus';
-                    } else {
-                        $plusminus = 'icon-plus';
-                    }
+                    $srec     = substr($factrec, $spos1, $spos2 - $spos1);
+                    $lt       = preg_match_all("/$nlevel \w+/", $srec, $matches);
+                    $data     .= '<div class="fact_SOUR">';
+                    $id       = 'collapse-' . Uuid::uuid4()->toString();
+                    $expanded = (bool) $tree->getPreference('EXPAND_SOURCES');
                     if ($lt > 0) {
-                        $data .= '<a href="#" onclick="return expand_layer(\'' . $elementID . '\');"><i id="' . $elementID . '_img" class="' . $plusminus . '"></i></a> ';
+                        $data .= '<a href="#' . e($id) . '" role="button" data-toggle="collapse" aria-controls="' . e($id) . '" aria-expanded="' . ($expanded ? 'true' : 'false') . '">';
+                        $data .= view('icons/expand');
+                        $data .= view('icons/collapse');
+                        $data .= '</a> ';
                     }
                     $data .= GedcomTag::getLabelValue('SOUR', '<a href="' . e($source->url()) . '">' . $source->fullName() . '</a>', null, 'span');
                     $data .= '</div>';
 
-                    $data .= "<div id=\"$elementID\"";
-                    if ($tree->getPreference('EXPAND_SOURCES')) {
-                        $data .= ' style="display:block"';
-                    }
-                    $data .= ' class="source_citations">';
+                    $data .= '<div id="' . e($id) . '" class="collapse ' . ($expanded ? 'show' : '') . '">';
                     $data .= self::printSourceStructure($tree, self::getSourceStructure($srec));
                     $data .= '<div class="indent">';
                     ob_start();
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
index d5ad552efd..c150c190a4 100644
--- a/phpstan-baseline.neon
+++ b/phpstan-baseline.neon
@@ -91,11 +91,6 @@ parameters:
 			path: app/Functions/FunctionsImport.php
 
 		-
-			message: "#^Cannot call method getNote\\(\\) on Fisharebest\\\\Webtrees\\\\Note\\|null\\.$#"
-			count: 1
-			path: app/Functions/FunctionsPrint.php
-
-		-
 			message: "#^Parameter \\#2 \\$start of function substr expects int, int\\|false given\\.$#"
 			count: 1
 			path: app/Functions/FunctionsPrint.php
diff --git a/resources/css/clouds.css b/resources/css/clouds.css
index e89cb83629..21f843e6f4 100755
--- a/resources/css/clouds.css
+++ b/resources/css/clouds.css
@@ -793,10 +793,6 @@ a:hover .name1, a:hover .name2 {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 .selected-option {
     background-color: #cef;
 }
diff --git a/resources/css/colors.css b/resources/css/colors.css
index 575c85ce2b..8f3aebc1db 100644
--- a/resources/css/colors.css
+++ b/resources/css/colors.css
@@ -711,10 +711,6 @@ a:hover .name1, a:hover .name2 {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 .selected-option {
     background-color: #edf7fd;
 }
diff --git a/resources/css/fab.css b/resources/css/fab.css
index b769153e3b..1652959ed7 100755
--- a/resources/css/fab.css
+++ b/resources/css/fab.css
@@ -529,10 +529,6 @@ a:hover, a:hover .name1, a:hover .name2 {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 .selected-option {
     background-color: #d6e0ea;
 }
diff --git a/resources/css/minimal.css b/resources/css/minimal.css
index 19db354009..0b86daa09c 100755
--- a/resources/css/minimal.css
+++ b/resources/css/minimal.css
@@ -442,10 +442,6 @@ a:hover {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 /* ==== FAQ table styles ===== */
 table.faq {
     background-color: #ddd;
diff --git a/resources/css/webtrees.css b/resources/css/webtrees.css
index 14831459e1..f4d4315505 100755
--- a/resources/css/webtrees.css
+++ b/resources/css/webtrees.css
@@ -736,10 +736,6 @@ a:hover .name1, a:hover .name2 {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 .selected-option {
     background-color: #edf7fd;
 }
diff --git a/resources/css/xenea.css b/resources/css/xenea.css
index 8601319842..c69df8bb2e 100755
--- a/resources/css/xenea.css
+++ b/resources/css/xenea.css
@@ -730,10 +730,6 @@ a:hover .name1, a:hover .name2 {
     padding: 1px;
 }
 
-.source_citations {
-    display: none;
-}
-
 .selected-option {
     background-color: #edf7fd;
 }