Changeset 27411 for trunk/src/wp-includes/js/media-views.js
- Timestamp:
- 03/05/2014 03:06:00 PM (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/js/media-views.js
r27378 r27411 1 1 /* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */ 2 (function($ ){2 (function($, _){ 3 3 var media = wp.media, l10n; 4 4 … … 761 761 762 762 /** 763 * wp.media.controller.AudioDetails 764 * 765 * @constructor 766 * @augments wp.media.controller.State 767 * @augments Backbone.Model 768 */ 769 media.controller.AudioDetails = media.controller.State.extend({ 770 defaults: _.defaults({ 771 id: 'audio-details', 772 toolbar: 'audio-details', 773 title: l10n.audioDetailsTitle, 774 content: 'audio-details', 775 menu: 'audio-details', 776 router: false, 777 attachment: false, 778 priority: 60, 779 editing: false 780 }, media.controller.Library.prototype.defaults ), 781 782 initialize: function( options ) { 783 this.audio = options.audio; 784 media.controller.State.prototype.initialize.apply( this, arguments ); 785 } 786 }); 787 788 /** 789 * wp.media.controller.VideoDetails 790 * 791 * @constructor 792 * @augments wp.media.controller.State 793 * @augments Backbone.Model 794 */ 795 media.controller.VideoDetails = media.controller.State.extend({ 796 defaults: _.defaults({ 797 id: 'video-details', 798 toolbar: 'video-details', 799 title: l10n.videoDetailsTitle, 800 content: 'video-details', 801 menu: 'video-details', 802 router: false, 803 attachment: false, 804 priority: 60, 805 editing: false 806 }, media.controller.Library.prototype.defaults ), 807 808 initialize: function( options ) { 809 this.video = options.video; 810 media.controller.State.prototype.initialize.apply( this, arguments ); 811 } 812 }); 813 814 /** 763 815 * wp.media.controller.CollectionEdit 764 816 * … … 1063 1115 var selection = this.get('selection'), 1064 1116 attachment = this.image.attachment; 1117 1118 selection.reset( attachment ? [ attachment ] : [] ); 1119 } 1120 }); 1121 1122 /** 1123 * wp.media.controller.ReplaceVideo 1124 * 1125 * Replace a selected single video 1126 * 1127 * @constructor 1128 * @augments wp.media.controller.Library 1129 * @augments wp.media.controller.State 1130 * @augments Backbone.Model 1131 */ 1132 media.controller.ReplaceVideo = media.controller.Library.extend({ 1133 defaults: _.defaults({ 1134 id: 'replace-video', 1135 filterable: 'uploaded', 1136 multiple: false, 1137 toolbar: 'replace', 1138 title: l10n.replaceVideoTitle, 1139 priority: 60, 1140 syncSelection: false 1141 }, media.controller.Library.prototype.defaults ), 1142 1143 initialize: function( options ) { 1144 var library, comparator; 1145 1146 this.video = options.video; 1147 // If we haven't been provided a `library`, create a `Selection`. 1148 if ( ! this.get('library') ) { 1149 this.set( 'library', media.query({ type: 'video' }) ); 1150 } 1151 1152 media.controller.Library.prototype.initialize.apply( this, arguments ); 1153 1154 library = this.get('library'); 1155 comparator = library.comparator; 1156 1157 // Overload the library's comparator to push items that are not in 1158 // the mirrored query to the front of the aggregate collection. 1159 library.comparator = function( a, b ) { 1160 var aInQuery = !! this.mirroring.get( a.cid ), 1161 bInQuery = !! this.mirroring.get( b.cid ); 1162 1163 if ( ! aInQuery && bInQuery ) { 1164 return -1; 1165 } else if ( aInQuery && ! bInQuery ) { 1166 return 1; 1167 } else { 1168 return comparator.apply( this, arguments ); 1169 } 1170 }; 1171 1172 // Add all items in the selection to the library, so any featured 1173 // images that are not initially loaded still appear. 1174 library.observe( this.get('selection') ); 1175 }, 1176 1177 activate: function() { 1178 this.updateSelection(); 1179 media.controller.Library.prototype.activate.apply( this, arguments ); 1180 }, 1181 1182 updateSelection: function() { 1183 var selection = this.get('selection'), 1184 attachment = this.video.attachment; 1185 1186 selection.reset( attachment ? [ attachment ] : [] ); 1187 } 1188 }); 1189 1190 /** 1191 * wp.media.controller.ReplaceAudio 1192 * 1193 * Replace a selected single audio file 1194 * 1195 * @constructor 1196 * @augments wp.media.controller.Library 1197 * @augments wp.media.controller.State 1198 * @augments Backbone.Model 1199 */ 1200 media.controller.ReplaceAudio = media.controller.Library.extend({ 1201 defaults: _.defaults({ 1202 id: 'replace-audio', 1203 filterable: 'uploaded', 1204 multiple: false, 1205 toolbar: 'replace', 1206 title: l10n.replaceAudioTitle, 1207 priority: 60, 1208 syncSelection: false 1209 }, media.controller.Library.prototype.defaults ), 1210 1211 initialize: function( options ) { 1212 var library, comparator; 1213 1214 this.audio = options.audio; 1215 // If we haven't been provided a `library`, create a `Selection`. 1216 if ( ! this.get('library') ) { 1217 this.set( 'library', media.query({ type: 'audio' }) ); 1218 } 1219 1220 media.controller.Library.prototype.initialize.apply( this, arguments ); 1221 1222 library = this.get('library'); 1223 comparator = library.comparator; 1224 1225 // Overload the library's comparator to push items that are not in 1226 // the mirrored query to the front of the aggregate collection. 1227 library.comparator = function( a, b ) { 1228 var aInQuery = !! this.mirroring.get( a.cid ), 1229 bInQuery = !! this.mirroring.get( b.cid ); 1230 1231 if ( ! aInQuery && bInQuery ) { 1232 return -1; 1233 } else if ( aInQuery && ! bInQuery ) { 1234 return 1; 1235 } else { 1236 return comparator.apply( this, arguments ); 1237 } 1238 }; 1239 1240 // Add all items in the selection to the library, so any featured 1241 // images that are not initially loaded still appear. 1242 library.observe( this.get('selection') ); 1243 }, 1244 1245 activate: function() { 1246 this.updateSelection(); 1247 media.controller.Library.prototype.activate.apply( this, arguments ); 1248 }, 1249 1250 updateSelection: function() { 1251 var selection = this.get('selection'), 1252 attachment = this.audio.attachment; 1065 1253 1066 1254 selection.reset( attachment ? [ attachment ] : [] ); … … 2462 2650 }); 2463 2651 2652 media.view.MediaFrame.AudioDetails = media.view.MediaFrame.Select.extend({ 2653 defaults: { 2654 id: 'audio', 2655 url: '', 2656 menu: 'audio-details', 2657 content: 'audio-details', 2658 toolbar: 'audio-details', 2659 type: 'link', 2660 title: l10n.audioDetailsTitle, 2661 priority: 120 2662 }, 2663 2664 initialize: function( options ) { 2665 this.audio = new media.model.PostAudio( options.metadata ); 2666 this.options.selection = new media.model.Selection( this.audio.attachment, { multiple: false } ); 2667 media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments ); 2668 }, 2669 2670 bindHandlers: function() { 2671 media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments ); 2672 this.on( 'menu:create:audio-details', this.createMenu, this ); 2673 this.on( 'content:render:audio-details', this.renderAudioDetailsContent, this ); 2674 this.on( 'menu:render:audio-details', this.renderMenu, this ); 2675 this.on( 'toolbar:render:audio-details', this.renderAudioDetailsToolbar, this ); 2676 // override the select toolbar 2677 this.on( 'toolbar:render:replace', this.renderReplaceAudioToolbar, this ); 2678 }, 2679 2680 createStates: function() { 2681 this.states.add([ 2682 new media.controller.AudioDetails({ 2683 audio: this.audio, 2684 editable: false, 2685 menu: 'audio-details' 2686 }), 2687 new media.controller.ReplaceAudio({ 2688 id: 'replace-audio', 2689 library: media.query( { type: 'audio' } ), 2690 audio: this.audio, 2691 multiple: false, 2692 title: l10n.audioReplaceTitle, 2693 menu: 'audio-details', 2694 toolbar: 'replace', 2695 priority: 80, 2696 displaySettings: true 2697 }) 2698 ]); 2699 }, 2700 2701 renderAudioDetailsContent: function() { 2702 var view = new media.view.AudioDetails({ 2703 controller: this, 2704 model: this.state().audio, 2705 attachment: this.state().audio.attachment 2706 }).render(); 2707 2708 this.content.set( view ); 2709 }, 2710 2711 renderMenu: function( view ) { 2712 var lastState = this.lastState(), 2713 previous = lastState && lastState.id, 2714 frame = this; 2715 2716 view.set({ 2717 cancel: { 2718 text: l10n.audioDetailsCancel, 2719 priority: 20, 2720 click: function() { 2721 if ( previous ) { 2722 frame.setState( previous ); 2723 } else { 2724 frame.close(); 2725 } 2726 } 2727 }, 2728 separateCancel: new media.View({ 2729 className: 'separator', 2730 priority: 40 2731 }) 2732 }); 2733 2734 }, 2735 2736 renderAudioDetailsToolbar: function() { 2737 this.toolbar.set( new media.view.Toolbar({ 2738 controller: this, 2739 items: { 2740 select: { 2741 style: 'primary', 2742 text: l10n.update, 2743 priority: 80, 2744 2745 click: function() { 2746 var controller = this.controller, 2747 state = controller.state(); 2748 2749 controller.close(); 2750 2751 // not sure if we want to use wp.media.string.image which will create a shortcode or 2752 // perhaps wp.html.string to at least to build the <img /> 2753 state.trigger( 'update', controller.audio.toJSON() ); 2754 2755 // Restore and reset the default state. 2756 controller.setState( controller.options.state ); 2757 controller.reset(); 2758 } 2759 } 2760 } 2761 }) ); 2762 }, 2763 2764 renderReplaceAudioToolbar: function() { 2765 this.toolbar.set( new media.view.Toolbar({ 2766 controller: this, 2767 items: { 2768 replace: { 2769 style: 'primary', 2770 text: l10n.replace, 2771 priority: 80, 2772 2773 click: function() { 2774 var controller = this.controller, 2775 state = controller.state(), 2776 selection = state.get( 'selection' ), 2777 attachment = selection.single(); 2778 2779 controller.audio.changeAttachment( attachment, state.display( attachment ) ); 2780 2781 // not sure if we want to use wp.media.string.image which will create a shortcode or 2782 // perhaps wp.html.string to at least to build the <img /> 2783 state.trigger( 'replace', controller.audio.toJSON() ); 2784 2785 // Restore and reset the default state. 2786 controller.setState( controller.options.state ); 2787 controller.reset(); 2788 } 2789 } 2790 } 2791 }) ); 2792 } 2793 }); 2794 2795 media.view.MediaFrame.VideoDetails = media.view.MediaFrame.Select.extend({ 2796 defaults: { 2797 id: 'video', 2798 url: '', 2799 menu: 'video-details', 2800 content: 'video-details', 2801 toolbar: 'video-details', 2802 type: 'link', 2803 title: l10n.videoDetailsTitle, 2804 priority: 120 2805 }, 2806 2807 initialize: function( options ) { 2808 this.video = new media.model.PostVideo( options.metadata ); 2809 this.options.selection = new media.model.Selection( this.video.attachment, { multiple: false } ); 2810 media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments ); 2811 }, 2812 2813 bindHandlers: function() { 2814 media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments ); 2815 this.on( 'menu:create:video-details', this.createMenu, this ); 2816 this.on( 'content:render:video-details', this.renderVideoDetailsContent, this ); 2817 this.on( 'menu:render:video-details', this.renderMenu, this ); 2818 this.on( 'toolbar:render:video-details', this.renderVideoDetailsToolbar, this ); 2819 // override the select toolbar 2820 this.on( 'toolbar:render:replace', this.renderReplaceVideoToolbar, this ); 2821 }, 2822 2823 createStates: function() { 2824 this.states.add([ 2825 new media.controller.VideoDetails({ 2826 video: this.video, 2827 editable: false, 2828 menu: 'video-details' 2829 }), 2830 new media.controller.ReplaceVideo({ 2831 id: 'replace-video', 2832 library: media.query( { type: 'video' } ), 2833 video: this.video, 2834 multiple: false, 2835 title: l10n.videoReplaceTitle, 2836 menu: 'video-details', 2837 toolbar: 'replace', 2838 priority: 80, 2839 displaySettings: true 2840 }) 2841 ]); 2842 }, 2843 2844 renderVideoDetailsContent: function() { 2845 var view = new media.view.VideoDetails({ 2846 controller: this, 2847 model: this.state().video, 2848 attachment: this.state().video.attachment 2849 }).render(); 2850 2851 this.content.set( view ); 2852 }, 2853 2854 renderMenu: function( view ) { 2855 var lastState = this.lastState(), 2856 previous = lastState && lastState.id, 2857 frame = this; 2858 2859 view.set({ 2860 cancel: { 2861 text: l10n.videoDetailsCancel, 2862 priority: 20, 2863 click: function() { 2864 if ( previous ) { 2865 frame.setState( previous ); 2866 } else { 2867 frame.close(); 2868 } 2869 } 2870 }, 2871 separateCancel: new media.View({ 2872 className: 'separator', 2873 priority: 40 2874 }) 2875 }); 2876 2877 }, 2878 2879 renderVideoDetailsToolbar: function() { 2880 this.toolbar.set( new media.view.Toolbar({ 2881 controller: this, 2882 items: { 2883 select: { 2884 style: 'primary', 2885 text: l10n.update, 2886 priority: 80, 2887 2888 click: function() { 2889 var controller = this.controller, 2890 state = controller.state(); 2891 2892 controller.close(); 2893 2894 // not sure if we want to use wp.media.string.image which will create a shortcode or 2895 // perhaps wp.html.string to at least to build the <img /> 2896 state.trigger( 'update', controller.video.toJSON() ); 2897 2898 // Restore and reset the default state. 2899 controller.setState( controller.options.state ); 2900 controller.reset(); 2901 } 2902 } 2903 } 2904 }) ); 2905 }, 2906 2907 renderReplaceVideoToolbar: function() { 2908 this.toolbar.set( new media.view.Toolbar({ 2909 controller: this, 2910 items: { 2911 replace: { 2912 style: 'primary', 2913 text: l10n.replace, 2914 priority: 80, 2915 2916 click: function() { 2917 var controller = this.controller, 2918 state = controller.state(), 2919 selection = state.get( 'selection' ), 2920 attachment = selection.single(); 2921 2922 controller.video.changeAttachment( attachment, state.display( attachment ) ); 2923 2924 state.trigger( 'replace', controller.video.toJSON() ); 2925 2926 // Restore and reset the default state. 2927 controller.setState( controller.options.state ); 2928 controller.reset(); 2929 } 2930 } 2931 } 2932 }) ); 2933 } 2934 }); 2464 2935 2465 2936 /** … … 5606 6077 */ 5607 6078 media.view.EmbedImage = media.view.Settings.AttachmentDisplay.extend({ 5608 className: 'embed- image-settings',6079 className: 'embed-media-settings', 5609 6080 template: media.template('embed-image-settings'), 5610 6081 … … 5667 6138 } 5668 6139 }); 5669 }(jQuery)); 6140 6141 media.view.AudioDetails = media.view.Settings.AttachmentDisplay.extend({ 6142 className: 'audio-details', 6143 template: media.template('audio-details'), 6144 6145 initialize: function() { 6146 _.bindAll(this, 'player', 'close'); 6147 6148 this.listenTo( this.controller, 'close', this.close ); 6149 6150 // used in AttachmentDisplay.prototype.updateLinkTo 6151 this.options.attachment = this.model.attachment; 6152 media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments ); 6153 }, 6154 6155 prepare: function() { 6156 var attachment = false; 6157 6158 if ( this.model.attachment ) { 6159 attachment = this.model.attachment.toJSON(); 6160 } 6161 return _.defaults({ 6162 model: this.model.toJSON(), 6163 attachment: attachment 6164 }, this.options ); 6165 }, 6166 6167 close : function() { 6168 this.mejs.pause(); 6169 this.remove(); 6170 delete this.mejs; 6171 delete this.mejsInstance; 6172 }, 6173 6174 player : function (mejs) { 6175 this.mejs = mejs; 6176 }, 6177 6178 render: function() { 6179 var self = this, settings = { 6180 success : this.player 6181 }; 6182 6183 if ( ! _.isUndefined( window._wpmejsSettings ) ) { 6184 settings.pluginPath = _wpmejsSettings.pluginPath; 6185 } 6186 6187 media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments ); 6188 setTimeout( function() { self.resetFocus(); }, 10 ); 6189 6190 this.mejsInstance = new MediaElementPlayer( this.$('audio').get(0), settings ); 6191 6192 return this; 6193 }, 6194 6195 resetFocus: function() { 6196 this.$( '.embed-media-settings' ).scrollTop( 0 ); 6197 } 6198 }); 6199 6200 media.view.VideoDetails = media.view.Settings.AttachmentDisplay.extend({ 6201 className: 'video-details', 6202 template: media.template('video-details'), 6203 6204 initialize: function() { 6205 _.bindAll(this, 'player', 'played'); 6206 6207 this.removable = false; 6208 this.listenTo( this.controller, 'close', this.close ); 6209 6210 // used in AttachmentDisplay.prototype.updateLinkTo 6211 this.options.attachment = this.model.attachment; 6212 media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments ); 6213 }, 6214 6215 prepare: function() { 6216 var attachment = false; 6217 6218 if ( this.model.attachment ) { 6219 attachment = this.model.attachment.toJSON(); 6220 } 6221 return _.defaults({ 6222 model: this.model.toJSON(), 6223 attachment: attachment 6224 }, this.options ); 6225 }, 6226 6227 close : function() { 6228 if ( this.removable ) { 6229 this.mejs.pause(); 6230 } 6231 this.remove(); 6232 this.mejs = this.mejsInstance = null; 6233 }, 6234 6235 played : function () { 6236 this.removable = true; 6237 }, 6238 6239 player : function (mejs) { 6240 this.mejs = mejs; 6241 this.mejs.addEventListener( 'play', this.played ); 6242 }, 6243 6244 render: function() { 6245 var self = this, settings = { 6246 success : this.player 6247 }; 6248 6249 if ( ! _.isUndefined( window._wpmejsSettings ) ) { 6250 settings.pluginPath = _wpmejsSettings.pluginPath; 6251 } 6252 6253 media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments ); 6254 setTimeout( function() { self.resetFocus(); }, 10 ); 6255 6256 if ( ! this.mejsInstance ) { 6257 this.mejsInstance = new MediaElementPlayer( this.$('video').get(0), settings ); 6258 } 6259 6260 return this; 6261 }, 6262 6263 resetFocus: function() { 6264 this.$( '.embed-media-settings' ).scrollTop( 0 ); 6265 } 6266 }); 6267 }(jQuery, _));
Note: See TracChangeset
for help on using the changeset viewer.