From fb067d893f55bc76d7ab4293f3676054e7942f98 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 20 Jul 2022 23:04:55 +0300
Subject: [PATCH] [DE PE SSE] Add ability to navigate through search results by
 enter key

---
 .../main/lib/template/SearchPanel.template    | 12 +++---
 apps/common/main/lib/view/SearchBar.js        | 43 ++++++++++++++++---
 apps/common/main/lib/view/SearchPanel.js      | 39 +++++++++++++++--
 .../main/resources/less/searchdialog.less     | 26 +++++++++++
 .../main/app/controller/Search.js             | 11 ++++-
 .../main/app/controller/Search.js             | 11 ++++-
 .../main/app/controller/Search.js             | 13 +++++-
 7 files changed, 137 insertions(+), 18 deletions(-)

diff --git a/apps/common/main/lib/template/SearchPanel.template b/apps/common/main/lib/template/SearchPanel.template
index bdba42b87..80bfcf0b1 100644
--- a/apps/common/main/lib/template/SearchPanel.template
+++ b/apps/common/main/lib/template/SearchPanel.template
@@ -14,19 +14,19 @@
                 </tr>
                 <tr>
                     <td class="padding-large">
-                        <label id="search-adv-results-number" style="display: inline-block;">
+                        <label id="search-adv-results-number">
                             <%= scope.textSearchResults %>
                         </label>
-                        <div class="search-nav-btns" style="display: inline-block; float: right;">
-                            <div id="search-adv-back" style="display: inline-block; margin-right: 4px;"></div>
-                            <div id="search-adv-next" style="display: inline-block;"></div>
+                        <div class="search-nav-btns">
+                            <div id="search-adv-back" tabindex="0"></div>
+                            <div id="search-adv-next" tabindex="0"></div>
                         </div>
                     </td>
                 </tr>
                 <tr class="edit-setting">
                     <td class="padding-large">
-                       <button type="button" class="btn btn-text-default" id="search-adv-replace" style="display: inline-block; min-width: 62px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplace %></button>
-                       <button type="button" class="btn btn-text-default" id="search-adv-replace-all" style="display: inline-block; min-width: 78px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace" style="min-width: 62px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplace %></button>
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace-all" style="min-width: 78px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
                     </td>
                 </tr>
                 <tr class="search-options-block">
