From 9912e925972a4424cbe699a49832b5938556fe04 Mon Sep 17 00:00:00 2001
From: Ludovic Pelletier <ludovic.pelletier@gmail.com>
Date: Thu, 15 Feb 2024 17:22:44 +0100
Subject: [PATCH] Fixing card overlay display

---
 Cards/Fallacies/Mindmaps/included.html | 480 +++++++++++--------------
 1 file changed, 219 insertions(+), 261 deletions(-)

diff --git a/Cards/Fallacies/Mindmaps/included.html b/Cards/Fallacies/Mindmaps/included.html
index 2689597c..4f8cdc40 100644
--- a/Cards/Fallacies/Mindmaps/included.html
+++ b/Cards/Fallacies/Mindmaps/included.html
@@ -8,190 +8,194 @@
         body {
             font-family: 'DINPro', sans-serif;
         }
-
+        
         .hidden {
             display: none;
         }
-
+        
         #mindmap {
             position: relative;
         }
-
+        
         .node:hover {
             cursor: pointer;
         }
-
+        
         .node.active {
             fill: red;
         }
-
-
+        
+        
         /* -------------------------------------------------------------------------------- */
         /* Fonts */
         /* -------------------------------------------------------------------------------- */
-
+        
         @font-face {
             font-family: 'DINPro';
             font-style: normal;
             font-weight: 300;
             src: local('DINPro'), url('https://fonts.cdnfonts.com/s/18774/DINPro-Light tr.woff') format('woff');
         }
-
+        
         @font-face {
             font-family: 'DINPro';
             font-style: normal;
             font-weight: 500;
             src: local('DINPro'), url('https://fonts.cdnfonts.com/s/18774/DINPro-Medium tr.woff') format('woff');
         }
-
+        
         @font-face {
             font-family: 'DINPro';
             font-style: normal;
             font-weight: 700;
             src: local('DINPro'), url('https://fonts.cdnfonts.com/s/18774/DINPro-Bold tr.woff') format('woff');
         }
-
+        
         @font-face {
             font-family: 'DINPro';
             font-style: normal;
             font-weight: 900;
             src: local('DINPro'), url('https://fonts.cdnfonts.com/s/18774/DINPro-Black tr.woff') format('woff');
         }
-
-
-
-
+        
+        
+        
+        
         /* -------------------------------------------------------------------------------- */
         /* Couleurs */
         /* -------------------------------------------------------------------------------- */
+        
+        /* Défauts */
 
