customize-views.js (5065B)
1 /** 2 * @output wp-includes/js/customize-views.js 3 */ 4 5 (function( $, wp, _ ) { 6 7 if ( ! wp || ! wp.customize ) { return; } 8 var api = wp.customize; 9 10 /** 11 * wp.customize.HeaderTool.CurrentView 12 * 13 * Displays the currently selected header image, or a placeholder in lack 14 * thereof. 15 * 16 * Instantiate with model wp.customize.HeaderTool.currentHeader. 17 * 18 * @memberOf wp.customize.HeaderTool 19 * @alias wp.customize.HeaderTool.CurrentView 20 * 21 * @constructor 22 * @augments wp.Backbone.View 23 */ 24 api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{ 25 template: wp.template('header-current'), 26 27 initialize: function() { 28 this.listenTo(this.model, 'change', this.render); 29 this.render(); 30 }, 31 32 render: function() { 33 this.$el.html(this.template(this.model.toJSON())); 34 this.setButtons(); 35 return this; 36 }, 37 38 setButtons: function() { 39 var elements = $('#customize-control-header_image .actions .remove'); 40 if (this.model.get('choice')) { 41 elements.show(); 42 } else { 43 elements.hide(); 44 } 45 } 46 }); 47 48 49 /** 50 * wp.customize.HeaderTool.ChoiceView 51 * 52 * Represents a choosable header image, be it user-uploaded, 53 * theme-suggested or a special Randomize choice. 54 * 55 * Takes a wp.customize.HeaderTool.ImageModel. 56 * 57 * Manually changes model wp.customize.HeaderTool.currentHeader via the 58 * `select` method. 59 * 60 * @memberOf wp.customize.HeaderTool 61 * @alias wp.customize.HeaderTool.ChoiceView 62 * 63 * @constructor 64 * @augments wp.Backbone.View 65 */ 66 api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{ 67 template: wp.template('header-choice'), 68 69 className: 'header-view', 70 71 events: { 72 'click .choice,.random': 'select', 73 'click .close': 'removeImage' 74 }, 75 76 initialize: function() { 77 var properties = [ 78 this.model.get('header').url, 79 this.model.get('choice') 80 ]; 81 82 this.listenTo(this.model, 'change:selected', this.toggleSelected); 83 84 if (_.contains(properties, api.get().header_image)) { 85 api.HeaderTool.currentHeader.set(this.extendedModel()); 86 } 87 }, 88 89 render: function() { 90 this.$el.html(this.template(this.extendedModel())); 91 92 this.toggleSelected(); 93 return this; 94 }, 95 96 toggleSelected: function() { 97 this.$el.toggleClass('selected', this.model.get('selected')); 98 }, 99 100 extendedModel: function() { 101 var c = this.model.get('collection'); 102 return _.extend(this.model.toJSON(), { 103 type: c.type 104 }); 105 }, 106 107 select: function() { 108 this.preventJump(); 109 this.model.save(); 110 api.HeaderTool.currentHeader.set(this.extendedModel()); 111 }, 112 113 preventJump: function() { 114 var container = $('.wp-full-overlay-sidebar-content'), 115 scroll = container.scrollTop(); 116 117 _.defer(function() { 118 container.scrollTop(scroll); 119 }); 120 }, 121 122 removeImage: function(e) { 123 e.stopPropagation(); 124 this.model.destroy(); 125 this.remove(); 126 } 127 }); 128 129 130 /** 131 * wp.customize.HeaderTool.ChoiceListView 132 * 133 * A container for ChoiceViews. These choices should be of one same type: 134 * user-uploaded headers or theme-defined ones. 135 * 136 * Takes a wp.customize.HeaderTool.ChoiceList. 137 * 138 * @memberOf wp.customize.HeaderTool 139 * @alias wp.customize.HeaderTool.ChoiceListView 140 * 141 * @constructor 142 * @augments wp.Backbone.View 143 */ 144 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{ 145 initialize: function() { 146 this.listenTo(this.collection, 'add', this.addOne); 147 this.listenTo(this.collection, 'remove', this.render); 148 this.listenTo(this.collection, 'sort', this.render); 149 this.listenTo(this.collection, 'change', this.toggleList); 150 this.render(); 151 }, 152 153 render: function() { 154 this.$el.empty(); 155 this.collection.each(this.addOne, this); 156 this.toggleList(); 157 }, 158 159 addOne: function(choice) { 160 var view; 161 choice.set({ collection: this.collection }); 162 view = new api.HeaderTool.ChoiceView({ model: choice }); 163 this.$el.append(view.render().el); 164 }, 165 166 toggleList: function() { 167 var title = this.$el.parents().prev('.customize-control-title'), 168 randomButton = this.$el.find('.random').parent(); 169 if (this.collection.shouldHideTitle()) { 170 title.add(randomButton).hide(); 171 } else { 172 title.add(randomButton).show(); 173 } 174 } 175 }); 176 177 178 /** 179 * wp.customize.HeaderTool.CombinedList 180 * 181 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any 182 * Backbone object, really) and acts as a bus to feed them events. 183 * 184 * @memberOf wp.customize.HeaderTool 185 * @alias wp.customize.HeaderTool.CombinedList 186 * 187 * @constructor 188 * @augments wp.Backbone.View 189 */ 190 api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{ 191 initialize: function(collections) { 192 this.collections = collections; 193 this.on('all', this.propagate, this); 194 }, 195 propagate: function(event, arg) { 196 _.each(this.collections, function(collection) { 197 collection.trigger(event, arg); 198 }); 199 } 200 }); 201 202 })( jQuery, window.wp, _ );