[Calendar] Add key events support . Refactoring
This commit is contained in:
Julia Radzhabova
parent
e7a6314590
commit
dd4f32a925
|
|
@ -66,7 +66,6 @@ define([
|
||||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||||
|
|
||||||
var me = this;
|
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.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];
|
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.options.firstday = options.firstday;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
me.enableKeyEvents= me.options.enableKeyEvents;
|
||||||
|
|
||||||
me._state = undefined; // 0 - month, 1 - months, 2 - years
|
me._state = undefined; // 0 - month, 1 - months, 2 - years
|
||||||
|
|
||||||
me.render();
|
me.render();
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
(this.$el || $(this.el)).html(this.template());
|
|
||||||
|
|
||||||
var me = this;
|
var me = this;
|
||||||
|
me.cmpEl = me.$el || $(this.el);
|
||||||
|
me.cmpEl.html(this.template());
|
||||||
|
|
||||||
me.currentDate = me.options.date || new Date();
|
me.currentDate = me.options.date || new Date();
|
||||||
|
|
||||||
|
|
@ -103,6 +104,10 @@ define([
|
||||||
me.btnNext.render(me.cmpEl.find('#next-arrow'));
|
me.btnNext.render(me.cmpEl.find('#next-arrow'));
|
||||||
me.btnNext.on('click', _.bind(me.onClickNext, me));
|
me.btnNext.on('click', _.bind(me.onClickNext, me));
|
||||||
|
|
||||||
|
me.cmpEl.on('keydown', function(e) {
|
||||||
|
me.trigger('calendar:keydown', me, e);
|
||||||
|
});
|
||||||
|
|
||||||
me.renderMonth(me.currentDate);
|
me.renderMonth(me.currentDate);
|
||||||
|
|
||||||
this.trigger('render:after', this);
|
this.trigger('render:after', this);
|
||||||
|
|
@ -211,17 +216,29 @@ define([
|
||||||
tmpYear++;
|
tmpYear++;
|
||||||
}
|
}
|
||||||
|
|
||||||
me.yearPicker = new Common.UI.DataView({
|
if (!me.yearPicker) {
|
||||||
el: me.cmpEl.find('.calendar-content'),
|
me.yearPicker = new Common.UI.DataView({
|
||||||
store: new Common.UI.DataViewStore(arrYears),
|
el: me.cmpEl.find('.calendar-content'),
|
||||||
itemTemplate: _.template('<div class="name-year <% if (!isCurrentDecade) { %> no-current-decade <% } %>" data-year="<%= year %>"><%= year %></div>')
|
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'),
|
me.yearPicker.on('item:click', function (picker, item, record, e) {
|
||||||
date = new Date();
|
var year = record.get('year'),
|
||||||
date.setFullYear(year);
|
date = new Date();
|
||||||
me.renderMonths(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) {
|
renderMonths: function (date) {
|
||||||
|
|
@ -273,18 +290,30 @@ define([
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
me.monthsPicker = new Common.UI.DataView({
|
if (!me.monthsPicker) {
|
||||||
el: me.cmpEl.find('.calendar-content'),
|
me.monthsPicker = new Common.UI.DataView({
|
||||||
store: new Common.UI.DataViewStore(arrMonths),
|
el: me.cmpEl.find('.calendar-content'),
|
||||||
itemTemplate: _.template('<div class="name-month <% if (!curYear) { %> no-cur-year <% } %>" data-month="<%= indexMonth %>" data-year="<%= year %>"><%= nameMonth %></div>')
|
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'),
|
me.monthsPicker.on('item:click', function (picker, item, record, e) {
|
||||||
year = record.get('year'),
|
var month = record.get('indexMonth'),
|
||||||
date = new Date();
|
year = record.get('year'),
|
||||||
date.setFullYear(year, month);
|
date = new Date();
|
||||||
me.renderMonth(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) {
|
renderMonth: function (date) {
|
||||||
|
|
@ -381,21 +410,33 @@ define([
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
me.monthPicker = new Common.UI.DataView({
|
if (!me.monthPicker) {
|
||||||
el: me.cmpEl.find('.calendar-content'),
|
me.monthPicker = new Common.UI.DataView({
|
||||||
store: new Common.UI.DataViewStore(arrDays),
|
el: me.cmpEl.find('.calendar-content'),
|
||||||
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>')
|
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'),
|
me.monthPicker.on('item:click', function(picker, item, record, e) {
|
||||||
month = record.get('month'),
|
var day = record.get('dayNumber'),
|
||||||
year = record.get('year');
|
month = record.get('month'),
|
||||||
if (_.isUndefined(me.selectedDate)) {
|
year = record.get('year');
|
||||||
me.selectedDate = new Date();
|
if (_.isUndefined(me.selectedDate)) {
|
||||||
}
|
me.selectedDate = new Date();
|
||||||
me.selectedDate.setFullYear(year, month, day);
|
}
|
||||||
me.trigger('date:click', me, me.selectedDate);
|
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) {
|
daysInMonth: function (date) {
|
||||||
|
|
|
||||||
|
|
@ -414,11 +414,18 @@ define([
|
||||||
if (!this.cmpCalendar) {
|
if (!this.cmpCalendar) {
|
||||||
this.cmpCalendar = new Common.UI.Calendar({
|
this.cmpCalendar = new Common.UI.Calendar({
|
||||||
el: documentHolderView.cmpEl.find('#id-document-calendar-control'),
|
el: documentHolderView.cmpEl.find('#id-document-calendar-control'),
|
||||||
|
enableKeyEvents: true,
|
||||||
firstday: 1
|
firstday: 1
|
||||||
});
|
});
|
||||||
this.cmpCalendar.on('date:click', function (cmp, date) {
|
this.cmpCalendar.on('date:click', function (cmp, date) {
|
||||||
me.selectDate = new Date(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());
|
this.cmpCalendar.setDate(this.selectDate ? this.selectDate : new Date());
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue