[DE] Calendar
This commit is contained in:
Julia Svinareva
parent
f6c7e70390
commit
e7aca2fdba
292
apps/common/main/lib/view/Calendar.js
Normal file
292
apps/common/main/lib/view/Calendar.js
Normal file
|
|
@ -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 || [
|
||||
'<div class="box">',
|
||||
'<div id="id-popover" class="calendar-popover" style="overflow-y: hidden;position: relative;">',
|
||||
'<div id="id-calendar-popover">',
|
||||
'<div class="calendar-header">',
|
||||
'<div class="top-row">',
|
||||
'<div id="prev-arrow"><button type="button" style="width: 24px;height: 24px;"><i class="icon mmerge-prev"> </i></button></div>',
|
||||
'<div class="title"></div>',
|
||||
'<div id="next-arrow"><button type="button" style="width: 24px;height: 24px;"><i class="icon mmerge-next"> </i></button></div>',
|
||||
'</div>',
|
||||
'<div class="bottom-row">',
|
||||
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="calendar-content"></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].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([
|
||||
'<label>' + me.monthNames[0] + '</label>',
|
||||
'<label>' + 2019 + '</label>'
|
||||
].join(''));
|
||||
me.$window.find('.calendar-header .title').html(me.topTitle);
|
||||
|
||||
var dayNamesTemplate = '';
|
||||
me.dayNamesShort.forEach(function (item) {
|
||||
dayNamesTemplate += '<label>' + item + '</label>';
|
||||
});
|
||||
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 || {}))
|
||||
});
|
||||
49
apps/common/main/resources/less/calendar.less
Normal file
49
apps/common/main/resources/less/calendar.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue