Skip to content

Instantly share code, notes, and snippets.

@bitfade

bitfade/gist:ee91d7e8aff16364b9ff

Created March 2, 2015 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bitfade/ee91d7e8aff16364b9ff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bitfade/ee91d7e8aff16364b9ff to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bitfade created this gist Mar 2, 2015.
    158 changes: 158 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,158 @@
    (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));