From e7aca2fdbaa90f861d238ec49f65c303573287d2 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 21 Oct 2019 17:04:16 +0300 Subject: [PATCH 01/15] [DE] Calendar --- apps/common/main/lib/view/Calendar.js | 292 ++++++++++++++++++ apps/common/main/resources/less/calendar.less | 49 +++ .../main/resources/less/app.less | 1 + 3 files changed, 342 insertions(+) create mode 100644 apps/common/main/lib/view/Calendar.js create mode 100644 apps/common/main/resources/less/calendar.less diff --git a/apps/common/main/lib/view/Calendar.js b/apps/common/main/lib/view/Calendar.js new file mode 100644 index 0000000000..7e433f35b2 --- /dev/null +++ b/apps/common/main/lib/view/Calendar.js @@ -0,0 +1,292 @@ +/* + * + * (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 + * +*/ +/** + * Calendar.js + * + * Created by Julia Svinareva on 18/10/19 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + + +if (Common === undefined) + var Common = {}; + +define([ + 'common/main/lib/component/Window', + 'underscore' +], function (base, _) { + 'use strict'; + + Common.Views.Calendar = Common.UI.Window.extend(_.extend({ + + // Window + + initialize: function (options) { + var _options = {}; + + _.extend(_options, { + closable: false, + width: 192, + height: 214, + header: false, + modal: false, + alias: 'Common.Views.Calendar', + firstNumber: 0, // 0 or 6 + cls: 'calendar-window' + }, options); + + this.template = options.template || [ + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + + '
', + '
', + '
', + '
', + '
', + '
' + ].join(''); + + 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]; + + + + _options.tpl = _.template(this.template)(_options); + + Common.UI.Window.prototype.initialize.call(this, _options); + + return this; + }, + render: function () { + Common.UI.Window.prototype.render.call(this); + + var me = this, + window = this.$window; + + window.css({ + height: '', + minHeight: '', + overflow: 'hidden', + position: 'absolute', + zIndex: '990' + }); + + var body = window.find('.body'); + if (body) { + body.css('position', 'relative'); + } + + me.btnPrev = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'mmerge-prev', + }); + me.btnPrev.render(me.$window.find('#prev-arrow')); + + me.btnNext = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'mmerge-next', + }); + me.btnNext.render(me.$window.find('#next-arrow')); + + me.topTitle = _.template([ + '', + '' + ].join('')); + me.$window.find('.calendar-header .title').html(me.topTitle); + + var dayNamesTemplate = ''; + me.dayNamesShort.forEach(function (item) { + dayNamesTemplate += ''; + }); + me.$window.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate)); + + }, + + getCalendarPopover: function (options) { + if (!this.popover) + this.popover = new Common.Views.Calendar(options); + return this.popover; + }, + + showCalendarPopover: function (animate, loadText, focus, showText) { + this.options.animate = animate; + + Common.UI.Window.prototype.show.call(this); + if (this.scroller) { + this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true}); + } + }, + + setLeftTop: function (posX, posY) { + if (!this.$window) + this.render(); + + if (_.isUndefined(posX) && _.isUndefined(posY)) + return; + + var calendarView = $('#id-popover'), + editorView = $('#editor_sdk'), + editorBounds = null, + sdkBoundsHeight = 0, + sdkBoundsTop = 0, + sdkBoundsLeft = 0, + sdkPanelRight = '', + sdkPanelRightWidth = 0, + sdkPanelLeft = '', + sdkPanelLeftWidth = 0, + sdkPanelThumbs = '', // for PE + sdkPanelThumbsWidth = 0, // for PE + sdkPanelTop = '', + sdkPanelHeight = 0, + leftPos = 0, + windowWidth = 0, + outerHeight = 0, + topPos = 0, + sdkBoundsTopPos = 0; + + if (calendarView && editorView && editorView.get(0)) { + editorBounds = editorView.get(0).getBoundingClientRect(); + if (editorBounds) { + //sdkBoundsHeight = editorBounds.height - this.sdkBounds.padding * 2; + + this.$window.css({maxHeight: sdkBoundsHeight + 'px'}); + + //this.sdkBounds.width = editorBounds.width; + //this.sdkBounds.height = editorBounds.height; + + // LEFT CORNER + + if (!_.isUndefined(posX)) { + + sdkPanelRight = $('#id_vertical_scroll'); + if (sdkPanelRight.length) { + sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0; + } else { + sdkPanelRight = $('#ws-v-scrollbar'); + if (sdkPanelRight.length) { + sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0; + } + } + + //this.sdkBounds.width -= sdkPanelRightWidth; + + sdkPanelLeft = $('#id_panel_left'); + if (sdkPanelLeft.length) { + sdkPanelLeftWidth = (sdkPanelLeft.css('display') !== 'none') ? sdkPanelLeft.width() : 0; + } + sdkPanelThumbs = $('#id_panel_thumbnails'); + if (sdkPanelThumbs.length) { + sdkPanelThumbsWidth = (sdkPanelThumbs.css('display') !== 'none') ? sdkPanelThumbs.width() : 0; + //this.sdkBounds.width -= sdkPanelThumbsWidth; + } + + //leftPos = Math.min(sdkBoundsLeft + posX + this.arrow.width, sdkBoundsLeft + this.sdkBounds.width - this.$window.outerWidth() - 25); + leftPos = posX; + //leftPos = Math.max(sdkBoundsLeft + sdkPanelLeftWidth + this.arrow.width, leftPos); + + /*if (!_.isUndefined(leftX)) { + windowWidth = this.$window.outerWidth(); + if (windowWidth) { + if ((posX + windowWidth > this.sdkBounds.width - this.arrow.width + 5) && (this.leftX > windowWidth)) { + leftPos = this.leftX - windowWidth + sdkBoundsLeft - this.arrow.width; + arrowView.removeClass('left').addClass('right'); + } else { + leftPos = sdkBoundsLeft + posX + this.arrow.width; + } + } + }*/ + + this.$window.css('left', leftPos + 'px'); + } + + // TOP CORNER + + if (!_.isUndefined(posY)) { + /*sdkPanelTop = $('#id_panel_top'); + sdkBoundsTopPos = sdkBoundsTop; + if (sdkPanelTop.length) { + sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0; + sdkBoundsTopPos += this.sdkBounds.paddingTop; + } else { + sdkPanelTop = $('#ws-h-scrollbar'); + if (sdkPanelTop.length) { + sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0; + } + }*/ + + //this.sdkBounds.height -= sdkPanelHeight; + + outerHeight = this.$window.outerHeight(); + + //topPos = Math.min(sdkBoundsTop + sdkBoundsHeight - outerHeight, this.arrowPosY + sdkBoundsTop - this.arrow.height); + topPos = posY; + //topPos = Math.max(topPos, sdkBoundsTopPos); + + this.$window.css('top', topPos + 'px'); + } + } + } + }, + + textJanuary: 'January', + textFebruary: 'February', + textMarch: 'March', + textApril: 'April', + textMay: 'May', + textJune: 'June', + textJuly: 'July', + textAugust: 'August', + textSeptember: 'September', + textOctober: 'October', + textNovember: 'November', + textDecember: 'December', + textShortSunday: 'Su', + textShortMonday: 'Mo', + textShortTuesday: 'Tu', + textShortWednesday: 'We', + textShortThursday: 'Th', + textShortFriday: 'Fr', + textShortSaturday: 'Sa' + + }, Common.Views.Calendar || {})) +}); \ No newline at end of file diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less new file mode 100644 index 0000000000..9ba98c372a --- /dev/null +++ b/apps/common/main/resources/less/calendar.less @@ -0,0 +1,49 @@ +@calendar-bg-color: #446995; + +.calendar-window { + border-radius: 0; + box-shadow: none; + border: 1px solid @calendar-bg-color; +} +.calendar-popover { + width: 190px; + height: 214px; + .btn { + background-color: transparent; + border: none; + height: 24px; + width: 24px; + margin-top: 5px; + .icon { + width: 24px; + height: 24px; + display: block; + position: relative; + } + } + .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-between; + padding: 0 10px; + } + .title { + padding-top: 6px; + font-size: 13px; + label { + font-weight: bold; + &:not(:last-of-type) { + margin-right: 6px; + } + } + + } + } +} \ No newline at end of file diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index 4f7c8b1cc8..167e28fa3d 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -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"; // App // -------------------------------------------------- From 2b16b4fef2dbeb4ea980e79f54c12c2285f5ee72 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 21 Oct 2019 17:04:57 +0300 Subject: [PATCH 02/15] [DE] Calendar (add button for test) --- .../app/template/ParagraphSettings.template | 1 + .../main/app/view/ParagraphSettings.js | 22 +++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/apps/documenteditor/main/app/template/ParagraphSettings.template b/apps/documenteditor/main/app/template/ParagraphSettings.template index 644f6e5bcf..e3d6181933 100644 --- a/apps/documenteditor/main/app/template/ParagraphSettings.template +++ b/apps/documenteditor/main/app/template/ParagraphSettings.template @@ -54,4 +54,5 @@ +
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index 60f1d58aca..0437a5d197 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -48,7 +48,8 @@ define([ 'common/main/lib/component/CheckBox', 'common/main/lib/component/ThemeColorPalette', 'common/main/lib/component/ColorButton', - 'documenteditor/main/app/view/ParagraphSettingsAdvanced' + 'documenteditor/main/app/view/ParagraphSettingsAdvanced', + 'common/main/lib/view/Calendar' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -182,6 +183,22 @@ define([ this.TextOnlySettings = $('.text-only', this.$el); + // begin calendar + + var me = this; + this.btnCalendar = new Common.UI.Button({ + caption: this.textCalendar, + style: "width:100px;" + }); + this.btnCalendar.render( $('#calendar')); + this.btnCalendar.on('click', _.bind(function (e) { + var popover = Common.Views.Calendar.prototype.getCalendarPopover({}); + popover.showCalendarPopover(); + popover.setLeftTop(300, 300); + }, this)); + + // end calendar + this.rendered = true; }, @@ -499,6 +516,7 @@ define([ textAt: 'At', txtAutoText: 'Auto', textBackColor: 'Background color', - textNewColor: 'Add New Custom Color' + textNewColor: 'Add New Custom Color', + textCalendar: 'Calendar' }, DE.Views.ParagraphSettings || {})); }); \ No newline at end of file From ca1e871ec5fcda2ce00c80a78ebdffc39b794813 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 28 Oct 2019 17:18:35 +0300 Subject: [PATCH 03/15] Calendar (component) --- apps/common/main/lib/component/Calendar.js | 374 ++++++++++++++++++ apps/common/main/lib/view/Calendar.js | 70 +--- apps/common/main/resources/less/calendar.less | 60 ++- 3 files changed, 435 insertions(+), 69 deletions(-) create mode 100644 apps/common/main/lib/component/Calendar.js diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js new file mode 100644 index 0000000000..cc4f360e1c --- /dev/null +++ b/apps/common/main/lib/component/Calendar.js @@ -0,0 +1,374 @@ +/* + * + * (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({ + + template : + _.template([ + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
', + '
' + ].join('')), + + options: { + date: undefined + }, + + initialize : function(options) { + 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]; + 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; + + me._state = undefined; + + me.render(); + }, + + render: function () { + (this.$el || $(this.el)).html(this.template()); + + var me = this; + + me.currentDate = me.options.date || new Date(); + + me.btnPrev = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'mmerge-prev', + }); + me.btnPrev.render(me.cmpEl.find('#prev-arrow')); + me.btnPrev.on('click', _.bind(me.onClickPrev, me)); + + me.btnNext = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: 'mmerge-next', + }); + me.btnNext.render(me.cmpEl.find('#next-arrow')); + me.btnNext.on('click', _.bind(me.onClickNext, me)); + + me.renderMonth(me.currentDate); + + this.trigger('render:after', this); + return this; + }, + + onClickPrev: function () { + var me = this; + if (me._state === 'month') { + me.currentDate.setMonth(me.currentDate.getMonth() - 1); + me.renderMonth(me.currentDate); + } else if (me._state === 'months') { + me.currentDate.setFullYear(me.currentDate.getFullYear() - 1); + me.renderMonths(me.currentDate); + } else if (me._state === 'years') { + 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; + } + me.currentDate.setFullYear(newYear); + me.renderYears(newYear); + } + }, + + onClickNext: function () { + var me = this; + if (me._state === 'month') { + me.currentDate.setMonth(me.currentDate.getMonth() + 1); + me.renderMonth(me.currentDate); + } else if (me._state === 'months') { + me.currentDate.setFullYear(me.currentDate.getFullYear() + 1); + me.renderMonths(me.currentDate); + } else if (me._state === 'years') { + 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; + } + 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 = 'years'; + + 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([ + '' + ].join('')); + me.cmpEl.find('.calendar-header .title').html(me.topTitle); + + me.bottomTitle = _.template([ + '' + ].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, + isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false + }); + tmpYear++; + } + + me.yearPicker = new Common.UI.DataView({ + el: $('.calendar-content'), + store: new Common.UI.DataViewStore(arrYears), + itemTemplate: _.template('
<%= year %>
') + }); + me.yearPicker.on('item:click', function (picker, item) { + var selectYear = item.$el.children(), + year = selectYear.data('year'); + var date = new Date(); + date.setFullYear(year); + me.renderMonths(date); + }); + }, + + renderMonths: function (date) { + var me = this, + curDate = (_.isDate(date)) ? date : (me.currentDate ? me.currentDate : new Date()), + year = curDate.getFullYear(); + + me._state = 'months'; + + // Number of year + me.topTitle = _.template([ + '' + ].join('')); + me.cmpEl.find('.calendar-header .title').html(me.topTitle); + me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderYears, me)); + + me.bottomTitle = _.template([ + '' + ].join('')); + me.cmpEl.find('.calendar-header .bottom-row').html(me.bottomTitle); + + var arrMonths = []; + + for (var ind = 0; ind < 12; ind++) { + arrMonths.push({ + indexMonth: ind, + nameMonth: me.monthShortNames[ind], + year: year, + curYear: true, + isCurrentMonth: (ind === curDate.getMonth()) + }); + } + for (var ind = 0; ind < 4; ind++) { + arrMonths.push({ + indexMonth: ind, + nameMonth: me.monthShortNames[ind], + year: year + 1, + curYear: false + }); + } + + me.monthPicker = new Common.UI.DataView({ + el: $('.calendar-content'), + store: new Common.UI.DataViewStore(arrMonths), + itemTemplate: _.template('
<%= nameMonth %>
') + }); + me.monthPicker.on('item:click', function (picker, item) { + var selectMonth = item.$el.children(), + month = selectMonth.data('month'), + year = selectMonth.data('year'); + var date = new Date(year, month); + me.renderMonth(date); + }); + }, + + renderMonth: function (date) { + var me = this; + me._state = 'month'; + // Current date + var curDate = date || new Date(), + curMonth = curDate.getMonth(), + curIndexDayInWeek = curDate.getDay(), + curNumberDayInMonth = curDate.getDate(), + curYear = curDate.getFullYear(); + + // Name month + me.topTitle = _.template([ + '', + '' + ].join('')); + me.cmpEl.find('.calendar-header .title').html(me.topTitle); + me.cmpEl.find('.calendar-header .title').on('click', _.bind(me.renderMonths, me)); + + // Name days of week + var dayNamesTemplate = ''; + me.dayNamesShort.forEach(function (item) { + dayNamesTemplate += ''; + }); + me.cmpEl.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate)); + + // Month + var rows = 6, + cols = 7, + firstNumber = me.options.firstNumber; + + 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 = (firstDayOfMonthIndex > 0) ? (daysInPrevMonth - (firstDayOfMonthIndex - 1)) : 1, + month, + year; + if (firstDayOfMonthIndex > 0) { + if (curMonth - 1 >= 0) { + month = curMonth - 1 + year = curYear; + } else { + month = 11; + year = curYear - 1; + } + } else { + month = curMonth; + year = curYear; + } + + var tmp = new Date(year, month, numberDay); + + for(var r = 0; r < rows; r++) { + for(var c = 0; c < cols; c++) { + arrDays.push({ + indexInWeek: tmp.getDay(), + dayNumber: tmp.getDate(), + month: tmp.getMonth(), + year: tmp.getFullYear(), + isToday: (tmp.getDate() === curNumberDayInMonth) ? true : false, + isCurrentMonth: (tmp.getMonth() === curMonth) ? true : false + }); + tmp.setDate(tmp.getDate() + 1); + } + } + + me.monthPicker = new Common.UI.DataView({ + el: $('.calendar-content'), + store: new Common.UI.DataViewStore(arrDays), + itemTemplate: _.template('
<%= dayNumber %>
') + }); + }, + + daysInMonth: function (date) { + var d; + d = date ? new Date(date) : new Date(); + return (new Date(d.getFullYear(), d.getMonth() + 1, 0)).getDate(); + }, + + 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' + }); +}); \ No newline at end of file diff --git a/apps/common/main/lib/view/Calendar.js b/apps/common/main/lib/view/Calendar.js index 7e433f35b2..5cd483371a 100644 --- a/apps/common/main/lib/view/Calendar.js +++ b/apps/common/main/lib/view/Calendar.js @@ -44,8 +44,8 @@ if (Common === undefined) define([ 'common/main/lib/component/Window', - 'underscore' -], function (base, _) { + 'common/main/lib/component/Calendar', +], function () { 'use strict'; Common.Views.Calendar = Common.UI.Window.extend(_.extend({ @@ -57,8 +57,8 @@ define([ _.extend(_options, { closable: false, - width: 192, - height: 214, + width: 200, + height: 220, header: false, modal: false, alias: 'Common.Views.Calendar', @@ -69,27 +69,11 @@ define([ this.template = options.template || [ '
', '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', - '
', '
', '
' ].join(''); - 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]; - - _options.tpl = _.template(this.template)(_options); @@ -105,7 +89,7 @@ define([ window.css({ height: '', - minHeight: '', + minHeight: 222, overflow: 'hidden', position: 'absolute', zIndex: '990' @@ -116,29 +100,9 @@ define([ body.css('position', 'relative'); } - me.btnPrev = new Common.UI.Button({ - cls: 'btn-toolbar', - iconCls: 'mmerge-prev', + me.calendar = new Common.UI.Calendar({ + el: $('#id-popover') }); - me.btnPrev.render(me.$window.find('#prev-arrow')); - - me.btnNext = new Common.UI.Button({ - cls: 'btn-toolbar', - iconCls: 'mmerge-next', - }); - me.btnNext.render(me.$window.find('#next-arrow')); - - me.topTitle = _.template([ - '', - '' - ].join('')); - me.$window.find('.calendar-header .title').html(me.topTitle); - - var dayNamesTemplate = ''; - me.dayNamesShort.forEach(function (item) { - dayNamesTemplate += ''; - }); - me.$window.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate)); }, @@ -268,25 +232,5 @@ define([ } }, - textJanuary: 'January', - textFebruary: 'February', - textMarch: 'March', - textApril: 'April', - textMay: 'May', - textJune: 'June', - textJuly: 'July', - textAugust: 'August', - textSeptember: 'September', - textOctober: 'October', - textNovember: 'November', - textDecember: 'December', - textShortSunday: 'Su', - textShortMonday: 'Mo', - textShortTuesday: 'Tu', - textShortWednesday: 'We', - textShortThursday: 'Th', - textShortFriday: 'Fr', - textShortSaturday: 'Sa' - }, Common.Views.Calendar || {})) }); \ No newline at end of file diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less index 9ba98c372a..5bcd74011d 100644 --- a/apps/common/main/resources/less/calendar.less +++ b/apps/common/main/resources/less/calendar.less @@ -3,11 +3,11 @@ .calendar-window { border-radius: 0; box-shadow: none; - border: 1px solid @calendar-bg-color; } -.calendar-popover { - width: 190px; - height: 214px; +.calendar-box { + width: 198px; + height: 220px; + border: 1px solid @calendar-bg-color; .btn { background-color: transparent; border: none; @@ -31,8 +31,8 @@ } .bottom-row { display: flex; - justify-content: space-between; - padding: 0 10px; + justify-content: space-around; + padding: 0; } .title { padding-top: 6px; @@ -44,6 +44,54 @@ } } + } + } + .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; + } + } + } + + } } } \ No newline at end of file From 86cdc7ae893915fa503914e4304587745bfe8e58 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 29 Oct 2019 13:33:24 +0300 Subject: [PATCH 04/15] Calendar (add options - firstday) --- apps/common/main/lib/component/Calendar.js | 58 ++++++++++++------- apps/common/main/lib/view/Calendar.js | 3 +- apps/common/main/resources/less/calendar.less | 11 +++- 3 files changed, 49 insertions(+), 23 deletions(-) diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js index cc4f360e1c..ddcaf042e0 100644 --- a/apps/common/main/lib/component/Calendar.js +++ b/apps/common/main/lib/component/Calendar.js @@ -59,7 +59,8 @@ define([ ].join('')), options: { - date: undefined + date: undefined, + firstday: 0 // 0 or 1 }, initialize : function(options) { @@ -73,6 +74,9 @@ define([ 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._state = undefined; @@ -152,7 +156,7 @@ define([ renderYears: function (year) { var me = this, - year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : (new Date()).getFullYear()); + year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear()); me._state = 'years'; @@ -182,8 +186,9 @@ define([ for (var i = 0; i < 16; i++) { arrYears.push({ - year: tmpYear, - isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false + year: (tmpYear > 0) ? tmpYear : '', + isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false, + disabled: (tmpYear > 0) ? false : true }); tmpYear++; } @@ -193,10 +198,9 @@ define([ store: new Common.UI.DataViewStore(arrYears), itemTemplate: _.template('
<%= year %>
') }); - me.yearPicker.on('item:click', function (picker, item) { - var selectYear = item.$el.children(), - year = selectYear.data('year'); - var date = new Date(); + me.yearPicker.on('item:click', function (picker, item, record, e) { + var year = record.get('year'), + date = new Date(); date.setFullYear(year); me.renderMonths(date); }); @@ -246,11 +250,10 @@ define([ store: new Common.UI.DataViewStore(arrMonths), itemTemplate: _.template('
<%= nameMonth %>
') }); - me.monthPicker.on('item:click', function (picker, item) { - var selectMonth = item.$el.children(), - month = selectMonth.data('month'), - year = selectMonth.data('year'); - var date = new Date(year, month); + me.monthPicker.on('item:click', function (picker, item, record, e) { + var month = record.get('indexMonth'), + year = record.get('year'), + date = new Date(year, month); me.renderMonth(date); }); }, @@ -258,6 +261,8 @@ define([ renderMonth: function (date) { var me = this; me._state = 'month'; + var firstDay = me.options.firstday; + // Current date var curDate = date || new Date(), curMonth = curDate.getMonth(), @@ -275,15 +280,17 @@ define([ // Name days of week var dayNamesTemplate = ''; - me.dayNamesShort.forEach(function (item) { - dayNamesTemplate += ''; - }); + for (var i = firstDay; i < 7; i++) { + dayNamesTemplate += ''; + } + if (firstDay > 0) { + dayNamesTemplate += ''; + } me.cmpEl.find('.calendar-header .bottom-row').html(_.template(dayNamesTemplate)); // Month var rows = 6, - cols = 7, - firstNumber = me.options.firstNumber; + cols = 7; var arrDays = []; @@ -292,12 +299,21 @@ define([ var firstDayOfMonthIndex = d.getDay(); var daysInPrevMonth = me.daysInMonth(d.getTime() - (10 * 24 * 60 * 60 * 1000)), - numberDay = (firstDayOfMonthIndex > 0) ? (daysInPrevMonth - (firstDayOfMonthIndex - 1)) : 1, + numberDay, month, year; - if (firstDayOfMonthIndex > 0) { + 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 + month = curMonth - 1; year = curYear; } else { month = 11; diff --git a/apps/common/main/lib/view/Calendar.js b/apps/common/main/lib/view/Calendar.js index 5cd483371a..b337628bfd 100644 --- a/apps/common/main/lib/view/Calendar.js +++ b/apps/common/main/lib/view/Calendar.js @@ -101,7 +101,8 @@ define([ } me.calendar = new Common.UI.Calendar({ - el: $('#id-popover') + el: $('#id-popover'), + firstday: 1 }); }, diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less index 5bcd74011d..f392862485 100644 --- a/apps/common/main/resources/less/calendar.less +++ b/apps/common/main/resources/less/calendar.less @@ -35,7 +35,9 @@ padding: 0; } .title { - padding-top: 6px; + margin-top: 4px; + margin-bottom: 3px; + padding: 2px 10px 0; font-size: 13px; label { font-weight: bold; @@ -43,6 +45,13 @@ margin-right: 6px; } } + &:hover { + background-color: rgba(255,255,255,0.2); + cursor: pointer; + label { + cursor: pointer; + } + } } } From 6d14719bb63cff08733629630d5796cec7e8e08f Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 30 Oct 2019 11:17:15 +0300 Subject: [PATCH 05/15] Calendar --- apps/common/main/lib/component/Calendar.js | 77 ++++++++++++------- apps/common/main/resources/less/calendar.less | 15 ++-- 2 files changed, 59 insertions(+), 33 deletions(-) diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js index ddcaf042e0..9cc9e98106 100644 --- a/apps/common/main/lib/component/Calendar.js +++ b/apps/common/main/lib/component/Calendar.js @@ -36,7 +36,6 @@ if (Common === undefined) define([ 'common/main/lib/component/BaseView', 'common/main/lib/util/utils' - ], function () { 'use strict'; @@ -60,7 +59,7 @@ define([ options: { date: undefined, - firstday: 0 // 0 or 1 + firstday: 0 // 0 - sunday, 1 - monday }, initialize : function(options) { @@ -78,7 +77,7 @@ define([ me.options.firstday = options.firstday; } - me._state = undefined; + me._state = undefined; // 0 - month, 1 - months, 2 - years me.render(); }, @@ -112,13 +111,19 @@ define([ onClickPrev: function () { var me = this; - if (me._state === 'month') { - me.currentDate.setMonth(me.currentDate.getMonth() - 1); - me.renderMonth(me.currentDate); - } else if (me._state === 'months') { - me.currentDate.setFullYear(me.currentDate.getFullYear() - 1); - me.renderMonths(me.currentDate); - } else if (me._state === 'years') { + 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) { @@ -127,20 +132,28 @@ define([ } else { newYear = year - 1; } - me.currentDate.setFullYear(newYear); - me.renderYears(newYear); + if (newYear > 0) { + me.currentDate.setFullYear(newYear); + me.renderYears(newYear); + } } }, onClickNext: function () { var me = this; - if (me._state === 'month') { - me.currentDate.setMonth(me.currentDate.getMonth() + 1); - me.renderMonth(me.currentDate); - } else if (me._state === 'months') { - me.currentDate.setFullYear(me.currentDate.getFullYear() + 1); - me.renderMonths(me.currentDate); - } else if (me._state === 'years') { + 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) { @@ -149,8 +162,10 @@ define([ } else { newYear = year + 1; } - me.currentDate.setFullYear(newYear); - me.renderYears(newYear); + if (newYear > 0) { + me.currentDate.setFullYear(newYear); + me.renderYears(newYear); + } } }, @@ -158,7 +173,7 @@ define([ var me = this, year = _.isNumber(year) ? year : (me.currentDate ? me.currentDate.getFullYear() : new Date().getFullYear()); - me._state = 'years'; + me._state = 2; var firstYear = year, lastYear = year; @@ -211,13 +226,15 @@ define([ curDate = (_.isDate(date)) ? date : (me.currentDate ? me.currentDate : new Date()), year = curDate.getFullYear(); - me._state = 'months'; + me._state = 1; + me.currentDate = curDate; // Number of year me.topTitle = _.template([ - '' + '
' ].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([ @@ -260,7 +277,7 @@ define([ renderMonth: function (date) { var me = this; - me._state = 'month'; + me._state = 0; var firstDay = me.options.firstday; // Current date @@ -270,12 +287,16 @@ define([ curNumberDayInMonth = curDate.getDate(), curYear = curDate.getFullYear(); + me.currentDate = curDate; + // Name month me.topTitle = _.template([ - '', - '' + '
', + '', + '
' ].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 @@ -343,7 +364,7 @@ define([ me.monthPicker = new Common.UI.DataView({ el: $('.calendar-content'), store: new Common.UI.DataViewStore(arrDays), - itemTemplate: _.template('
<%= dayNumber %>
') + itemTemplate: _.template('
<%= dayNumber %>
') }); }, diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less index f392862485..755fc61d9d 100644 --- a/apps/common/main/resources/less/calendar.less +++ b/apps/common/main/resources/less/calendar.less @@ -37,19 +37,24 @@ .title { margin-top: 4px; margin-bottom: 3px; - padding: 2px 10px 0; font-size: 13px; label { + padding: 2px 10px 0; + display: block; font-weight: bold; &:not(:last-of-type) { margin-right: 6px; } } - &:hover { - background-color: rgba(255,255,255,0.2); - cursor: pointer; - label { + .button { + height: 100%; + width: 100%; + &:hover { + background-color: rgba(255,255,255,0.2); cursor: pointer; + label { + cursor: pointer; + } } } From 8e495dcafcb550d053d925e30feb42c8a04ebbc8 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Oct 2019 16:56:58 +0300 Subject: [PATCH 06/15] [Calendar] Fix translation --- apps/common/main/lib/component/Calendar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js index 9cc9e98106..a717e96964 100644 --- a/apps/common/main/lib/component/Calendar.js +++ b/apps/common/main/lib/component/Calendar.js @@ -39,7 +39,7 @@ define([ ], function () { 'use strict'; - Common.UI.Calendar = Common.UI.BaseView.extend({ + Common.UI.Calendar = Common.UI.BaseView.extend(_.extend({ template : _.template([ @@ -91,14 +91,14 @@ define([ me.btnPrev = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'mmerge-prev', + iconCls: 'mmerge-prev' }); me.btnPrev.render(me.cmpEl.find('#prev-arrow')); me.btnPrev.on('click', _.bind(me.onClickPrev, me)); me.btnNext = new Common.UI.Button({ cls: 'btn-toolbar', - iconCls: 'mmerge-next', + iconCls: 'mmerge-next' }); me.btnNext.render(me.cmpEl.find('#next-arrow')); me.btnNext.on('click', _.bind(me.onClickNext, me)); @@ -407,5 +407,5 @@ define([ textShortSaturday: 'Sa', textMonths: 'Months', textYears: 'Years' - }); + }, Common.UI.Calendar || {})); }); \ No newline at end of file From 29354cd1168ff73f5a30b7d794f0e206e3dc8396 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Oct 2019 16:57:48 +0300 Subject: [PATCH 07/15] [Calendar] Add test for calendar --- .../main/app/controller/Links.js | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Links.js b/apps/documenteditor/main/app/controller/Links.js index f6d37fd4c3..46b8d269b9 100644 --- a/apps/documenteditor/main/app/controller/Links.js +++ b/apps/documenteditor/main/app/controller/Links.js @@ -93,8 +93,10 @@ define([ this.api.asc_registerCallback('asc_onCanAddHyperlink', _.bind(this.onApiCanAddHyperlink, this)); this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this)); Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); - this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); - this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); + this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowControlsActions, this)); + this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideControlsActions, this)); + // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); + // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); } return this; @@ -391,6 +393,36 @@ define([ onHideContentControlsActions: function() { this.view.contentsMenu && this.view.contentsMenu.hide(); this.view.contentsUpdateMenu && this.view.contentsUpdateMenu.hide(); + }, + + onShowControlsActions: function(action, x, y) { + var documentHolderView = this.getApplication().getController('DocumentHolder').documentHolder, + controlsContainer = documentHolderView.cmpEl.find('#calendar-control-container'), + me = this; + + if (controlsContainer.length < 1) { + controlsContainer = $('
'); + 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'), + firstday: 1 + }); + + documentHolderView._preventClick = true; + }, + + onHideControlsActions: function() { + var controlsContainer = this.getApplication().getController('DocumentHolder').documentHolder.cmpEl.find('#calendar-control-container'); + if (controlsContainer.is(':visible')) + controlsContainer.hide(); } }, DE.Controllers.Links || {})); From 6d2ecb38fef8e8decab03468c3fc85357ad04b1b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 30 Oct 2019 17:10:24 +0300 Subject: [PATCH 08/15] Revert "[DE] Calendar (add button for test)" This reverts commit 2b16b4fef2dbeb4ea980e79f54c12c2285f5ee72. --- .../app/template/ParagraphSettings.template | 1 - .../main/app/view/ParagraphSettings.js | 22 ++----------------- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/apps/documenteditor/main/app/template/ParagraphSettings.template b/apps/documenteditor/main/app/template/ParagraphSettings.template index e3d6181933..644f6e5bcf 100644 --- a/apps/documenteditor/main/app/template/ParagraphSettings.template +++ b/apps/documenteditor/main/app/template/ParagraphSettings.template @@ -54,5 +54,4 @@ -
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index 0437a5d197..60f1d58aca 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -48,8 +48,7 @@ define([ 'common/main/lib/component/CheckBox', 'common/main/lib/component/ThemeColorPalette', 'common/main/lib/component/ColorButton', - 'documenteditor/main/app/view/ParagraphSettingsAdvanced', - 'common/main/lib/view/Calendar' + 'documenteditor/main/app/view/ParagraphSettingsAdvanced' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -183,22 +182,6 @@ define([ this.TextOnlySettings = $('.text-only', this.$el); - // begin calendar - - var me = this; - this.btnCalendar = new Common.UI.Button({ - caption: this.textCalendar, - style: "width:100px;" - }); - this.btnCalendar.render( $('#calendar')); - this.btnCalendar.on('click', _.bind(function (e) { - var popover = Common.Views.Calendar.prototype.getCalendarPopover({}); - popover.showCalendarPopover(); - popover.setLeftTop(300, 300); - }, this)); - - // end calendar - this.rendered = true; }, @@ -516,7 +499,6 @@ define([ textAt: 'At', txtAutoText: 'Auto', textBackColor: 'Background color', - textNewColor: 'Add New Custom Color', - textCalendar: 'Calendar' + textNewColor: 'Add New Custom Color' }, DE.Views.ParagraphSettings || {})); }); \ No newline at end of file From 98a05281b3c2a5c46610e73cfd71c581070a2435 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 31 Oct 2019 13:36:53 +0300 Subject: [PATCH 09/15] [Calendar] Deleted view for test --- apps/common/main/lib/view/Calendar.js | 237 -------------------------- 1 file changed, 237 deletions(-) delete mode 100644 apps/common/main/lib/view/Calendar.js diff --git a/apps/common/main/lib/view/Calendar.js b/apps/common/main/lib/view/Calendar.js deleted file mode 100644 index b337628bfd..0000000000 --- a/apps/common/main/lib/view/Calendar.js +++ /dev/null @@ -1,237 +0,0 @@ -/* - * - * (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 - * -*/ -/** - * Calendar.js - * - * Created by Julia Svinareva on 18/10/19 - * Copyright (c) 2019 Ascensio System SIA. All rights reserved. - * - */ - - -if (Common === undefined) - var Common = {}; - -define([ - 'common/main/lib/component/Window', - 'common/main/lib/component/Calendar', -], function () { - 'use strict'; - - Common.Views.Calendar = Common.UI.Window.extend(_.extend({ - - // Window - - initialize: function (options) { - var _options = {}; - - _.extend(_options, { - closable: false, - width: 200, - height: 220, - header: false, - modal: false, - alias: 'Common.Views.Calendar', - firstNumber: 0, // 0 or 6 - cls: 'calendar-window' - }, options); - - this.template = options.template || [ - '
', - '
', - - '
', - '
' - ].join(''); - - - _options.tpl = _.template(this.template)(_options); - - Common.UI.Window.prototype.initialize.call(this, _options); - - return this; - }, - render: function () { - Common.UI.Window.prototype.render.call(this); - - var me = this, - window = this.$window; - - window.css({ - height: '', - minHeight: 222, - overflow: 'hidden', - position: 'absolute', - zIndex: '990' - }); - - var body = window.find('.body'); - if (body) { - body.css('position', 'relative'); - } - - me.calendar = new Common.UI.Calendar({ - el: $('#id-popover'), - firstday: 1 - }); - - }, - - getCalendarPopover: function (options) { - if (!this.popover) - this.popover = new Common.Views.Calendar(options); - return this.popover; - }, - - showCalendarPopover: function (animate, loadText, focus, showText) { - this.options.animate = animate; - - Common.UI.Window.prototype.show.call(this); - if (this.scroller) { - this.scroller.update({minScrollbarLength: 40, alwaysVisibleY: true}); - } - }, - - setLeftTop: function (posX, posY) { - if (!this.$window) - this.render(); - - if (_.isUndefined(posX) && _.isUndefined(posY)) - return; - - var calendarView = $('#id-popover'), - editorView = $('#editor_sdk'), - editorBounds = null, - sdkBoundsHeight = 0, - sdkBoundsTop = 0, - sdkBoundsLeft = 0, - sdkPanelRight = '', - sdkPanelRightWidth = 0, - sdkPanelLeft = '', - sdkPanelLeftWidth = 0, - sdkPanelThumbs = '', // for PE - sdkPanelThumbsWidth = 0, // for PE - sdkPanelTop = '', - sdkPanelHeight = 0, - leftPos = 0, - windowWidth = 0, - outerHeight = 0, - topPos = 0, - sdkBoundsTopPos = 0; - - if (calendarView && editorView && editorView.get(0)) { - editorBounds = editorView.get(0).getBoundingClientRect(); - if (editorBounds) { - //sdkBoundsHeight = editorBounds.height - this.sdkBounds.padding * 2; - - this.$window.css({maxHeight: sdkBoundsHeight + 'px'}); - - //this.sdkBounds.width = editorBounds.width; - //this.sdkBounds.height = editorBounds.height; - - // LEFT CORNER - - if (!_.isUndefined(posX)) { - - sdkPanelRight = $('#id_vertical_scroll'); - if (sdkPanelRight.length) { - sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0; - } else { - sdkPanelRight = $('#ws-v-scrollbar'); - if (sdkPanelRight.length) { - sdkPanelRightWidth = (sdkPanelRight.css('display') !== 'none') ? sdkPanelRight.width() : 0; - } - } - - //this.sdkBounds.width -= sdkPanelRightWidth; - - sdkPanelLeft = $('#id_panel_left'); - if (sdkPanelLeft.length) { - sdkPanelLeftWidth = (sdkPanelLeft.css('display') !== 'none') ? sdkPanelLeft.width() : 0; - } - sdkPanelThumbs = $('#id_panel_thumbnails'); - if (sdkPanelThumbs.length) { - sdkPanelThumbsWidth = (sdkPanelThumbs.css('display') !== 'none') ? sdkPanelThumbs.width() : 0; - //this.sdkBounds.width -= sdkPanelThumbsWidth; - } - - //leftPos = Math.min(sdkBoundsLeft + posX + this.arrow.width, sdkBoundsLeft + this.sdkBounds.width - this.$window.outerWidth() - 25); - leftPos = posX; - //leftPos = Math.max(sdkBoundsLeft + sdkPanelLeftWidth + this.arrow.width, leftPos); - - /*if (!_.isUndefined(leftX)) { - windowWidth = this.$window.outerWidth(); - if (windowWidth) { - if ((posX + windowWidth > this.sdkBounds.width - this.arrow.width + 5) && (this.leftX > windowWidth)) { - leftPos = this.leftX - windowWidth + sdkBoundsLeft - this.arrow.width; - arrowView.removeClass('left').addClass('right'); - } else { - leftPos = sdkBoundsLeft + posX + this.arrow.width; - } - } - }*/ - - this.$window.css('left', leftPos + 'px'); - } - - // TOP CORNER - - if (!_.isUndefined(posY)) { - /*sdkPanelTop = $('#id_panel_top'); - sdkBoundsTopPos = sdkBoundsTop; - if (sdkPanelTop.length) { - sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0; - sdkBoundsTopPos += this.sdkBounds.paddingTop; - } else { - sdkPanelTop = $('#ws-h-scrollbar'); - if (sdkPanelTop.length) { - sdkPanelHeight = (sdkPanelTop.css('display') !== 'none') ? sdkPanelTop.height() : 0; - } - }*/ - - //this.sdkBounds.height -= sdkPanelHeight; - - outerHeight = this.$window.outerHeight(); - - //topPos = Math.min(sdkBoundsTop + sdkBoundsHeight - outerHeight, this.arrowPosY + sdkBoundsTop - this.arrow.height); - topPos = posY; - //topPos = Math.max(topPos, sdkBoundsTopPos); - - this.$window.css('top', topPos + 'px'); - } - } - } - }, - - }, Common.Views.Calendar || {})) -}); \ No newline at end of file From 10957f7d12b4dbe19f7fe54578779bd465b9700d Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 31 Oct 2019 13:39:11 +0300 Subject: [PATCH 10/15] [Calendar] for test --- apps/documenteditor/main/app/controller/Links.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/main/app/controller/Links.js b/apps/documenteditor/main/app/controller/Links.js index 46b8d269b9..f528ec0aef 100644 --- a/apps/documenteditor/main/app/controller/Links.js +++ b/apps/documenteditor/main/app/controller/Links.js @@ -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', @@ -410,11 +411,17 @@ define([ controlsContainer.css({left: x, top : y}); controlsContainer.show(); - if (!this.cmpCalendar) + if (!this.cmpCalendar) { this.cmpCalendar = new Common.UI.Calendar({ el: documentHolderView.cmpEl.find('#id-document-calendar-control'), firstday: 1 }); + this.cmpCalendar.on('date:click', function (cmp, date) { + me.selectDate = new Date(date); + }); + } + this.cmpCalendar.setDate(this.selectDate ? this.selectDate : new Date()); + documentHolderView._preventClick = true; }, From 9cf1d3443e7bccd4f7bf6a618649e51f8036d349 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 31 Oct 2019 13:40:22 +0300 Subject: [PATCH 11/15] [Calendar] --- apps/common/main/lib/component/Calendar.js | 91 +++++++++++++------ apps/common/main/resources/less/calendar.less | 31 +++++-- 2 files changed, 89 insertions(+), 33 deletions(-) diff --git a/apps/common/main/lib/component/Calendar.js b/apps/common/main/lib/component/Calendar.js index a717e96964..2c1a5048bc 100644 --- a/apps/common/main/lib/component/Calendar.js +++ b/apps/common/main/lib/component/Calendar.js @@ -46,9 +46,9 @@ define([ '
', '
', '
', - '
', + '
', '
', - '
', + '
', '
', '
', '
', @@ -90,15 +90,15 @@ define([ me.currentDate = me.options.date || new Date(); me.btnPrev = new Common.UI.Button({ - cls: 'btn-toolbar', - iconCls: 'mmerge-prev' + 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: 'btn-toolbar', - iconCls: 'mmerge-next' + cls: '', + iconCls: 'arrow-next img-commonctrl' }); me.btnNext.render(me.cmpEl.find('#next-arrow')); me.btnNext.on('click', _.bind(me.onClickNext, me)); @@ -203,13 +203,16 @@ define([ arrYears.push({ year: (tmpYear > 0) ? tmpYear : '', isCurrentDecade: ((tmpYear >= firstYear) && (tmpYear <= lastYear)) ? true : false, - disabled: (tmpYear > 0) ? false : true + disabled: (tmpYear > 0) ? false : true, + selected: (_.isDate(me.selectedDate)) ? + (tmpYear === me.selectedDate.getFullYear()) : + (tmpYear === new Date().getFullYear()) }); tmpYear++; } me.yearPicker = new Common.UI.DataView({ - el: $('.calendar-content'), + el: me.cmpEl.find('.calendar-content'), store: new Common.UI.DataViewStore(arrYears), itemTemplate: _.template('
<%= year %>
') }); @@ -243,6 +246,7 @@ define([ 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({ @@ -250,27 +254,35 @@ define([ nameMonth: me.monthShortNames[ind], year: year, curYear: true, - isCurrentMonth: (ind === curDate.getMonth()) + 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 + 1, - curYear: false + year: year, + curYear: false, + selected: (_.isDate(me.selectedDate)) ? + (ind === me.selectedDate.getMonth() && year === me.selectedDate.getFullYear()) : + (ind === today.getMonth() && year === today.getFullYear()) }); } - me.monthPicker = new Common.UI.DataView({ - el: $('.calendar-content'), + me.monthsPicker = new Common.UI.DataView({ + el: me.cmpEl.find('.calendar-content'), store: new Common.UI.DataViewStore(arrMonths), itemTemplate: _.template('
<%= nameMonth %>
') }); - me.monthPicker.on('item:click', function (picker, item, record, e) { + me.monthsPicker.on('item:click', function (picker, item, record, e) { var month = record.get('indexMonth'), year = record.get('year'), - date = new Date(year, month); + date = new Date(); + date.setFullYear(year, month); me.renderMonth(date); }); }, @@ -345,33 +357,60 @@ define([ year = curYear; } - var tmp = new Date(year, month, numberDay); + 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: tmp.getDay(), - dayNumber: tmp.getDate(), - month: tmp.getMonth(), - year: tmp.getFullYear(), - isToday: (tmp.getDate() === curNumberDayInMonth) ? true : false, - isCurrentMonth: (tmp.getMonth() === curMonth) ? true : false + 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(tmp.getDate() + 1); + tmp.setDate(tmpNumber + 1); } } me.monthPicker = new Common.UI.DataView({ - el: $('.calendar-content'), + el: me.cmpEl.find('.calendar-content'), store: new Common.UI.DataViewStore(arrDays), - itemTemplate: _.template('
<%= dayNumber %>
') + itemTemplate: _.template('
<%= dayNumber %>
') + }); + 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); }); }, daysInMonth: function (date) { var d; d = date ? new Date(date) : new Date(); - return (new Date(d.getFullYear(), d.getMonth() + 1, 0)).getDate(); + 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', diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less index 755fc61d9d..8e62b44d0a 100644 --- a/apps/common/main/resources/less/calendar.less +++ b/apps/common/main/resources/less/calendar.less @@ -8,17 +8,33 @@ width: 198px; height: 220px; border: 1px solid @calendar-bg-color; + .top-row { + padding: 0 5px; + } .btn { background-color: transparent; border: none; - height: 24px; - width: 24px; - margin-top: 5px; + height: 20px; + width: 20px; + margin-top: 4px; + display: flex; + justify-content: center; + align-items: center; .icon { - width: 24px; - height: 24px; + 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 { @@ -35,8 +51,9 @@ padding: 0; } .title { - margin-top: 4px; - margin-bottom: 3px; + width: 100%; + margin: 4px 6px 3px 6px; + text-align: center; font-size: 13px; label { padding: 2px 10px 0; From e7a631459017515002e3d30db2b0efa3c052fbae Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 1 Nov 2019 09:53:13 +0300 Subject: [PATCH 12/15] [Calendar] Fix style --- apps/common/main/resources/less/calendar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/resources/less/calendar.less b/apps/common/main/resources/less/calendar.less index 8e62b44d0a..5f0fd3c214 100644 --- a/apps/common/main/resources/less/calendar.less +++ b/apps/common/main/resources/less/calendar.less @@ -1,4 +1,4 @@ -@calendar-bg-color: #446995; +@calendar-bg-color: @tabs-bg-color; .calendar-window { border-radius: 0; From dd4f32a9257327a216fc26cc35d461eb1f721342 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 1 Nov 2019 13:36:36 +0300 Subject: [PATCH 13/15] [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 2c1a5048bc..71b282a132 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('
<%= year %>
') - }); - 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('
<%= year %>
') + }); + 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('
<%= nameMonth %>
') - }); - 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('
<%= nameMonth %>
') + }); + 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('
<%= dayNumber %>
') - }); - 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('
<%= dayNumber %>
') + }); + 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 f528ec0aef..fdd1a2a24e 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()); From 79819463b9c6553edd7cb7a588ea2802f3450625 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 1 Nov 2019 14:42:12 +0300 Subject: [PATCH 14/15] [DE] Add translations (Calendar) --- apps/documenteditor/main/locale/en.json | 33 +++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 31b7945274..a88e0b0e3b 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -102,6 +102,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: ", From 3a74ce23353af0e8a178596e83a6f98e39db9354 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 20 Nov 2019 14:56:32 +0300 Subject: [PATCH 15/15] [DE] Show menu for table of contents and date content control --- .../main/app/controller/Links.js | 68 +++++++++++++++---- 1 file changed, 53 insertions(+), 15 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Links.js b/apps/documenteditor/main/app/controller/Links.js index fdd1a2a24e..28193dd4b4 100644 --- a/apps/documenteditor/main/app/controller/Links.js +++ b/apps/documenteditor/main/app/controller/Links.js @@ -94,10 +94,8 @@ define([ this.api.asc_registerCallback('asc_onCanAddHyperlink', _.bind(this.onApiCanAddHyperlink, this)); this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this)); Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this)); - this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowControlsActions, this)); - this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideControlsActions, this)); - // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); - // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); + this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this)); + this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this)); } return this; @@ -354,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; @@ -394,15 +393,22 @@ 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(); }, - onShowControlsActions: function(action, x, y) { - var documentHolderView = this.getApplication().getController('DocumentHolder').documentHolder, + 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 = $('
'); + controlsContainer = $('
'); documentHolderView.cmpEl.append(controlsContainer); } @@ -418,7 +424,10 @@ define([ firstday: 1 }); this.cmpCalendar.on('date:click', function (cmp, date) { - me.selectDate = new Date(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) { @@ -427,16 +436,45 @@ define([ } }); } - this.cmpCalendar.setDate(this.selectDate ? this.selectDate : new Date()); + 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; }, - onHideControlsActions: function() { - var controlsContainer = this.getApplication().getController('DocumentHolder').documentHolder.cmpEl.find('#calendar-control-container'); - if (controlsContainer.is(':visible')) - controlsContainer.hide(); + 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 || {}));