View file rusnet-interactive-map/assets/js/admin/admin-gallery.js

jQuery(document).ready(function($) {
    var frame;
    $('#rusnetim-add-gallery-btn').on('click', function(e) {
        e.preventDefault();
        if (typeof wp === 'undefined' || typeof wp.media === 'undefined') {
            alert('Media library is not available.');
            return;
        }
        if (frame) {
            frame.open();
            return;
        }
        frame = wp.media({
            title: 'Select images',
            button: { text: 'Add to gallery' },
            multiple: true,
            library: { type: 'image' }
        });
        frame.on('select', function() {
            var attachments = frame.state().get('selection').toJSON();
            var ids = [];
            $('#marker-gallery-preview').empty();
            $.each(attachments, function(i, attachment) {
                ids.push(attachment.id);
                var thumb = '<div class="gallery-thumb" data-id="' + attachment.id + '" style="position: relative;">' +
                    '<img src="' + attachment.sizes.thumbnail.url + '" style="max-width: 80px; max-height: 80px; border: 1px solid #ddd; padding: 2px; border-radius: 4px;">' +
                    '<span class="remove-gallery-thumb" style="position: absolute; top: -5px; right: -5px; background: #f00; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; line-height: 18px; font-size: 14px; cursor: pointer;">&times;</span>' +
                    '</div>';
                $('#marker-gallery-preview').append(thumb);
            });
            $('#marker_gallery').val(ids.join(','));
            $('#rusnetim-clear-gallery-btn').show();
        });
        frame.open();
    });

    $(document).on('click', '.remove-gallery-thumb', function() {
        var $thumb = $(this).closest('.gallery-thumb');
        var id = $thumb.data('id');
        $thumb.remove();
        var ids = $('#marker_gallery').val().split(',').filter(function(v) { return v != id; });
        $('#marker_gallery').val(ids.join(','));
        if (ids.length === 0) {
            $('#rusnetim-clear-gallery-btn').hide();
        }
    });

    $('#rusnetim-clear-gallery-btn').on('click', function() {
        $('#marker-gallery-preview').empty();
        $('#marker_gallery').val('');
        $(this).hide();
    });
});