[DE] New search: make auto search

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

@@ -82,6 +82,9 @@ define([
             this.inputSearch = this.$window.find('#search-bar-text');
             this.inputSearch.on('input', _.bind(function () {
                 this.disableNavButtons();
+                this.fireEvent('search:input', [this.inputSearch.val()]);
+            }, this)).on('keydown', _.bind(function (e) {
+                this.fireEvent('search:keydown', [this.inputSearch.val(), e]);
             }, this));
 
             this.btnBack = new Common.UI.Button({
@@ -89,14 +92,14 @@ define([
                 cls: 'btn-toolbar',
                 iconCls: 'toolbar__icon btn-arrow-up'
             });
-            this.btnBack.on('click', _.bind(this.onBtnClick, this, 'back'));
+            this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
 
             this.btnNext = new Common.UI.Button({
                 parentEl: $('#search-bar-next'),
                 cls: 'btn-toolbar',
                 iconCls: 'toolbar__icon btn-arrow-down'
             });
-            this.btnNext.on('click', _.bind(this.onBtnClick, this, 'next'));
+            this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
 
             this.btnOpenPanel = new Common.UI.Button({
                 parentEl: $('#search-bar-open-panel'),
@@ -160,12 +163,8 @@ define([
             this.$window.css({left: left, top: top});
         },
 
-        onBtnClick: function(action, event) {
+        onBtnNextClick: function(action) {
-            if ( $('.asc-loadmask').length ) return;
+            this.fireEvent('search:'+action, [this.inputSearch.val(), false]);
-            var opts = {
-                textsearch  : this.inputSearch.val()
-            };
-            this.fireEvent('search:'+action, [this, opts, false]);
         },
 
         onOpenPanel: function () {
@@ -176,7 +175,7 @@ define([
         disableNavButtons: function (resultNumber, allResults) {
             var disable = this.inputSearch.val() === '';
             this.btnBack.setDisabled(disable || !allResults || resultNumber === 0);
-            this.btnNext.setDisabled(disable);
+            this.btnNext.setDisabled(disable || resultNumber + 1 === allResults);
         },
 
         textFind: 'Find'

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

@@ -72,7 +72,12 @@ define([
                     validateOnBlur: false,
                     style: 'width: 100%;'
                 });
-                this.inputText._input.on('input', _.bind(this.disableNavButtons, this));
+                this.inputText._input.on('input', _.bind(function () {
+                    this.disableNavButtons();
+                    this.fireEvent('search:input', [this.inputText._input.val()]);
+                }, this)).on('keydown', _.bind(function (e) {
+                    this.fireEvent('search:keydown', [this.inputText._input.val(), e]);
+                }, this));
 
                 this.inputReplace = new Common.UI.InputField({
                     el: $('#search-adv-replace-text'),
@@ -92,7 +97,7 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'bottom'
                 });
-                this.btnBack.on('click', _.bind(this.onBtnClick, this, 'next'));
+                this.btnBack.on('click', _.bind(this.onBtnNextClick, this, 'back'));
 
                 this.btnNext = new Common.UI.Button({
                     parentEl: $('#search-adv-next'),
@@ -101,17 +106,17 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'bottom'
                 });
-                this.btnNext.on('click', _.bind(this.onBtnClick, this, 'next'));
+                this.btnNext.on('click', _.bind(this.onBtnNextClick, this, 'next'));
 
                 this.btnReplace = new Common.UI.Button({
                     el: $('#search-adv-replace')
                 });
-                this.btnReplace.on('click', _.bind(this.onBtnClick, this, 'replace'));
+                this.btnReplace.on('click', _.bind(this.onReplaceClick, this, 'replace'));
 
                 this.btnReplaceAll = new Common.UI.Button({
                     el: $('#search-adv-replace-all')
                 });
-                this.btnReplaceAll.on('click', _.bind(this.onBtnClick, this, 'replaceall'));
+                this.btnReplaceAll.on('click', _.bind(this.onReplaceClick, this, 'replaceall'));
 
                 this.chCaseSensitive = new Common.UI.CheckBox({
                     el: $('#search-adv-case-sensitive'),
@@ -120,6 +125,8 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['case-sensitive', field.getValue() === 'checked']);
                 });
 
                 this.chUseRegExp = new Common.UI.CheckBox({
@@ -128,6 +135,8 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['regexp', field.getValue() === 'checked']);
                 });
 
                 this.chMatchWord = new Common.UI.CheckBox({
@@ -137,6 +146,8 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'left',
                     dataHintOffset: 'small'
+                }).on('change', function(field) {
+                    me.fireEvent('search:options', ['match-word', field.getValue() === 'checked']);
                 });
 
                 this.buttonClose = new Common.UI.Button({
@@ -222,11 +233,11 @@ 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.disableNavButtons();
             this.fireEvent('show', this );
+
+            this.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+            this.$resultsContainer.scroller.update({alwaysVisibleY: true});
         },
 
         hide: function () {
@@ -263,16 +274,12 @@ define([
             Common.NotificationCenter.trigger('leftmenu:change', 'hide');
         },
 
-        onBtnClick: function(action) {
+        onBtnNextClick: function (action) {
-            var opts = {
+            this.fireEvent('search:'+action, [this.inputText.getValue(), true]);
-                textsearch  : this.inputText.getValue(),
+        },
-                textreplace : this.inputReplace.getValue(),
+
-                matchcase   : this.chCaseSensitive.checked,
+        onReplaceClick: function (action) {
-                useregexp   : this.chUseRegExp.checked,
+            this.fireEvent('search:'+action, [this.inputText.getValue(), this.inputReplace.getValue()]);
-                matchword   : this.chMatchWord && this.chMatchWord.checked,
-                //highlight   : this.miHighlight.checked
-            };
-            this.fireEvent('search:'+action, [this, opts, true]);
         },
 
         getSettings: function() {
@@ -308,7 +315,7 @@ define([
         disableNavButtons: function (resultNumber, allResults) {
             var disable = this.inputText._input.val() === '';
             this.btnBack.setDisabled(disable || !allResults || resultNumber === 0);
-            this.btnNext.setDisabled(disable);
+            this.btnNext.setDisabled(disable || resultNumber + 1 === allResults);
         },
 
         textFind: 'Find',

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

@@ -218,6 +218,17 @@
         .item {
             padding: 6px 15px;
             word-break: break-all;
+
+            &:hover {
+                background-color: @highlight-button-hover-ie;
+                background-color: @highlight-button-hover;
+            }
+            &.selected {
+                background-color: @highlight-button-pressed-ie;
+                background-color: @highlight-button-pressed;
+                color: @text-normal-pressed-ie;
+                color: @text-normal-pressed;
+            }
         }
     }
 

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

@@ -80,8 +80,7 @@ define([
                 },
                 'LeftMenu': {
                     'comments:show': _.bind(this.commentsShowHide, this, 'show'),
-                    'comments:hide': _.bind(this.commentsShowHide, this, 'hide'),
+                    'comments:hide': _.bind(this.commentsShowHide, this, 'hide')
-                    'search:aftershow': _.bind(this.onShowAfterSearch, this)
                 },
                 'FileMenu': {
                     'menu:hide': _.bind(this.menuFilesShowHide, this, 'hide'),
@@ -948,30 +947,14 @@ define([
         onShowHideSearch: function (state, findText) {
             if (state) {
                 Common.UI.Menu.Manager.hideAll();
-                this.leftMenu.showMenu('advancedsearch');
+                this.leftMenu.showMenu('advancedsearch', undefined, true);
-                this.onShowAfterSearch(findText);
+                this.leftMenu.fireEvent('search:aftershow', this.leftMenu, findText);
             } else {
                 this.leftMenu.btnSearchBar.toggle(false, true);
                 this.leftMenu.onBtnMenuClick(this.leftMenu.btnSearchBar);
             }
         },
 
-        onShowAfterSearch: function (findText) {
-            var viewport = this.getApplication().getController('Viewport');
-            if (viewport.isSearchBarVisible()) {
-                viewport.searchBar.hide();
-            }
-
-            var text = findText || this.api.asc_GetSelectedText();
-            if (text) {
-                this.leftMenu.panelSearch.setFindText(text);
-            } else if (text !== undefined) {
-                this.leftMenu.panelSearch.setFindText('');
-            }
-            this.leftMenu.panelSearch.disableNavButtons();
-            this.leftMenu.panelSearch.focus();
-        },
-
         onMenuSearchBar: function(obj, show) {
             if (show) {
                 var mode = this.mode.isEdit && !this.viewmode ? undefined : 'no-replace';

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

@@ -55,19 +55,32 @@ define([
         initialize: function () {
             this.addListeners({
                 'SearchBar': {
-                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:back': _.bind(this.onSearchNext, this, 'back'),
-                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                    'search:next': _.bind(this.onSearchNext, this, 'next'),
+                    'search:input': _.bind(this.onInputSearchChange, this),
+                    'search:keydown': _.bind(this.onSearchNext, this, 'keydown')
                 },
                 'Common.Views.SearchPanel': {
-                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:back': _.bind(this.onSearchNext, this, 'back'),
-                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                    'search:next': _.bind(this.onSearchNext, this, 'next'),
                     'search:replace': _.bind(this.onQueryReplace, this),
-                    'search:replaceall': _.bind(this.onQueryReplaceAll, this)
+                    'search:replaceall': _.bind(this.onQueryReplaceAll, this),
+                    'search:input': _.bind(this.onInputSearchChange, this),
+                    'search:options': _.bind(this.onChangeSearchOption, this),
+                    'search:keydown': _.bind(this.onSearchNext, this, 'keydown')
+                },
+                'LeftMenu': {
+                    'search:aftershow': _.bind(this.onShowAfterSearch, this)
                 }
             });
         },
         onLaunch: function () {
-            this._state = {};
+            this._state = {
+                searchText: '',
+                matchCase: false,
+                matchWord: false,
+                useRegExp: false
+            };
         },
 
         setMode: function (mode) {
@@ -81,6 +94,7 @@ define([
                 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));
+                this.api.asc_registerCallback('asc_onRemoveTextAroundSearch', _.bind(this.onApiRemoveTextAroundSearch, this));
             }
             return this;
         },
@@ -90,61 +104,89 @@ define([
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
         },
 
-        onQuerySearch: function (d, w, opts) {
+        onChangeSearchOption: function (option, checked) {
-            if (opts.textsearch && opts.textsearch.length) {
+            switch (option) {
-                this.hideResults();
+                case 'case-sensitive':
+                    this._state.matchCase = checked;
+                    break;
+                case 'match-word':
+                    this._state.matchWord = checked;
+                    break;
+                case 'regexp':
+                    this._state.useRegExp = checked;
+                    break;
+            }
+        },
 
-                var searchSettings = new AscCommon.CSearchSettings();
+        onSearchNext: function (type, text, e) {
-                searchSettings.put_Text(opts.textsearch);
+            if (text && text.length > 0 && (type === 'keydown' && e.keyCode === Common.UI.Keys.RETURN || type !== 'keydown')) {
-                searchSettings.put_MatchCase(opts.matchcase);
+                this._state.searchText = text;
-                searchSettings.put_WholeWords(opts.matchword);
+                if (this.onQuerySearch(type) && this.searchTimer) {
-                if (!this.api.asc_findText(searchSettings, d != 'back')) {
+                    this.hideResults();
-                    var me = this;
+                    clearInterval(this.searchTimer);
-                    me.view.updateResultsNumber(undefined, 0);
+                    this.searchTimer = undefined;
-                    Common.UI.info({
+                    if (this.view.$el.is(':visible')) {
-                        msg: this.textNoTextFound,
+                        this.api.asc_StartTextAroundSearch();
-                        callback: function() {
+                    }
-                            //me.dlgSearch.focus();
-                        }
-                    });
-                } else {
-                    this.api.asc_StartTextAroundSearch();
                 }
             }
         },
 
-        onQueryReplace: function(w, opts) {
+        onInputSearchChange: function (text) {
-            if (!_.isEmpty(opts.textsearch)) {
+            var me = this;
-                this.hideResults();
+            if (text.length > 0 && this._state.searchText !== text) {
+                this._state.newSearchText = text;
+                this._lastInputChange = (new Date());
+                if (this.searchTimer === undefined) {
+                    this.searchTimer = setInterval(function(){
+                        if ((new Date()) - me._lastInputChange < 400) return;
 
-                var searchSettings = new AscCommon.CSearchSettings();
+                        me.hideResults();
-                searchSettings.put_Text(opts.textsearch);
+                        me._state.searchText = me._state.newSearchText;
-                searchSettings.put_MatchCase(opts.matchcase);
+                        if (me.onQuerySearch() && me.view.$el.is(':visible')) {
-                searchSettings.put_WholeWords(opts.matchword);
+                            me.api.asc_StartTextAroundSearch();
-                if (!this.api.asc_replaceText(searchSettings, opts.textreplace, false)) {
-                    var me = this;
-                    me.view.updateResultsNumber(undefined, 0);
-                    Common.UI.info({
-                        msg: this.textNoTextFound,
-                        callback: function() {
-                            me.view.focus();
                         }
-                    });
+                        clearInterval(me.searchTimer);
-                } else {
+                        me.searchTimer = undefined;
-                    this.api.asc_StartTextAroundSearch();
+                    }, 10);
                 }
             }
         },
 
-        onQueryReplaceAll: function(w, opts) {
+        onQuerySearch: function (d, w) {
-            if (!_.isEmpty(opts.textsearch)) {
+            var searchSettings = new AscCommon.CSearchSettings();
-                this.hideResults();
+            searchSettings.put_Text(this._state.searchText);
+            searchSettings.put_MatchCase(this._state.matchCase);
+            searchSettings.put_WholeWords(this._state.matchWord);
+            if (!this.api.asc_findText(searchSettings, d != 'back')) {
+                this.view.updateResultsNumber(undefined, 0);
+                return false;
+            }
+            return true;
+        },
 
+        onQueryReplace: function(textSearch, textReplace) {
+            if (textSearch !== '') {
                 var searchSettings = new AscCommon.CSearchSettings();
-                searchSettings.put_Text(opts.textsearch);
+                searchSettings.put_Text(textSearch);
-                searchSettings.put_MatchCase(opts.matchcase);
+                searchSettings.put_MatchCase(this._state.matchCase);
-                searchSettings.put_WholeWords(opts.matchword);
+                searchSettings.put_WholeWords(this._state.matchWord);
-                this.api.asc_replaceText(searchSettings, opts.textreplace, true);
+                if (!this.api.asc_replaceText(searchSettings, textReplace, false)) {
+                    this.view.updateResultsNumber(undefined, 0);
+                }
+            }
+        },
+
+        onQueryReplaceAll: function(textSearch, textReplace) {
+            if (textSearch !== '') {
+                var searchSettings = new AscCommon.CSearchSettings();
+                searchSettings.put_Text(textSearch);
+                searchSettings.put_MatchCase(this._state.matchCase);
+                searchSettings.put_WholeWords(this._state.matchWord);
+                this.api.asc_replaceText(searchSettings, textReplace, true);
+
+                this.hideResults();
+                this.resultItems.length = 0;
             }
         },
 
@@ -172,13 +214,34 @@ define([
         onApiGetTextAroundSearch: function (data) {
             if (this.view && this._state.isStartedAddingResults) {
                 var me = this;
+                me.resultItems = [];
                 data.forEach(function (item) {
-                    var el = '<div class="item">' + item[1].trim() + '</div>';
+                    var el = document.createElement("div");
+                    el.className = 'item';
+                    el.innerHTML = item[1].trim();
                     me.view.$resultsContainer.append(el);
+                    me.resultItems.push({id: item[0], $el: $(el)});
+                    $(el).on('click', _.bind(function (el) {
+                        var id = item[0];
+                        me.api.asc_SelectSearchElement(id);
+                        $('#search-results').find('.item').removeClass('selected');
+                        $(el.currentTarget).addClass('selected');
+                    }, me));
                 });
             }
         },
 
+        onApiRemoveTextAroundSearch: function (arr) {
+            var me = this;
+            arr.forEach(function (id) {
+                var ind = _.findIndex(me.resultItems, {id: id});
+                if (ind !== -1) {
+                    me.resultItems[ind].$el.remove();
+                    me.resultItems.splice(ind, 1);
+                }
+            });
+        },
+
         hideResults: function () {
             if (this.view) {
                 this.view.$resultsContainer.hide();
@@ -186,7 +249,27 @@ define([
             }
         },
 
-        textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
+        onShowAfterSearch: function (findText) {
+            var viewport = this.getApplication().getController('Viewport');
+            if (viewport.isSearchBarVisible()) {
+                viewport.searchBar.hide();
+            }
+
+            var text = findText || this.api.asc_GetSelectedText();
+            if (text) {
+                this.view.setFindText(text);
+            } else if (text !== undefined) {
+                this.view.setFindText('');
+            }
+
+            if (text !== '' && text === this._state.searchText) {
+                this.hideResults();
+                this.api.asc_StartTextAroundSearch();
+            }
+
+            this.view.disableNavButtons();
+            this.view.focus();
+        },
 
     }, DE.Controllers.Search || {}));
 });

apps/documenteditor/main/app/view/LeftMenu.js

@@ -379,7 +379,7 @@ define([
             this.btnThumbnails.setDisabled(false);
         },
 
-        showMenu: function(menu, opts) {
+        showMenu: function(menu, opts, suspendAfter) {
             var re = /^(\w+):?(\w*)$/.exec(menu);
             if ( re[1] == 'file' ) {
                 if ( !this.menuFile.isVisible() ) {
@@ -417,7 +417,7 @@ define([
                         this.btnSearchBar.toggle(true);
                         this.onBtnMenuClick(this.btnSearchBar);
                         this.onCoauthOptions();
-                        this.fireEvent('search:aftershow', this);
+                        !suspendAfter && this.fireEvent('search:aftershow', this);
                     }
                 }
                 /** coauthoring end **/