From 31f14b3e6467c7ac4572bc6651f13f1dc46999ad Mon Sep 17 00:00:00 2001 From: OVSharova Date: Mon, 31 Jan 2022 14:52:36 +0300 Subject: [PATCH] Variant with dialog window --- .../main/lib/component/CalendarDialog.js | 95 +++++++++++++++++++ apps/common/main/lib/component/InputField.js | 60 +++++++++++- 2 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 apps/common/main/lib/component/CalendarDialog.js diff --git a/apps/common/main/lib/component/CalendarDialog.js b/apps/common/main/lib/component/CalendarDialog.js new file mode 100644 index 000000000..456b12756 --- /dev/null +++ b/apps/common/main/lib/component/CalendarDialog.js @@ -0,0 +1,95 @@ +/* + * + * (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 + * +*/ +/** + * CalendarDialog.js + * + * Created by Olga Sharova on 28/01/21 + * Copyright (c) 2021 Ascensio System SIA. All rights reserved. + * + */ + +if (Common === undefined) + var Common = {}; +define([ + 'common/main/lib/component/Window' +], function () { 'use strict'; + Common.UI.CalendarDialog = Common.UI.Window.extend(_.extend({ + options: { + header: false, + cls: 'calendar-dlg' + }, + + initialize : function(options) { + _.extend(this.options, options || {}); + this.template = [ + '
', + '
', + '
' + ].join(''); + this.options.tpl = _.template(this.template)(this.options); + this._state=[]; + this._state.date = options.date; + this.handler = this.options.handler; + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + //me = this; + Common.UI.Window.prototype.render.call(this); + this.wndCalendar = new Common.UI.Calendar({ + el: $('#id-calendar-box'), + date: this._state.date, + enableKeyEvents: true, + firstday: 1 + + }); + this.wndCalendar.setDate(this._state.date); + this.wndCalendar.on('date:click', _.bind(this.onSetDate,this)); + }, + + onSetDate: function (){ + this._state.date = this.wndCalendar.selectedDate; + this._handleInput('ok'); + }, + + _handleInput: function(state) { + if (this.options.handler) { + this.options.handler.call(this, state, this._state); + } + + this.close(); + }, + textTitle: 'More Effects' + + }, Common.UI.CalendarDialog || {})); +}); \ No newline at end of file diff --git a/apps/common/main/lib/component/InputField.js b/apps/common/main/lib/component/InputField.js index 28f1d30b6..369ca965c 100644 --- a/apps/common/main/lib/component/InputField.js +++ b/apps/common/main/lib/component/InputField.js @@ -54,7 +54,8 @@ if (Common === undefined) define([ 'common/main/lib/component/BaseView', 'common/main/lib/component/Tooltip', - 'common/main/lib/component/Button' + 'common/main/lib/component/Button', + 'common/main/lib/component/CalendarDialog' ], function () { 'use strict'; Common.UI.InputField = Common.UI.BaseView.extend((function() { @@ -548,7 +549,7 @@ define([ } })()); - Common.UI.InputFieldBtnPassword = Common.UI.InputFieldBtn.extend(_.extend((function() { + Common.UI.InputFieldBtnPassword = Common.UI.InputFieldBtn.extend( (function() { return { options: { id: null, @@ -648,5 +649,58 @@ define([ textHintShowPwd: 'Show password', textHintHidePwd: 'Hide password' } - })(), Common.UI.InputFieldBtnPassword || {})); + })(), Common.UI.InputFieldBtnPassword || {}); + + Common.UI.InputFieldBtnCalendar = Common.UI.InputFieldBtn.extend((function (){ + return { + options: { + id: null, + cls: '', + style: '', + value: '', + type: 'date', + name: '', + validation: null, + allowBlank: true, + placeHolder: '', + blankError: null, + spellcheck: false, + maskExp: '', + validateOnChange: false, + validateOnBlur: true, + disabled: false, + editable: true, + iconCls: 'btn-datetime', + btnHint: '', + repeatInput: null, + showPwdOnClick: true, + date: null + }, + initialize : function(options) { + options = options || {}; + Common.UI.InputField.prototype.initialize.call(this, options); + this.date = this.options.date; + + }, + + render: function (parentEl) { + Common.UI.InputFieldBtn.prototype.render.call(this, parentEl); + this._button.on('click', _.bind(this.calendarClick, this)); + }, + + calendarClick: function (e){ + var me = this; + (new Common.UI.CalendarDialog({ + date : this.date, + handler : function(result, value) { + if (result == 'ok') { + me.date = value.date; + me.setValue(value.date.toLocaleDateString()); + } + } + })).show(); + } + + } + })()); }); \ No newline at end of file