templates/mainContent/pdfContent.html.twig line 1

Open in your IDE?
  1. </html>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="{{ asset('hatlone/assets_preview/css/Elearn/Newsidebar.css')}}">
  9.     <link rel="stylesheet" href="{{ asset('hatlone/assets_preview/css/Elearn/mainContent.css')}}">
  10.     <link rel="stylesheet" href="{{ asset('hatlone/assets_preview/css/Elearn/purpleFrame.css')}}">
  11.     <link rel="stylesheet" href="{{ asset('hatlone/assets_preview/css/Elearn/pdfContent.css')}}">
  12.     <link rel="stylesheet" href="{{ asset('hatlone/assets_preview/css/Elearn/mediaQueries.css')}}">
  13.     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.2/dist/tailwind.min.css" rel="stylesheet">
  14.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  15.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  16.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  17.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
  18. <!-- Load PDF.js library -->
  19. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
  21. <!-- Load PDF.js worker -->
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js"></script>
  24. <script>
  25.     // Set the workerSrc to point to the correct worker file
  26.     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
  27. </script>
  29.   <style>
  30.     #popupQuestion select , #popupQuestion input{
  31.      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  32.      margin-top:10px;
  33.      margin-bottom:20px !important;
  34.     
  35.     }
  36.     #popupNote input , #popup input , #popupText input{ 
  37.      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  38.      width:100% !important;
  39.     }
  40.      #popupNote textarea{
  41.      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  42.      width:100% !important;
  43.     }
  44.    </style> 
  45. </head>
  46. <body >
  47.     
  48.     <div id="pdfContent" >
  49.         
  50.         <div id="targetDiv" >
  51.             <span class="titleContent" style="font-weight: 500;color: var(--blue-purple-color);">{{title}}</span>
  52.             <hr class="hr_underContent">
  53.             <div class="content_Icons">
  54.                 <div class="Rightspace">
  55.                     <div class="tooltip-container">
  56.                         <span class="tooltip">Ask Question</span>
  57.                         <span class="material-symbols-outlined content_Icon"  onclick="openQuestionPopup()" style="margin-right: 1vw;" >chat_bubble</span>
  58.                     </div>
  59.                       <div class="tooltip-container">
  60.                         <span class="tooltip">favourite</span>
  61.                         <span class="material-symbols-outlined content_Icon"  onclick="togglePinkColor(event)">favorite</span>
  62.                     </div>
  63.                   
  64.                 </div>
  65.                 <div class="Icons2" style="display: flex;">
  66.                  <div class="tooltip-container disabled hidden">
  67.                    <span class="tooltip">Highlight text</span>
  68.                <span class="material-symbols-outlined ink_highlighter">ink_highlighter</span>
  69.                    </div>
  71.                     <div class="tooltip-container ">
  72.                         <span class="tooltip">Mark text</span>
  73.                         <span id="sellIcon" class="material-symbols-outlined content_Icon" onclick="openPopupText() " style="margin-right: 0.5vw;">sell</span>
  74.                     </div>
  75.                     <div class="tooltip-container">
  76.                         <span class="tooltip">Add Note</span>
  77.                         <span class="material-symbols-outlined content_Icon edit-note" id="editNoteIcon" onclick="openNotePopup()" style="margin-right: 0.5vw;">edit_note</span>
  78.                     </div>
  79.                     <div class="tooltip-container">
  80.                         <span class="tooltip">Download</span>
  81.                         <span class="material-symbols-outlined content_Icon downloadBtn">download_for_offline</span>
  82.                     </div>
  83.                    
  84.                 </div>
  85.             </div>
  86.                <style>
  87.                         body{
  88.                             overflow-x:hidden !important;
  89.                         }
  90.         .pdf-viewer {
  91.             width: 100%;
  92.             height: 100%; /* Set the height to full viewport */
  93.             border: none;
  94.         }
  95.         .noteHidden{
  96.             display:none;
  97.         }
  99.     </style>
  100.             <div id="pdf-content" style="box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;border:none !important;border-radius:20px;">
  101.                 <div class="header" >
  102.                     <div style="margin-left: auto;">
  103.                           <span class="material-symbols-outlined zoom_out_pdf ink_highlighter mx-1  disabled hidden"  onclick="waitForTextSelection()" style="color:transparent !important;">ink_highlighter</span>
  104.                         <span class="material-symbols-outlined  zoom_out_pdf  edit-note noteHidden mx-1" id="editNoteIcon" onclick="openNotePopup()" >edit_note</span>
  105.                         <span id="sellIcon" class="material-symbols-outlined zoom_out_pdf tagHidden mx-1" onclick="openPopupText() ">sell</span>
  107.                         
  108.                         <span class="material-symbols-outlined zoom_out_pdf mx-1" onclick="toggleFullscreen()">zoom_out_map</span>
  109.                     </div>
  110.                     
  111.                 </div>
  112.                 
  113.                   
  114.                    <!-- Use an iframe to display the PDF -->
  115.                  <iframe  src="{{ asset('hatlone/assets_preview/PHP_intro.pdf')}}" class="pdf-viewer"  id="pdfFrame" width="100%" height="600px" style="border:none;"></iframe>
  116.                  
  117.              <!-- Popup for adding tags -->
  118.     <div id="popupNote" class="fixed inset-0 flex items-center justify-center hidden z-50">
  119.         <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-sm flex items-center justify-center">
  120.             <div class="bg-white rounded-lg p-4 sm:p-6 md:p-8 shadow-lg relative max-w-full xs:max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
  121.                 <!-- Close icon -->
  122.                 <span class="material-icons absolute top-2 right-2 text-gray-600 cursor-pointer" onclick="closeNotePopup()">close</span>
  123.                 <!-- Popup content -->
  124.                 <h3 class="text-lg font-bold mb-4" style="color: var(--main-color-title);">Create a Note</h3>
  125.                 <hr>
  126.                 <pre class="text-xs text-gray-800 my-4 whitespace-pre-wrap" style="font-family: 'Poppins', sans-serif;">
  127.                    The note feature empowers you to jot down key points and insights
  128.                    effortlessly while participating in the lecture, facilitating effective and
  129.                   organized note-taking.
  130.                   </pre>
  131.                 <input type="text" id="NoteTitleInput" placeholder="Note Title..." class="border-gray-300 border-solid border rounded-md px-3 py-2 mb-4 w-80">
  132.                  <textarea id="NoteDescription" placeholder="Description..." class="border-gray-300 border-solid border rounded-md px-3 py-2 mb-4 w-80"></textarea>
  133.                 <hr>
  134.                 <button onclick="addNote()" class="text-white px-4 py-1 rounded-md" style="background-color: var(--blue-purple-color); margin-top: 1vw;">Confirm</button>
  135.             </div>
  136.         </div>
  137.     </div>       
  138.     <div id="popupText" class="fixed inset-0 flex items-center justify-center hidden z-50">
  139.         <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-sm flex items-center justify-center">
  140.             <div class="bg-white rounded-lg p-4 sm:p-6 md:p-8 shadow-lg relative max-w-full xs:max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
  141.                 <!-- Close icon -->
  142.                 <span class="material-icons absolute top-2 right-2 text-gray-600 cursor-pointer" onclick="closePopupText()">close</span>
  143.                 <!-- Popup content -->
  144.                 <h3 class="text-lg font-bold mb-4" style="color: var(--main-color-title);">Create a Tag</h3>
  145.                 <hr>
  146.                 <pre class="text-xs text-gray-800 my-4 whitespace-pre-wrap" style="font-family: 'Poppins', sans-serif;">
  147.                  The tag feature enables you to seamlessly return to any specific text
  148.                   in the script, providing a convenient way to revisit and review particular
  149.                   text .</pre>
  150.                 <input type="text" id="tagTitleInput" placeholder="text..." class="border-gray-300 border-solid border rounded-md px-3 py-2 mb-4 w-80">
  151.                 <hr>
  152.                 <button onclick="addTagPDF()" class="text-white px-4 py-2 rounded-md" style="background-color: var(--blue-purple-color); margin-top: 1vw;">Confirm</button>
  153.             </div>
  154.         </div>
  155.     </div>
  156.                 <div class="content" id="contentContainer" hidden>
  157.                     <p id="contentParagraph">
  158.                         1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  159.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  160.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  161.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  162.                     </p>
  163.                 </div>
  164.             </div>
  165.            <div class="container" style="box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;border:none !important;padding-bottom:60px;border-radius:20px;padding-top:5px;padding-left:10px;padding-right:10px;margin-top:10px;margin-bottom:5px;">
  166.                 <div style="align-items: center; display: flex; margin-top: 3vh; margin-bottom: 3vh; font-weight: 500;color: var(--blue-color);">
  167.                     <span class="material-symbols-outlined content_Icon edit-note" id="editNoteIcon" style="margin-right: 0.5vw;color:var(--blue-purple-color);">edit_note</span>
  168.                     <h1 style="font-weight: bold;color:var(--blue-purple-color) !important;">Your Notes</h1>
  169.                 </div>
  170.                 <hr style="width: 90%; margin: 2vh auto;">
  171.                 <div class="notesDiv" style="align-items: center; display: block; color: var(--blue-color);">
  172.                     
  173.                 </div>
  174.             </div>
  175.         </div>
  177.          <div id="tagsContainer" style="box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;border:none !important;margin-bottom:10px;padding-bottom:10px;padding-left:10px;">
  178.             <div style="display: flex; justify-content: center; color:var(--blue-purple-color); margin-top: 2vh;">
  179.                 <span class="material-symbols-outlined content_Icon_filled" style="margin-right: 0.5vw;">sell</span>
  180.                 <p style="margin: 0; font-weight: bold;">Your tags</p>
  181.             </div>
  182.             <hr style="width: 10vw; margin: 2vh auto;">
  183.         </div>
  184.     </div>
  185.    
  186.     <!-- Popup for adding tags -->
  187.     <div id="popupQuestion" class="fixed inset-0 flex items-center justify-center hidden z-50">
  188.         <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-filter backdrop-blur-sm flex items-center justify-center">
  189.             <div class="bg-white rounded-lg p-4 sm:p-6 md:p-8 shadow-lg relative max-w-full xs:max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl" style="display: block;">
  190.                 <!-- Close icon -->
  191.                 <span class="material-icons absolute top-2 right-2 text-gray-600 cursor-pointer" onclick="closeQuestionPopup()">close</span>
  192.                 <!-- Popup content -->
  193.                 <h3 class="text-lg font-bold mb-4" style="color: var(--main-color-title);">You have a Question?</h3>
  194.                 <hr style=" margin: 2vh auto;">
  195.                 <select id="NoteTypeSelect" class="border-gray-300 border-solid border rounded-md px-3 py-2 mb-4 w-80">
  196.                     <option value="" disabled selected>Select a Question</option>
  197.                     <option value="a">aaaaa</option>
  198.                     <option value="b">bbbbbb</option>
  199.                     <option value="c">ccccc</option>
  200.                     <option value="d">ddddd</option>
  201.                   </select>
  202.                   
  203.                   <div style="display: flex; align-items: center; margin-bottom: 1vh;">
  204.                     <p style="color: var(--main-text-color);">You didn't find a question in the list ?</p>
  205.                     <label class="switch">
  206.                       <input type="checkbox" id="toggleInput">
  207.                       <span class="slider"></span>
  208.                     </label>
  209.                   </div>
  210.                   
  211.                   <input type="text" id="Question" placeholder="Write a question here" class="border-gray-300 border-solid border rounded-md px-3 py-2 mb-4 w-80" disabled>
  212.                   
  213.                 <hr>
  214.                 <button onclick="closeQuestionPopup()" class="text-white px-4 py-2 rounded-md" style="background-color: var(--blue-purple-color); margin-top: 1vw;">Confirm</button>
  215.             </div>
  216.         </div>
  217.     </div>
  218.  
  219. <style>
  220.              #popupNote , #popupText {
  221.     z-index: 9999; /* Une valeur très élevée pour s'assurer que les pop-ups apparaissent en plein écran */
  222. }
  223. </style>
  224.     <script>
  225.            function waitForTextSelection() {
  226.     const inkHighlighter = document.querySelector('.material-symbols-outlined.ink_highlighter');
  227.     // Add a class when the ink_highlighter icon is clicked
  228.     inkHighlighter.classList.add('waitSelection');
  230.     // Function to handle the selection and apply highlighting
  231.     function handleSelection(event) {
  232.         event.preventDefault(); // Prevent default selection behavior
  233.         highlightSelectedText(); // Highlight selected text
  235.         // Remove the class after handling the selection
  236.         inkHighlighter.classList.remove('waitSelection');
  237.         // Remove the event listener after handling the selection
  238.         document.removeEventListener('mouseup', handleSelection);
  239.     }
  241.     // Add event listener for mouseup to wait for text selection
  242.     document.addEventListener('mouseup', handleSelection);
  243. }
  244. function waitForPDFToLoad() {
  245.     const iframe = document.getElementById('pdfFrame');
  246.     iframe.onload = function () {
  247.         const checkPDFLoaded = setInterval(() => {
  248.             const pdfViewerApp = iframe.contentWindow.PDFViewerApplication;
  249.            
  250.                 clearInterval(checkPDFLoaded);
  251.             
  252.         }, 500); // Check every 500ms
  253.     };
  254. }
  263. function highlightSelectedText() {
  264.     const selection = window.getSelection();
  266.     if (selection.rangeCount > 0) {
  267.         const range = selection.getRangeAt(0);
  269.         // Get page number
  270.         const pageNumber = getPageNumber();
  272.         if (!pageNumber) {
  273.             console.error('Could not retrieve page number.');
  274.             return;
  275.         }
  277.         // Get line number approximation
  278.         const lineNumber = getLineNumber(range);
  280.         // Call addTagPDF with page number and line number
  281.         addTagPDF(pageNumber, lineNumber);
  282.     } else {
  283.         console.error('No text selected.');
  284.     }
  285. }
  287. /*function addTagPDF() {
  288.     const tagTitleInput = document.getElementById('tagTitleInput').value.trim();
  289.     if (tagTitleInput) {
  290.         const tagElement = document.createElement('div');
  291.         tagElement.classList.add("tag");
  292.         tagElement.style.cursor = "pointer";
  293.         tagElement.style.fontWeight = 'bold';
  294.         tagElement.style.color = 'var(--blue-purple-color)';
  295.         tagElement.style.wordBreak = 'break-word'; 
  296.         tagElement.style.whiteSpace = 'normal';
  297.         tagElement.style.textAlign = 'center';
  299.         // Display the tag with the page number and line number
  300.         tagElement.textContent = `${tagTitleInput}`;
  302.         document.getElementById('tagsContainer').appendChild(tagElement);
  303.         closePopupText();
  304.     }
  305. }*/
  307. // Load and parse the PDF
  308. // Charger et analyser le PDF
  309. async function loadPDF() {
  310.     const url = "{{ asset('hatlone/assets_preview/PHP_intro.pdf') }}"; // Chemin vers votre fichier PDF
  311.     const pdf = await pdfjsLib.getDocument(url).promise;
  313.     const textByPage = [];
  315.     for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
  316.         const page = await pdf.getPage(pageNum);
  317.         const textContent = await page.getTextContent();
  319.         // Extraire le texte de la page et le normaliser
  320.         const pageText = textContent.items.map(item => item.str).join(' ').replace(/\s+/g, ' ').trim();
  321.         textByPage.push({ pageNum, pageText });
  322.     }
  324.     return textByPage;
  325. }
  328. // Rechercher un terme dans le texte du PDF
  329. function searchTermInPDF(term, textByPage) {
  330.     const termLower = term.toLowerCase();
  332.     for (const { pageNum, pageText } of textByPage) {
  333.         const termIndex = pageText.toLowerCase().indexOf(termLower);
  335.         if (termIndex !== -1) {
  336.             // Calculer la ligne approximative où le terme apparaît
  337.             const estimatedLine = Math.floor(termIndex / 100) + 1; // Estimation du numéro de ligne
  338.             return { page: pageNum, line: estimatedLine };
  339.         }
  340.     }
  342.     return null;
  343. }
  346. // Afficher le résultat de la recherche dans le conteneur des tags
  347. function displaySearchResult(term, result) {
  348.     const tagsContainer = document.getElementById('tagsContainer');
  349.     const tagElement = document.createElement('div');
  350.     tagElement.classList.add("tag");
  351.     tagElement.style.fontWeight = 'bold';
  352.     tagElement.style.color = 'var(--blue-purple-color)';
  353.     tagElement.style.marginBottom = '1vh';
  354.     tagElement.style.cursor = 'pointer';
  356.     if (result) {
  357.         tagElement.textContent = `${term} (Page: ${result.page}, Ligne: ${result.line})`;
  358.         tagElement.setAttribute('data-page', result.page); // Stocker le numéro de la page dans un attribut
  360.         // Ajouter un événement clic pour naviguer vers la page correspondante lors du clic
  361.         tagElement.addEventListener('click', function () {
  362.             goToPage(result.page); // Appeler la fonction pour aller à la page spécifique
  363.         });
  364.     } else {
  365.         tagElement.textContent = `${term} non trouvé dans le PDF`;
  366.     }
  368.     tagsContainer.appendChild(tagElement);
  369. }
  372. async function addTagPDF() {
  373.     const tagTitleInput = document.getElementById('tagTitleInput').value.trim();
  375.     if (tagTitleInput) {
  376.         const textByPage = await loadPDF(); // Charger et analyser le PDF
  378.         // Limiter la recherche aux premiers mots du paragraphe (ex. : les 5 premiers mots)
  379.         const firstFewWords = tagTitleInput.split(' ').slice(0, 5).join(' ');
  380.         
  381.         const searchResult = searchTermInPDF(firstFewWords, textByPage); // Rechercher le terme
  382.         displaySearchResult(firstFewWords, searchResult); // Afficher le résultat
  383.     }
  385.     closePopupText(); // Fermer la popup d'entrée de tag
  386. }
  389. // Function to navigate to a specific page in the PDF
  390. function goToPage(pageNumber) {
  391.     const iframe = document.getElementById('pdfFrame');
  392.     const pdfViewerApp = iframe.contentWindow.PDFViewerApplication;
  394.     if (pdfViewerApp && pdfViewerApp.page) {
  395.         pdfViewerApp.page = pageNumber; // Set the PDF viewer to the specified page
  396.     }
  397. }
  403.             function openPopupText() {
  404.                 //toggleFullscreen();
  405.                 //if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
  406.                     document.getElementById('popupText').classList.remove('hidden');
  407.                     document.getElementById('tagTitleInput').value = ''; // Clear input field
  408.             // }
  409.             }
  410.             function closePopupText() {
  411.                 document.getElementById('popupText').classList.add('hidden');
  412.             }
  416.             function highlightSelectedTextPink() {
  417.             var selection = window.getSelection();
  418.             
  419.             if (selection.rangeCount > 0) {
  420.                 var range = selection.getRangeAt(0);
  421.                 
  422.                 // Check if the selection is within a single text node
  423.                 if (range.startContainer === range.endContainer && range.startContainer.nodeType === Node.TEXT_NODE) {
  424.                     var span = document.createElement('span');
  425.                     span.style.backgroundColor = 'rgb(255, 141, 179)'; // Change to green or desired color
  426.                     range.surroundContents(span);
  427.                 } else {
  428.                     console.error('Cannot highlight: Selection spans multiple nodes or non-text nodes.');
  429.                 }
  430.             } else {
  431.                 console.error('No text selected.');
  432.             }
  433.         }
  435.         function highlightText(text) {
  436.             const content = document.querySelector('#pdf-content .content');
  437.             const regex = new RegExp(`(${text})`, 'gi');
  439.             // Replace only the text nodes, preserving existing HTML structure
  440.             const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false);
  441.             const textNodes = [];
  442.             while (walker.nextNode()) {
  443.                 textNodes.push(walker.currentNode);
  444.             }
  445.             textNodes.forEach(node => {
  446.                 const nodeText = node.nodeValue;
  447.                 const newHTML = nodeText.replace(regex, '<span class="highlight">$1</span>');
  448.                 if (newHTML !== nodeText) {
  449.                     const tempDiv = document.createElement('div');
  450.                     tempDiv.innerHTML = newHTML;
  451.                     while (tempDiv.firstChild) {
  452.                         node.parentNode.insertBefore(tempDiv.firstChild, node);
  453.                     }
  454.                     node.parentNode.removeChild(node);
  455.                 }
  456.             });
  457.         }
  459.         function removeHighlight(text) {
  460.             const content = document.querySelector('#pdf-content .content');
  461.             const regex = new RegExp(`<span class="highlight">(${text})</span>`, 'gi');
  463.             // Replace only the text nodes, preserving existing HTML structure
  464.             const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false);
  465.             const textNodes = [];
  466.             while (walker.nextNode()) {
  467.                 textNodes.push(walker.currentNode);
  468.             }
  469.             textNodes.forEach(node => {
  470.                 const nodeText = node.nodeValue;
  471.                 const newHTML = nodeText.replace(regex, '$1');
  472.                 if (newHTML !== nodeText) {
  473.                     const tempDiv = document.createElement('div');
  474.                     tempDiv.innerHTML = newHTML;
  475.                     while (tempDiv.firstChild) {
  476.                         node.parentNode.insertBefore(tempDiv.firstChild, node);
  477.                     }
  478.                     node.parentNode.removeChild(node);
  479.                 }
  480.             });
  482.             // Remove all highlight spans
  483.             const spans = content.querySelectorAll('span.highlight');
  484.             spans.forEach(span => {
  485.                 const parent = span.parentNode;
  486.                 parent.replaceChild(document.createTextNode(span.textContent), span);
  487.                 parent.normalize(); // Merges adjacent text nodes into one
  488.             });
  489.         }
  490.         
  491.         function enterFullscreen(element) {
  492.             if (element.requestFullscreen) {
  493.                 element.requestFullscreen();
  494.             } else if (element.mozRequestFullScreen) { // Firefox
  495.                 element.mozRequestFullScreen();
  496.             } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
  497.                 element.webkitRequestFullscreen();
  498.             } else if (element.msRequestFullscreen) { // IE/Edge
  499.                 element.msRequestFullscreen();
  500.             }
  501.         }
  503.         function exitFullscreen() {
  504.             if (document.exitFullscreen) {
  505.                 document.exitFullscreen();
  506.             } else if (document.mozCancelFullScreen) { // Firefox
  507.                 document.mozCancelFullScreen();
  508.             } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
  509.                 document.webkitExitFullscreen();
  510.             } else if (document.msExitFullscreen) { // IE/Edge
  511.                 document.msExitFullscreen();
  512.             }
  513.         }
  515.         function toggleFullscreen() {
  516.             const element = document.getElementById('pdf-content');
  517.             const highlighterIcon = document.querySelector('.material-symbols-outlined.zoom_out_pdf.ink_highlighter');
  518.             const tagHidden=document.querySelector(".material-symbols-outlined.zoom_out_pdf.tagHidden");
  519.             const noteHidden=document.querySelector(".material-symbols-outlined.zoom_out_pdf.noteHidden");
  520.             if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
  521.                 enterFullscreen(element);
  522.                 highlighterIcon.style.display = 'inline-block'; // Or any other display value you prefer
  523.                 tagHidden.style.display = 'inline-block';
  524.                 noteHidden.style.display = 'inline-block';
  525.             } else {
  526.                 exitFullscreen();
  527.                 highlighterIcon.style.display = 'none';
  528.                 tagHidden.style.display = 'none';
  529.                 noteHidden.style.display = 'none';
  530.             }
  531.         }
  532.     </script>
  533.     <style>
  534.         .disabled {
  535.     pointer-events: none; /* Prevents clicking */
  536.     opacity: 0.5;         /* Makes the icon look disabled */
  537.     cursor: not-allowed;  /* Shows the "not allowed" cursor */
  538. }
  540.     </style>
  541.     <script>
  542.         document.querySelectorAll('.downloadBtn').forEach(button => {
  543.     button.addEventListener('click', function () {
  544.         // Create a temporary link element
  545.         var link = document.createElement('a');
  546.         link.href = "{{ asset('hatlone/assets_preview/PHP_intro.pdf') }}"; // Path to the PDF file
  547.         link.download = 'PHP_intro.pdf'; // The name of the file to be downloaded
  548.         link.click(); // Simulate the click to download the file
  549.     });
  550. });
  551.  // Function to open note popup
  552.     function openNotePopup() {
  553.         document.getElementById('popupNote').classList.remove('hidden');
  554.         document.getElementById('NoteTitleInput').value = ''; // Clear input field
  555.         document.getElementById('NoteDescription').value = ''; // Clear input field
  556.     }
  557.       // Function to add note
  558.     function addNote() {
  559.         const noteTitle = document.getElementById('NoteTitleInput').value.trim();
  560.         const noteDescription = document.getElementById('NoteDescription').value.trim();
  561.         if (noteTitle !== '' && noteDescription !== '') {
  562.             displayNote(noteTitle, noteDescription);
  563.             closeNotePopup();
  564.                // Show the SweetAlert success message
  565.     Swal.fire({
  566.         icon: 'success',
  567.         title: 'Success!',
  568.         text: 'Your note has been added successfully.',
  569.     });
  570.         }
  571.      
  572.     }
  573.     function displayNote(title, description) {
  574.     const notesDiv = document.querySelector('.notesDiv');
  576.     const noteContainer = document.createElement('div');
  577.     noteContainer.style.flexDirection = 'column';
  578.     noteContainer.style.marginBottom = '1vh';
  580.     const titleSpan = document.createElement('span');
  581.     titleSpan.innerHTML = (title || "No Title") + "&nbsp;:&nbsp;";
  582.     titleSpan.style.fontWeight = 'bold';
  584.     const descriptionSpan = document.createElement('span');
  585.     descriptionSpan.textContent = description || "No Description";
  587.     noteContainer.appendChild(titleSpan);
  588.     noteContainer.appendChild(descriptionSpan);
  589.     notesDiv.appendChild(noteContainer);
  590. }
  591.     </script>
  593. </body>
  594. </html>