-        card.insuffisance {
+        card {
             --color-background: #811da3;
             --color-text-1: #601362;
             --color-text-2: #8f5991;
             --color-text-3: #a173a2;
         }
 
+        card.insuffisance {
+            --color-background: #811da3;
+            --color-text-1: #601362;
+            --color-text-2: #8f5991;
+            --color-text-3: #a173a2;
+        }
+        
         card.influence {
             --color-background: #ff66eb;
             --color-text-1: #b3009b;
             --color-text-2: #cc00b1;
             --color-text-3: #e566d4;
         }
-
+        
         card.erreurMathématique {
             --color-background: #08af93;
             --color-text-1: #14555b;
             --color-text-2: #5a888c;
             --color-text-3: #749a9e;
         }
-
+        
         card.erreurDeRaisonnement {
             --color-background: #8dc801;
             --color-text-1: #476205;
             --color-text-2: #7e9150;
             --color-text-3: #92a26b;
         }
-
+        
         card.abusDeLangage {
             --color-background: #0054a4;
             --color-text-1: #0c2861;
             --color-text-2: #546890;
             --color-text-3: #6f80a1;
         }
-
+        
         card.tricherie {
             --color-background: #ffc307ff;
             --color-text-1: #9e7800ff;
             --color-text-2: #c49500ff;
             --color-text-3: #d6b755ff;
         }
-
+        
         card.obstruction {
             --color-background: #dc0f0a;
             --color-text-1: #960a07;
             --color-text-2: #b55351;
             --color-text-3: #c16e6c;
         }
-
-
-
+        
+        
+        
         card .famille {
             color: var(--color-text-1);
         }
-
+        
         card .sous_famille {
             color: var(--color-text-2);
         }
-
+        
         card .Soussousfamille {
             color: var(--color-text-3);
         }
-
+        
         /* -------------------------------------------------------------------------------- */
         /* Structure */
         /* -------------------------------------------------------------------------------- */
-
+        
         card {
-            position: fixed;
-            z-index: 100;
-            font-size: 80%;
-            width: 50vw;
-            height: 50vh;
-            font-family: 'Bebas Neue', sans-serif;
             background-color: white;
             display: flex;
             flex-direction: column;
+            font-family: 'Bebas Neue', sans-serif;
+            font-size: 80%;
+            left: 50%;
+            position: fixed;
+            top: 50px;
+            transform: translate(-50%);
+            z-index: 100;
         }
-
-        bleed {
-        }
-
-        cut {
-        }
-
+        
         safe {
             background-color: #fff;
-            position: static;
+            position: relative;
             /* Different Safe Padding */
             /*padding: 1.2vh 2.5vh 1.5vh 2.5vh;*/
         }
-
+        
         .cardName {
             display: none;
         }
-
+        
         /* -------------------------------------------------------------------------------- */
         /* Entête */
         /* -------------------------------------------------------------------------------- */
-
+        
         .header {
             /* display: flex;*/
             justify-content: center;
             padding-top: 1%;
         }
-
+        
         .famille {
             text-transform: uppercase;
             font-size: 5.6vh;
             text-align: center;
             color: var(--color-text-1);
         }
-
+        
         .sous_famille {
             font-size: 3.4vh;
             letter-spacing: 0.05vh;
         }
-
+        
         .Soussousfamille {
             font-size: 1.8vh;
         }
-
-
+        
+        
         /* -------------------------------------------------------------------------------- */
         /* Corps */
         /* -------------------------------------------------------------------------------- */
-
+        
         .body {
             display: flex;
             padding-top: 2%;
@@ -202,7 +206,7 @@
             border-color: var(--color-background);
             border-radius: 2vh;
         }
-
+        
         .supersetWrapper .famille {
             max-height: 61%;
             width: 100%;
@@ -210,7 +214,7 @@
             padding: 0;
             margin-bottom: 1.3%
         }
-
+        
         .supersetWrapper .sous_famille {
             width: 100%;
             display: block;
@@ -218,14 +222,14 @@
             margin-bottom: 1%;
             text-align: center;
         }
-
+        
         .contentWrapper {
             display: flex;
             flex-direction: column;
             height: 93%;
         }
-
-
+        
+        
         .title {
             width: 100%;
             text-align: center;
@@ -241,13 +245,13 @@
             justify-content: center;
             align-items: center;
         }
-
-            .title > div {
-                flex-shrink: 1;
-                width: 100%;
-                overflow-wrap: normal
-            }
-
+        
+        .title > div {
+            flex-shrink: 1;
+            width: 100%;
+            overflow-wrap: normal
+        }
+        
         .imageSection {
             min-height: 0;
             flex-shrink: 1;
@@ -258,7 +262,7 @@
             width: 100%;
             height: 100%;
         }
-
+        
         .image {
             width: 100%;
             flex-grow: 1;
@@ -270,36 +274,32 @@
             padding: 1% 2% 0 2%;
             min-height: 0;
         }
-
-            .image img {
-                max-width: 100%;
-                max-height: 100%;
-                position: relative;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
+        
+        .image img {
+            max-width: 100%;
+            max-height: 100%;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        
         .texte {
-            /*display: flex;
-        flex-flow: column wrap;*/
             justify-content: space-between;
             background-color: var(--color-background);
             margin: 0% -1% -1% -1%;
         }
-
+        
         .desc_fr {
             display: flex;
             align-items: center;
             text-transform: uppercase;
             font-family: 'DINpro',sans-serif;
             font-weight: 900;
-            font-size: 3.2vh;
-            /*margin:4% 5% 3% 5%;*/
-
+            font-size: 3.2vh;            
             padding: 2% 5% 2% 5%;
             color: #fff;
         }
-
+        
         .exemple_fr {
             font-family: 'DINpro',sans-serif;
             color: var(--color-text-2);
@@ -310,12 +310,12 @@
             -webkit-font-variant-ligatures: no-common-ligatures;
             font-variant-ligatures: no-common-ligatures;
         }
-
+        
         .desc_fr,
         .exemple_fr {
             overflow-wrap: break-word;
         }
-
+        
         #externalLink {
             display: flex;
             justify-content: center;
@@ -333,22 +333,26 @@
             border-radius: 4px;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
         }
+        
+        #externalLink:hover {
+            color: var(--color-text-1);
+            background-color: white;
+            box-shadow: none;
+        }
 
-            #externalLink:hover {
-                color: var(--color-text-1);
-                background-color: white;
-                box-shadow: none;
-            }
-
-
+        #externalLink.hidden {
+            visibility: hidden;
+        }
+        
+        
         /* -------------------------------------------------------------------------------- */
         /* Pied de page */
         /* -------------------------------------------------------------------------------- */