diff --git a/apps/common/main/lib/view/SearchBar.js b/apps/common/main/lib/view/SearchBar.js
index fbd279570..4fb15b778 100644
--- a/apps/common/main/lib/view/SearchBar.js
+++ b/apps/common/main/lib/view/SearchBar.js
@@ -63,8 +63,8 @@ define([
                 '<div class="box">',
                     '<input type="text" id="search-bar-text" class="input-field form-control" maxlength="255" placeholder="'+this.textFind+'" autocomplete="off">',
                     '<div class="tools">',
-                        '<div id="search-bar-back"></div>',
-                        '<div id="search-bar-next"></div>',
+                        '<div id="search-bar-back" tabindex="0"></div>',
+                        '<div id="search-bar-next" tabindex="0"></div>',
                         this.options.showOpenPanel ? '<div id="search-bar-open-panel"></div>' : '',
                         '<div id="search-bar-close"></div>',
                     '</div>',
@@ -74,6 +74,11 @@ define([
             this.options.tpl = _.template(this.template)(this.options);
             this.iconType = this.options.iconType;
 
+            this.wrapEvents = {
+                keydown: _.bind(this.onKeydown, this),
+                mousedown: _.bind(this.onMousedown, this),
+            };
+
             Common.UI.Window.prototype.initialize.call(this, this.options);
 
             Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
@@ -97,7 +102,7 @@ define([
                 iconCls: this.iconType === 'svg' ? 'svg-icon search-arrow-up' : 'toolbar__icon btn-arrow-up',
                 hint: this.tipPreviousResult
             });
-            this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
+            this.btnBack.on('click', _.bind(this.onBtnNextClick, this, this.btnBack, 'back'));
 
             this.btnNext = new Common.UI.Button({
                 parentEl: $('#search-bar-next'),
@@ -105,7 +110,7 @@ define([
                 iconCls: this.iconType === 'svg' ? 'svg-icon search-arrow-down' : 'toolbar__icon btn-arrow-down',
                 hint: this.tipNextResult
             });
-            this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
+            this.btnNext.on('click', _.bind(this.onBtnNextClick, this, this.btnNext, 'next'));
 
             if (this.options.showOpenPanel) {
                 this.btnOpenPanel = new Common.UI.Button({
@@ -175,8 +180,36 @@ define([
             this.$window.css({left: left, top: top});
         },
 
-        onBtnNextClick: function(action) {
+        onBtnNextClick: function(btn, action) {
             this.fireEvent('search:'+action, [this.inputSearch.val(), false]);
+
+            if (!this.listenKeydown) {
+                this.listenKeydown = true;
+                $(document).on('keydown', this.wrapEvents.keydown);
+                $(document).on('mousedown', this.wrapEvents.mousedown);
+                $('#editor_sdk').on('click', this.wrapEvents.mousedown);
+            }
+            setTimeout(_.bind(function () {
+                btn.$el.focus();
+            }, this), 10);
+        },
+
+        onKeydown: function (e) {
+            var elFocus = this.getChild().find(':focus'),
+                action = elFocus.prop('id') === 'search-bar-next' ? 'next' : 'back';
+            elFocus.find('button')[e.keyCode === Common.UI.Keys.RETURN ? 'addClass' : 'removeClass']('focused');
+            this.fireEvent('search:keydown-next', [action, this.inputSearch.val(), e]);
+            if (e.keyCode !== Common.UI.Keys.RETURN) {
+                this.onMousedown();
+            }
+        },
+
+        onMousedown: function () {
+            this.getChild().find('.focused').removeClass('focused');
+            $(document).off('keydown', this.wrapEvents.keydown);
+            $(document).off('mousedown', this.wrapEvents.mousedown);
+            $('#editor_sdk').off('click', this.wrapEvents.mousedown);
+            this.listenKeydown = false;
         },
 
         onOpenPanel: function () {
diff --git a/apps/common/main/lib/view/SearchPanel.js b/apps/common/main/lib/view/SearchPanel.js
index d0170ce25..f69ad7957 100644
--- a/apps/common/main/lib/view/SearchPanel.js
+++ b/apps/common/main/lib/view/SearchPanel.js
@@ -53,6 +53,11 @@ define([
 
             this.mode = false;
 
+            this.wrapEvents = {
+                keydown: _.bind(this.onKeydown, this),
+                mousedown: _.bind(this.onMousedown, this),
+            };
+
             window.SSE && (this.extendedOptions = Common.localStorage.getBool('sse-search-options-extended', true));
         },
 
@@ -105,7 +110,7 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'bottom'
                 });
-                this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
+                this.btnBack.on('click', _.bind(this.onBtnNextClick, this, this.btnBack, 'back'));
 
                 this.btnNext = new Common.UI.Button({
                     parentEl: $('#search-adv-next'),
@@ -115,7 +120,7 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'bottom'
                 });
-                this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
+                this.btnNext.on('click', _.bind(this.onBtnNextClick, this, this.btnNext, 'next'));
 
                 this.btnReplace = new Common.UI.Button({
                     el: $('#search-adv-replace')
@@ -346,8 +351,36 @@ define([
             this.fireEvent('hide', this );
         },
 
-        onBtnNextClick: function (action) {
+        onBtnNextClick: function (btn, action) {
             this.fireEvent('search:'+action, [this.inputText.getValue(), true]);
+
+            if (!this.listenKeydown) {
+                this.listenKeydown = true;
+                $(document).on('keydown', this.wrapEvents.keydown);
+                $(document).on('mousedown', this.wrapEvents.mousedown);
+                $('#editor_sdk').on('click', this.wrapEvents.mousedown);
+            }
+            setTimeout(_.bind(function () {
+                btn.$el.focus();
+            }, this), 10);
+        },
+
+        onKeydown: function (e) {
+            var elFocus = $(':focus'),
+                action = elFocus.prop('id') === 'search-adv-next' ? 'next' : 'back';
+            elFocus.find('button')[e.keyCode === Common.UI.Keys.RETURN ? 'addClass' : 'removeClass']('focused');
+            this.fireEvent('search:keydown-next', [action, this.inputText.getValue(), e]);
+            if (e.keyCode !== Common.UI.Keys.RETURN) {
+                this.onMousedown();
+            }
+        },
+
+        onMousedown: function () {
+            this.$el.find('.focused').removeClass('focused');
+            $(document).off('keydown', this.wrapEvents.keydown);
+            $(document).off('mousedown', this.wrapEvents.mousedown);
+            $('#editor_sdk').off('click', this.wrapEvents.mousedown);
+            this.listenKeydown = false;
         },
 
         onReplaceClick: function (action) {
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index 7904cd623..ee0c7e8e6 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -98,6 +98,10 @@
                 &:first-of-type {
                     margin-left: 7px;
                 }
+                .focused:not(.disabled) {
+                    background-color: @highlight-button-hover-ie;
+                    background-color: @highlight-button-hover;
+                }
             }
         }
     }
@@ -113,6 +117,11 @@
         display: table-row;
     }
 
+    .btn-text-default {
+        display: inline-block;
+        width: auto;
+    }
+
     #search-header {
         position: absolute;
         height: 45px;
@@ -155,11 +164,28 @@
         }
 
         #search-adv-results-number {
+            display: inline-block;
             padding-top: 2px;
             width: calc(100% - 48px);
             color: @text-secondary-ie;
             color: @text-secondary;
         }
+
+        .search-nav-btns {
+            display: inline-block;
+            float: right;
+            #search-adv-back {
+                display: inline-block;
+                margin-right: 4px;
+            }
+            #search-adv-next {
+                display: inline-block;
+            }
+            .focused:not(.disabled) {
+                background-color: @highlight-button-hover-ie;
+                background-color: @highlight-button-hover;
+            }
+        }
     }
 
     .search-options-block {
diff --git a/apps/documenteditor/main/app/controller/Search.js b/apps/documenteditor/main/app/controller/Search.js
index 93cc06350..dd6912fa3 100644
--- a/apps/documenteditor/main/app/controller/Search.js
+++ b/apps/documenteditor/main/app/controller/Search.js
@@ -66,7 +66,8 @@ define([
                     }, this),
                     'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
                     'show': _.bind(this.onSelectSearchingResults, this, true),
-                    'hide': _.bind(this.onSelectSearchingResults, this, false)
+                    'hide': _.bind(this.onSelectSearchingResults, this, false),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'Common.Views.SearchPanel': {
                     'search:back': _.bind(this.onSearchNext, this, 'back'),
@@ -78,6 +79,7 @@ define([
                     'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
                     'show': _.bind(this.onShowPanel, this),
                     'hide': _.bind(this.onHidePanel, this),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'LeftMenu': {
                     'search:aftershow': _.bind(this.onShowAfterSearch, this)
@@ -155,9 +157,16 @@ define([
                         this.api.asc_StartTextAroundSearch();
                     }
                 }
+                if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
+                    this.api.asc_enableKeyEvents(false);
+                }
             }
         },
 
+        onKeydownNext: function (type, text, e) {
+            e.keyCode === Common.UI.Keys.RETURN ? this.onSearchNext(type, text, e) : this.api.asc_enableKeyEvents(true);
+        },
+
         onInputSearchChange: function (text) {
             var me = this;
             if (this._state.searchText !== text) {
diff --git a/apps/presentationeditor/main/app/controller/Search.js b/apps/presentationeditor/main/app/controller/Search.js
index 663902bf7..a1b85917a 100644
--- a/apps/presentationeditor/main/app/controller/Search.js
+++ b/apps/presentationeditor/main/app/controller/Search.js
@@ -64,7 +64,8 @@ define([
                         }
                         this.onInputSearchChange(text);
                     }, this),
-                    'search:keydown': _.bind(this.onSearchNext, this, 'keydown')
+                    'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'Common.Views.SearchPanel': {
                     'search:back': _.bind(this.onSearchNext, this, 'back'),
@@ -76,6 +77,7 @@ define([
                     'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
                     'show': _.bind(this.onShowPanel, this),
                     'hide': _.bind(this.onHidePanel, this),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'LeftMenu': {
                     'search:aftershow': _.bind(this.onShowAfterSearch, this)
@@ -152,9 +154,16 @@ define([
                         this.api.asc_StartTextAroundSearch();
                     }
                 }
+                if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
+                    this.api.asc_enableKeyEvents(false);
+                }
             }
         },
 
+        onKeydownNext: function (type, text, e) {
+            e.keyCode === Common.UI.Keys.RETURN ? this.onSearchNext(type, text, e) : this.api.asc_enableKeyEvents(true);
+        },
+
         onInputSearchChange: function (text) {
             var me = this;
             if (this._state.searchText !== text) {
diff --git a/apps/spreadsheeteditor/main/app/controller/Search.js b/apps/spreadsheeteditor/main/app/controller/Search.js
index 2324dd13b..92eaa842d 100644
--- a/apps/spreadsheeteditor/main/app/controller/Search.js
+++ b/apps/spreadsheeteditor/main/app/controller/Search.js
@@ -60,7 +60,8 @@ define([
                     '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)
+                    'hide': _.bind(this.onSelectSearchingResults, this, false),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'Common.Views.SearchPanel': {
                     'search:back': _.bind(this.onSearchNext, this, 'back'),
@@ -71,7 +72,8 @@ define([
                     'search:options': _.bind(this.onChangeSearchOption, this),
                     'search:keydown': _.bind(this.onSearchNext, this, 'keydown'),
                     'show': _.bind(this.onShowPanel, this),
-                    'hide': _.bind(this.onHidePanel, this)
+                    'hide': _.bind(this.onHidePanel, this),
+                    'search:keydown-next': _.bind(this.onKeydownNext, this)
                 },
                 'LeftMenu': { // TO DO
                     'search:aftershow': _.bind(this.onShowAfterSearch, this)
@@ -209,9 +211,16 @@ define([
                         this.api.asc_StartTextAroundSearch();
                     }
                 }
+                if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
+                    this.api.asc_enableKeyEvents(false);
+                }
             }
         },
 
+        onKeydownNext: function (type, text, e) {
+            e.keyCode === Common.UI.Keys.RETURN ? this.onSearchNext(type, text, e) : this.api.asc_enableKeyEvents(true);
+        },
+
         onInputSearchChange: function (text) {
             var me = this;
             if (this._state.searchText !== text) {