From 78bcbde5e31a313f5c90833a2a1f9c6a1959197e Mon Sep 17 00:00:00 2001
From: Gregory Cornelius <gcorne@gmail.com>
Date: Fri, 28 Feb 2014 21:19:10 -0600
Subject: [PATCH 2/3] Refactor CollectionAdd and CollectionEdit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Instead of generating new constructors use initialize method to set attributes based on the collectionType
* Use reference to the SettingsView instead of grabbing it from the namespace. This better matches with existing AttachmentDisplay attribute
* Switch from using ‘tag’ to ‘collectionType’ to better communicate what the purpose of the attribute is.
---
src/wp-includes/js/media-views.js | 326 ++++++++++++++++++--------------------
1 file changed, 153 insertions(+), 173 deletions(-)
diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
index 3ace225..d1fbc89 100644
|
|
|
|
| 762 | 762 | /** |
| 763 | 763 | * wp.media.controller.CollectionEdit |
| 764 | 764 | * |
| 765 | | * @static |
| 766 | | * @param {string} prop The shortcode slug |
| 767 | | * @param {object} args |
| 768 | | * @returns {wp.media.controller.Library} |
| | 765 | * @constructor |
| | 766 | * @augments wp.media.controller.Library |
| | 767 | * @augments wp.media.controller.State |
| | 768 | * @augments Backbone.Model |
| 769 | 769 | */ |
| 770 | | media.controller.CollectionEdit = function ( prop, args ) { |
| 771 | | /** |
| 772 | | * @constructor |
| 773 | | * @augments wp.media.controller.Library |
| 774 | | * @augments wp.media.controller.State |
| 775 | | * @augments Backbone.Model |
| 776 | | */ |
| 777 | | return media.controller.Library.extend({ |
| 778 | | defaults : _.defaults(args.defaults || {}, { |
| 779 | | id: prop + '-edit', |
| 780 | | toolbar: prop + '-edit', |
| 781 | | multiple: false, |
| 782 | | describe: true, |
| 783 | | edge: 199, |
| 784 | | editing: false, |
| 785 | | sortable: true, |
| 786 | | searchable: false, |
| 787 | | content: 'browse', |
| 788 | | priority: 60, |
| 789 | | dragInfo: true, |
| 790 | | |
| 791 | | // Don't sync the selection, as the Edit {Collection} library |
| 792 | | // *is* the selection. |
| 793 | | syncSelection: false |
| 794 | | }), |
| | 770 | media.controller.CollectionEdit = media.controller.Library.extend({ |
| | 771 | defaults: { |
| | 772 | multiple: false, |
| | 773 | describe: true, |
| | 774 | edge: 199, |
| | 775 | editing: false, |
| | 776 | sortable: true, |
| | 777 | searchable: false, |
| | 778 | content: 'browse', |
| | 779 | priority: 60, |
| | 780 | dragInfo: true, |
| | 781 | SettingsView: false, |
| | 782 | |
| | 783 | // Don't sync the selection, as the Edit {Collection} library |
| | 784 | // *is* the selection. |
| | 785 | syncSelection: false |
| | 786 | }, |
| 795 | 787 | |
| 796 | | initialize: function() { |
| 797 | | // If we haven't been provided a `library`, create a `Selection`. |
| 798 | | if ( ! this.get('library') ) { |
| 799 | | this.set( 'library', new media.model.Selection() ); |
| 800 | | } |
| 801 | | // The single `Attachment` view to be used in the `Attachments` view. |
| 802 | | if ( ! this.get('AttachmentView') ) { |
| 803 | | this.set( 'AttachmentView', media.view.Attachment.EditLibrary ); |
| 804 | | } |
| 805 | | media.controller.Library.prototype.initialize.apply( this, arguments ); |
| 806 | | }, |
| | 788 | initialize: function() { |
| | 789 | var collectionType = this.get('collectionType'); |
| 807 | 790 | |
| 808 | | activate: function() { |
| 809 | | var library = this.get('library'); |
| | 791 | this.set( 'id', collectionType + '-edit' ); |
| | 792 | this.set( 'toolbar', collectionType + '-edit' ); |
| 810 | 793 | |
| 811 | | // Limit the library to images only. |
| 812 | | library.props.set( 'type', args.type ); |
| | 794 | // If we haven't been provided a `library`, create a `Selection`. |
| | 795 | if ( ! this.get('library') ) { |
| | 796 | this.set( 'library', new media.model.Selection() ); |
| | 797 | } |
| | 798 | // The single `Attachment` view to be used in the `Attachments` view. |
| | 799 | if ( ! this.get('AttachmentView') ) { |
| | 800 | this.set( 'AttachmentView', media.view.Attachment.EditLibrary ); |
| | 801 | } |
| | 802 | media.controller.Library.prototype.initialize.apply( this, arguments ); |
| | 803 | }, |
| 813 | 804 | |
| 814 | | // Watch for uploaded attachments. |
| 815 | | this.get('library').observe( wp.Uploader.queue ); |
| | 805 | activate: function() { |
| | 806 | var library = this.get('library'); |
| 816 | 807 | |
| 817 | | this.frame.on( 'content:render:browse', this.settings, this ); |
| | 808 | // Limit the library to images only. |
| | 809 | library.props.set( 'type', this.get( 'type' ) ); |
| 818 | 810 | |
| 819 | | media.controller.Library.prototype.activate.apply( this, arguments ); |
| 820 | | }, |
| | 811 | // Watch for uploaded attachments. |
| | 812 | this.get('library').observe( wp.Uploader.queue ); |
| 821 | 813 | |
| 822 | | deactivate: function() { |
| 823 | | // Stop watching for uploaded attachments. |
| 824 | | this.get('library').unobserve( wp.Uploader.queue ); |
| | 814 | this.frame.on( 'content:render:browse', this.renderSettings, this ); |
| 825 | 815 | |
| 826 | | this.frame.off( 'content:render:browse', this.settings, this ); |
| | 816 | media.controller.Library.prototype.activate.apply( this, arguments ); |
| | 817 | }, |
| 827 | 818 | |
| 828 | | media.controller.Library.prototype.deactivate.apply( this, arguments ); |
| 829 | | }, |
| | 819 | deactivate: function() { |
| | 820 | // Stop watching for uploaded attachments. |
| | 821 | this.get('library').unobserve( wp.Uploader.queue ); |
| 830 | 822 | |
| 831 | | settings: function( browser ) { |
| 832 | | var library = this.get('library'), obj = {}; |
| | 823 | this.frame.off( 'content:render:browse', this.renderSettings, this ); |
| 833 | 824 | |
| 834 | | if ( ! library || ! browser ) { |
| 835 | | return; |
| 836 | | } |
| | 825 | media.controller.Library.prototype.deactivate.apply( this, arguments ); |
| | 826 | }, |
| 837 | 827 | |
| 838 | | library[ prop ] = library[ prop ] || new Backbone.Model(); |
| | 828 | renderSettings: function( browser ) { |
| | 829 | var library = this.get('library'), |
| | 830 | collectionType = this.get('collectionType'), |
| | 831 | dragInfoText = this.get('dragInfoText'), |
| | 832 | SettingsView = this.get('SettingsView'), |
| | 833 | obj = {}; |
| 839 | 834 | |
| 840 | | obj[ prop ] = new media.view.Settings[ args.settings ]({ |
| 841 | | controller: this, |
| 842 | | model: library[ prop ], |
| 843 | | priority: 40 |
| 844 | | }); |
| | 835 | if ( ! library || ! browser ) { |
| | 836 | return; |
| | 837 | } |
| 845 | 838 | |
| 846 | | browser.sidebar.set( obj ); |
| | 839 | library[ collectionType ] = library[ collectionType ] || new Backbone.Model(); |
| 847 | 840 | |
| 848 | | if ( args.dragInfoText ) { |
| 849 | | browser.toolbar.set( 'dragInfo', new media.View({ |
| 850 | | el: $( '<div class="instructions">' + args.dragInfoText + '</div>' )[0], |
| 851 | | priority: -40 |
| 852 | | }) ); |
| 853 | | } |
| | 841 | obj[ collectionType ] = new SettingsView({ |
| | 842 | controller: this, |
| | 843 | model: library[ collectionType ], |
| | 844 | priority: 40 |
| | 845 | }); |
| 854 | 846 | |
| 855 | | browser.toolbar.set( 'reverse', { |
| 856 | | text: l10n.reverseOrder, |
| 857 | | priority: 80, |
| | 847 | browser.sidebar.set( obj ); |
| 858 | 848 | |
| 859 | | click: function() { |
| 860 | | library.reset( library.toArray().reverse() ); |
| 861 | | } |
| 862 | | }); |
| | 849 | if ( dragInfoText ) { |
| | 850 | browser.toolbar.set( 'dragInfo', new media.View({ |
| | 851 | el: $( '<div class="instructions">' + dragInfoText + '</div>' )[0], |
| | 852 | priority: -40 |
| | 853 | }) ); |
| 863 | 854 | } |
| 864 | | }); |
| 865 | | }; |
| | 855 | |
| | 856 | browser.toolbar.set( 'reverse', { |
| | 857 | text: l10n.reverseOrder, |
| | 858 | priority: 80, |
| | 859 | |
| | 860 | click: function() { |
| | 861 | library.reset( library.toArray().reverse() ); |
| | 862 | } |
| | 863 | }); |
| | 864 | } |
| | 865 | }); |
| 866 | 866 | |
| 867 | 867 | /** |
| 868 | 868 | * wp.media.controller.CollectionAdd |
| … |
… |
|
| 872 | 872 | * @augments wp.media.controller.State |
| 873 | 873 | * @augments Backbone.Model |
| 874 | 874 | */ |
| 875 | | media.controller.CollectionAdd = function (attributes) { |
| 876 | | var ExtendedLibrary, extended = _.extend( attributes, { |
| 877 | | defaults: _.defaults( { |
| 878 | | id: attributes.tag + '-library', |
| 879 | | title: attributes.title, |
| 880 | | menu: attributes.tag, |
| 881 | | toolbar: attributes.tag + '-add', |
| 882 | | filterable: 'uploaded', |
| 883 | | multiple: 'add', |
| 884 | | priority: 100, |
| 885 | | syncSelection: false |
| 886 | | }, media.controller.Library.prototype.defaults ), |
| 887 | | |
| 888 | | initialize: function() { |
| 889 | | // If we haven't been provided a `library`, create a `Selection`. |
| 890 | | if ( ! this.get('library') ) { |
| 891 | | this.set( 'library', media.query({ type: this.type }) ); |
| 892 | | } |
| 893 | | media.controller.Library.prototype.initialize.apply( this, arguments ); |
| 894 | | }, |
| | 875 | media.controller.CollectionAdd = media.controller.Library.extend({ |
| | 876 | defaults: _.defaults( { |
| | 877 | filterable: 'uploaded', |
| | 878 | multiple: 'add', |
| | 879 | priority: 100, |
| | 880 | syncSelection: false |
| | 881 | }, media.controller.Library.prototype.defaults ), |
| 895 | 882 | |
| 896 | | activate: function() { |
| 897 | | var library = this.get('library'), |
| 898 | | edit = this.frame.state( this.tag + '-edit' ).get('library'); |
| | 883 | initialize: function() { |
| | 884 | var collectionType = this.get('collectionType'); |
| 899 | 885 | |
| 900 | | if ( this.editLibrary && this.editLibrary !== edit ) { |
| 901 | | library.unobserve( this.editLibrary ); |
| 902 | | } |
| | 886 | this.set( 'id', collectionType + '-library' ); |
| | 887 | this.set( 'toolbar', collectionType + '-add' ); |
| | 888 | this.set( 'menu', collectionType ); |
| 903 | 889 | |
| 904 | | // Accepts attachments that exist in the original library and |
| 905 | | // that do not exist in gallery's library. |
| 906 | | library.validator = function( attachment ) { |
| 907 | | return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && media.model.Selection.prototype.validator.apply( this, arguments ); |
| 908 | | }; |
| | 890 | // If we haven't been provided a `library`, create a `Selection`. |
| | 891 | if ( ! this.get('library') ) { |
| | 892 | this.set( 'library', media.query({ type: this.get('type') }) ); |
| | 893 | } |
| | 894 | media.controller.Library.prototype.initialize.apply( this, arguments ); |
| | 895 | }, |
| 909 | 896 | |
| 910 | | // Reset the library to ensure that all attachments are re-added |
| 911 | | // to the collection. Do so silently, as calling `observe` will |
| 912 | | // trigger the `reset` event. |
| 913 | | library.reset( library.mirroring.models, { silent: true }); |
| 914 | | library.observe( edit ); |
| 915 | | this.editLibrary = edit; |
| | 897 | activate: function() { |
| | 898 | var library = this.get('library'), |
| | 899 | editLibrary = this.get('editLibrary'), |
| | 900 | edit = this.frame.state( this.get('collectionType') + '-edit' ).get('library'); |
| 916 | 901 | |
| 917 | | media.controller.Library.prototype.activate.apply( this, arguments ); |
| | 902 | if ( editLibrary && editLibrary !== edit ) { |
| | 903 | library.unobserve( editLibrary ); |
| 918 | 904 | } |
| 919 | | } ); |
| 920 | | ExtendedLibrary = media.controller.Library.extend( extended ); |
| 921 | | |
| 922 | | return new ExtendedLibrary(); |
| 923 | | }; |
| 924 | 905 | |
| 925 | | // wp.media.controller.GalleryEdit |
| 926 | | // ------------------------------- |
| 927 | | media.controller.GalleryEdit = media.controller.CollectionEdit( 'gallery', { |
| 928 | | type: 'image', |
| 929 | | settings: 'Gallery', |
| 930 | | defaults: { |
| 931 | | title: l10n.editGalleryTitle |
| 932 | | } |
| 933 | | }); |
| | 906 | // Accepts attachments that exist in the original library and |
| | 907 | // that do not exist in gallery's library. |
| | 908 | library.validator = function( attachment ) { |
| | 909 | return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && media.model.Selection.prototype.validator.apply( this, arguments ); |
| | 910 | }; |
| 934 | 911 | |
| 935 | | // wp.media.controller.PlaylistEdit |
| 936 | | // ------------------------------- |
| 937 | | media.controller.PlaylistEdit = media.controller.CollectionEdit( 'playlist', { |
| 938 | | type: 'audio', |
| 939 | | settings: 'Playlist', |
| 940 | | dragInfoText: l10n.playlistDragInfo, |
| 941 | | defaults: { |
| 942 | | title: l10n.editPlaylistTitle, |
| 943 | | dragInfo : false |
| 944 | | } |
| 945 | | }); |
| | 912 | // Reset the library to ensure that all attachments are re-added |
| | 913 | // to the collection. Do so silently, as calling `observe` will |
| | 914 | // trigger the `reset` event. |
| | 915 | library.reset( library.mirroring.models, { silent: true }); |
| | 916 | library.observe( edit ); |
| | 917 | this.set('editLibrary', edit); |
| 946 | 918 | |
| 947 | | // wp.media.controller.VideoPlaylistEdit |
| 948 | | // ------------------------------- |
| 949 | | media.controller.VideoPlaylistEdit = media.controller.CollectionEdit( 'video-playlist', { |
| 950 | | type: 'video', |
| 951 | | settings: 'Playlist', |
| 952 | | dragInfoText: l10n.videoPlaylistDragInfo, |
| 953 | | defaults: { |
| 954 | | title: l10n.editVideoPlaylistTitle, |
| 955 | | dragInfo : false |
| | 919 | media.controller.Library.prototype.activate.apply( this, arguments ); |
| 956 | 920 | } |
| 957 | 921 | }); |
| 958 | 922 | |
| … |
… |
|
| 1776 | 1740 | new media.controller.Embed(), |
| 1777 | 1741 | |
| 1778 | 1742 | // Gallery states. |
| 1779 | | new media.controller.GalleryEdit({ |
| 1780 | | library: options.selection, |
| 1781 | | editing: options.editing, |
| 1782 | | menu: 'gallery' |
| | 1743 | new media.controller.CollectionEdit({ |
| | 1744 | type: 'image', |
| | 1745 | collectionType: 'gallery', |
| | 1746 | title: l10n.editGalleryTitle, |
| | 1747 | SettingsView: media.view.Settings.Gallery, |
| | 1748 | library: options.selection, |
| | 1749 | editing: options.editing, |
| | 1750 | menu: 'gallery' |
| 1783 | 1751 | }), |
| 1784 | 1752 | |
| 1785 | 1753 | new media.controller.CollectionAdd({ |
| 1786 | | tag: 'gallery', |
| 1787 | | type: 'image', |
| 1788 | | title: l10n.addToGalleryTitle |
| | 1754 | type: 'image', |
| | 1755 | collectionType: 'gallery', |
| | 1756 | title: l10n.addToGalleryTitle |
| 1789 | 1757 | }), |
| 1790 | 1758 | |
| 1791 | 1759 | new media.controller.Library({ |
| … |
… |
|
| 1803 | 1771 | }), |
| 1804 | 1772 | |
| 1805 | 1773 | // Playlist states. |
| 1806 | | new media.controller.PlaylistEdit({ |
| 1807 | | library: options.selection, |
| 1808 | | editing: options.editing, |
| 1809 | | menu: 'playlist' |
| | 1774 | new media.controller.CollectionEdit({ |
| | 1775 | type: 'audio', |
| | 1776 | collectionType: 'playlist', |
| | 1777 | title: l10n.editPlaylistTitle, |
| | 1778 | SettingsView: media.view.Settings.Playlist, |
| | 1779 | library: options.selection, |
| | 1780 | editing: options.editing, |
| | 1781 | menu: 'playlist', |
| | 1782 | dragInfoText: l10n.playlistDragInfo, |
| | 1783 | dragInfo: false |
| 1810 | 1784 | }), |
| 1811 | 1785 | |
| 1812 | 1786 | new media.controller.CollectionAdd({ |
| 1813 | | tag: 'playlist', |
| 1814 | 1787 | type: 'audio', |
| | 1788 | collectionType: 'playlist', |
| 1815 | 1789 | title: l10n.addToPlaylistTitle |
| 1816 | 1790 | }), |
| 1817 | 1791 | |
| … |
… |
|
| 1830 | 1804 | }), |
| 1831 | 1805 | |
| 1832 | 1806 | // Video Playlist states. |
| 1833 | | new media.controller.VideoPlaylistEdit({ |
| 1834 | | library: options.selection, |
| 1835 | | editing: options.editing, |
| 1836 | | menu: 'video-playlist' |
| | 1807 | new media.controller.CollectionEdit({ |
| | 1808 | type: 'video', |
| | 1809 | collectionType: 'video-playlist', |
| | 1810 | title: l10n.editVideoPlaylistTitle, |
| | 1811 | SettingsView: media.view.Settings.Playlist, |
| | 1812 | library: options.selection, |
| | 1813 | editing: options.editing, |
| | 1814 | menu: 'video-playlist', |
| | 1815 | dragInfoText: l10n.videoPlaylistDragInfo, |
| | 1816 | dragInfo: false |
| 1837 | 1817 | }), |
| 1838 | 1818 | |
| 1839 | 1819 | new media.controller.CollectionAdd({ |
| 1840 | | tag: 'video-playlist', |
| 1841 | | type: 'video', |
| 1842 | | title: l10n.addToVideoPlaylistTitle |
| | 1820 | type: 'video', |
| | 1821 | collectionType: 'video-playlist', |
| | 1822 | title: l10n.addToVideoPlaylistTitle |
| 1843 | 1823 | }) |
| 1844 | 1824 | ]); |
| 1845 | 1825 | |