How select multiple document as like media gallery

admin管理员组

文章数量:1296421

I want to make a document(.pdf) gallery with multiple selections exactly like the image gallery. So that when I click on a button or something wp.media selection frame will be popup and can select multiple .PDF files -> create new document gallery -> can edit gallery -> insert gallery

I have created a custom Elementor control just extent Elementor Gallery control for it. Although I can pass mime type "application/pdf" but it's not working in the edit State. The only image works properly. If I select PDF it shows empty in edit State.

So, my question is: There are any way to extent/override/create following wp.media default State "gallery", "gallery-library", "gallery-edit" mime type to "application/pdf" so that I can select .PDF as a gallery-like images, audios, videos?

wp.media default States "gallery", "gallery-library", "gallery-edit" are defined here: wp-includes\js\media-views.js

My JS for gallery selector:

jQuery(window).on("elementor:init", function() {
    "use strict";

    var ControlBaseDataView = elementor.modules.controls.BaseData;
    var ControlImageChooseItemView = ControlBaseDataView.extend({
        ui: function ui() {
            var ui = ControlBaseDataView.prototype.ui.apply(this, arguments);
            ui.addImages = '.elementor-control-gallery-add';
            ui.clearGallery = '.elementor-control-gallery-clear';
            ui.galleryThumbnails = '.elementor-control-gallery-thumbnails';
            ui.status = '.elementor-control-gallery-status-title';
            return ui;
        },
        events: function events() {
            return _.extend(ControlBaseDataView.prototype.events.apply(this, arguments), {
                'click @ui.addImages': 'onAddImagesClick',
                'click @ui.clearGallery': 'onClearGalleryClick',
                'click @ui.galleryThumbnails': 'onGalleryThumbnailsClick'
            });
        },
        onReady: function onReady() {
            this.initRemoveDialog();
        },
        applySavedValue: function applySavedValue() {
            var images = this.getControlValue(),
                imagesCount = images.length,
                hasImages = !!imagesCount;
            this.$el.toggleClass('elementor-gallery-has-images', hasImages).toggleClass('elementor-gallery-empty', !hasImages);
            var $galleryThumbnails = this.ui.galleryThumbnails;
            $galleryThumbnails.empty();
            this.ui.status.text(hasImages ? imagesCount + ' Images Selected' : 'No Images Selected');

            if (!hasImages) {
                return;
            }

            this.getControlValue().forEach(function(image) {
                var $thumbnail = jQuery('<div>', {
                    class: 'elementor-control-gallery-thumbnail'
                });
                $thumbnail.css('background-image', 'url(' + image.url + ')');
                $galleryThumbnails.append($thumbnail);
            });
        },
        hasImages: function hasImages() {
            return !!this.getControlValue().length;
        },
        openFrame: function openFrame(action) {
            this.initFrame(action);
            this.frame.open();
        },
        initFrame: function initFrame(action) {
            var frameStates = {
                create: 'gallery',
                add: 'gallery-library',
                edit: 'gallery-edit'
            };

            var options = {
                frame: 'post',
                multiple: true,
                state: frameStates[action],
                library: {
                    type: "application/pdf"
                },
                button: {
                    text: 'Insert Media'
                }
            };

            if (this.hasImages()) {
                options.selection = this.fetchSelection();
            }

            this.frame = wp.media(options); // When a file is selected, run a callback.

            this.frame.on({
                update: this.select,
                'menu:render:default': this.menuRender,
                'content:render:browse': this.gallerySettings
            }, this);
        },
        menuRender: function menuRender(view) {
            view.unset('insert');
            view.unset('featured-image');
        },
        gallerySettings: function gallerySettings(browser) {
            browser.sidebar.on('ready', function() {
                browser.sidebar.unset('gallery');
            });
        },
        fetchSelection: function fetchSelection() {
            var attachments = wp.media.query({
                orderby: 'post__in',
                order: 'ASC',
                type: 'image',
                perPage: -1,
                post__in: _.pluck(this.getControlValue(), 'id')
            });
            return new wp.media.model.Selection(attachments.models, {
                props: attachments.props.toJSON(),
                multiple: true
            });
        },

        /**
         * Callback handler for when an attachment is selected in the media modal.
         * Gets the selected image information, and sets it within the control.
         */
        select: function select(selection) {
            var images = [];
            selection.each(function(image) {
                images.push({
                    id: image.get('id'),
                    url: image.get('url')
                });
            });
            this.setValue(images);
            this.applySavedValue();
        },
        onBeforeDestroy: function onBeforeDestroy() {
            if (this.frame) {
                this.frame.off();
            }

            this.$el.remove();
        },
        resetGallery: function resetGallery() {
            this.setValue([]);
            this.applySavedValue();
        },
        initRemoveDialog: function initRemoveDialog() {
            var removeDialog;

            this.getRemoveDialog = function() {
                if (!removeDialog) {
                    removeDialog = elementorCommon.dialogsManager.createWidget('confirm', {
                        message: 'Are you sure you want to reset this gallery?',
                        headerMessage: 'Reset Gallery',
                        strings: {
                            confirm: 'Delete',
                            cancel: 'Cancel'
                        },
                        defaultOption: 'confirm',
                        onConfirm: this.resetGallery.bind(this)
                    });
                }

                return removeDialog;
            };
        },

        onAddImagesClick: function onAddImagesClick() {
            this.openFrame(this.hasImages() ? 'add' : 'create');
        },
        onClearGalleryClick: function onClearGalleryClick() {
            this.getRemoveDialog().show();
        },
        onGalleryThumbnailsClick: function onGalleryThumbnailsClick() {
            this.openFrame('edit');
        }
    });
    elementor.addControlView("file-select", ControlImageChooseItemView);
});

本文标签： How select multiple document as like media gallery