-
+        
         .footer {
             position: absolute;
-            bottom: 0;
-            right: 0;
+            bottom: 5px;
+            right: 5px;
             width: 4vh;
             height: 4vh;
             background-color: #fff;
@@ -359,45 +363,45 @@
             align-items: center;
             justify-content: center;
         }
-
+        
         .niveau {
             font-size: 2.8vh;
             font-weight: bold;
             text-align: right;
             color: var(--color-background);
         }
-
+        
         /* -------------------------------------------------------------------------------- */
         /* Zoom */
         /* -------------------------------------------------------------------------------- */
-
-
+        
+        
         .zoomable {
             transform-origin: top left;
             transition: transform 0.3s ease;
         }
-
+        
         .zoom-in {
             transform: scale(1.2);
         }
-
+        
         .zoom-out {
             transform: scale(0.8);
         }
-
-
+        
+        
     </style>
 </head>
 <body>
     <div id="mindmap" class="zoomable">
-        [SVGCONTENT]
+        <!-- Insert here the SVG -->
     </div>
     <card>
         <bleed>
             <cut>
                 <safe>
                     <div class="cardName">Argumentum_Fallacies_1.1.1..Justification triviale</div>
-
+                    
                     <div class="body">
                         <div class="header">
                             <div class="supersetWrapper">
@@ -425,170 +429,124 @@
             </cut>
         </bleed>
     </card>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        const overlay = document.getElementsByTagName('card')[0];
