public/js/views/archive/archive-navigation-view.js

   1 'use strict';
   2
   3 var $ = require('jquery');
   4 var Marionette = require('backbone.marionette');
   5 var moment = require('moment');
   6 var context = require('gitter-web-client-context');
   7 var template = require('./tmpl/archive-navigation-view.hbs');
   8 var heatmapUtils = require('../../components/archive-heatmap-utils');
   9
  10 module.exports = (function() {
  11   var language = context.lang();
  12
  13   return Marionette.ItemView.extend({
  14     ui: {
  15       navigation: '#archive-navigation'
  16     },
  17     template: template,
  18     serializeData: function() {
  19       var uri = context.troupe().get('uri');
  20       const { archiveContext } = this.options;
  21
  22       const p = archiveContext.previousDate && moment(archiveContext.previousDate).utc();
  23       const n = archiveContext.nextDate && moment(archiveContext.nextDate).utc();
  24
  25       const archiveDate = moment(archiveContext.startDate)
  26         .utc()
  27         .locale(language);
  28
  29       var ordinalDate = archiveDate.format('Do');
  30       var numericDate = archiveDate.format('D');
  31
  32       var ordinalPart;
  33       if (ordinalDate.indexOf('' + numericDate) === 0) {
  34         ordinalPart = ordinalDate.substring(('' + numericDate).length);
  35       } else {
  36         ordinalPart = '';
  37       }
  38       var monthYearFormatted = archiveDate.format('MMMM YYYY');
  39
  40       return {
  41         previousDate: p && p.locale(language).format('Do MMM YYYY'),
  42         dayName: numericDate,
  43         dayOrdinal: ordinalPart,
  44         previousDateLink: p && '/' + uri + '/archives/' + p.format('YYYY/MM/DD'),
  45         nextDate: n && n.locale(language).format('Do MMM YYYY'),
  46         nextDateLink: n && '/' + uri + '/archives/' + n.format('YYYY/MM/DD'),
  47         monthYearFormatted: monthYearFormatted
  48       };
  49     },
  50
  51     onRender: function() {
  52       const archiveDate = this.options.archiveContext && this.options.archiveContext.startDate;
  53       const a = moment(archiveDate).utc();
  54       var range = 3;
  55
  56       // if the first day of the next month is in the future, subtract one from range
  57       var next = moment(new Date(a.year(), a.month(), 1)).add(1, 'months');
  58       if (next > moment()) {
  59         range = 2;
  60       }
  61
  62       // start and end is only for elasticsearch, so fine if it is outside of
  63       // the range we're going to display. In fact we deliberately add a day on
  64       // each end just in case for timezones
  65       var start = moment(a).subtract(32, 'days');
  66
  67       heatmapUtils.createResponsiveHeatMap(this.ui.navigation[0], {
  68         start: start.toDate(),
  69         range: range
  70       });
  71
  72       // See `./archive-heatmap-utils.js->breakpointList` and `trp3Vars.less->@archive-mid`
  73       if ($(window).width() < 960) {
  74         $('.js-archive-navigation-wrapper').hide();
  75       }
  76       $('.js-toggle-archive-navigation').on('click', function() {
  77         $('.js-archive-navigation-wrapper').slideToggle();
  78       });
  79     }
  80   });
  81 })();