Skip to content

Instantly share code, notes, and snippets.

@danielbachhuber

danielbachhuber/collection-filter.js

Last active January 29, 2025 04:58
Download ZIP

Revisions

  1. danielbachhuber revised this gist Jan 25, 2016. 2 changed files with 13 additions and 3 deletions.
    14 changes: 11 additions & 3 deletions collection-filter.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,33 +1,41 @@
    (function(){
    /**
    * Create a new MediaLibraryTaxonomyFilter we later will instantiate
    */
    var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
    id: 'media-attachment-taxonomy-filter',

    createFilters: function() {
    var filters = {};
    // Formats the 'terms' we've included via wp_localize_script()
    _.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
    filters[ index ] = {
    text: value.name,
    props: {
    // @todo Needs to be the WP_Query var for the taxonomy
    // Change this: key needs to be the WP_Query var for the taxonomy
    collection: value.slug,
    }
    };
    });
    filters.all = {
    // @todo Use whatever default label you'd like
    // Change this: use whatever default label you'd like
    text: 'All collections',
    props: {
    // @todo Needs to be the WP_Query var for the taxonomy
    // Change this: key needs to be the WP_Query var for the taxonomy
    collection: ''
    },
    priority: 10
    };
    this.filters = filters;
    }
    });
    /**
    * Extend and override wp.media.view.AttachmentsBrowser to include our new filter
    */
    var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
    wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
    createToolbar: function() {
    // Make sure to load the original toolbar
    AttachmentsBrowser.prototype.createToolbar.call( this );
    this.toolbar.set( 'MediaLibraryTaxonomyFilter', new MediaLibraryTaxonomyFilter({
    controller: this.controller,
    2 changes: 2 additions & 0 deletions enqueue.php
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,11 @@

    add_action( 'wp_enqueue_media', function() {
    wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
    // Load 'terms' into a JavaScript variable that collection-filter.js has access to
    wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
    'terms' => get_terms( 'collection', array( 'hide_empty' => false ) ),
    ) );
    // Overrides code styling to accommodate for a third dropdown filter
    add_action( 'admin_footer', function(){
    ?>
    <style>
  2. danielbachhuber renamed this gist Jan 25, 2016. 1 changed file with 0 additions and 0 deletions.
    0 media-library-taxonomy-filter.js → collection-filter.js
    View file
    File renamed without changes.
  3. danielbachhuber revised this gist Jan 25, 2016. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions enqueue.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    <?php

    add_action( 'wp_enqueue_media', function() {
    wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
    wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
  4. danielbachhuber created this gist Jan 25, 2016.
    16 changes: 16 additions & 0 deletions enqueue.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    add_action( 'wp_enqueue_media', function() {
    wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() . '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
    wp_localize_script( 'media-library-taxonomy-filter', 'MediaLibraryTaxonomyFilterData', array(
    'terms' => get_terms( 'collection', array( 'hide_empty' => false ) ),
    ) );
    add_action( 'admin_footer', function(){
    ?>
    <style>
    .media-modal-content .media-frame select.attachment-filters {
    max-width: -webkit-calc(33% - 12px);
    max-width: calc(33% - 12px);
    }
    </style>
    <?php
    });
    });
    39 changes: 39 additions & 0 deletions media-library-taxonomy-filter.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    (function(){
    var MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
    id: 'media-attachment-taxonomy-filter',

    createFilters: function() {
    var filters = {};
    _.each( MediaLibraryTaxonomyFilterData.terms || {}, function( value, index ) {
    filters[ index ] = {
    text: value.name,
    props: {
    // @todo Needs to be the WP_Query var for the taxonomy
    collection: value.slug,
    }
    };
    });
    filters.all = {
    // @todo Use whatever default label you'd like
    text: 'All collections',
    props: {
    // @todo Needs to be the WP_Query var for the taxonomy
    collection: ''
    },
    priority: 10
    };
    this.filters = filters;
    }
    });
    var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
    wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
    createToolbar: function() {
    AttachmentsBrowser.prototype.createToolbar.call( this );
    this.toolbar.set( 'MediaLibraryTaxonomyFilter', new MediaLibraryTaxonomyFilter({
    controller: this.controller,
    model: this.collection.props,
    priority: -75
    }).render() );
    }
    });
    })()