-        const title = document.getElementsByClassName('title')[0];
-        const famille = document.getElementsByClassName('famille')[0];
-        const sous_famille = document.getElementsByClassName('sous_famille')[0];
-        const Soussousfamille = document.getElementsByClassName('Soussousfamille')[0];
-        const description = document.getElementsByClassName('desc_fr')[0];
-        const example = document.getElementsByClassName('exemple_fr')[0];
-        const externalLink = document.getElementById('externalLink');
-        const niveau = document.getElementsByClassName('niveau')[0];
-        let isNodeActive = false;
-        let hideOverlayTimeout = null;
-        let activeNode = null;
-
-        const nodes = document.querySelectorAll('.node');
-
-        const hideOverlay = () => {
-            overlay.classList.add('hidden');
-            isNodeActive = false;
-            if (activeNode) {
-                activeNode.classList.remove('active');
-                activeNode = null;
-            }
-        };
-
-        const recalculateOverlayPosition = (targetNode) => {
-            if (targetNode) {
-                const rect = targetNode.getBoundingClientRect();
-                const cardHeight = overlay.offsetHeight;
-                const cardWidth = overlay.offsetWidth;
-
-                const cardLeft = rect.left + rect.width / 2 - cardWidth / 2;
-                const cardTop = rect.top + rect.height;
-
-                // Calculate the maximum left position to ensure the card stays within the horizontal viewport
-                const maxLeft = window.innerWidth - cardWidth;
-                const cardLeftPosition = Math.max(0, Math.min(maxLeft, cardLeft));
-
-                // Calculate the maximum top position to ensure the card stays within the vertical viewport
-                const maxTop = window.innerHeight - cardHeight;
-                const cardTopPosition = Math.max(0, Math.min(maxTop, cardTop));
-
-                overlay.style.left = cardLeftPosition + 'px';
-                overlay.style.top = cardTopPosition + 'px';
-            }
-        };
-
-        
-        const resizeOverlay = () => {
-
-            overlay.style.maxWidth = '100vw';
-            overlay.style.maxHeight = '100vh';
-
-            // Recalculate the overlay position when resizing
-            if (isNodeActive) {
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const overlay = document.getElementsByTagName('card')[0];
+            const title = document.getElementsByClassName('title')[0];
+            const famille = document.getElementsByClassName('famille')[0];
+            const sous_famille = document.getElementsByClassName('sous_famille')[0];
+            const Soussousfamille = document.getElementsByClassName('Soussousfamille')[0];
+            const description = document.getElementsByClassName('desc_fr')[0];
+            const example = document.getElementsByClassName('exemple_fr')[0];
+            const externalLink = document.getElementById('externalLink');
+            const niveau = document.getElementsByClassName('niveau')[0];
+            let isNodeActive = false;
+            let hideOverlayTimeout = null;
+            let activeNode = null;
+            
+            const nodes = document.querySelectorAll('.node');
+            
+            const hideOverlay = () => {
+                overlay.classList.add('hidden');
+                isNodeActive = false;
+                if (activeNode) {
+                    activeNode.classList.remove('active');
+                    activeNode = null;
+                }
+            };
+
+            const showOverlay = (e) => {
+                isNodeActive = true;
+                
+                // Remove the 'active' class from any previously active node
                 const activeNode = document.querySelector('.node.active');
-                recalculateOverlayPosition(activeNode);
+                if (activeNode) {
+                    activeNode.classList.remove('active');
+                }
+                
+                let targetNode = e.target;
+                if (!targetNode.classList.contains('node') && targetNode.parentElement.classList.contains('node')) {
+                    targetNode = targetNode.parentElement;
+                }
+                
+                // Add the 'active' class to the clicked node
+                targetNode.classList.add('active');
+                
+                title.textContent = targetNode.textContent;
+                famille.textContent = targetNode.getAttribute('family');
+                sous_famille.textContent = targetNode.getAttribute('subfamily');
+                Soussousfamille.textContent = targetNode.getAttribute('subsubfamily');
+                description.innerHTML = targetNode.getAttribute('description');
+                example.innerHTML = targetNode.getAttribute('example');
+                
+                // Hide external link button if no link is set              
+                if (targetNode.getAttribute('link') === '') {
+                    externalLink.href = '#'
+                    externalLink.classList.add('hidden');
+                } else {
+                    externalLink.href = targetNode.getAttribute('link');
+                    externalLink.classList.remove('hidden')
+                }
+
+
+                niveau.textContent = targetNode.getAttribute('depth');
+                
+                overlay.removeAttribute('class');
+                const familyClass = targetNode.getAttribute('familyclass');
+                if (familyClass) {
+                    overlay.classList.add(familyClass);
+                }
+                
+                // Remove the 'hidden' class if it exists to ensure the card is visible
+                if (overlay.classList.contains('hidden')) {
+                    overlay.classList.remove('hidden');
+                }
+                
+                targetNode.classList.add('active');
+            };
+            
+            nodes.forEach((node) => {
+                node.addEventListener('click', showOverlay);
+                node.addEventListener('touchstart', showOverlay);
+            });
+                        
+            document.addEventListener('click', (e) => {
+                if (e.target.closest('.node') === null) {
+                    hideOverlay();
+                }
+            });
+            
+            document.addEventListener('touchstart', (e) => {
+                const isClickedOutside = !overlay.contains(e.target);
+                if (isClickedOutside) {
+                    hideOverlay();
+                }
+            });
+            
+            //Zoom
+            
+            const mindmapContainer = document.getElementById('mindmap');
+            let zoomLevel = 1;
+            
+            function zoomIn() {
+                zoomLevel += 0.1;
+                mindmapContainer.style.transform = `scale(${zoomLevel})`;
             }
-        };
-
-
-        const showOverlay = (e) => {
-            isNodeActive = true;
-
-            // Remove the 'active' class from any previously active node
-            const activeNode = document.querySelector('.node.active');
-            if (activeNode) {
-                activeNode.classList.remove('active');
-            }
-
-            let targetNode = e.target;
-            if (!targetNode.classList.contains('node') && targetNode.parentElement.classList.contains('node')) {
-                targetNode = targetNode.parentElement;
-            }
-
-            // Add the 'active' class to the clicked node
-            targetNode.classList.add('active');
-
-            title.textContent = targetNode.textContent;
-            famille.textContent = targetNode.getAttribute('family');
-            sous_famille.textContent = targetNode.getAttribute('subfamily');
-            Soussousfamille.textContent = targetNode.getAttribute('subsubfamily');
-            description.innerHTML = targetNode.getAttribute('description');
-            example.innerHTML = targetNode.getAttribute('example');
-            externalLink.href = targetNode.getAttribute('link');
-            niveau.textContent = targetNode.getAttribute('depth');
-
-            overlay.removeAttribute('class');
-            const familyClass = targetNode.getAttribute('familyclass');
-            if (familyClass) {
-                overlay.classList.add(familyClass);
-            }
-
-            // Remove the 'hidden' class if it exists to ensure the card is visible
-            if (overlay.classList.contains('hidden')) {
-                overlay.classList.remove('hidden');
-            }
-
-            targetNode.classList.add('active');
-            recalculateOverlayPosition(targetNode);
-        };
-
-
-        nodes.forEach((node) => {
-            node.addEventListener('click', showOverlay);
-            node.addEventListener('touchstart', showOverlay);
-        });
-
-        overlay.addEventListener('mouseleave', hideOverlay);
-
-        document.addEventListener('click', (e) => {
-            if (isNodeActive && e.target.closest('.node') === null) {
-                e.stopPropagation();
-                return;
-            }
-            if (e.target.closest('.node') === null) {
-                hideOverlay();
-            }
-        });
-
-        document.addEventListener('touchstart', (e) => {
-            const isClickedOutside = !overlay.contains(e.target);
-            if (isClickedOutside) {
-                hideOverlay();
-            }
-        });
-
-        // Trigger the initial resize
-        resizeOverlay();
-
-        window.addEventListener('resize', resizeOverlay);
-        window.addEventListener('orientationchange', resizeOverlay);
-
-        //Zoom
-
-        const mindmapContainer = document.getElementById('mindmap');
-        let zoomLevel = 1;
-
-        function zoomIn() {
-            zoomLevel += 0.1;
-            mindmapContainer.style.transform = `scale(${zoomLevel})`;
-        }
-
-        function zoomOut() {
-            zoomLevel -= 0.1;
-            mindmapContainer.style.transform = `scale(${zoomLevel})`;
-        }
-
-        // Example usage
-        document.addEventListener('keydown', (event) => {
-            if (event.key === '+') {
-                zoomIn();
-            } else if (event.key === '-') {
-                zoomOut();
+            
+            function zoomOut() {
+                zoomLevel -= 0.1;
+                mindmapContainer.style.transform = `scale(${zoomLevel})`;
             }
+            
+            // Example usage
+            document.addEventListener('keydown', (event) => {
+                if (event.key === '+') {
+                    zoomIn();
+                } else if (event.key === '-') {
+                    zoomOut();
+                }
+            });
         });
-
-    });
-
-
-
-
     </script>
 </body>
 </html>