Jak dodać kartę „Wstaw z adresu URL” do niestandardowego programu do przesyłania multimediów 3.5?

Do widżetu wstawiłem program do przesyłania multimediów WP 3.5, uruchamiając ten JavaScript po kliknięciu przycisku:

var frame = wp.media( {
    title       : 'Widget Uploader',
    multiple    : false,
    library     : { type : 'image' },
    button      : { text : 'Select Image' }
} );

frame.on( 'close', function() {
    var attachments = frame.state().get( 'selection' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;

To daje mi modal, który ma zakładki „Prześlij pliki” i „Biblioteka multimediów”, ale chcę również, aby zawierał zakładkę „Wstaw z adresu URL”, którą otrzymujesz po kliknięciu przycisku „Dodaj multimedia” podczas edytowania postu /strona.

Spędziłem kilka godzin, grzebiąc w Internecie, czytając kod źródłowy i oglądając prezentację Daryla Koopersmitha na zapleczu programu przesyłającego , ale nie byłem w stanie tego rozgryźć .

Czy ktoś może skierować mnie we właściwym kierunku? Czy istnieje parametr, który mogę przekazać do wp.media (), aby go uwzględnić, czy powinienem użyć jednego z wbudowanych widoków / modeli, które go obejmują?

Kopie kod źródłowy z podobnego powodu; Chciałbym dodać „Ustawienia wyświetlania załączników” do domyślnej ramki „wybierz”. O ile wiem, nie można tego zrobić, przekazując parametry do wp.media (), jak wszyscy chcielibyśmy. wp.media ma obecnie dwie ramki („post” i „select”), a towarzyszące im widoki są wstępnie ustawione.

Podejście, na które teraz patrzę, polega na rozszerzeniu media.view.mediaFrame, aby utworzyć nową ramkę (na podstawie ramki „wybierz”), która zawiera części widoku, których potrzebuję. Jeśli to zadziała, opublikuję kod.

EDYTOWAĆ:

Ian, dostałem funkcję, którą chciałem pracować, i poświęciłem trochę czasu na jej zrozumienie. wp.media () nie jest tak modułowy, jak mógłby być. Akceptuje tylko wartości „select” i „post” dla ramki, przy czym „select” jest wartością domyślną, więc nie można utworzyć nowego obiektu ramki. Zamiast tego musisz rozszerzyć jeden z dwóch obiektów ramki (wszystko to znajduje się w /wp-include/js/media-views.js), co również jest trochę niezgrabne. Dodanie części interfejsu użytkownika jest procesem kilkuetapowym. Możesz zacząć od Wybierz i dodać, ale dla ciebie postanowiłem zacząć od kodu w ramce Post i zabrać rzeczy z galerii. Oto mój kod, działający, ale niezbyt przetestowany. Prawdopodobnie też trochę miejsca na usprawnienia.

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    'insert'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         'insert',
                        title:      'Insert Media',
                        priority:   20,
                        toolbar:    'main-insert',
                        filterable: 'image',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? 'reset' : false,
                        editable:   true,

                        // If the user isn't allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( 'router:create:browse', this.createRouter, this );
                this.on( 'router:render:browse', this.browseRouter, this );
                this.on( 'content:create:browse', this.browseContent, this );
                this.on( 'content:render:upload', this.uploadContent, this );
                this.on( 'toolbar:create:select', this.createSelectToolbar, this );
                //

                this.on( 'menu:create:gallery', this.createMenu, this );
                this.on( 'toolbar:create:main-insert', this.createToolbar, this );
                this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
                this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
                this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            'default': 'mainMenu'
                        },

                        content: {
                            'embed':          'embedContent',
                            'edit-selection': 'editSelectionContent'
                        },

                        toolbar: {
                            'main-insert':      'mainInsertToolbar'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + ':render:' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    'library-separator': new wp.media.View({
                        className: 'separator',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get('selection'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( 'backToLibrary', {
                    text:     'Return to Library',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode('browse');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get('editable');

                view.set( 'selection', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get('selection'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode('edit-selection');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( 'insert', {
                    style:    'primary',
                    priority: 80,
                    text:     'Select Image',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get('selection');

                        controller.close();
                        state.trigger( 'insert', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  'Set Featured Image',
                    state: this.options.state || 'upload'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: 'Insert Image'
                });
            }

    });

Łączy to kod z wp.media.view.MediaFrame.Post z kodem z media.view.MediaFrame.Select, dostosowując się do faktu, że jest on wykonywany poza pierwotnym zakresem. Wartościami tekstu są różne przyciski, a jeśli chcesz, możesz odwoływać się do własnego obiektu lokalizacji. Wartość „filtrowalna” w konstruktorze biblioteki (w createStates ()) określa, które typy nośników będą obsługiwane.

Po rozszerzeniu obiektu Select za pomocą tego podejścia, po prostu ułóż go w taki sam sposób, jak obecnie i dodaj niestandardowy moduł obsługi dla wybranego obrazu. Wstaw z adresu URL może wywołać inne zdarzenie niż podczas pobierania z przesłanych mediów. Prawdopodobnie lepiej byłoby najpierw utworzyć instancję ramki, a następnie ją rozszerzyć, aby nie wpłynęło to na inne ramki multimedialne na stronie, ale nie próbowałem tego.

Mam nadzieję, że pomaga-

Po zbadaniu kodu źródłowego wydaje się, że ogólny modalny nośnik nie obsługuje opcji „Wstaw z adresu URL”. Jednym ze sposobów, w jaki udało mi się uzyskać tę kartę, było określenie typu ramki „post”:

var frame = wp.media( {
                            title       : 'Widget Uploader',
                            multiple    : false,
                            library     : { type : 'image' },
                            button      : { text : 'Select Image' },
                            frame      : 'post'
                        } );

Minusem jest to, że tytuł określonego modalu jest ignorowany.

Chodzi o to, że ta karta zwraca zewnętrzny adres URL do bezpośredniego wstawienia do postu, podczas gdy widżet ma zwrócić identyfikator nośnika. Zasadniczo obraz zewnętrzny musi zostać przesłany na serwer.

Zobacz, jak / czy wtyczka Grab & Save robi to, co chcesz. ( przez )