WebStick/sd_card/www/admin/posteng/new.html

<link rel="stylesheet" href="mde/script/mde.css">
<script src="mde/script/mde.js"></script>
<style>
    .selectable{
        cursor: pointer;
    }

    .selectable:hover{
        background-color: rgba(0, 0, 0, 0.1);
    }

    #mediaContent{
        max-height: 50vh;
        overflow-y: auto;
    }

    .editor-preview img {
        max-width: 100%;
        height: auto;
    }

    .CodeMirror {
        resize: vertical; /* Allows vertical resizing */
        overflow: auto;  /* Ensures scrollbars appear if content overflows */
        min-height: 200px; /* Optional: Set a minimum height */
    }

    .file-item.selected {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }

    .folder-item.selected {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
</style>
<br>
<div class="ui container" style="margin-top: 20px;">
    <h2 class="ui header">New Post</h2>
    <!-- Load draft message -->
    <div id="loadDraftMessage" class="ui hidden message">
        <div class="header">Saved Draft Found</div>
        <p>A saved draft was found. Would you like to load it?</p>
        <button class="ui green basic button" id="loadDraftButton">Load Draft</button>
        <button class="ui red basic button" id="discardDraftButton">Discard</button>
    </div>
    <!-- Post Editor -->
    <div class="ui form">
        <div class="field">
            <label for="title">Title</label>
            <input type="text" id="title" placeholder="Enter title here">
        </div>
        
        <div class="field">
            <label for="editor">Post Content</label>
            <textarea id="editor"></textarea>
        </div>
        
        <button class="ui basic button" id="saveButton"><i class="ui green upload icon"></i>Publish</button>
        <button class="ui blue basic button" id="saveDraftButton"><i class="ui save icon"></i>Save as Draft</button>
    </div>
</div>

<!-- Media Selector -->
<div id="postengine_media_selector" class="ui modal">
    <i class="close icon"></i>
    <div class="content">
        <div class="ui fluid input">
            <button class="ui basic circular icon button" id="backButton">
                <i class="arrow left icon"></i>
            </button>
            <button class="ui basic circular icon button" id="parentButton" style="margin-left: 0.4em;">
                <i class="arrow up icon"></i>
            </button>
            <input type="text" placeholder="/" id="locationBar" style="margin-left: 0.4em;" value="/">
        </div>
        <div id="mediaContent" class="ui segments" style="margin-top: 1em;">
            <div class="ui basic segment" style="pointer-events: none; user-select: none; opacity: 0.5;">
                <i class="ui green circle check icon"></i> Loading media files...
            </div>
        </div>
        <div id="limited_access_warning" class="ui hidden red message" style="display:none;">
            This folder is not accessible by guest visitors but only logged-in users.
        </div>
    </div>
    <div class="actions">
        <div class="ui black deny button">
            Cancel
        </div>
        <button class="ui basic button" id="importButton">
            <i class="green download icon"></i> Import Selected
        </button>
    </div>
</div>

<script>
    var currentDir = "/img"; // Initialize current path
    var pathHistory = [currentDir]; // Initialize path history

    $(document).ready(function() {
        // Initialize SimpleMDE
        var simplemde = new SimpleMDE({ 
            element: document.getElementById("editor"),
            toolbar: [
                "bold", 
                "italic", 
                "heading", 
                "|", 
                "quote", 
                "unordered-list", 
                "ordered-list", 
                "|", 
                "link", 
                "image",
                {
                    name: "mediaSelect",
                    action: function customFunction(editor) {
                        openMediaSelector(editor);
                    },
                    className: "fa fa-folder", // Font Awesome icon
                    title: "Select Media"
                },
                "|", 
                "preview",
            ]
        });

        /*
            Media Selector

            This function will open the media selector modal when the media button is clicked.
        */

        function fetchDirectoryContents(path) {
            $.ajax({
                url: `/api/fs/list?dir=${encodeURIComponent(path)}`,
                method: 'GET',
                success: function(data) {
                    if (data.error == undefined){
                        pathHistory.push(currentDir);
                        if (path.endsWith("/")) {
                            currentDir = path.slice(0, -1); // Remove trailing slash if present
                        } else {
                            currentDir = path; // Update current directory
                        }
                        $("#locationBar").val(currentDir); // Update location bar
                        renderDirectoryContents(data);
                    } else {
                        alert("Failed to fetch directory contents: " + data.error);
                    }
                },
                error: function() {
                    alert("Error fetching directory contents.");
                }
            });
        }

        function renderDirectoryContents(contents) {
            const container = $("#mediaContent");
            container.empty();
            let folderElements = ``;
            let fileElements = ``;
            let selectableFileCounter = 0;
            contents.forEach(item => {
                if (item.IsDir) {
                    folderElements += (`
                    <div class="ui segment folder-item selectable" data-path="${currentDir + "/" + item.Filename}">
                        <i class="yellow folder icon"></i> ${item.Filename}
                    </div>
                    `);
                    selectableFileCounter++;
                } else if (!item.IsDir && isWebSafeFile(item.Filename)) {
                    let fileIcon = getFileTypeIcons(item.Filename);
                    fileElements += (`
                    <div class="ui segment file-item selectable" data-path="${currentDir + "/" + item.Filename}" data-type="${getFileType(item.Filename)}">
                        ${fileIcon} ${item.Filename}
                    </div>
                    `);
                    selectableFileCounter++;
                }
            });

            container.append(folderElements);
            container.append(fileElements);

            if (selectableFileCounter == 0) {
                container.append("<div class='ui basic segment' style='pointer-events: none; user-select: none; opacity: 0.5;'><i class='ui green circle check icon'></i> No usable files / folders found</div>");
            }

            // Add click handlers for folders and files
            $(".folder-item").on('dblclick', function() {
                const path = $(this).data('path');
                fetchDirectoryContents(path);
            });

            $(".folder-item").on("click", function(event) {
                const path = $(this).data('path');
                if (!event.ctrlKey) {
                    // Highlight the selected folder and remove previous selection if ctrl is not held
                    $(".folder-item.selected").removeClass("selected");
                }
                $(this).toggleClass("selected"); // Toggle selection for the clicked item
            });

            $(".file-item").on('dblclick', function() {
                $("#postengine_media_selector").modal("hide");
                const path = $(this).data('path');
                const type = $(this).data('type');
                addMediaFileToEditor(path, type);
            });

            $(".file-item").on("click", function(event) {
                const path = $(this).data('path');
                const type = $(this).data('type');
                if (!event.ctrlKey) {
                    // Highlight the selected file and remove previous selection if ctrl is not held
                    $(".file-item.selected").removeClass("selected");
                }
                $(this).toggleClass("selected"); // Toggle selection for the clicked item
            });

            //Show warning if the directory starts with /admin or /store
            if (currentDir.startsWith("/admin") || currentDir.startsWith("/store")) {
                $("#limited_access_warning").show();
            } else {
                $("#limited_access_warning").hide();
            }
        }

        // Bind event to the back button
        $('#backButton').on('click', function() {
            if (pathHistory.length > 1) {
                pathHistory.pop(); // Remove the current directory
                const previousPath = pathHistory.pop();
                fetchDirectoryContents(previousPath);
            }
        });

        // Bind event to the parent button
        $('#parentButton').on('click', function() {
            if (currentDir == "/") { 
                msgbox("Already at the root directory", 3000);
                return;
            }
            let parentPath = currentDir.split("/");
            parentPath.pop(); // Remove the last element (current directory)
            parentPath = parentPath.join("/"); // Join the remaining elements to form the parent path
            if (parentPath == ""){
                parentPath = "/"; // Set to root if empty
            }
            fetchDirectoryContents(parentPath);
        });

        // Bind event to the import button
        $('#importButton').on('click', function() {
            const selectedFolders = $(".folder-item.selected");
            const selectedFiles = $(".file-item.selected");
            if (selectedFiles.length === 0 && selectedFolders.length === 0) {
                alert("No files selected for import.");
                return;
            }

            selectedFolders.each(function() {
                const path = $(this).data('path');
                const type = "link"; 
                addMediaFileToEditor(path, type);
            });

            selectedFiles.each(function() {
                const path = $(this).data('path');
                const type = $(this).data('type');
                addMediaFileToEditor(path, type);
            });

            $("#postengine_media_selector").modal("hide");
        });

        function isWebSafeFile(fileName) {
            const webSafeExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'webm', 'mp3', 'ogg'];
            const extension = fileName.split('.').pop().toLowerCase();
            return webSafeExtensions.includes(extension);
        }

        function getFileType(fileName) {
            const extension = fileName.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension)) {
                return 'image';
            } else if (extension === 'webm') {
                return 'video';
            } else if (['mp3', 'ogg'].includes(extension)) {
                return 'audio';
            } else {
                return 'unknown';
            }
        }


        function openMediaSelector(editor){
            // Reset history
            pathHistory = []; // Reset path history
            fetchDirectoryContents(currentDir);
            $("#postengine_media_selector").modal("show");
        }

        function addMediaFileToEditor(mediaLink, mediaType){
            if (mediaType === 'image') {
                simplemde.codemirror.replaceSelection(`![Image](${mediaLink})`);
             } else if (mediaType === 'video') {
                let mimeType = mediaLink.split('.').pop().toLowerCase() === 'webm' ? 'video/webm' : 'video/mp4';
                simplemde.codemirror.replaceSelection(`<video style="background:black;" width="720" height="480" controls><source src="${mediaLink}" type="${mimeType}"></video>`);
            } else if (mediaType === 'audio') {
                simplemde.codemirror.replaceSelection(`<audio style="min-width: 512px;" controls><source src="${mediaLink}" type="audio/mpeg">Your browser does not support the audio element.</audio>`);
            } else if (mediaType === 'link') {
                let folderName = mediaLink.split("/").pop(); // Extract folder name from path
                simplemde.codemirror.replaceSelection(`[${folderName}](${mediaLink})`);
            } else {
                alert("Unsupported media type!");
                return;
            }
        }

        function getFileTypeIcons(fileName) {
            const extension = fileName.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension)) {
                return '<i class="blue file image icon"></i>';
            } else if (extension === 'webm') {
                return '<i class="violet file video icon"></i>';
            } else if (['mp3', 'ogg'].includes(extension)) {
                return '<i class="green file audio icon"></i>';
            } else {
                return '<i class="file icon"></i>';
            }
        }


        // Initialize with root directory
        fetchDirectoryContents(currentDir);

        // Save button functionality
        $('#saveButton').on('click', function() {
            const title = $('#title').val();
            const tags = $('#tags').val();
            const content = simplemde.value();

            console.log("Title:", title);
            console.log("Tags:", tags);
            console.log("Content:", content);

            // Add your save logic here
            alert("Content saved successfully!");
        });

        // Save Draft button functionality
        $('#saveDraftButton').on('click', function() {
            const title = $('#title').val();
            const content = simplemde.value();

            if (title.trim() === "" && content.trim() === "") {
                alert("Cannot save an empty draft.");
                return;
            }

            localStorage.setItem('draftTitle', title);
            localStorage.setItem('draftContent', content);

            msgbox("Draft saved successfully!");
        });

        // Discard Draft button functionality
        $('#discardDraftButton').on('click', function() {
            if (confirm("Are you sure you want to discard the draft? This action cannot be undone.")) {
                localStorage.removeItem('draftTitle');
                localStorage.removeItem('draftContent');

                $('#title').val('');
                simplemde.value('');

                msgbox("Draft discarded successfully!");

                $('#loadDraftMessage').addClass('hidden');
            }
        });

        // Load draft from localStorage on page load
        const savedTitle = localStorage.getItem('draftTitle');
        const savedContent = localStorage.getItem('draftContent');

        if (savedTitle || savedContent) {
            $('#loadDraftMessage').removeClass('hidden');

            $('#loadDraftButton').on('click', function() {
                $('#title').val(savedTitle || '');
                simplemde.value(savedContent || '');
                $('#loadDraftMessage').addClass('hidden');
            });
        }
    });
</script>