gistfile1.js

// 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();
});