Subversion Repositories SmartDukaan

Rev

Rev 35583 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 35583 Rev 35587
Line 18... Line 18...
18 
    .uploaded-file-item i {
 18 
    .uploaded-file-item i {
19 
        margin-right: 6px;
 19 
        margin-right: 6px;
20 
        color: #3a8bbf;
 20 
        color: #3a8bbf;
21 
    }
 21 
    }
22 
 
 22 
 
- 
 
 23 
    /* Emoji Picker Styles */
- 
 
 24 
    .ql-emoji {
- 
 
 25 
        font-size: 16px !important;
- 
 
 26 
    }
- 
 
 27 
 
- 
 
 28 
    .emoji-picker-container {
- 
 
 29 
        position: absolute;
- 
 
 30 
        z-index: 1000;
- 
 
 31 
        background: #fff;
- 
 
 32 
        border: 1px solid #ccc;
- 
 
 33 
        border-radius: 8px;
- 
 
 34 
        padding: 10px;
- 
 
 35 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- 
 
 36 
        display: none;
- 
 
 37 
        max-width: 320px;
- 
 
 38 
    }
- 
 
 39 
 
- 
 
 40 
    .emoji-picker-container.show {
- 
 
 41 
        display: block;
- 
 
 42 
    }
- 
 
 43 
 
- 
 
 44 
    .emoji-grid {
- 
 
 45 
        display: grid;
- 
 
 46 
        grid-template-columns: repeat(8, 1fr);
- 
 
 47 
        gap: 5px;
- 
 
 48 
    }
- 
 
 49 
 
- 
 
 50 
    .emoji-item {
- 
 
 51 
        font-size: 22px;
- 
 
 52 
        cursor: pointer;
- 
 
 53 
        padding: 5px;
- 
 
 54 
        text-align: center;
- 
 
 55 
        border-radius: 4px;
- 
 
 56 
        transition: background 0.2s;
- 
 
 57 
    }
- 
 
 58 
 
- 
 
 59 
    .emoji-item:hover {
- 
 
 60 
        background: #e8e8e8;
- 
 
 61 
    }
- 
 
 62 
 
- 
 
 63 
    .emoji-category {
- 
 
 64 
        font-size: 12px;
- 
 
 65 
        color: #666;
- 
 
 66 
        margin: 8px 0 5px 0;
- 
 
 67 
        font-weight: bold;
- 
 
 68 
        border-bottom: 1px solid #eee;
- 
 
 69 
        padding-bottom: 3px;
- 
 
 70 
    }
- 
 
 71 
 
- 
 
 72 
    .emoji-category:first-child {
- 
 
 73 
        margin-top: 0;
- 
 
 74 
    }
- 
 
 75 
 
23 
</style>
 76 
</style>
24 
 
 77 
 
25 
 
 78 
 
26 
<section class="wrapper">
 79 
<section class="wrapper">
27 
    <div class="row">
 80 
    <div class="row">
Line 92... Line 145...
92 
           accept="image/*,.pdf,.csv,.xls,.xlsx">
 145 
           accept="image/*,.pdf,.csv,.xls,.xlsx">
93 
</form>
 146 
</form>
94 
 
 147 
 
95 
<input type="hidden" id="bulletinDocumentIds"/>
 148 
<input type="hidden" id="bulletinDocumentIds"/>
96 
 
 149 
 
- 
 
 150 
<!-- Emoji Picker (populated by JavaScript) -->
- 
 
 151 
<div id="emojiPicker" class="emoji-picker-container"></div>
97 
 
 152 
 
98 
<script>
 153 
<script>
99 
    var quill;
 154 
    var quill;
100 
    var uploadedDocumentIds = [];
 155 
    var uploadedDocumentIds = [];
101 
 
 156 
 
- 
 
 157 
    // Emoji data with Unicode code points (using String.fromCodePoint for compatibility)
- 
 
 158 
    var emojiData = {
- 
 
 159 
        'Smileys': [
- 
 
 160 
            0x1F600, 0x1F603, 0x1F604, 0x1F601, 0x1F60A, 0x1F60D,
- 
 
 161 
            0x1F970, 0x1F618, 0x1F61C, 0x1F60E, 0x1F929, 0x1F607,
- 
 
 162 
            0x1F642, 0x1F609, 0x1F60B, 0x1F917
- 
 
 163 
        ],
- 
 
 164 
        'Emotions': [
- 
 
 165 
            0x1F622, 0x1F62D, 0x1F624, 0x1F620, 0x1F621, 0x1F914,
- 
 
 166 
            0x1F610, 0x1F611, 0x1F62E, 0x1F631, 0x1F634, 0x1F912,
- 
 
 167 
            0x1F637, 0x1F922, 0x1F973, 0x1F92D
- 
 
 168 
        ],
- 
 
 169 
        'Gestures': [
- 
 
 170 
            0x1F44D, 0x1F44E, 0x1F44F, 0x1F64C, 0x1F91D, 0x270C,
- 
 
 171 
            0x1F91E, 0x1F44C, 0x1F44B, 0x1F4AA, 0x1F64F, 0x261D,
- 
 
 172 
            0x1F446, 0x1F447, 0x1F448, 0x1F449
- 
 
 173 
        ],
- 
 
 174 
        'Objects': [
- 
 
 175 
            0x2764, 0x1F4AF, 0x1F525, 0x2B50, 0x2728, 0x1F4B0,
- 
 
 176 
            0x1F4E2, 0x1F4E3, 0x1F389, 0x1F38A, 0x1F3C6, 0x1F4C8,
- 
 
 177 
            0x1F4C9, 0x2705, 0x274C, 0x26A0
- 
 
 178 
        ]
- 
 
 179 
    };
