Created
March 2, 2015 14:11
-
-
Save bitfade/ee91d7e8aff16364b9ff to your computer and use it in GitHub Desktop.
Custom WordPress Media Uploader
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
(function ($) { | |
"use strict"; | |
/*global wp,jQuery */ | |
var CustomGalleryEdit,CustomFrame; | |
function customClasses() { | |
var media = wp.media; | |
var l10n = media.view.l10n; | |
CustomGalleryEdit = wp.media.controller.GalleryEdit.extend({ | |
gallerySettings: function( browser ) { | |
if ( ! this.get('displaySettings') ) { | |
return; | |
} | |
var library = this.get('library'); | |
if ( ! library || ! browser ) { | |
return; | |
} | |
browser.toolbar.set( 'reverse', { | |
text: l10n.reverseOrder, | |
priority: 80, | |
click: function() { | |
library.reset( library.toArray().reverse() ); | |
} | |
}); | |
} | |
}); | |
CustomFrame = wp.media.view.MediaFrame.Post.extend({ | |
galleryMenu: function( view ) { | |
}, | |
createStates: function() { | |
var options = this.options; | |
// custom frame has only 2 states: gallery edit/add | |
this.states.add([ | |
new CustomGalleryEdit({ | |
library: options.selection, | |
editing: true, | |
requires: { selection: false }, | |
menu: 'gallery' | |
}), | |
new media.controller.GalleryAdd() | |
]); | |
}, | |
galleryEditToolbar: function() { | |
try { | |
var updateGallery = l10n.updateGallery; | |
// change the button label | |
l10n.updateGallery = 'Save Gallery'; | |
// call parent method | |
media.view.MediaFrame.Post.prototype.galleryEditToolbar.apply(this,arguments); | |
// change the button behaviour so that it would allow us to save an empty gallery | |
this.toolbar.get().options.items.insert.requires.library = false; | |
l10n.updateGallery = updateGallery; | |
} catch (x) { | |
} | |
} | |
}); | |
} | |
function getWorkFlow(selection) { | |
var attributes = { | |
state: 'gallery-edit', | |
editing: true, | |
multiple: true | |
}; | |
if (typeof selection != 'undefined' && selection) { | |
attributes.selection = selection; | |
} | |
return new CustomFrame(attributes); | |
} | |
function init() { | |
if (window.wp && window.wp.media) { | |
customClasses(); | |
} | |
} | |
$(init); | |
// the following functions can be used to interact with the custom media uploader | |
// input field where the gallery images ids are store as comma separated list | |
var store = $('input'); | |
// the media uploader | |
var workflow = false; | |
// selection object which list gallery images as collection | |
var selection; | |
// opens the dialog | |
function open() { | |
if (!selection) { | |
fetch(); | |
} | |
if (workflow) { | |
workflow.off('update',update); | |
workflow.dispose(); | |
} | |
workflow = getWorkFlow(selection); | |
workflow.on('update',update); | |
workflow.open(); | |
} | |
// create selection collection | |
function fetch() { | |
var value = store.val(); | |
if (!value) { | |
selection = []; | |
return; | |
} | |
var shortcode = new wp.shortcode({ | |
tag: "gallery", | |
attrs: { ids: value }, | |
type: "single" | |
}); | |
var attachments = wp.media.gallery.attachments( shortcode ); | |
selection = new wp.media.model.Selection( attachments.models, { | |
props: attachments.props.toJSON(), | |
multiple: true | |
}); | |
selection.gallery = attachments.gallery; | |
selection.more().done( function() { | |
// Break ties with the query. | |
selection.props.set({ query: false }); | |
selection.unmirror(); | |
selection.props.unset("orderby"); | |
}); | |
} | |
// retrieve list of gallery images and stores them | |
function update() { | |
var library = workflow.states.get('gallery-edit').get('library'); | |
var ids = library.pluck('id'); | |
var value = (typeof ids === 'object') ? ids.join(',') : ''; | |
store.val(value); | |
selection = false; | |
} | |
}(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi bitfade, Tnx so much for this post.
didn't manage to understand who exactly to link this js with the Add Images button..
trying to assign onclick="open()" but it's just pops a blank window..