Make media grid text fields (data) toggle-able. Checking/unchecking is saved in user settings cookie.

See #24716.

Built from https://develop.svn.wordpress.org/trunk@28995


git-svn-id: http://core.svn.wordpress.org/trunk@28783 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -941,7 +941,6 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	display: block;
 	line-height: 19px;
 	height: 19px;
 	text-align: right;
@@ -949,6 +948,14 @@
 	margin: 0 5%;
 }
 
+.attachment .data-hidden {
+	display: none;
+}
+
+.attachment .data-visible {
+	display: block;
+}
+
 /**
  * Attachments Browser
  */
@@ -2518,13 +2525,22 @@ video#inline-media-node {
 	line-height: 29px;
 }
 
-.media-grid-view .view-switch {
+.media-grid-view .view-switch,
+.media-grid-field-options {
 	display: inline-block;
 	float: none;
 	margin-top: 13px;
 	vertical-align: middle;
 }
 
+.media-grid-field-options span {
+	padding-left: 5px;
+}
+
+.media-grid-field-options label {
+	margin-left: 10px;
+}
+
 /**
  * Position both the frame and the uploader window into the content
  * area of the screen.

wp-includes/css/media-views.css

@@ -941,7 +941,6 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	display: block;
 	line-height: 19px;
 	height: 19px;
 	text-align: left;
@@ -949,6 +948,14 @@
 	margin: 0 5%;
 }
 
+.attachment .data-hidden {
+	display: none;
+}
+
+.attachment .data-visible {
+	display: block;
+}
+
 /**
  * Attachments Browser
  */
@@ -2518,13 +2525,22 @@ video#inline-media-node {
 	line-height: 29px;
 }
 
-.media-grid-view .view-switch {
+.media-grid-view .view-switch,
+.media-grid-field-options {
 	display: inline-block;
 	float: none;
 	margin-top: 13px;
 	vertical-align: middle;
 }
 
+.media-grid-field-options span {
+	padding-right: 5px;
+}
+
+.media-grid-field-options label {
+	margin-right: 10px;
+}
+
 /**
  * Position both the frame and the uploader window into the content
  * area of the screen.

wp-includes/js/media-grid.js

@@ -485,4 +485,32 @@
 
 	});
 
+	media.view.GridFieldOptions = media.View.extend({
+		className: 'media-grid-field-options',
+		template: media.template( 'media-grid-field-options' ),
+
+		events: {
+			'change input': 'toggleFields'
+		},
+
+		toggleFields: function(e) {
+			var $el = $( e.currentTarget ), fields, setting;
+			setting = $el.data( 'setting' );
+			fields = $( '.data-' + setting, '.data-fields' );
+			if ( $el.is( ':checked' ) ) {
+				fields.show();
+				deleteUserSetting( 'hidegrid' + setting );
+			} else {
+				fields.hide();
+				setUserSetting( 'hidegrid' + setting, 1 );
+			}
+
+			if ( $( ':checked', this.$el ).length ) {
+				fields.parent().show();
+			} else {
+				fields.parent().hide();
+			}
+		}
+	});
+
 }(jQuery, _, Backbone, wp));

wp-includes/js/media-views.js

@@ -5551,7 +5551,10 @@
 		},
 
 		createToolbar: function() {
-			var filters, FiltersConstructor, screenReaderText;
+			var filters,
+				LibraryViewSwitcher,
+				FiltersConstructor,
+				screenReaderText;
 
 			/**
 			 * @member {wp.media.view.Toolbar}
@@ -5566,14 +5569,19 @@
 			// browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
 			// which the controller can tap into and add this view?
 			if ( _.contains( this.controller.options.mode, 'grid' ) ) {
-				var libraryViewSwitcherConstructor = media.View.extend({
+				LibraryViewSwitcher = media.View.extend({
 					className: 'view-switch media-grid-view-switch',
 					template: media.template( 'media-library-view-switcher')
 				});
-				this.toolbar.set( 'libraryViewSwitcher', new libraryViewSwitcherConstructor({
+				this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
 					controller: this.controller,
 					priority: -90
 				}).render() );
+
+				this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
+					controller: this.controller,
+					priority: -50
+				}).render() );
 			}
 
 			filters = this.options.filters;

wp-includes/media-template.php

@@ -229,6 +229,25 @@ function wp_print_media_templates() {
 		</a>
 	</script>
 
+	<script type="text/html" id="tmpl-media-grid-field-options">
+		<label class="setting">
+			<span><?php _e( 'Name' ); ?></span>
+			<input type="checkbox" data-setting="title" {{ '' === getUserSetting( 'hidegridtitle' ) && 'checked' }} />
+		</label>
+		<label class="setting">
+			<span><?php _e( 'Attached to' ); ?></span>
+			<input type="checkbox" data-setting="uploadedTo" {{ '' === getUserSetting( 'hidegriduploadedTo' ) && 'checked' }} />
+		</label>
+		<label class="setting">
+			<span><?php _e( 'Date' ); ?></span>
+			<input type="checkbox" data-setting="dateFormatted" {{ '' === getUserSetting( 'hidegriddateFormatted' ) && 'checked' }} />
+		</label>
+		<label class="setting">
+			<span><?php _e( 'Mime-type' ); ?></span>
+			<input type="checkbox" data-setting="mime" {{ '' === getUserSetting( 'hidegridmime' ) && 'checked' }} />
+		</label>
+	</script>
+
 	<script type="text/html" id="tmpl-uploader-status">
 		<h3><?php _e( 'Uploading' ); ?></h3>
 		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
@@ -418,11 +437,16 @@ function wp_print_media_templates() {
 
 		if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
 		<div class="data-fields">
-		<# _.each( data.showAttachmentFields, function( field ) { #>
-			<div class="data-field data-{{ field }}"><#
+		<# _.each( data.showAttachmentFields, function( field ) {
+			var className = 'data-field data-hidden';
+			if ( '' === getUserSetting( 'hidegrid' + field ) ) {
+				className = 'data-field data-visible';
+			}
+		#>
+			<div class="{{ className }} data-{{ field }}"><#
 				if ( 'uploadedTo' === field ) {
 					if ( data[field] ) {
-					#><?php _e( 'Uploaded To:' ) ?><#
+					#><?php _e( 'Uploaded To: ' ) ?><#
 					} else {
 					#><?php _e( 'Unattached' ) ?><#
 					}