92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
|
var cdb = require('internal-carto.js');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var _ = require('underscore');
|
||
|
|
var $ = require('jquery');
|
||
|
|
var template = require('./dashboard-menu-view.tpl');
|
||
|
|
var moment = require('moment');
|
||
|
|
var Ps = require('perfect-scrollbar');
|
||
|
|
|
||
|
|
var BREAKPOINT = 1201;
|
||
|
|
|
||
|
|
var DashboardMenuView = CoreView.extend({
|
||
|
|
className: 'CDB-Dashboard-menu',
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click .js-toggle-view': '_toogleView'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function () {
|
||
|
|
this.viewModel = new cdb.core.Model({
|
||
|
|
open: false,
|
||
|
|
footer: $(window).width() < BREAKPOINT
|
||
|
|
});
|
||
|
|
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.listenTo(this.viewModel, 'change', this.render);
|
||
|
|
this._resize = _.debounce(this._onResizeWindow.bind(this), 20);
|
||
|
|
$(window).on('resize', this._resize);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
var shortTitle = this.model.get('title');
|
||
|
|
var isOpen = this.viewModel.get('open');
|
||
|
|
var isFooter = this.viewModel.get('footer');
|
||
|
|
|
||
|
|
if (shortTitle && shortTitle.length > 120) {
|
||
|
|
shortTitle = shortTitle.slice(0, 110) + '...' + ' %23 map';
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$el.html(
|
||
|
|
template({
|
||
|
|
hasTranslation: isOpen || isFooter,
|
||
|
|
showLogo: this.model.get('showLogo'),
|
||
|
|
title: this.model.get('title'),
|
||
|
|
description: this.model.get('description'),
|
||
|
|
updatedAt: moment(this.model.get('updatedAt')).fromNow(),
|
||
|
|
userName: this.model.get('userName'),
|
||
|
|
url: window.location.href,
|
||
|
|
urlWithoutParams: window.location.protocol + '//' + window.location.host + window.location.pathname,
|
||
|
|
inIframe: (window.location !== window.parent.location),
|
||
|
|
shortTitle: shortTitle,
|
||
|
|
userAvatarURL: this.model.get('userAvatarURL'),
|
||
|
|
userProfileURL: this.model.get('userProfileURL')
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
this.$el.toggleClass('is-active', isOpen);
|
||
|
|
|
||
|
|
var content = this._getDescription().get(0);
|
||
|
|
Ps.initialize(content, {
|
||
|
|
wheelSpeed: 2,
|
||
|
|
suppressScrollX: true
|
||
|
|
});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_getDescription: function () {
|
||
|
|
return this.$('.js-scroll-wrapper');
|
||
|
|
},
|
||
|
|
|
||
|
|
_toogleView: function () {
|
||
|
|
var open = this.viewModel.get('open');
|
||
|
|
this.viewModel.set({open: !open});
|
||
|
|
},
|
||
|
|
|
||
|
|
_onResizeWindow: function () {
|
||
|
|
this.viewModel.set({
|
||
|
|
footer: $(window).width() < BREAKPOINT
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
clean: function () {
|
||
|
|
$(window).off('resize', this._resize);
|
||
|
|
CoreView.prototype.clean.call(this);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = DashboardMenuView;
|