Fix - Allow to have multiple blocks on the same page

magicsunday · Mar 20, 2023 · 55a4c69 · 55a4c69
1 parent 1d8faf3
commit 55a4c69
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 39 deletions.
diff --git a/resources/css/pedigree-chart.css b/resources/css/pedigree-chart.css
@@ -1,14 +1,14 @@
 /* Form */
 
 /* SVG */
-#webtrees-pedigree-chart-container {
+.webtrees-pedigree-chart-container {
     position: relative;
     font-size: unset;
     display: flex;
     flex: auto;
 }
 
-#webtrees-pedigree-chart-container svg {
+.webtrees-pedigree-chart-container svg {
     display: block;
     margin: auto;
     cursor: move;
@@ -19,21 +19,21 @@
     /*filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.4));*/
 }
 
-#webtrees-pedigree-chart-container svg:active {
+.webtrees-pedigree-chart-container svg:active {
     cursor: grabbing;
     /*cursor: -webkit-grabbing;*/
 }
 
-#webtrees-pedigree-chart-container svg .person {
+.webtrees-pedigree-chart-container svg .person {
     cursor: pointer;
 }
 
-#webtrees-pedigree-chart-container svg rect.background {
+.webtrees-pedigree-chart-container svg rect.background {
     fill: none;
     pointer-events: all;
 }
 
-#webtrees-pedigree-chart-container div.overlay {
+.webtrees-pedigree-chart-container div.overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -51,12 +51,12 @@
 }
 
 @supports (-webkit-backdrop-filter: none) {
-    #webtrees-pedigree-chart-container div.overlay {
+    .webtrees-pedigree-chart-container div.overlay {
         -webkit-backdrop-filter: blur(1em);
     }
 }
 
-#webtrees-pedigree-chart-container div.overlay .tooltip {
+.webtrees-pedigree-chart-container div.overlay .tooltip {
     font-size: 22px;
     color: #5a6268;
     position: relative;
@@ -70,11 +70,11 @@
 }
 
 @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-    #webtrees-pedigree-chart-container div.overlay {
+    .webtrees-pedigree-chart-container div.overlay {
         background: rgba(0, 0, 0, 0.5);
     }
 
-    #webtrees-pedigree-chart-container div.overlay .tooltip {
+    .webtrees-pedigree-chart-container div.overlay .tooltip {
         color: white;
     }--
 }
diff --git a/resources/css/svg.css b/resources/css/svg.css
@@ -1,61 +1,61 @@
 /* SVG export styles */
