[forms] Add search bar

This commit is contained in:
JuliaSvinareva 2022-06-07 17:57:01 +03:00
parent 251d07e1c9
commit 218f6c4925
8 changed files with 173 additions and 8 deletions

View file

@ -81,6 +81,7 @@
@import "../../../../common/main/resources/less/checkbox.less";
@import "../../../../common/main/resources/less/opendialog.less";
@import "../../../../common/main/resources/less/advanced-settings-window.less";
@import "../../../../common/main/resources/less/searchdialog.less";
@toolbarBorderColor: @border-toolbar-ie;
@toolbarBorderColor: @border-toolbar;
@ -682,3 +683,7 @@
.font-size-large {
.fontsize(@font-size-large);
}
.search-bar {
z-index: 50;
}

View file

@ -39,7 +39,8 @@
*/
define([
'common/main/lib/component/Window'
'common/main/lib/component/Window',
'common/main/lib/component/Button'
], function () {
'use strict';
@ -132,7 +133,7 @@ define([
},
show: function(text) {
var top = $('#app-title').height() + $('#toolbar').height() + 2,
var top = ($('#app-title').length > 0 ? $('#app-title').height() : 0) + $('#toolbar').height() + 2,
left = Common.Utils.innerWidth() - ($('#right-menu').is(':visible') ? $('#right-menu').width() : 0) - this.options.width - 32;
Common.UI.Window.prototype.show.call(this, left, top);

View file

@ -85,7 +85,7 @@
.search-bar {
z-index: 950;
.box {
padding: 16px;
padding: 15px;
display: flex;
input[type=text] {
width: 192px;

View file

@ -140,7 +140,8 @@ require([
autoCreate: false,
controllers : [
'ApplicationController',
'Plugins'
'Plugins',
'SearchBar'
]
});
@ -149,11 +150,13 @@ require([
require([
'documenteditor/forms/app/controller/ApplicationController',
'documenteditor/forms/app/controller/Plugins',
'documenteditor/forms/app/controller/SearchBar',
'documenteditor/forms/app/view/ApplicationView',
'common/main/lib/util/utils',
'common/main/lib/util/LocalStorage',
'common/main/lib/controller/Themes',
'common/main/lib/view/PluginDlg',
'common/main/lib/view/SearchBar',
'common/forms/lib/view/modals'
], function() {
app.start();

View file

@ -1348,6 +1348,7 @@ define([
Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this)); // set loaded image to control
}
DE.getController('Plugins').setApi(this.api);
DE.getController('SearchBar').setApi(this.api);
this.updateWindowTitle(true);
@ -1414,6 +1415,9 @@ define([
embedConfig: this.embedConfig
})).show();
break;
case 'search':
Common.NotificationCenter.trigger('search:show');
break;
}
},

View file

@ -0,0 +1,147 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2020
*
* 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
*
*/
/**
* SearchBar.js
*
* Created by Julia Svinareva on 3.06.2022
* Copyright (c) 2022 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'common/main/lib/view/SearchBar'
], function () {
'use strict';
DE.Controllers.SearchBar = Backbone.Controller.extend(_.extend({
initialize: function() {
},
events: function() {
},
onLaunch: function() {
this._state = {
searchText: ''
};
Common.NotificationCenter.on('search:show', _.bind(this.onSearchShow, this));
},
setApi: function (api) {
this.api = api;
if (this.api) {
this.api.asc_registerCallback('asc_onSetSearchCurrent', _.bind(this.onApiUpdateSearchCurrent, this));
}
return this;
},
onSearchShow: function () {
if (!this.searchBar) {
this.searchBar = new Common.UI.SearchBar({
showOpenPanel: false,
width: 303
});
this.searchBar.on({
'search:back': _.bind(this.onSearchNext, this, 'back'),
'search:next': _.bind(this.onSearchNext, this, 'next'),
'search:input': _.bind(this.onInputSearchChange, this),
'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
'show': _.bind(this.onSelectSearchingResults, this, true),
'hide': _.bind(this.onSelectSearchingResults, this, false)
});
}
if (!this.searchBar.isVisible()) {
this.searchBar.show(this.api.asc_GetSelectedText() || this._state.searchText);
}
},
onSelectSearchingResults: function (val) {
if (this._state.isHighlightedResults !== val) {
this.api.asc_selectSearchingResults(val);
this._state.isHighlightedResults = val;
}
},
onApiUpdateSearchCurrent: function (current, all) {
this.searchBar && this.searchBar.disableNavButtons(current, all);
},
onSearchNext: function (type, arg) {
var text = arg[0],
event = arg[1];
if (text && text.length > 0 && (type === 'keydown' && event.keyCode === 13 || type !== 'keydown')) {
this._state.searchText = text;
if (this.onQuerySearch(type) && this._searchTimer) {
if (this._searchTimer) {
clearInterval(this._searchTimer);
this._searchTimer = undefined;
}
}
}
},
onQuerySearch: function (d, w) {
var searchSettings = new AscCommon.CSearchSettings();
searchSettings.put_Text(this._state.searchText);
searchSettings.put_MatchCase(false);
searchSettings.put_WholeWords(false);
if (!this.api.asc_findText(searchSettings, d != 'back')) {
this.searchBar.disableNavButtons();
return false;
}
return true;
},
onInputSearchChange: function (text) {
var text = text[0];
if (this._state.searchText !== text) {
this._state.newSearchText = text;
this._lastInputChange = (new Date());
if (this._searchTimer === undefined) {
var me = this;
this._searchTimer = setInterval(function() {
if ((new Date()) - me._lastInputChange < 400) return;
me._state.searchText = me._state.newSearchText;
(me._state.newSearchText !== '') && me.onQuerySearch();
clearInterval(me._searchTimer);
me._searchTimer = undefined;
}, 10);
}
}
},
}, DE.Controllers.SearchBar || {}));
});

View file

@ -18,11 +18,12 @@ define([
menu: new Common.UI.Menu({
cls: 'shifted-right',
items: [
{caption: this.txtPrint, value: 'print', iconCls: 'mi-icon svg-icon print'},
{caption: '--'},
{caption: this.txtDownload, value: 'download', iconCls: 'mi-icon svg-icon download'},
{caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'},
{caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'},
{caption: this.txtPrint, value: 'print', iconCls: 'mi-icon svg-icon print'},
{caption: '--'},
{caption: this.txtSearch, value: 'search', iconCls: 'mi-icon svg-icon search'},
{caption: '--'},
{caption: this.txtTheme, value: 'theme', iconCls: 'mi-icon',
menu : this.mnuThemes = new Common.UI.Menu({
@ -148,7 +149,8 @@ define([
textRedo: 'Redo',
textZoom: 'Zoom',
textFitToPage: 'Fit to Page',
textFitToWidth: 'Fit to Width'
textFitToWidth: 'Fit to Width',
txtSearch: 'Search'
}, DE.Views.ApplicationView || {}));
});

View file

@ -130,7 +130,8 @@ require([
autoCreate: false,
controllers : [
'ApplicationController',
'Plugins'
'Plugins',
'SearchBar'
]
});
@ -139,11 +140,13 @@ require([
require([
'documenteditor/forms/app/controller/ApplicationController',
'documenteditor/forms/app/controller/Plugins',
'documenteditor/forms/app/controller/SearchBar',
'documenteditor/forms/app/view/ApplicationView',
'common/main/lib/util/utils',
'common/main/lib/util/LocalStorage',
'common/main/lib/controller/Themes',
'common/main/lib/view/PluginDlg',
'common/main/lib/view/SearchBar',
'common/forms/lib/view/modals'
], function() {
window.compareVersions = true;