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.height(height);
  67                 },
  68
  69                 setButtons: function() {
  70                         var elements = $('#customize-control-header_image .actions .remove');
  71                         if (this.model.get('choice')) {
  72                                 elements.show();
  73                         } else {
  74                                 elements.hide();
  75                         }
  76                 }
  77         });
  78
  79
  80         /**
  81          * wp.customize.HeaderTool.ChoiceView
  82          *
  83          * Represents a choosable header image, be it user-uploaded,
  84          * theme-suggested or a special Randomize choice.
  85          *
  86          * Takes a wp.customize.HeaderTool.ImageModel.
  87          *
  88          * Manually changes model wp.customize.HeaderTool.currentHeader via the
  89          * `select` method.
  90          *
  91          * @constructor
  92          * @augments wp.Backbone.View
  93          */
  94         api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
  95                 template: wp.template('header-choice'),
  96
  97                 className: 'header-view',
  98
  99                 events: {
 100                         'click .choice,.random': 'select',
 101                         'click .close': 'removeImage'
 102                 },
 103
 104                 initialize: function() {
 105                         var properties = [
 106                                 this.model.get('header').url,
 107                                 this.model.get('choice')
 108                         ];
 109
 110                         this.listenTo(this.model, 'change:selected', this.toggleSelected);
 111
 112                         if (_.contains(properties, api.get().header_image)) {
 113                                 api.HeaderTool.currentHeader.set(this.extendedModel());
 114                         }
 115                 },
 116
 117                 render: function() {
 118                         this.$el.html(this.template(this.extendedModel()));
 119
 120                         this.toggleSelected();
 121                         return this;
 122                 },
 123
 124                 toggleSelected: function() {
 125                         this.$el.toggleClass('selected', this.model.get('selected'));
 126                 },
 127
 128                 extendedModel: function() {
 129                         var c = this.model.get('collection');
 130                         return _.extend(this.model.toJSON(), {
 131                                 type: c.type
 132                         });
 133                 },
 134
 135                 getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
 136
 137                 setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
 138
 139                 select: function() {
 140                         this.preventJump();
 141                         this.model.save();
 142                         api.HeaderTool.currentHeader.set(this.extendedModel());
 143                 },
 144
 145                 preventJump: function() {
 146                         var container = $('.wp-full-overlay-sidebar-content'),
 147                                 scroll = container.scrollTop();
 148
 149                         _.defer(function() {
 150                                 container.scrollTop(scroll);
 151                         });
 152                 },
 153
 154                 removeImage: function(e) {
 155                         e.stopPropagation();
 156                         this.model.destroy();
 157                         this.remove();
 158                 }
 159         });
 160
 161
 162         /**
 163          * wp.customize.HeaderTool.ChoiceListView
 164          *
 165          * A container for ChoiceViews. These choices should be of one same type:
 166          * user-uploaded headers or theme-defined ones.
 167          *
 168          * Takes a wp.customize.HeaderTool.ChoiceList.
 169          *
 170          * @constructor
 171          * @augments wp.Backbone.View
 172          */
 173         api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
 174                 initialize: function() {
 175                         this.listenTo(this.collection, 'add', this.addOne);
 176                         this.listenTo(this.collection, 'remove', this.render);
 177                         this.listenTo(this.collection, 'sort', this.render);
 178                         this.listenTo(this.collection, 'change', this.toggleList);
 179                         this.render();
 180                 },
 181
 182                 render: function() {
 183                         this.$el.empty();
 184                         this.collection.each(this.addOne, this);
 185                         this.toggleList();
 186                 },
 187
 188                 addOne: function(choice) {
 189                         var view;
 190                         choice.set({ collection: this.collection });
 191                         view = new api.HeaderTool.ChoiceView({ model: choice });
 192                         this.$el.append(view.render().el);
 193                 },
 194
 195                 toggleList: function() {
 196                         var title = this.$el.parents().prev('.customize-control-title'),
 197                                 randomButton = this.$el.find('.random').parent();
 198                         if (this.collection.shouldHideTitle()) {
 199                                 title.add(randomButton).hide();
 200                         } else {
 201                                 title.add(randomButton).show();
 202                         }
 203                 }
 204         });
 205
 206
 207         /**
 208          * wp.customize.HeaderTool.CombinedList
 209          *
 210          * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
 211          * Backbone object, really) and acts as a bus to feed them events.
 212          *
 213          * @constructor
 214          * @augments wp.Backbone.View
 215          */
 216         api.HeaderTool.CombinedList = wp.Backbone.View.extend({
 217                 initialize: function(collections) {
 218                         this.collections = collections;
 219                         this.on('all', this.propagate, this);
 220                 },
 221                 propagate: function(event, arg) {
 222                         _.each(this.collections, function(collection) {
 223                                 collection.trigger(event, arg);
 224                         });
 225                 }
 226         });
 227
 228 })( jQuery, window.wp, _ );