Subversion Repositories SmartDukaan

<style>

    .quill-editor {

        height: 250px;

    }

    .quill-editor .ql-editor {

        min-height: 200px;

        font-size: 14px;

    }

    .uploaded-file-item {

        margin-top: 6px;

        font-size: 13px;

        color: #3a8bbf;

        font-weight: 500;

    }

    .uploaded-file-item i {

        margin-right: 6px;

        color: #3a8bbf;

    }

    /* Emoji Picker Styles */

    .ql-emoji {

        font-size: 16px !important;

    }

    .emoji-picker-container {

        position: absolute;

        z-index: 1000;

        background: #fff;

        border: 1px solid #ccc;

        border-radius: 8px;

        padding: 10px;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

        display: none;

        max-width: 320px;

    }

    .emoji-picker-container.show {

        display: block;

    }

    .emoji-grid {

        display: grid;

        grid-template-columns: repeat(8, 1fr);

        gap: 5px;

    }

    .emoji-item {

        font-size: 22px;

        cursor: pointer;

        padding: 5px;

        text-align: center;

        border-radius: 4px;

        transition: background 0.2s;

    }

    .emoji-item:hover {

        background: #e8e8e8;

    }

    .emoji-category {

        font-size: 12px;

        color: #666;

        margin: 8px 0 5px 0;

        font-weight: bold;

        border-bottom: 1px solid #eee;

        padding-bottom: 3px;

    }

    .emoji-category:first-child {

        margin-top: 0;

    }

</style>

<section class="wrapper">

    <div class="row">

        <div class="col-lg-12">

            <h3 class="page-header"><i class="icon_document_alt"></i>Post Bulletin</h3>

            <ol class="breadcrumb">

                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>

                <li><i class="icon_document_alt"></i>Post Bulletin</li>

            </ol>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-12">

            <form method="post" action="${rc.contextPath}/bulletin/save">

                <div class="row">

                    ##                    <div class="col-md-8">

                    ##                        <!-- Title -->

                    ##                        <div class="form-group">

                    ##                            <label>Title</label>

                    ##                            <input type="text" id="btitle" class="form-control" required>

                    ##                        </div>

                    ##                    </div>

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

                        <!-- Region -->

                        <div class="form-group">

                            <label>Region</label>

                            <select id="bregionId" class="form-control" required>

                                #foreach($region in $regionList)

                                    <option value="$region.getId()">$region.getName()</option>

                                #end

                            </select>

                        </div>

                    </div>

                </div>

                <div class="row">

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

                        <div class="form-group">

                            <img id="imgPreview" style="max-width:200px; display:none; margin-top:10px;"/>

                        </div>

                        <div class="form-group">

                            <div id="uploadedFileList"></div>

                        </div>

                    </div>

                </div>

                <!-- Description (Editor) -->

                <div class="form-group">

                    <label>Description</label>

                    <div id="bulletinEditor" class="quill-editor"></div>

                </div>

                <button type="submit" class="btn btn-primary post-bulletin-button">

                    Post Bulletin

                </button>

            </form>

        </div>

    </div>

</section>

<form id="uploadForm" enctype="multipart/form-data" style="display:none">

    <input type="file" id="uploadFileInput" name="file"

           accept="image/*,.pdf,.csv,.xls,.xlsx">

</form>

<input type="hidden" id="bulletinDocumentIds"/>

<!-- Emoji Picker (populated by JavaScript) -->

<div id="emojiPicker" class="emoji-picker-container"></div>

