[forms] Add search bar
This commit is contained in:
parent
251d07e1c9
commit
218f6c4925
|
@ -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;
|
||||
}
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
.search-bar {
|
||||
z-index: 950;
|
||||
.box {
|
||||
padding: 16px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
input[type=text] {
|
||||
width: 192px;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
147
apps/documenteditor/forms/app/controller/SearchBar.js
Normal file
147
apps/documenteditor/forms/app/controller/SearchBar.js
Normal 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 || {}));
|
||||
});
|
|
@ -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 || {}));
|
||||
});
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue