wp-includes/js/customize-views.js

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