<script>

    var quill;

    var uploadedDocumentIds = [];

    // Emoji data with Unicode code points (using String.fromCodePoint for compatibility)

    var emojiData = {

        'Smileys': [

            0x1F600, 0x1F603, 0x1F604, 0x1F601, 0x1F60A, 0x1F60D,

            0x1F970, 0x1F618, 0x1F61C, 0x1F60E, 0x1F929, 0x1F607,

            0x1F642, 0x1F609, 0x1F60B, 0x1F917

        ],

        'Emotions': [

            0x1F622, 0x1F62D, 0x1F624, 0x1F620, 0x1F621, 0x1F914,

            0x1F610, 0x1F611, 0x1F62E, 0x1F631, 0x1F634, 0x1F912,

            0x1F637, 0x1F922, 0x1F973, 0x1F92D

        ],

        'Gestures': [

            0x1F44D, 0x1F44E, 0x1F44F, 0x1F64C, 0x1F91D, 0x270C,

            0x1F91E, 0x1F44C, 0x1F44B, 0x1F4AA, 0x1F64F, 0x261D,

            0x1F446, 0x1F447, 0x1F448, 0x1F449

        ],

        'Objects': [

            0x2764, 0x1F4AF, 0x1F525, 0x2B50, 0x2728, 0x1F4B0,

            0x1F4E2, 0x1F4E3, 0x1F389, 0x1F38A, 0x1F3C6, 0x1F4C8,

            0x1F4C9, 0x2705, 0x274C, 0x26A0

        ]

    };

    // Build emoji picker HTML

    function buildEmojiPicker() {

        var html = '';

        for (var category in emojiData) {

            html += '<div class="emoji-category">' + category + '</div>';

            html += '<div class="emoji-grid">';

            emojiData[category].forEach(function (codePoint) {

                var emoji = String.fromCodePoint(codePoint);

                html += '<span class="emoji-item">' + emoji + '</span>';

            });

            html += '</div>';

        }

        document.getElementById('emojiPicker').innerHTML = html;

    }

    $(document).ready(function () {

        // Build emoji picker

        buildEmojiPicker();

        quill = new Quill('#bulletinEditor', {

            theme: 'snow',

            modules: {

                toolbar: {

                    container: [

                        [{font: []}, {size: []}],

                        ['bold', 'italic', 'underline'],

                        [{color: []}, {background: []}],

                        [{header: 1}, {header: 2}],

                        [{list: 'ordered'}, {list: 'bullet'}],

                        [{align: []}],

                        ['link', 'image', 'emoji'],

                        ['clean']

                    ],

                    handlers: {

                        image: imageHandler,

                        emoji: emojiHandler

                    }

                }

            }

        });

        // Add emoji icon to the toolbar button

        var emojiButton = document.querySelector('.ql-emoji');

        if (emojiButton) {

            emojiButton.innerHTML = String.fromCodePoint(0x1F600);

        }

        // Handle emoji selection

        $('#emojiPicker').on('click', '.emoji-item', function () {

            var emoji = $(this).text();

            var range = quill.getSelection(true);

            quill.insertText(range.index, emoji);

            quill.setSelection(range.index + emoji.length);

            $('#emojiPicker').removeClass('show');

        });

        // Close emoji picker when clicking outside

        $(document).on('click', function (e) {

            if (!$(e.target).closest('#emojiPicker, .ql-emoji').length) {

                $('#emojiPicker').removeClass('show');

            }

        });

    });

    function emojiHandler() {

        var emojiPicker = document.getElementById('emojiPicker');

        var emojiButton = document.querySelector('.ql-emoji');

        // Position the picker below the emoji button

        var rect = emojiButton.getBoundingClientRect();

        var editorContainer = document.querySelector('.quill-editor');

        var editorRect = editorContainer.getBoundingClientRect();

        emojiPicker.style.top = (rect.bottom + window.scrollY + 5) + 'px';

        emojiPicker.style.left = Math.min(rect.left, editorRect.right - 330) + 'px';

        // Toggle visibility

        emojiPicker.classList.toggle('show');

    }

    function imageHandler() {

        const input = document.getElementById('uploadFileInput');

        input.value = '';

        input.click();

        input.onchange = function () {

            const file = input.files[0];

            if (!file) return;

            const fileList = document.getElementById("uploadedFileList");

            // Show preview ONLY for image

            if (file.type.startsWith("image/")) {

                const preview = document.getElementById("imgPreview");

                preview.src = URL.createObjectURL(file);

                preview.style.display = "block";

            }

            // NON-IMAGE FILE (PDF, CSV, XLS)

            else {

                const fileItem = document.createElement("div");

                fileItem.className = "uploaded-file-item";

                fileItem.innerHTML = `

            <i class="fa fa-file"></i>

            <span>${file.name}</span>

        `;

                fileList.appendChild(fileItem);

            }

            // ✅ Reuse existing working upload method

            uploadDocument(file, function (documentId) {

                // Store document id

                uploadedDocumentIds.push(documentId);

                $("#bulletinDocumentIds").val(uploadedDocumentIds.join(","));

                // Success message

                bootbox.alert("File uploaded successfully");

            });

        };

    }

</script>