wp-includes/js/customize-views.js

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