-#webtrees-pedigree-chart-container svg {
+.webtrees-pedigree-chart-container svg {
     /* Native font stack: see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     min-height: 600px;
 }
 
 /* Required for the exported SVG to display properly in Inkscape */
-#webtrees-pedigree-chart-container svg.rtl {
+.webtrees-pedigree-chart-container svg.rtl {
     direction: rtl !important;
     unicode-bidi: bidi-override !important;
 }
 
-#webtrees-pedigree-chart-container svg text {
+.webtrees-pedigree-chart-container svg text {
     font-weight: bold;
 }
 
-#webtrees-pedigree-chart-container svg rect.female {
+.webtrees-pedigree-chart-container svg rect.female {
     stroke: var(--sex-f-fg, rgb(255, 32, 128));
     stroke-dasharray: none;
     stroke-width: 3px;
     fill: var(--sex-f-bg, rgb(233, 218, 241));
 }
 
-#webtrees-pedigree-chart-container svg rect.male {
+.webtrees-pedigree-chart-container svg rect.male {
     stroke: var(--sex-m-fg, rgb(129, 169, 203));
     stroke-dasharray: none;
     stroke-width: 3px;
     fill: var(--sex-m-bg, rgb(237, 247, 253));
 }
 
-#webtrees-pedigree-chart-container svg rect.unknown {
+.webtrees-pedigree-chart-container svg rect.unknown {
     stroke: var(--sex-u-fg, rgb(129, 169, 203));
     stroke-dasharray: 5;
     stroke-width: 3px;
     fill: var(--sex-u-bg, rgb(255, 255, 255));
 }
 
-#webtrees-pedigree-chart-container svg rect.image {
+.webtrees-pedigree-chart-container svg rect.image {
     stroke: rgb(175, 175, 175);
 }
 
-#webtrees-pedigree-chart-container svg path.link {
+.webtrees-pedigree-chart-container svg path.link {
     fill: none;
     stroke: rgb(175, 175, 175);
     stroke-width: 1.5px;
     /*shape-rendering: crispEdges;*/
 }
 
-#webtrees-pedigree-chart-container svg g.name text {
+.webtrees-pedigree-chart-container svg g.name text {
     font-weight: bold;
 }
 
-#webtrees-pedigree-chart-container svg g.name tspan.preferred {
+.webtrees-pedigree-chart-container svg g.name tspan.preferred {
     text-decoration: underline;
 }
 
-#webtrees-pedigree-chart-container svg text.date {
+.webtrees-pedigree-chart-container svg text.date {
     fill: rgb(127, 127, 127);
     font-weight: normal;
     font-size: 13px;

diff --git a/resources/js/modules/chart/svg/export/svg.js b/resources/js/modules/chart/svg/export/svg.js
@@ -32,7 +32,7 @@ export default class SvgExport extends Export
             d3.text(cssFile)
                 .then((data) => {
                     // Remove parent container selector as the CSS is included directly into the SVG element
-                    data = data.replace(/#webtrees-pedigree-chart-container /g, "");
+                    data = data.replace(/.webtrees-pedigree-chart-container /g, "");
 
                     let style = document.createElementNS("http://www.w3.org/2000/svg", "style");
                     style.appendChild(document.createTextNode(data));

diff --git a/resources/js/pedigree-chart.min.js b/resources/js/pedigree-chart.min.js
diff --git a/resources/views/modules/charts/chart.phtml b/resources/views/modules/charts/chart.phtml
@@ -16,7 +16,7 @@ declare(strict_types=1);
 ?>
 
 <style>
-#webtrees-pedigree-chart-container svg {
+.webtrees-pedigree-chart-container svg {
     min-height: unset !important;
 }
 </style>

diff --git a/resources/views/modules/pedigree-chart/chart.phtml b/resources/views/modules/pedigree-chart/chart.phtml
@@ -19,9 +19,11 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
  * @var string        $svgStylesheet
  * @var array         $data          The chart data
  */
+
+$id = uniqid();
 ?>
 
-<div id="webtrees-pedigree-chart-container"></div>
+<div class="webtrees-pedigree-chart-container" id="webtrees-pedigree-chart-container-<?= $id ?>"></div>
 
 <?php View::push('styles') ?>
 <link rel="stylesheet" href="<?= e($svgStylesheet) ?>">
@@ -34,37 +36,36 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
 <?php View::push('javascript'); ?>
 <script>
 
-const chartParams = <?= $chartParams ?>;
-const cssUrl      = <?= json_encode($svgStylesheet) ?>;
+const chartParams<?= $id ?> = <?= $chartParams ?>;
 
-const optionGenerations = typeof generations !== "undefined"
+const optionGenerations<?= $id ?> = typeof generations !== "undefined"
     ? generations
     : <?= $configuration->getGenerations() ?>;
 
-const optionShowEmptyBox = typeof showEmptyBoxes !== "undefined"
+const optionShowEmptyBox<?= $id ?> = typeof showEmptyBoxes !== "undefined"
     ? showEmptyBoxes
     : <?= json_encode($configuration->getShowEmptyBoxes()) ?>;
 
-const optionLayout = typeof treeLayout !== "undefined"
+const optionLayout<?= $id ?> = typeof treeLayout !== "undefined"
     ? treeLayout
     : <?= json_encode($configuration->getLayout()) ?>;
 
 // Create chart instance with stored configuration
-const pedigreeChart = new WebtreesPedigreeChart.PedigreeChart(
-    "#webtrees-pedigree-chart-container",
+const pedigreeChart<?= $id ?> = new WebtreesPedigreeChart.PedigreeChart(
+    "#webtrees-pedigree-chart-container-<?= $id ?>",
     {
-        labels         : chartParams.labels,
-        generations    : optionGenerations,
-        showEmptyBoxes : optionShowEmptyBox,
-        treeLayout     : optionLayout,
-        rtl            : chartParams.rtl
+        labels         : chartParams<?= $id ?>.labels,
+        generations    : optionGenerations<?= $id ?>,
+        showEmptyBoxes : optionShowEmptyBox<?= $id ?>,
+        treeLayout     : optionLayout<?= $id ?>,
+        rtl            : chartParams<?= $id ?>.rtl
     }
 );
 
-pedigreeChart.cssFile = cssUrl;
+pedigreeChart<?= $id ?>.cssFile = <?= json_encode($svgStylesheet) ?>;
 
 // Draw chart
-pedigreeChart.draw(<?= json_encode($data) ?>);
+pedigreeChart<?= $id ?>.draw(<?= json_encode($data) ?>);
 
 </script>
 <?php View::endpush(); ?>