- 
 
 180 
 
- 
 
 181 
    // Build emoji picker HTML
- 
 
 182 
    function buildEmojiPicker() {
- 
 
 183 
        var html = '';
- 
 
 184 
        for (var category in emojiData) {
- 
 
 185 
            html += '<div class="emoji-category">' + category + '</div>';
- 
 
 186 
            html += '<div class="emoji-grid">';
- 
 
 187 
            emojiData[category].forEach(function (codePoint) {
- 
 
 188 
                var emoji = String.fromCodePoint(codePoint);
- 
 
 189 
                html += '<span class="emoji-item">' + emoji + '</span>';
- 
 
 190 
            });
- 
 
 191 
            html += '</div>';
- 
 
 192 
        }
- 
 
 193 
        document.getElementById('emojiPicker').innerHTML = html;
- 
 
 194 
    }
- 
 
 195 
 
102 
    $(document).ready(function () {
 196 
    $(document).ready(function () {
- 
 
 197 
        // Build emoji picker
- 
 
 198 
        buildEmojiPicker();
- 
 
 199 
 
103 
        quill = new Quill('#bulletinEditor', {
 200 
        quill = new Quill('#bulletinEditor', {
104 
            theme: 'snow',
 201 
            theme: 'snow',
105 
            modules: {
 202 
            modules: {
106 
                toolbar: {
 203 
                toolbar: {
107 
                    container: [
 204 
                    container: [
Line 109... Line 206...
109 
                        ['bold', 'italic', 'underline'],
 206 
                        ['bold', 'italic', 'underline'],
110 
                        [{color: []}, {background: []}],
 207 
                        [{color: []}, {background: []}],
111 
                        [{header: 1}, {header: 2}],
 208 
                        [{header: 1}, {header: 2}],
112 
                        [{list: 'ordered'}, {list: 'bullet'}],
 209 
                        [{list: 'ordered'}, {list: 'bullet'}],
113 
                        [{align: []}],
 210 
                        [{align: []}],
114 
                        ['link', 'image'],   // image button kept
 211 
                        ['link', 'image', 'emoji'],
115 
                        ['clean']
 212 
                        ['clean']
116 
                    ],
 213 
                    ],
117 
                    handlers: {
 214 
                    handlers: {
118 
                        image: imageHandler
 215 
                        image: imageHandler,
- 
 
 216 
                        emoji: emojiHandler
119 
                    }
 217 
                    }
120 
                }
 218 
                }
121 
            }
 219 
            }
122 
        });
 220 
        });
- 
 
 221 
 
- 
 
 222 
        // Add emoji icon to the toolbar button
- 
 
 223 
        var emojiButton = document.querySelector('.ql-emoji');
- 
 
 224 
        if (emojiButton) {
- 
 
 225 
            emojiButton.innerHTML = String.fromCodePoint(0x1F600);
- 
 
 226 
        }
- 
 
 227 
 
- 
 
 228 
        // Handle emoji selection
- 
 
 229 
        $('#emojiPicker').on('click', '.emoji-item', function () {
- 
 
 230 
            var emoji = $(this).text();
- 
 
 231 
            var range = quill.getSelection(true);
- 
 
 232 
            quill.insertText(range.index, emoji);
- 
 
 233 
            quill.setSelection(range.index + emoji.length);
- 
 
 234 
            $('#emojiPicker').removeClass('show');
- 
 
 235 
        });
- 
 
 236 
 
- 
 
 237 
        // Close emoji picker when clicking outside
- 
 
 238 
        $(document).on('click', function (e) {
- 
 
 239 
            if (!$(e.target).closest('#emojiPicker, .ql-emoji').length) {
- 
 
 240 
                $('#emojiPicker').removeClass('show');
- 
 
 241 
            }
- 
 
 242 
        });
123 
    });
 243 
    });
124 
 
 244 
 
- 
 
 245 
    function emojiHandler() {
- 
 
 246 
        var emojiPicker = document.getElementById('emojiPicker');
- 
 
 247 
        var emojiButton = document.querySelector('.ql-emoji');
- 
 
 248 
 
- 
 
 249 
        // Position the picker below the emoji button
- 
 
 250 
        var rect = emojiButton.getBoundingClientRect();
- 
 
 251 
        var editorContainer = document.querySelector('.quill-editor');
- 
 
 252 
        var editorRect = editorContainer.getBoundingClientRect();
- 
 
 253 
 
- 
 
 254 
        emojiPicker.style.top = (rect.bottom + window.scrollY + 5) + 'px';
- 
 
 255 
        emojiPicker.style.left = Math.min(rect.left, editorRect.right - 330) + 'px';
- 
 
 256 
 
- 
 
 257 
        // Toggle visibility
- 
 
 258 
        emojiPicker.classList.toggle('show');
- 
 
 259 
    }
- 
 
 260 
 
125 
    function imageHandler() {
 261 
    function imageHandler() {
126 
        const input = document.getElementById('uploadFileInput');
 262 
        const input = document.getElementById('uploadFileInput');
127 
        input.value = '';
 263 
        input.value = '';
128 
        input.click();
 264 
        input.click();
129 
 
 265