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