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 | |