cartodb/lib/assets/javascripts/builder/embed/embed-overlay-view.js
2020-06-15 10:58:47 +08:00

86 lines
1.9 KiB
JavaScript

var _ = require('underscore');
var Backbone = require('backbone');
var CoreView = require('backbone/core-view');
var embedOverlayTemplate = require('./embed-overlay.tpl');
var checkAndBuildOpts = require('builder/helpers/required-opts');
var REQUIRED_OPTS = [
'title',
'description',
'showMenu'
];
var EmbedOverlayView = CoreView.extend({
className: 'CDB-Embed-overlay',
events: {
'click .js-toggle': '_toggle'
},
initialize: function (options) {
checkAndBuildOpts(options, REQUIRED_OPTS, this);
if (!_.isUndefined(options.template)) {
this._template = options.template;
}
this._initModels();
this._initBinds();
},
render: function () {
this.$el.empty();
var opts = {
title: this._title,
description: this._description,
legends: true,
showMenu: this._showMenu
};
var content = this._renderOverlay(opts);
if (this._template) {
content = this._renderTemplate(opts);
}
this.$el.html(content);
return this;
},
_renderOverlay: function (opts) {
return embedOverlayTemplate(opts);
},
_renderTemplate: function (opts) {
return this._template({
content: this._renderOverlay(_.extend(opts, { legends: false }))
});
},
_initModels: function () {
this.model = new Backbone.Model({
collapsed: false
});
},
_initBinds: function () {
this.listenTo(this.model, 'change:collapsed', this._toggleCollapsed, this);
},
_toggle: function () {
this.model.set('collapsed', !this.model.get('collapsed'));
},
_toggleCollapsed: function () {
var collapsed = this.model.get('collapsed');
this.$('.CDB-Overlay-title').toggleClass('is-collapsed', collapsed);
this.$('.CDB-ArrowToogle').toggleClass('is-down', !collapsed);
this.$('.CDB-Overlay-inner').toggleClass('is-active', !collapsed);
}
});
module.exports = EmbedOverlayView;