Last active
December 10, 2015 01:34
-
-
Save thomasgriffin/4359143 to your computer and use it in GitHub Desktop.
JS to create a custom Backbone view for managing Soliloquy image meta.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Open up the media manager to handle editing image metadata. | |
$('#soliloquy-area').on('click.soliloquyModify', '.modify-image', function(e) { | |
e.preventDefault(); | |
var soliloquy_frames = {}; // Store our workflows in an object | |
var frame_id = $(this).next().attr('id').split('-')[3]; // Unique ID for each workflow | |
var default_view = wp.media.view.AttachmentsBrowser; // Store the default view to restore it later | |
// If the media frame already exists, reopen it. | |
if ( soliloquy_frames[frame_id] ) { | |
soliloquy_frames[frame_id].open(); | |
return; | |
} | |
// Create the media frame. | |
soliloquy_frames[frame_id] = wp.media({ | |
className: 'media-frame soliloquy-media-frame', | |
title: soliloquy.metatitle, | |
button: { | |
text: soliloquy.savemeta, | |
requires: { | |
selection: false // If your frame doesn't require any action to submit, set this to false | |
} | |
}, | |
uploader: false // Don't display the uploader since we don't need it | |
}); | |
// Create a new view with our image meta. | |
soliloquy_frames[frame_id].display = wp.media.View.extend({ | |
tagName: 'div', | |
className: 'soliloquy-image-meta', | |
region: 'content', | |
template: wp.media.template('soliloquy-meta-' + frame_id) | |
}); | |
soliloquy_frames[frame_id].view = wp.media.View.extend({ | |
tagName: 'div', | |
className: 'soliloquy-meta', | |
initialize: function(){ | |
this.createMeta(); | |
this.createToolbar(); | |
}, | |
createMeta: function(){ | |
this.content = new soliloquy_frames[frame_id].display({ | |
controller: this.controller | |
}); | |
this.views.add(this.content); | |
}, | |
createToolbar: function(){ | |
this.toolbar = new wp.media.view.Toolbar({ | |
controller: this.controller | |
}); | |
this.views.add(this.toolbar); | |
} | |
}); | |
// Overwrite the default attachments view with our new view. | |
wp.media.view.AttachmentsBrowser = soliloquy_frames[frame_id].view; | |
// Remove the default routers. | |
soliloquy_frames[frame_id].on('router:render:browse', function(view){ | |
view.unset('browse'); | |
view.unset('library'); | |
}); | |
// Restore the default view when we close the modal window. | |
soliloquy_frames[frame_id].on('close', function(){ | |
wp.media.view.AttachmentsBrowser = default_view; | |
}); | |
// Finally, open the modal. | |
soliloquy_frames[frame_id].open(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It should be noted that this is grabbing HTML from a custom
<div>
. You do not have to use script templates like in core. The Underscores_.template
function is just looking for an ID to compile into html (using jQuery'shtml()
method), so really anything with the correct ID will suffice.Also, it is preferable to store your workflows in an object so that you can handle multiple frame states on the same page. I am doing this by using the attachment ID of the image as the workflow key ID. Use whatever you would like as long as it is unique.
Also, the default view should be restored when the modal is closed so that no other media manager frames that expect the default view are harmed. We simply attach to the
close
event and set the default view.