Merge pull request #268 from ONLYOFFICE/feature/de-calendar
Feature/de calendar
This commit is contained in:
commit
09264017fa
491
apps/common/main/lib/component/Calendar.js
Normal file
491
apps/common/main/lib/component/Calendar.js
Normal file
|
@ -0,0 +1,491 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System SIA 2010-2019
|
||||
*
|
||||
* This program is a free software product. You can redistribute it and/or
|
||||
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
||||
* version 3 as published by the Free Software Foundation. In accordance with
|
||||
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
||||
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
||||
* of any third-party rights.
|
||||
*
|
||||
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
||||
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
*
|
||||
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* The interactive user interfaces in modified source and object code versions
|
||||
* of the Program must display Appropriate Legal Notices, as required under
|
||||
* Section 5 of the GNU AGPL version 3.
|
||||
*
|
||||
* Pursuant to Section 7(b) of the License you must retain the original Product
|
||||
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
||||
* grant you any rights under trademark law for use of our trademarks.
|
||||
*
|
||||
* All the Product's GUI elements, including illustrations and icon sets, as
|
||||
* well as technical writing content are licensed under the terms of the
|
||||
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
if (Common === undefined)
|
||||
var Common = {};
|
||||
|
||||
define([
|
||||
'common/main/lib/component/BaseView',
|
||||
'common/main/lib/util/utils'
|
||||
], function () {
|
||||
'use strict';
|
||||
|
||||
Common.UI.Calendar = Common.UI.BaseView.extend(_.extend({
|
||||
|
||||
template :
|
||||
_.template([
|
||||
'<div id="calendar" class="calendar-box">',
|
||||
'<div class="calendar-header">',
|
||||
'<div class="top-row">',
|
||||
'<div id="prev-arrow"><button type="button"><i class="arrow-prev img-commonctrl"> </i></button></div>',
|
||||
'<div class="title"></div>',
|
||||
'<div id="next-arrow"><button type="button"><i class="arrow-next img-commonctrl"> </i></button></div>',
|
||||
'</div>',
|
||||
'<div class="bottom-row">',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="calendar-content"></div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
|
||||
options: {
|
||||
date: undefined,
|
||||
firstday: 0 // 0 - sunday, 1 - monday
|
||||
},
|
||||
|
||||
initialize : function(options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
|
||||
var me = this;
|
||||
|
||||
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.monthShortNames = [this.textShortJanuary, this.textShortFebruary, this.textShortMarch, this.textShortApril, this.textShortMay, this.textShortJune, this.textShortJuly, this.textShortAugust, this.textShortSeptember, this.textShortOctober, this.textShortNovember, this.textShortDecember];
|
||||
|
||||
me.options.date = options.date;
|
||||
if (!_.isUndefined(options.firstday) && (options.firstday === 0 || options.firstday === 1)) {
|
||||
me.options.firstday = options.firstday;
|
||||
}
|
||||
|
||||
me.enableKeyEvents= me.options.enableKeyEvents;
|
||||
|
||||
me._state = undefined; // 0 - month, 1 - months, 2 - years
|
||||
|
||||
me.render();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var me = this;
|
||||
me.cmpEl = me.$el || $(this.el);
|
||||
me.cmpEl.html(this.template());
|
||||
|
||||
me.currentDate = me.options.date || new Date();
|
||||
|
||||
me.btnPrev = new Common.UI.Button({
|
||||
cls: '',
|
||||
iconCls: 'arrow-prev img-commonctrl'
|
||||
});
|
||||
me.btnPrev.render(me.cmpEl.find('#prev-arrow'));
|
||||
me.btnPrev.on('click', _.bind(me.onClickPrev, me));
|
||||
|
||||
me.btnNext = new Common.UI.Button({
|
||||
cls: '',
|
||||
iconCls: 'arrow-next img-commonctrl'
|
||||
});
|
||||
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);
|
||||
return this;
|
||||
},
|
||||
|
||||
onClickPrev: function () {
|
||||
var me = this;
|
||||
if (me._state === 0) {
|
||||
var d = new Date(me.currentDate);
|
||||
d.setMonth(d.getMonth() - 1);
|
||||
if (d.getFullYear() > 0) {
|
||||
me.renderMonth(d);
|
||||
}
|
||||
} else if (me._state === 1) {
|
||||
var d = new Date(me.currentDate);
|
||||
d.setFullYear(d.getFullYear() - 1);
|
||||
if (d.getFullYear() > 0) {
|
||||
me.renderMonths(d);
|
||||
}
|
||||
} else if (me._state === 2) {
|
||||
var year = me.currentDate.getFullYear(),
|
||||
newYear;
|
||||
if (year % 10 !== 0) {
|
||||
newYear = String(year);
|
||||
newYear = Number(newYear.slice(0, -1) + '0') - 1;
|
||||
} else {
|
||||
newYear = year - 1;
|
||||
}
|
||||
if (newYear > 0) {
|
||||
me.currentDate.setFullYear(newYear);
|
||||
me.renderYears(newYear);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onClickNext: function () {
|
||||
var me = this;
|
||||
if (me._state === 0) {
|
||||
var d = new Date(me.currentDate);
|
||||
d.setMonth(d.getMonth() + 1);
|
||||
if (d.getFullYear() > 0) {
|
||||
me.renderMonth(d);
|
||||
}
|
||||
} else if (me._state === 1) {
|
||||
var d = new Date(me.currentDate);
|
||||
d.setFullYear(d.getFullYear() + 1);
|
||||
if (d.getFullYear() > 0) {
|
||||
me.renderMonths(d);
|
||||
}
|
||||
} else if (me._state === 2) {
|
||||
var year = me.currentDate.getFullYear(),
|
||||
newYear;
|
||||
if (year % 10 !== 9) {
|
||||
newYear = String(year);
|
||||
newYear = Number(newYear.slice(0, -1) + '9') + 1;
|
||||
} else {
|
||||
newYear = year + 1;
|
||||
}
|
||||
if (newYear > 0) {
|
||||
me.currentDate.setFullYear(newYear);
|
||||
me.renderYears(newYear);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderYears: function (year) {
|
||||
var me = this,
|
||||
year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear());
|
||||
|
||||
me._state = 2;
|
||||
|
||||
var firstYear = year,
|
||||
lastYear = year;
|
||||
if ((firstYear % 10) !== 0) {
|
||||
var strYear = String(year);
|
||||
firstYear = Number(strYear.slice(0, -1) + '0');
|
||||
}
|
||||
if ((lastYear % 10) !== 9) {
|
||||
var strYear = String(year);
|
||||
lastYear = Number(strYear.slice(0, -1) + '9');
|
||||
}
|
||||
|
||||
me.topTitle = _.template([
|
||||
'<label>' + firstYear + '-' + lastYear + '</label>'
|
||||
].join(''));
|
||||
me.cmpEl.find('.calendar-header .title').html(me.topTitle);
|
||||
|
||||
me.bottomTitle = _.template([
|
||||
'<label>' + me.textYears + '</label>'
|
||||
].join(''));
|
||||
me.cmpEl.find('.calendar-header .bottom-row').html(me.bottomTitle);
|
||||
|
||||
var arrYears = [];
|
||||
var tmpYear = firstYear - 3;
|
||||
|
||||
for (var i = 0; i < 16; i++) {
|
||||
arrYears.push({
|
||||
year: (tmpYear > 0) ? tmpYear : '',
|
||||
isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false,
|
||||
disabled: (tmpYear > 0) ? false : true,
|
||||
selected: (_.isDate(me.selectedDate)) ?
|
||||
(tmpYear === me.selectedDate.getFullYear()) :
|
||||
(tmpYear === new Date().getFullYear())
|
||||
});
|
||||
tmpYear++;
|
||||
}
|
||||
|
||||
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) {
|
||||
var me = this,
|
||||
curDate = (_.isDate(date)) ? date : (me.currentDate ? me.currentDate : new Date()),
|
||||
year = curDate.getFullYear();
|
||||
|
||||
me._state = 1;
|
||||
me.currentDate = curDate;
|
||||
|
||||
// Number of year
|
||||
me.topTitle = _.template([
|
||||
'<div class="button"><label>' + year + '</label></div>'
|
||||
].join(''));
|
||||
me.cmpEl.find('.calendar-header .title').html(me.topTitle);
|
||||
me.cmpEl.find('.calendar-header .title').off();
|
||||
me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderYears, me));
|
||||
|
||||
me.bottomTitle = _.template([
|
||||
'<label>' + me.textMonths + '</label>'
|
||||
].join(''));
|
||||
me.cmpEl.find('.calendar-header .bottom-row').html(me.bottomTitle);
|
||||
|
||||
var arrMonths = [];
|
||||
var today = new Date();
|
||||
|
||||
for (var ind = 0; ind < 12; ind++) {
|
||||
arrMonths.push({
|
||||
indexMonth: ind,
|
||||
nameMonth: me.monthShortNames[ind],
|
||||
year: year,
|
||||
curYear: true,
|
||||
isCurrentMonth: (ind === curDate.getMonth()),
|
||||
selected: (_.isDate(me.selectedDate)) ?
|
||||
(ind === me.selectedDate.getMonth() && year === me.selectedDate.getFullYear()) :
|
||||
(ind === today.getMonth() && year === today.getFullYear())
|
||||
});
|
||||
}
|
||||
year = year + 1;
|
||||
for (var ind = 0; ind < 4; ind++) {
|
||||
arrMonths.push({
|
||||
indexMonth: ind,
|
||||
nameMonth: me.monthShortNames[ind],
|
||||
year: year,
|
||||
curYear: false,
|
||||
selected: (_.isDate(me.selectedDate)) ?
|
||||
(ind === me.selectedDate.getMonth() && year === me.selectedDate.getFullYear()) :
|
||||
(ind === today.getMonth() && year === today.getFullYear())
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
var me = this;
|
||||
me._state = 0;
|
||||
var firstDay = me.options.firstday;
|
||||
|
||||
// Current date
|
||||
var curDate = date || new Date(),
|
||||
curMonth = curDate.getMonth(),
|
||||
curIndexDayInWeek = curDate.getDay(),
|
||||
curNumberDayInMonth = curDate.getDate(),
|
||||
curYear = curDate.getFullYear();
|
||||
|
||||
me.currentDate = curDate;
|
||||
|
||||
// Name month
|
||||
me.topTitle = _.template([
|
||||
'<div class="button">',
|
||||
'<label>' + me.monthNames[curMonth] + ' ' + curYear + '</label>',
|
||||
'</div>'
|
||||
].join(''));
|
||||
me.cmpEl.find('.calendar-header .title').html(me.topTitle);
|
||||
me.cmpEl.find('.calendar-header .title').off();
|
||||
me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderMonths, me));
|
||||
|
||||
// Name days of week
|
||||
var dayNamesTemplate = '';
|
||||
for (var i = firstDay; i < 7; i++) {
|
||||
dayNamesTemplate += '<label>' + me.dayNamesShort[i] + '</label>';
|
||||
}
|
||||
if (firstDay > 0) {
|
||||
dayNamesTemplate += '<label>' + me.dayNamesShort[0] + '</label>';
|
||||
}
|
||||
me.cmpEl.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate));
|
||||
|
||||
// Month
|
||||
var rows = 6,
|
||||
cols = 7;
|
||||
|
||||
var arrDays = [];
|
||||
|
||||
var d = new Date(curDate);
|
||||
d.setDate(1);
|
||||
var firstDayOfMonthIndex = d.getDay();
|
||||
|
||||
var daysInPrevMonth = me.daysInMonth(d.getTime() - (10 * 24 * 60 * 60 * 1000)),
|
||||
numberDay,
|
||||
month,
|
||||
year;
|
||||
if (firstDay === 0) {
|
||||
numberDay = (firstDayOfMonthIndex > 0) ? (daysInPrevMonth - (firstDayOfMonthIndex - 1)) : 1;
|
||||
} else {
|
||||
if (firstDayOfMonthIndex === 0) {
|
||||
numberDay = daysInPrevMonth - 5;
|
||||
} else {
|
||||
numberDay = daysInPrevMonth - (firstDayOfMonthIndex - 2);
|
||||
}
|
||||
}
|
||||
if ((firstDayOfMonthIndex > 0 && firstDay === 0) || firstDay === 1) {
|
||||
if (curMonth - 1 >= 0) {
|
||||
month = curMonth - 1;
|
||||
year = curYear;
|
||||
} else {
|
||||
month = 11;
|
||||
year = curYear - 1;
|
||||
}
|
||||
} else {
|
||||
month = curMonth;
|
||||
year = curYear;
|
||||
}
|
||||
|
||||
var tmp = new Date();
|
||||
tmp.setFullYear(year, month, numberDay);
|
||||
var today = new Date();
|
||||
|
||||
for(var r = 0; r < rows; r++) {
|
||||
for(var c = 0; c < cols; c++) {
|
||||
var tmpDay = tmp.getDay(),
|
||||
tmpNumber = tmp.getDate(),
|
||||
tmpMonth = tmp.getMonth(),
|
||||
tmpYear = tmp.getFullYear();
|
||||
arrDays.push({
|
||||
indexInWeek: tmpDay,
|
||||
dayNumber: tmpNumber,
|
||||
month: tmpMonth,
|
||||
year: tmpYear,
|
||||
isCurrentMonth: tmpMonth === curMonth,
|
||||
selected: (_.isDate(me.selectedDate)) ?
|
||||
(tmpNumber === me.selectedDate.getDate() && tmpMonth === me.selectedDate.getMonth() && tmpYear === me.selectedDate.getFullYear()) :
|
||||
(tmpNumber === today.getDate() && tmpMonth === today.getMonth() && tmpYear === today.getFullYear())
|
||||
});
|
||||
tmp.setDate(tmpNumber + 1);
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
var d;
|
||||
d = date ? new Date(date) : new Date();
|
||||
var result = new Date();
|
||||
result.setFullYear(d.getFullYear(), d.getMonth() + 1, 0);
|
||||
return result.getDate();
|
||||
},
|
||||
|
||||
setDate: function (date) {
|
||||
if (_.isDate(date)) {
|
||||
this.selectedDate = new Date(date);
|
||||
this.renderMonth(this.selectedDate);
|
||||
}
|
||||
},
|
||||
|
||||
textJanuary: 'January',
|
||||
textFebruary: 'February',
|
||||
textMarch: 'March',
|
||||
textApril: 'April',
|
||||
textMay: 'May',
|
||||
textJune: 'June',
|
||||
textJuly: 'July',
|
||||
textAugust: 'August',
|
||||
textSeptember: 'September',
|
||||
textOctober: 'October',
|
||||
textNovember: 'November',
|
||||
textDecember: 'December',
|
||||
textShortJanuary: 'Jan',
|
||||
textShortFebruary: 'Feb',
|
||||
textShortMarch: 'Mar',
|
||||
textShortApril: 'Apr',
|
||||
textShortMay: 'May',
|
||||
textShortJune: 'Jun',
|
||||
textShortJuly: 'Jul',
|
||||
textShortAugust: 'Aug',
|
||||
textShortSeptember: 'Sep',
|
||||
textShortOctober: 'Oct',
|
||||
textShortNovember: 'Nov',
|
||||
textShortDecember: 'Dec',
|
||||
textShortSunday: 'Su',
|
||||
textShortMonday: 'Mo',
|
||||
textShortTuesday: 'Tu',
|
||||
textShortWednesday: 'We',
|
||||
textShortThursday: 'Th',
|
||||
textShortFriday: 'Fr',
|
||||
textShortSaturday: 'Sa',
|
||||
textMonths: 'Months',
|
||||
textYears: 'Years'
|
||||
}, Common.UI.Calendar || {}));
|
||||
});
|
128
apps/common/main/resources/less/calendar.less
Normal file
128
apps/common/main/resources/less/calendar.less
Normal file
|
@ -0,0 +1,128 @@
|
|||
@calendar-bg-color: @tabs-bg-color;
|
||||
|
||||
.calendar-window {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.calendar-box {
|
||||
width: 198px;
|
||||
height: 220px;
|
||||
border: 1px solid @calendar-bg-color;
|
||||
.top-row {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
position: relative;
|
||||
&.arrow-prev {
|
||||
background-position: -55px -96px;
|
||||
}
|
||||
&.arrow-next {
|
||||
background-position: -52px -112px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.calendar-header {
|
||||
height: 50px;
|
||||
background-color: @calendar-bg-color;
|
||||
color: #FFFFFF;
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
margin: 4px 6px 3px 6px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
label {
|
||||
padding: 2px 10px 0;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.calendar-content {
|
||||
.item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
border: 1px solid #fff;
|
||||
.name-month, .name-year {
|
||||
height: 40px;
|
||||
width: 47px;
|
||||
background-color: #F1F1F1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.number-day {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background-color: #F1F1F1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.selected {
|
||||
.number-day, .name-month, .name-year {
|
||||
color: #fff;
|
||||
background-color: #7D858C;
|
||||
}
|
||||
}
|
||||
.weekend {
|
||||
color: #D25252;
|
||||
}
|
||||
.no-current-month, .no-cur-year, .no-current-decade {
|
||||
color: #A5A5A5;
|
||||
}
|
||||
&:not(.disabled):not(.selected) {
|
||||
.number-day, .name-month, .name-year {
|
||||
&:hover {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
define([
|
||||
'core',
|
||||
'common/main/lib/component/Calendar',
|
||||
'documenteditor/main/app/view/Links',
|
||||
'documenteditor/main/app/view/NoteSettingsDialog',
|
||||
'documenteditor/main/app/view/HyperlinkSettingsDialog',
|
||||
|
@ -351,8 +352,9 @@ define([
|
|||
})).show();
|
||||
},
|
||||
|
||||
onShowContentControlsActions: function(action, x, y) {
|
||||
var menu = (action==1) ? this.view.contentsUpdateMenu : this.view.contentsMenu,
|
||||
onShowTOCActions: function(obj, x, y) {
|
||||
var action = obj.button,
|
||||
menu = (action==AscCommon.CCButtonType.Toc) ? this.view.contentsUpdateMenu : this.view.contentsMenu,
|
||||
documentHolderView = this.getApplication().getController('DocumentHolder').documentHolder,
|
||||
menuContainer = documentHolderView.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id)),
|
||||
me = this;
|
||||
|
@ -391,6 +393,88 @@ define([
|
|||
onHideContentControlsActions: function() {
|
||||
this.view.contentsMenu && this.view.contentsMenu.hide();
|
||||
this.view.contentsUpdateMenu && this.view.contentsUpdateMenu.hide();
|
||||
var controlsContainer = this.getApplication().getController('DocumentHolder').documentHolder.cmpEl.find('#calendar-control-container');
|
||||
if (controlsContainer.is(':visible'))
|
||||
controlsContainer.hide();
|
||||
},
|
||||
|
||||
onShowDateActions: function(obj, x, y) {
|
||||
var action = obj.button,
|
||||
props = obj.pr,
|
||||
specProps = props.get_DateTimePr(),
|
||||
id = props.get_InternalId(),
|
||||
documentHolderView = this.getApplication().getController('DocumentHolder').documentHolder,
|
||||
controlsContainer = documentHolderView.cmpEl.find('#calendar-control-container'),
|
||||
me = this;
|
||||
|
||||
if (controlsContainer.length < 1) {
|
||||
controlsContainer = $('<div id="calendar-control-container" style="position: absolute;z-index: 1000;"><div id="id-document-calendar-control" style="position: fixed; left: -1000px; top: -1000px;"></div></div>');
|
||||
documentHolderView.cmpEl.append(controlsContainer);
|
||||
}
|
||||
|
||||
Common.UI.Menu.Manager.hideAll();
|
||||
|
||||
controlsContainer.css({left: x, top : y});
|
||||
controlsContainer.show();
|
||||
|
||||
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) {
|
||||
specProps.put_FullDate(new Date(date));
|
||||
me.api.asc_SetContentControlProperties(props, id);
|
||||
controlsContainer.hide();
|
||||
me.api.asc_UncheckContentControlButtons();
|
||||
});
|
||||
this.cmpCalendar.on('calendar:keydown', function (cmp, e) {
|
||||
if (e.keyCode==Common.UI.Keys.ESC) {
|
||||
controlsContainer.hide();
|
||||
me.api.asc_UncheckContentControlButtons();
|
||||
}
|
||||
});
|
||||
}
|
||||
this.cmpCalendar.setDate(new Date(specProps ? specProps.get_FullDate() : undefined));
|
||||
|
||||
// align
|
||||
var offset = controlsContainer.offset(),
|
||||
docW = Common.Utils.innerWidth(),
|
||||
docH = Common.Utils.innerHeight() - 10, // Yep, it's magic number
|
||||
menuW = this.cmpCalendar.cmpEl.outerWidth(),
|
||||
menuH = this.cmpCalendar.cmpEl.outerHeight(),
|
||||
buttonOffset = 22,
|
||||
left = offset.left - menuW + buttonOffset,
|
||||
top = offset.top;
|
||||
if (top + menuH > docH) {
|
||||
top = docH - menuH;
|
||||
left -= buttonOffset;
|
||||
}
|
||||
if (top < 0)
|
||||
top = 0;
|
||||
if (left + menuW > docW)
|
||||
left = docW - menuW;
|
||||
this.cmpCalendar.cmpEl.css({left: left, top : top});
|
||||
|
||||
documentHolderView._preventClick = true;
|
||||
},
|
||||
|
||||
onShowContentControlsActions: function(obj, x, y) {
|
||||
var type = obj.type;
|
||||
switch (type) {
|
||||
case Asc.c_oAscContentControlSpecificType.TOC:
|
||||
this.onShowTOCActions(obj, x, y);
|
||||
break;
|
||||
case Asc.c_oAscContentControlSpecificType.DateTime:
|
||||
this.onShowDateActions(obj, x, y);
|
||||
break;
|
||||
case Asc.c_oAscContentControlSpecificType.Picture:
|
||||
break;
|
||||
case Asc.c_oAscContentControlSpecificType.DropDownList:
|
||||
case Asc.c_oAscContentControlSpecificType.ComboBox:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}, DE.Controllers.Links || {}));
|
||||
|
|
|
@ -111,6 +111,39 @@
|
|||
"Common.UI.Window.textInformation": "Information",
|
||||
"Common.UI.Window.textWarning": "Warning",
|
||||
"Common.UI.Window.yesButtonText": "Yes",
|
||||
"Common.UI.Calendar.textJanuary": "January",
|
||||
"Common.UI.Calendar.textFebruary": "February",
|
||||
"Common.UI.Calendar.textMarch": "March",
|
||||
"Common.UI.Calendar.textApril": "April",
|
||||
"Common.UI.Calendar.textMay": "May",
|
||||
"Common.UI.Calendar.textJune": "June",
|
||||
"Common.UI.Calendar.textJuly": "July",
|
||||
"Common.UI.Calendar.textAugust": "August",
|
||||
"Common.UI.Calendar.textSeptember": "September",
|
||||
"Common.UI.Calendar.textOctober": "October",
|
||||
"Common.UI.Calendar.textNovember": "November",
|
||||
"Common.UI.Calendar.textDecember": "December",
|
||||
"Common.UI.Calendar.textShortJanuary": "Jan",
|
||||
"Common.UI.Calendar.textShortFebruary": "Feb",
|
||||
"Common.UI.Calendar.textShortMarch": "Mar",
|
||||
"Common.UI.Calendar.textShortApril": "Apr",
|
||||
"Common.UI.Calendar.textShortMay": "May",
|
||||
"Common.UI.Calendar.textShortJune": "Jun",
|
||||
"Common.UI.Calendar.textShortJuly": "Jul",
|
||||
"Common.UI.Calendar.textShortAugust": "Aug",
|
||||
"Common.UI.Calendar.textShortSeptember": "Sep",
|
||||
"Common.UI.Calendar.textShortOctober": "Oct",
|
||||
"Common.UI.Calendar.textShortNovember": "Nov",
|
||||
"Common.UI.Calendar.textShortDecember": "Dec",
|
||||
"Common.UI.Calendar.textShortSunday": "Su",
|
||||
"Common.UI.Calendar.textShortMonday": "Mo",
|
||||
"Common.UI.Calendar.textShortTuesday": "Tu",
|
||||
"Common.UI.Calendar.textShortWednesday": "We",
|
||||
"Common.UI.Calendar.textShortThursday": "Th",
|
||||
"Common.UI.Calendar.textShortFriday": "Fr",
|
||||
"Common.UI.Calendar.textShortSaturday": "Sa",
|
||||
"Common.UI.Calendar.textMonths": "Months",
|
||||
"Common.UI.Calendar.textYears": "Years",
|
||||
"Common.Utils.Metric.txtCm": "cm",
|
||||
"Common.Utils.Metric.txtPt": "pt",
|
||||
"Common.Views.About.txtAddress": "address: ",
|
||||
|
|
|
@ -118,6 +118,7 @@
|
|||
@import "../../../../common/main/resources/less/toolbar.less";
|
||||
@import "../../../../common/main/resources/less/language-dialog.less";
|
||||
@import "../../../../common/main/resources/less/winxp_fix.less";
|
||||
@import "../../../../common/main/resources/less/calendar.less";
|
||||
@import "../../../../common/main/resources/less/symboltable.less";
|
||||
|
||||
// App
|
||||
|
|
Loading…
Reference in a new issue