HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/aippt/resources/views/user/
Current File : /home/htlwork.com/www/dev/aippt/resources/views/user/view_ppt.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View and Edit PPT</title>
    <link rel="stylesheet" href="../../ppt/css/pptxjs.css">
    <link rel="stylesheet" href="../../ppt/css/nv.d3.min.css">


    <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
    <script type="text/javascript" src="../../ppt/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../ppt/js/jszip.min.js"></script>
    <script type="text/javascript" src="../../ppt/js/filereader.js"></script>
    <script type="text/javascript" src="../../ppt/js/d3.min.js"></script>
    <script type="text/javascript" src="../../ppt/js/nv.d3.min.js"></script>
    <script type="text/javascript" src="../../ppt/js/pptxjs.js"></script>
    <script type="text/javascript" src="../../ppt/js/divs2slides.js"></script>
    <script type="text/javascript" src="../../ppt/js/jquery.fullscreen-min.js"></script>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script src="path/to/pptxToHtml.js"></script> <!-- Replace with the correct path -->

   

    <style>
        html, body { margin: 0; padding: 0; }
        #warper { text-align: center; margin: auto; width: 90%; }
        #result { margin-top: 20px; border: 1px solid #ccc; padding: 10px; }
        .editable { border: 1px dashed red; cursor: pointer; }
        .editor { width: 100%; height: auto; }



        .col-md-3 {
    border: 2px solid #3498db; /* Beautiful blue border */
    border-radius: 10px;
    padding: 15px;
    background: #f8f9fa; /* Light background */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
     max-height: 800px;  
    
    /* Adjust as needed */
    overflow-y: auto; /* Enables scrolling */
    margin-top:20px;
}

.slide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slide-list li {
    padding: 70px;
    margin-bottom: 5px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-list li:hover {
    background: #3498db;
    color: white;
}

.slide-list .active_slide{
    background: #3498db;
    color: white;
}

    </style>
</head>
<body>
    <div id="warper">
      


        <div class="container">

        <div class="row">

        <div class="col-md-3">

        <ul class="slide-list">
</ul>
   
</div>

<div class="col-md-9">

<div id="result"></div>
</div>

</div>



</div>
      
    
    </div>

    <!-- <button id="convert">Download PPT</button> -->


    <script>
        $(document).ready(function () {
            let isFullscreenMode = false;
            let editMode = false;
            const pptFilePath = "../../uploads/ppt/dynamic_presentation.pptx"; // Change to your actual file path









 // Convert HTML from #result to PPT (based on editable content)
 $("#convert").on("click", function () {
            let pptx = new PptxGenJS();
            let slide = pptx.addSlide();

            let slideWrapper = document.getElementById("all_slides_warpper");

// Loop through each slide div inside the wrapper
let slides = slideWrapper.getElementsByClassName("slide");
Array.from(slides).forEach((slideElement, index) => {
    let slideDiv = pptx.addSlide();
    
    // Extract SVG content and convert to PNG
    let svgElements = slideElement.getElementsByTagName("svg");
                Array.from(svgElements).forEach((svgEl) => {
                    // Render SVG to canvas and convert to PNG
                    let svgData = new XMLSerializer().serializeToString(svgEl);
                    let img = new Image();
                    let canvas = document.createElement("canvas");
                    let ctx = canvas.getContext("2d");
                    
                    img.onload = function () {
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);
                        let imgDataUrl = canvas.toDataURL("image/png");

                        // Add the PNG image to PowerPoint
                        slideDiv.addImage({
                            data: imgDataUrl,
                            x: 0.5,
                            y: 0.5,
                            w: 9, // Adjust size
                            h: 4  // Adjust size
                        });
                    };
                    img.src = "data:image/svg+xml;base64," + btoa(svgData);
                });


    // Extract text content from divs inside slide
    let textDivs = slideElement.getElementsByClassName("block");
    Array.from(textDivs).forEach((textDiv) => {
        let textContent = textDiv.innerText;
        let style = window.getComputedStyle(textDiv);
        let fontSize = parseInt(style.fontSize);
        let color = style.color;
        let topPosition = parseFloat(style.top) / 1000;  // Adjust position based on your need
        let leftPosition = parseFloat(style.left) / 1000;

        slideDiv.addText(textContent, {
            x: leftPosition,
            y: topPosition,
            fontSize: fontSize,
            color: rgbToHex(color),
            w: 9  // Adjust width
        });
    });
});

// Generate the PPTX file
pptx.writeFile({ fileName: "Converted_Presentation.pptx" });
}
 );
        // Convert image to Base64
        function getBase64Image(img) {
            let canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            return canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
        }

        // Convert RGB or RGBA color to HEX
        function rgbToHex(rgb) {
            let result;
            if (rgb.search("rgb") === -1) {
                return rgb; // Already in hex format
            }
            result = rgb.replace(/^rgb(?:a)?\(/, '').replace(/\)$/, '').split(',').map(function (x) {
                return parseInt(x).toString(16).padStart(2, '0');
            }).join('');
            return "#" + result;
        }








            // Fullscreen functionality
            $("#fullscreen-btn").on("click", function () {
                if (!isFullscreenMode) {
                    $("#result").css({ "width": "100%", "margin": "0 auto" }).toggleFullScreen();
                    isFullscreenMode = true;
                } else {
                    $("#result").toggleFullScreen();
                    isFullscreenMode = false;
                }
            });

            // PPT view functionality with predefined file
            const initializePPTView = () => {
                $("#result").pptxToHtml({
                    pptxFileUrl: pptFilePath,  // Load the PPTX file from the server
                    slideMode: false,
                    keyBoardShortCut: false,

         
            
                });
            };



            // Function to generate slide list dynamically
const generateSlideList = () => {
    let slides = $("#result .slide"); // Select all loaded slides
 
    
        let listItems = '';
        
      // Loop through the slides and create li elements
    for (let j = 0; j < slides.length; j++) {

       let li='';
        if(j == 0){
         li = '<li class="active_slide"  data-slide-index="' + j + '">Slide ' + (j + 1) + '</li>';  // Create li dynamically
        }else{
             li = '<li class=""  data-slide-index="' + j + '">Slide ' + (j + 1) + '</li>';  // Create li dynamically
        }
        listItems += li;  // Add li to the listItems string
    }

    // Append the generated list into the .slide-list
    $(".slide-list").append(listItems);

    const slides2 = document.querySelectorAll('#result .slide');
    // Loop through all slides and hide them
    slides2.forEach(slide => {
    slide.style.display = 'none';
});

// Get the first slide and display it
const firstSlide = slides2[0];
if (firstSlide) {
    firstSlide.style.display = 'block';
}
    
};




// Function to show the corresponding slide and update the active state
$(".slide-list").on("click", "li", function() {
    // Get the clicked slide index
    const index = $(this).data("slide-index");

    // Hide all slides
    $(".slide").hide();

    // Show the selected slide
    $(".slide").eq(index).show();

    // Remove the active class from all li items and add it to the clicked li
    $(".slide-list li").removeClass("active_slide");
    $(this).addClass("active_slide");
});


   // Observe changes in #result and extract thumbnails
   const observeSlides = () => {
        let observer = new MutationObserver(() => {
            $(".col-md-3").html(""); // Clear previous thumbnails
            $("#result .slide").each(function (index) {
                let slideThumbnail = $(this).clone(); // Clone the slide
                $(slideThumbnail).css({ 
                    "width": "100px", 
                    "height": "70px", 
                    "overflow": "hidden", 
                    "cursor": "pointer",
                    "border": "1px solid #ccc",
                    "margin-bottom": "5px"
                });

                // Append thumbnail to .col-md-3
                $(".col-md-3").append(
                    `<div class="slide-preview" data-index="${index}">
                        ${slideThumbnail.html()}
                    </div>`
                );
            });
        });

        // Observe #result for added slides
        observer.observe(document.getElementById("result"), { childList: true, subtree: true });
    };







       


            // Initial view on page load
            initializePPTView();

            setTimeout(function() {
    // Your code here
    generateSlideList();
}, 3000);

           
         //   observeSlides();

            // Enable/Disable Edit Mode
            $("#edit-mode-btn").on("click", function () {
                editMode = !editMode;
                if (editMode) {
                    $(this).val("Disable Edit Mode");
                    $("#save-btn").show();
                    $("#result .slide").addClass("editable");
                } else {
                    $(this).val("Enable Edit Mode");
                    $("#save-btn").hide();
                    $("#result .slide").removeClass("editable");
                }
            });

            // Make slide text editable
            $(document).on("click", ".editable", function () {
                if (editMode) {
                    let currentText = $(this).text();
                    $(this).html(`<textarea class="editor">${currentText}</textarea>`);
                }
            });

            // Save changes and return to view mode
            $("#save-btn").on("click", function () {
                $(".editor").each(function () {
                    let updatedText = $(this).val();
                    $(this).parent().text(updatedText);
                    $(this).remove();
                });

                // Disable edit mode and reset the view
                editMode = false;
                $("#edit-mode-btn").val("Enable Edit Mode");
                $("#save-btn").hide();
                $("#result .slide").removeClass("editable");

                alert("Changes saved successfully!");
                initializePPTView(); // Reinitialize the PPT view
            });
        });


        

       
    </script>




</body>
</html>