Initial commit

wp-includes/js/customize-views.js

@@ -0,0 +1,202 @@
+/**
+ * @output wp-includes/js/customize-views.js
+ */
+
+(function( $, wp, _ ) {
+
+	if ( ! wp || ! wp.customize ) { return; }
+	var api = wp.customize;
+
+	/**
+	 * wp.customize.HeaderTool.CurrentView
+	 *
+	 * Displays the currently selected header image, or a placeholder in lack
+	 * thereof.
+	 *
+	 * Instantiate with model wp.customize.HeaderTool.currentHeader.
+	 *
+	 * @memberOf wp.customize.HeaderTool
+	 * @alias wp.customize.HeaderTool.CurrentView
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
+		template: wp.template('header-current'),
+
+		initialize: function() {
+			this.listenTo(this.model, 'change', this.render);
+			this.render();
+		},
+
+		render: function() {
+			this.$el.html(this.template(this.model.toJSON()));
+			this.setButtons();
+			return this;
+		},
+
+		setButtons: function() {
+			var elements = $('#customize-control-header_image .actions .remove');
+			if (this.model.get('choice')) {
+				elements.show();
+			} else {
+				elements.hide();
+			}
+		}
+	});
+
+
+	/**
+	 * wp.customize.HeaderTool.ChoiceView
+	 *
+	 * Represents a choosable header image, be it user-uploaded,
+	 * theme-suggested or a special Randomize choice.
+	 *
+	 * Takes a wp.customize.HeaderTool.ImageModel.
+	 *
+	 * Manually changes model wp.customize.HeaderTool.currentHeader via the
+	 * `select` method.
+	 *
+	 * @memberOf wp.customize.HeaderTool
+	 * @alias wp.customize.HeaderTool.ChoiceView
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{
+		template: wp.template('header-choice'),
+
+		className: 'header-view',
+
+		events: {
+			'click .choice,.random': 'select',
+			'click .close': 'removeImage'
+		},
+
+		initialize: function() {
+			var properties = [
+				this.model.get('header').url,
+				this.model.get('choice')
+			];
+
+			this.listenTo(this.model, 'change:selected', this.toggleSelected);
+
+			if (_.contains(properties, api.get().header_image)) {
+				api.HeaderTool.currentHeader.set(this.extendedModel());
+			}
+		},
+
+		render: function() {
+			this.$el.html(this.template(this.extendedModel()));
+
+			this.toggleSelected();
+			return this;
+		},
+
+		toggleSelected: function() {
+			this.$el.toggleClass('selected', this.model.get('selected'));
+		},
+
+		extendedModel: function() {
+			var c = this.model.get('collection');
+			return _.extend(this.model.toJSON(), {
+				type: c.type
+			});
+		},
+
+		select: function() {
+			this.preventJump();
+			this.model.save();
+			api.HeaderTool.currentHeader.set(this.extendedModel());
+		},
+
+		preventJump: function() {
+			var container = $('.wp-full-overlay-sidebar-content'),
+				scroll = container.scrollTop();
+
+			_.defer(function() {
+				container.scrollTop(scroll);
+			});
+		},
+
+		removeImage: function(e) {
+			e.stopPropagation();
+			this.model.destroy();
+			this.remove();
+		}
+	});
+
+
+	/**
+	 * wp.customize.HeaderTool.ChoiceListView
+	 *
+	 * A container for ChoiceViews. These choices should be of one same type:
+	 * user-uploaded headers or theme-defined ones.
+	 *
+	 * Takes a wp.customize.HeaderTool.ChoiceList.
+	 *
+	 * @memberOf wp.customize.HeaderTool
+	 * @alias wp.customize.HeaderTool.ChoiceListView
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
+		initialize: function() {
+			this.listenTo(this.collection, 'add', this.addOne);
+			this.listenTo(this.collection, 'remove', this.render);
+			this.listenTo(this.collection, 'sort', this.render);
+			this.listenTo(this.collection, 'change', this.toggleList);
+			this.render();
+		},
+
+		render: function() {
+			this.$el.empty();
+			this.collection.each(this.addOne, this);
+			this.toggleList();
+		},
+
+		addOne: function(choice) {
+			var view;
+			choice.set({ collection: this.collection });
+			view = new api.HeaderTool.ChoiceView({ model: choice });
+			this.$el.append(view.render().el);
+		},
+
+		toggleList: function() {
+			var title = this.$el.parents().prev('.customize-control-title'),
+				randomButton = this.$el.find('.random').parent();
+			if (this.collection.shouldHideTitle()) {
+				title.add(randomButton).hide();
+			} else {
+				title.add(randomButton).show();
+			}
+		}
+	});
+
+
+	/**
+	 * wp.customize.HeaderTool.CombinedList
+	 *
+	 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
+	 * Backbone object, really) and acts as a bus to feed them events.
+	 *
+	 * @memberOf wp.customize.HeaderTool
+	 * @alias wp.customize.HeaderTool.CombinedList
+	 *
+	 * @constructor
+	 * @augments wp.Backbone.View
+	 */
+	api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{
+		initialize: function(collections) {
+			this.collections = collections;
+			this.on('all', this.propagate, this);
+		},
+		propagate: function(event, arg) {
+			_.each(this.collections, function(collection) {
+				collection.trigger(event, arg);
+			});
+		}
+	});
+
+})( jQuery, window.wp, _ );