[DE] Make new search: add methods for results, fix scrolling

apps/common/main/lib/template/SearchPanel.template

@@ -52,11 +52,11 @@
                     <td class="padding-small"><div id="search-adv-use-regexp"></div></td>
                 </tr>
                 <tr>
-                    <td class="padding-small"><div id="search-adv-match-word"></div></td>
+                    <td class="padding-large"><div id="search-adv-match-word"></div></td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div id="search-results">
+    <div id="search-results" class="ps-container oo">
     </div>
 </div>

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

@@ -57,6 +57,7 @@ define([
         },
 
         render: function(el) {
+            var me = this;
             if (!this.rendered) {
                 el = el || this.el;
                 $(el).html(this.template({
@@ -145,6 +146,21 @@ define([
                 });
                 this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
 
+                this.$resultsContainer = $('#search-results');
+                this.$resultsContainer.hide();
+
+                this.$resultsContainer.scroller = new Common.UI.Scroller({
+                    el: this.$resultsContainer,
+                    includePadding: true,
+                    useKeyboard: true,
+                    minScrollbarLength: 40,
+                    alwaysVisibleY: true
+                });
+                Common.NotificationCenter.on('window:resize', function() {
+                    me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+                    me.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                });
+
                 if (window.SSE) {
                     this.cmbWithin = new Common.UI.ComboBox({
                         el: $('#search-adv-cmb-within'),
@@ -203,6 +219,10 @@ define([
 
         show: function () {
             Common.UI.BaseView.prototype.show.call(this,arguments);
+
+            this.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+            this.$resultsContainer.scroller.update({alwaysVisibleY: true});
+
             this.fireEvent('show', this );
         },
 

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

@@ -91,6 +91,10 @@ label {
     #left-panel-comments {
         height: 100%;
     }
+
+    #left-panel-search {
+        height: 100%;
+    }
 }
 
 .right-panel {

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

@@ -104,13 +104,21 @@
 }
 
 .search-panel {
+    display: table;
     position: relative;
     border-collapse: collapse;
     line-height: 15px;
 
+    > div {
+        display: table-row;
+    }
+
     #search-header {
-        position: relative;
+        position: absolute;
         height: 45px;
+        left: 0;
+        top: 0;
+        right: 0;
         padding: 12px;
         overflow: hidden;
         border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
@@ -128,6 +136,10 @@
     }
 
     #search-adv-settings {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 45px;
         padding: 10px 15px 0 15px;
 
         table {
@@ -192,4 +204,21 @@
         }
     }
 
+    #search-results {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
+        border-top: @scaled-one-px-value solid @border-toolbar;
+        padding: 12px 0;
+        overflow: hidden;
+
+        .item {
+            padding: 6px 15px;
+            word-break: break-all;
+        }
+    }
+
 }

apps/documenteditor/main/app/controller/Main.js

@@ -1195,8 +1195,7 @@ define([
                     leftmenuController          = application.getController('LeftMenu'),
                     chatController              = application.getController('Common.Controllers.Chat'),
                     pluginsController           = application.getController('Common.Controllers.Plugins'),
-                    navigationController        = application.getController('Navigation'),
+                    navigationController        = application.getController('Navigation');
-                    searchController            = application.getController('Search');
 
 
                 leftmenuController.getView('LeftMenu').getMenu('file').loadDocument({doc:me.document});
@@ -1221,8 +1220,6 @@ define([
 
                 documentHolderController.getView().setApi(me.api).on('editcomplete', _.bind(me.onEditComplete, me));
 
-                searchController.setApi(me.api);
-
                 if (me.appOptions.isEdit) {
                     if (me.appOptions.canForcesave) {// use asc_setIsForceSaveOnUserSave only when customization->forcesave = true
                         me.appOptions.forcesave = Common.localStorage.getBool("de-settings-forcesave", me.appOptions.canForcesave);

apps/documenteditor/main/app/controller/Search.js

@@ -78,6 +78,9 @@ define([
             if (api) {
                 this.api = api;
                 this.api.asc_registerCallback('asc_onSetSearchCurrent', _.bind(this.onUpdateSearchCurrent, this));
+                this.api.asc_registerCallback('asc_onStartTextAroundSearch', _.bind(this.onStartTextAroundSearch, this));
+                this.api.asc_registerCallback('asc_onEndTextAroundSearch', _.bind(this.onEndTextAroundSearch, this));
+                this.api.asc_registerCallback('asc_onGetTextAroundSearchPack', _.bind(this.onApiGetTextAroundSearch, this));
             }
             return this;
         },
@@ -89,6 +92,8 @@ define([
 
         onQuerySearch: function (d, w, opts) {
             if (opts.textsearch && opts.textsearch.length) {
+                this.hideResults();
+
                 var searchSettings = new AscCommon.CSearchSettings();
                 searchSettings.put_Text(opts.textsearch);
                 searchSettings.put_MatchCase(opts.matchcase);
@@ -102,12 +107,16 @@ define([
                             //me.dlgSearch.focus();
                         }
                     });
+                } else {
+                    this.api.asc_StartTextAroundSearch();
                 }
             }
         },
 
         onQueryReplace: function(w, opts) {
             if (!_.isEmpty(opts.textsearch)) {
+                this.hideResults();
+
                 var searchSettings = new AscCommon.CSearchSettings();
                 searchSettings.put_Text(opts.textsearch);
                 searchSettings.put_MatchCase(opts.matchcase);
@@ -121,12 +130,16 @@ define([
                             me.view.focus();
                         }
                     });
+                } else {
+                    this.api.asc_StartTextAroundSearch();
                 }
             }
         },
 
         onQueryReplaceAll: function(w, opts) {
             if (!_.isEmpty(opts.textsearch)) {
+                this.hideResults();
+
                 var searchSettings = new AscCommon.CSearchSettings();
                 searchSettings.put_Text(opts.textsearch);
                 searchSettings.put_MatchCase(opts.matchcase);
@@ -141,6 +154,37 @@ define([
             }
         },
 
+        onStartTextAroundSearch: function () {
+            if (this.view) {
+                this.view.$resultsContainer.show();
+                this._state.isStartedAddingResults = true;
+            }
+        },
+
+        onEndTextAroundSearch: function () {
+            if (this.view) {
+                this._state.isStartedAddingResults = false;
+                this.view.$resultsContainer.scroller.update({alwaysVisibleY: true});
+            }
+        },
+
+        onApiGetTextAroundSearch: function (data) {
+            if (this.view && this._state.isStartedAddingResults) {
+                var me = this;
+                data.forEach(function (item) {
+                    var el = '<div class="item">' + item[1].trim() + '</div>';
+                    me.view.$resultsContainer.append(el);
+                });
+            }
+        },
+
+        hideResults: function () {
+            if (this.view) {
+                this.view.$resultsContainer.hide();
+                this.view.$resultsContainer.empty();
+            }
+        },
+
         textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
 
     }, DE.Controllers.Search || {}));