From dd4f32a9257327a216fc26cc35d461eb1f721342 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 1 Nov 2019 13:36:36 +0300
Subject: [PATCH] [Calendar] Add key events support . Refactoring
---
apps/common/main/lib/component/Calendar.js | 123 ++++++++++++------
.../main/app/controller/Links.js | 7 +
2 files changed, 89 insertions(+), 41 deletions(-)
diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js
index 2c1a5048b..71b282a13 100644
--- a/apps/common/main/lib/component/Calendar.js
+++ b/apps/common/main/lib/component/Calendar.js
@@ -66,7 +66,6 @@ define([
Common.UI.BaseView.prototype.initialize.call(this, options);
var me = this;
- me.cmpEl = me.$el || $(this.el);
this.monthNames = [this.textJanuary, this.textFebruary, this.textMarch, this.textApril, this.textMay, this.textJune, this.textJuly, this.textAugust, this.textSeptember, this.textOctober, this.textNovember, this.textDecember];
this.dayNamesShort = [this.textShortSunday, this.textShortMonday, this.textShortTuesday, this.textShortWednesday, this.textShortThursday, this.textShortFriday, this.textShortSaturday];
@@ -77,15 +76,17 @@ define([
me.options.firstday = options.firstday;
}
+ me.enableKeyEvents= me.options.enableKeyEvents;
+
me._state = undefined; // 0 - month, 1 - months, 2 - years
me.render();
},
render: function () {
- (this.$el || $(this.el)).html(this.template());
-
var me = this;
+ me.cmpEl = me.$el || $(this.el);
+ me.cmpEl.html(this.template());
me.currentDate = me.options.date || new Date();
@@ -103,6 +104,10 @@ define([
me.btnNext.render(me.cmpEl.find('#next-arrow'));
me.btnNext.on('click', _.bind(me.onClickNext, me));
+ me.cmpEl.on('keydown', function(e) {
+ me.trigger('calendar:keydown', me, e);
+ });
+
me.renderMonth(me.currentDate);
this.trigger('render:after', this);
@@ -211,17 +216,29 @@ define([
tmpYear++;
}
- me.yearPicker = new Common.UI.DataView({
- el: me.cmpEl.find('.calendar-content'),
- store: new Common.UI.DataViewStore(arrYears),
- itemTemplate: _.template('<div class="name-year <% if (!isCurrentDecade) { %> no-current-decade <% } %>" data-year="<%= year %>"><%= year %></div>')
- });
- me.yearPicker.on('item:click', function (picker, item, record, e) {
- var year = record.get('year'),
- date = new Date();
- date.setFullYear(year);
- me.renderMonths(date);
- });
+ if (!me.yearPicker) {
+ me.yearPicker = new Common.UI.DataView({
+ el: me.cmpEl.find('.calendar-content'),
+ store: new Common.UI.DataViewStore(arrYears),
+ itemTemplate: _.template('<div class="name-year <% if (!isCurrentDecade) { %> no-current-decade <% } %>" data-year="<%= year %>"><%= year %></div>')
+ });
+ me.yearPicker.on('item:click', function (picker, item, record, e) {
+ var year = record.get('year'),
+ date = new Date();
+ date.setFullYear(year);
+ me.renderMonths(date);
+ });
+ me.enableKeyEvents && this.yearPicker.on('item:keydown', function(view, record, e) {
+ if (e.keyCode==Common.UI.Keys.ESC) {
+ Common.NotificationCenter.trigger('dataview:blur');
+ }
+ });
+ } else
+ me.yearPicker.store.reset(arrYears);
+
+ me.enableKeyEvents && _.delay(function() {
+ me.monthPicker.cmpEl.find('.dataview').focus();
+ }, 10);
},
renderMonths: function (date) {
@@ -273,18 +290,30 @@ define([
});
}
- me.monthsPicker = new Common.UI.DataView({
- el: me.cmpEl.find('.calendar-content'),
- store: new Common.UI.DataViewStore(arrMonths),
- itemTemplate: _.template('<div class="name-month <% if (!curYear) { %> no-cur-year <% } %>" data-month="<%= indexMonth %>" data-year="<%= year %>"><%= nameMonth %></div>')
- });
- me.monthsPicker.on('item:click', function (picker, item, record, e) {
- var month = record.get('indexMonth'),
- year = record.get('year'),
- date = new Date();
- date.setFullYear(year, month);
- me.renderMonth(date);
- });
+ if (!me.monthsPicker) {
+ me.monthsPicker = new Common.UI.DataView({
+ el: me.cmpEl.find('.calendar-content'),
+ store: new Common.UI.DataViewStore(arrMonths),
+ itemTemplate: _.template('<div class="name-month <% if (!curYear) { %> no-cur-year <% } %>" data-month="<%= indexMonth %>" data-year="<%= year %>"><%= nameMonth %></div>')
+ });
+ me.monthsPicker.on('item:click', function (picker, item, record, e) {
+ var month = record.get('indexMonth'),
+ year = record.get('year'),
+ date = new Date();
+ date.setFullYear(year, month);
+ me.renderMonth(date);
+ });
+ me.enableKeyEvents && this.monthsPicker.on('item:keydown', function(view, record, e) {
+ if (e.keyCode==Common.UI.Keys.ESC) {
+ Common.NotificationCenter.trigger('dataview:blur');
+ }
+ });
+ } else
+ me.monthsPicker.store.reset(arrMonths);
+
+ me.enableKeyEvents && _.delay(function() {
+ me.monthPicker.cmpEl.find('.dataview').focus();
+ }, 10);
},
renderMonth: function (date) {
@@ -381,21 +410,33 @@ define([
}
}
- me.monthPicker = new Common.UI.DataView({
- el: me.cmpEl.find('.calendar-content'),
- store: new Common.UI.DataViewStore(arrDays),
- itemTemplate: _.template('<div class="number-day<% if (indexInWeek === 6 || indexInWeek === 0) { %> weekend<% } %><% if (!isCurrentMonth) { %> no-current-month<% } %>" data-number="<%= dayNumber %>" data-month="<%= month %>" data-year="<%= year %>"><%= dayNumber %></div>')
- });
- me.monthPicker.on('item:click', function(picker, item, record, e) {
- var day = record.get('dayNumber'),
- month = record.get('month'),
- year = record.get('year');
- if (_.isUndefined(me.selectedDate)) {
- me.selectedDate = new Date();
- }
- me.selectedDate.setFullYear(year, month, day);
- me.trigger('date:click', me, me.selectedDate);
- });
+ if (!me.monthPicker) {
+ me.monthPicker = new Common.UI.DataView({
+ el: me.cmpEl.find('.calendar-content'),
+ store: new Common.UI.DataViewStore(arrDays),
+ itemTemplate: _.template('<div class="number-day<% if (indexInWeek === 6 || indexInWeek === 0) { %> weekend<% } %><% if (!isCurrentMonth) { %> no-current-month<% } %>" data-number="<%= dayNumber %>" data-month="<%= month %>" data-year="<%= year %>"><%= dayNumber %></div>')
+ });
+ me.monthPicker.on('item:click', function(picker, item, record, e) {
+ var day = record.get('dayNumber'),
+ month = record.get('month'),
+ year = record.get('year');
+ if (_.isUndefined(me.selectedDate)) {
+ me.selectedDate = new Date();
+ }
+ me.selectedDate.setFullYear(year, month, day);
+ me.trigger('date:click', me, me.selectedDate);
+ });
+ me.enableKeyEvents && this.monthPicker.on('item:keydown', function(view, record, e) {
+ if (e.keyCode==Common.UI.Keys.ESC) {
+ Common.NotificationCenter.trigger('dataview:blur');
+ }
+ });
+ } else
+ me.monthPicker.store.reset(arrDays);
+
+ me.enableKeyEvents && _.delay(function() {
+ me.monthPicker.cmpEl.find('.dataview').focus();
+ }, 10);
},
daysInMonth: function (date) {
diff --git a/apps/documenteditor/main/app/controller/Links.js b/apps/documenteditor/main/app/controller/Links.js
index f528ec0ae..fdd1a2a24 100644
--- a/apps/documenteditor/main/app/controller/Links.js
+++ b/apps/documenteditor/main/app/controller/Links.js
@@ -414,11 +414,18 @@ define([
if (!this.cmpCalendar) {
this.cmpCalendar = new Common.UI.Calendar({
el: documentHolderView.cmpEl.find('#id-document-calendar-control'),
+ enableKeyEvents: true,
firstday: 1
});
this.cmpCalendar.on('date:click', function (cmp, date) {
me.selectDate = new Date(date);
});
+ this.cmpCalendar.on('calendar:keydown', function (cmp, e) {
+ if (e.keyCode==Common.UI.Keys.ESC) {
+ controlsContainer.hide();
+ me.api.asc_UncheckContentControlButtons();
+ }
+ });
}
this.cmpCalendar.setDate(this.selectDate ? this.selectDate : new Date());