[forms] Add search bar

apps/common/forms/resources/less/common.less

@@ -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;
@@ -681,4 +682,8 @@
 
 .font-size-large {
     .fontsize(@font-size-large);
+}
+
+.search-bar {
+    z-index: 50;
 }

apps/common/main/lib/view/SearchBar.js

@@ -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);
 

apps/common/main/resources/less/searchdialog.less

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

apps/documenteditor/forms/app.js

@@ -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();

apps/documenteditor/forms/app/controller/ApplicationController.js

@@ -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;
             }
         },
 

apps/documenteditor/forms/app/controller/SearchBar.js

@@ -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 || {}));
+});

apps/documenteditor/forms/app/view/ApplicationView.js

@@ -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 || {}));
 });

apps/documenteditor/forms/app_dev.js

@@ -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;