Benzer bir sebeple kaynak kodunu araştırıyorum; "Ek Görüntü Ayarları" nı varsayılan "seçme" çerçevesine eklemek istiyorum. Anlayabildiğim kadarıyla, bunu hepimizin istediği gibi wp.media () 'a parametreler geçirerek yapılamaz. wp.media şu anda iki kareye ("post" ve "select") sahiptir ve bunlara eşlik eden görünümler önceden ayarlanmıştır.
Şu anda baktığım yaklaşım, media.view.mediaFrame'i, görünümün ihtiyaç duyduğum kısımlarını içeren yeni bir çerçeve ("select" çerçevesine dayalı) oluşturmak için genişletmektir. Bu çalışmayı alırsam kodu gönderirim.
DÜZENLE:
Ian, çalışmak istediğim özelliği aldım ve seninkini anlamak biraz zaman aldı. wp.media () olabildiğince modüler değildir. Çerçeve için yalnızca 'select' ve 'post' değerlerini kabul eder, 'select' varsayılan değerdir, böylece yeni bir çerçeve nesnesi oluşturamazsınız. Bunun yerine, iki çerçeve nesnesinden birini genişletmeniz gerekir (tüm bunlar /wp-includes/js/media-views.js'de) ve bu da biraz karmaşıktır. Kullanıcı arayüzünün bir kısmını eklemek çok adımlı bir işlemdir. Select ve add on ile başlayabilirsiniz, ama senin için Post çerçevesindeki kodla başlayıp galeriyi alıp seçtim. İşte benim kod, çalışma ama ağır test değil. Muhtemelen düzene koymak için biraz yer.
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'
});
}
});
Bu, wp.media.view.MediaFrame.Post kodunu media.view.MediaFrame.Select koduyla birleştirir, bunun orijinal kapsam dışında yürütülmesi gerçeğine göre ayarlanır. Metin değerleri çeşitli düğmelerdir ve isterseniz kendi yerelleştirme nesnenize başvurabilirsiniz. Kütüphane yapıcısındaki (createStates () öğesindeki 'filtrelenebilir' değeri, hangi ortam türlerinin destekleneceğini belirler.
Select nesnesini bu yaklaşımla genişlettikten sonra, nesneyi halihazırdaki gibi başlatın ve bir görüntü seçildiğinde özel işleyicinizi ekleyin. Url'den Ekle, yüklenen medyadan seçim yaparkenkinden farklı bir etkinlik tetikleyebilir. Çerçevenizi ilk önce örneklemek ve ardından genişletmek daha iyi olur, böylece sayfadaki diğer medya çerçeveleri etkilenmez, ancak bunu denemedim.
Umarım yardımcı olur-
