Skip to content

Instantly share code, notes, and snippets.

@Irfan-Ansari
Forked from thomasgriffin/gist:4422777
Last active August 29, 2015 14:17
Show Gist options
  • Save Irfan-Ansari/092a50bc370372145a9d to your computer and use it in GitHub Desktop.
Save Irfan-Ansari/092a50bc370372145a9d to your computer and use it in GitHub Desktop.
// Use the new media manager to handle uploads to Soliloquy.
$('#soliloquy-area').on('click.soliloquyUpload', '#soliloquy-upload', function(e){
// Prevent the default action from occuring.
e.preventDefault();
// Variable to hold our media applicaton.
var soliloquy_frame;
// If the media frame already exists, reopen it and return.
if ( soliloquy_frame ) {
soliloquy_frame.open();
return;
}
// Set the tabs array to empty to avoid our menu workflow from being polluted by other plugins.
wp.media.view.settings.tabs = [];
// Create our custom upload/browse view for our workflow.
var soliloquy_default_view = wp.media.view.AttachmentFilters.Uploaded.extend({
change: function(event){
var filter = this.filters[this.el.value];
if ( filter ) {
// If we are viewing all the items, only show media items not previously attached to other posts.
if ( 'all' == this.el.value )
this.filters[this.el.value].props.post_parent = 0;
else
this.filters[this.el.value].props.post_parent = wp.media.view.settings.post.id;
this.model.set(filter.props);
}
},
select: function(){
var model = this.model,
value = 'uploaded', // Force to the uploaded state instead of the media library state - why the heck is this hardcoded???
props = model.toJSON();
_.find( this.filters, function(filter, id){
var equal = _.all(filter.props, function(prop, key){
return prop === ( _.isUndefined(props[key]) ? null : props[key] );
});
if ( equal )
return value = id;
});
this.$el.val(value);
}
});
// Overwrite the default view workflow with our own that has been created above.
wp.media.view.AttachmentFilters.Uploaded = soliloquy_default_view;
/**
* Custom media workflow controllers.
*
* These custom controller states provide context by which we generate
* views in the new media manager workflow.
*
* @since 1.5.0
*/
// Create our custom video controller state.
var soliloquy_video_controller = wp.media.controller.State.extend({
defaults: {
id: 'soliloquy_video',
menu: 'default',
content: 'soliloquy_video',
priority: 30
}
});
// Create our custom HTML controller state.
var soliloquy_html_controller = wp.media.controller.State.extend({
defaults: {
id: 'soliloquy_html',
menu: 'default',
content: 'soliloquy_html',
priority: 40
}
});
// Create our custom HTML controller state.
var soliloquy_text_controller = wp.media.controller.State.extend({
defaults: {
id: 'soliloquy_text',
menu: 'default',
content: 'soliloquy_text',
priority: 50
}
});
/**
* Custom media workflow views.
*
* These custom views output the HTML layout and content
* by which we "view" the controller states.
*
* @since 1.5.0
*/
// Create our custom video content view.
var soliloquy_video_view = wp.media.View.extend({
className: 'soliloquy-frame soliloquy-video-frame',
template: wp.media.template('soliloquy-video-frame') // <script type="text/html" id="tmpl-soliloquy-video-frame">
});
// Create our custom HTML content view.
var soliloquy_html_view = wp.media.View.extend({
className: 'soliloquy-frame soliloquy-html-frame',
template: wp.media.template('soliloquy-html-frame') // <script type="text/html" id="tmpl-soliloquy-html-frame">
});
// Create our custom text content view.
var soliloquy_text_view = wp.media.View.extend({
className: 'soliloquy-frame soliloquy-text-frame',
template: wp.media.template('soliloquy-text-frame') // <script type="text/html" id="tmpl-soliloquy-text-frame">
});
// Create our default controller states for the Soliloquy media workflow.
var controller_states = [
// Customize the default uploader view to match Soliloquy's workflow.
new wp.media.controller.Library({
id: 'insert',
title: soliloquy.imageinsert,
priority: 20,
toolbar: 'main-insert',
filterable: 'uploaded',
library: wp.media.query({ uploadedTo: wp.media.view.settings.post.id }),
multiple: true,
contentUserSetting: false // Force the media uploader to always show the Upload Files tab.
}),
// Add our video slide controller state.
new soliloquy_video_controller({
id: 'soliloquy_video',
title: soliloquy.videoinsert,
priority: 30
}),
// Add our HTML slide controller state.
new soliloquy_html_controller({
id: 'soliloquy_html',
title: soliloquy.htmlinsert,
priority: 40
}),
// Add our text slide controller state.
new soliloquy_text_controller({
id: 'soliloquy_text',
title: soliloquy.textinsert,
priority: 50
})
];
// Create the media frame.
soliloquy_frame = wp.media.frames.soliloquy_frame = wp.media({
className: 'media-frame soliloquy-media-frame',
frame: 'post',
multiple: true,
states: controller_states
});
/**
* Custom view events.
*
* These events are fired by Backbone. In general, WordPress' media
* app fires two important event types when creating and rendering workflows.
*
* 1. region:action event
* The region:action event is a basic event that is triggered for any view,
* regardless of specificity. E.g. when a content view is rendered, the
* "content:create" event will fire each time.
*
* 2. region:action:mode event.
* The region:action:mode event is specific to the view being created or rendered.
* In this case, we can fire case for when specific views generate an event. E.g.
* when the default menu is rendered, the menu:render:default event will fire.
*/
// Customize the menu to include our new menu item views.
soliloquy_frame.on('menu:render:default', function(view){
// Store our views in an object.
var views = {};
// Unset the menu separator since it is not needed.
view.unset('library-separator');
// Modify the default menu item text to be different from the content view title.
views['insert'] = {
text: soliloquy.image
};
// Insert our video slide menu item.
views['soliloquy_video'] = {
text: soliloquy.video,
priority: 30
};
// Insert our HTML slide menu item.
views['soliloquy_html'] = {
text: soliloquy.html,
priority: 40
};
// Insert our text slide menu item.
views['soliloquy_text'] = {
text: soliloquy.text,
priority: 50
};
// Initialize the views in our view object.
view.set(views);
});
// Create our content view for the video slide.
soliloquy_frame.on('content:create:soliloquy_video', function(){
var view = new soliloquy_video_view({
controller: soliloquy_frame,
model: soliloquy_frame.state()
});
soliloquy_frame.content.set(view);
});
// Create our content view for the HTML slide.
soliloquy_frame.on('content:create:soliloquy_html', function(){
var view = new soliloquy_html_view({
controller: soliloquy_frame,
model: soliloquy_frame.state()
});
soliloquy_frame.content.set(view);
});
// Create our content view for the text slide.
soliloquy_frame.on('content:create:soliloquy_text', function(){
var view = new soliloquy_text_view({
controller: soliloquy_frame,
model: soliloquy_frame.state()
});
soliloquy_frame.content.set(view);
});
// Refresh the slider list when the frame is closed.
soliloquy_frame.on('close', function(){
soliloquyRefresh();
});
// Add a custom attachment notice to the attachment library.
$(document).on('change', '.attachment-filters', function(){
$('.soliloquy-attachment-notice').remove();
$('.attachments-browser .attachments').css('top', '50px');
if ( 'all' == $(this).val() ) {
$('.attachments-browser .attachments').before('<div class="soliloquy-attachment-notice"><p>' + soliloquy.attachnotice + '</p></div>');
$('.attachments-browser .attachments').css('top', '70px');
}
});
// Finally, open the modal.
soliloquy_frame.open();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment