[PE] Add methods for auto search

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

@@ -79,8 +79,7 @@ define([
                 'LeftMenu': {
                     'panel:show':    _.bind(this.menuExpand, this),
                     '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'),
@@ -655,15 +654,17 @@ define([
                         var selectedText = this.api.asc_GetSelectedText();
                         if (this.isSearchPanelVisible()) {
                             selectedText && this.leftMenu.panelSearch.setFindText(selectedText);
-                            this.leftMenu.panelSearch.focus(s);
+                            this.leftMenu.panelSearch.focus(selectedText !== '' ? s : 'search');
+                            this.leftMenu.fireEvent('search:aftershow', this.leftMenu, selectedText);
                             return false;
                         } else if (this.getApplication().getController('Viewport').isSearchBarVisible()) {
+                            var viewport = this.getApplication().getController('Viewport');
                             if (s === 'replace') {
-                                this.getApplication().getController('Viewport').header.btnSearch.toggle(false);
+                                viewport.header.btnSearch.toggle(false);
-                                this.onShowHideSearch(true, this.getApplication().getController('Viewport').searchBar.inputSearch.val());
+                                this.onShowHideSearch(true, viewport.searchBar.inputSearch.val());
                             } else {
-                                selectedText && this.getApplication().getController('Viewport').searchBar.setText(selectedText);
+                                selectedText && viewport.searchBar.setText(selectedText);
-                                this.getApplication().getController('Viewport').searchBar.focus();
+                                viewport.searchBar.focus();
                                 return false;
                             }
                         } else if (s === 'search') {
@@ -803,30 +804,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/presentationeditor/main/app/controller/Search.js

@@ -55,19 +55,34 @@ 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'),
+                    'show': _.bind(this.onShowPanel, this),
+                    'hide': _.bind(this.onHidePanel, this),
+                },
+                'LeftMenu': {
+                    'search:aftershow': _.bind(this.onShowAfterSearch, this)
                 }
             });
         },
         onLaunch: function () {
-            this._state = {};
+            this._state = {
+                searchText: '',
+                matchCase: false,
+                matchWord: false,
+                useRegExp: false
+            };
         },
 
         setMode: function (mode) {
@@ -78,6 +93,10 @@ 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));
+                this.api.asc_registerCallback('asc_onRemoveTextAroundSearch', _.bind(this.onApiRemoveTextAroundSearch, this));
             }
             return this;
         },
@@ -87,62 +106,257 @@ 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) {
+                case 'case-sensitive':
+                    this._state.matchCase = checked;
+                    break;
+                case 'match-word':
+                    this._state.matchWord = checked;
+                    break;
+                case 'regexp':
+                    this._state.useRegExp = checked;
+                    break;
+            }
+        },
+
+        onSearchNext: function (type, text, e) {
+            if (text && text.length > 0 && (type === 'keydown' && e.keyCode === Common.UI.Keys.RETURN || type !== 'keydown')) {
+                this._state.searchText = text;
+                if (this.onQuerySearch(type) && this.searchTimer) {
+                    this.hideResults();
+                    clearInterval(this.searchTimer);
+                    this.searchTimer = undefined;
+                    if (this.view.$el.is(':visible')) {
+                        this.api.asc_StartTextAroundSearch();
+                    }
+                }
+            }
+        },
+
+        onInputSearchChange: function (text) {
+            var me = this;
+            if (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;
+
+                        me.hideResults();
+                        me._state.searchText = me._state.newSearchText;
+                        if (me._state.newSearchText !== '' && me.onQuerySearch()) {
+                            if (me.view.$el.is(':visible')) {
+                                me.api.asc_StartTextAroundSearch();
+                            }
+                            me.view.disableReplaceButtons(false);
+                        } else if (me._state.newSearchText === '') {
+                            me.view.updateResultsNumber('no-results');
+                            me.view.disableReplaceButtons(true);
+                        }
+                        clearInterval(me.searchTimer);
+                        me.searchTimer = undefined;
+                    }, 10);
+                }
+            }
+        },
+
+        onQuerySearch: function (d, w) {
             var searchSettings = new AscCommon.CSearchSettings();
-                searchSettings.put_Text(opts.textsearch);
+            searchSettings.put_Text(this._state.searchText);
-                searchSettings.put_MatchCase(opts.matchcase);
+            searchSettings.put_MatchCase(this._state.matchCase);
-                searchSettings.put_WholeWords(opts.matchword);
+            searchSettings.put_WholeWords(this._state.matchWord);
             if (!this.api.asc_findText(searchSettings, d != 'back')) {
-                    var me = this;
+                this.resultItems = [];
-                    me.view.updateResultsNumber(undefined, 0);
+                this.view.updateResultsNumber(undefined, 0);
-                    Common.UI.info({
+                this.view.disableReplaceButtons(true);
-                        msg: this.textNoTextFound,
+                this._state.currentResult = 0;
-                        callback: function() {
+                this._state.resultsNumber = 0;
-                            //me.dlgSearch.focus();
+                this.view.disableNavButtons();
+                return false;
             }
-                    });
+            return true;
+        },
+
+        onQueryReplace: 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);
+                if (!this.api.asc_replaceText(searchSettings, textReplace, false)) {
+                    this.resultItems = [];
+                    this.view.updateResultsNumber(undefined, 0);
+                    this.view.disableReplaceButtons(true);
+                    this._state.currentResult = 0;
+                    this._state.resultsNumber = 0;
+                    this.view.disableNavButtons();
                 }
             }
         },
 
-        onQueryReplace: function(w, opts) {
+        onQueryReplaceAll: function(textSearch, textReplace) {
-            if (!_.isEmpty(opts.textsearch)) {
+            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);
-                if (!this.api.asc_replaceText(searchSettings, opts.textreplace, false)) {
+                this.api.asc_replaceText(searchSettings, textReplace, true);
-                    var me = this;
-                    me.view.updateResultsNumber(undefined, 0);
-                    Common.UI.info({
-                        msg: this.textNoTextFound,
-                        callback: function() {
-                            me.view.focus();
-                        }
-                    });
-                }
-            }
-        },
 
-        onQueryReplaceAll: function(w, opts) {
+                this.hideResults();
-            if (!_.isEmpty(opts.textsearch)) {
+                this.resultItems = [];
-                var searchSettings = new AscCommon.CSearchSettings();
-                searchSettings.put_Text(opts.textsearch);
-                searchSettings.put_MatchCase(opts.matchcase);
-                searchSettings.put_WholeWords(opts.matchword);
-                this.api.asc_replaceText(searchSettings, opts.textreplace, true);
             }
         },
 
         onUpdateSearchCurrent: function (current, all) {
+            if (current === -1) return;
+            this._state.currentResult = current;
+            this._state.resultsNumber = all;
             if (this.view) {
                 this.view.updateResultsNumber(current, all);
+                this.view.disableNavButtons(current, all);
+                if (this.resultItems.length > 0) {
+                    this.resultItems.forEach(function (item) {
+                        item.selected = false;
+                    });
+                    if (this.resultItems[current]) {
+                        this.resultItems[current].selected = true;
+                        $('#search-results').find('.item').removeClass('selected');
+                        $(this.resultItems[current].el).addClass('selected');
+                        this.scrollToSelectedResult(current);
+                    }
+                }
             }
             Common.NotificationCenter.trigger('search:updateresults', current, all);
         },
 
-        textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
+        scrollToSelectedResult: function (ind) {
+            var index = ind !== undefined ? ind : _.findIndex(this.resultItems, {selected: true});
+            if (index !== -1) {
+                var item = this.resultItems[index].$el,
+                    itemHeight = item.outerHeight(),
+                    itemTop = item.position().top,
+                    container = this.view.$resultsContainer,
+                    containerHeight = container.outerHeight(),
+                    containerTop = container.scrollTop();
+                if (itemTop < 0 || (containerTop === 0 && itemTop > containerHeight)) {
+                    container.scroller.scrollTop(containerTop + itemTop - 12);
+                } else if (itemTop + itemHeight > containerHeight) {
+                    container.scroller.scrollTop(containerTop + itemHeight);
+                }
+            }
+        },
+
+        onStartTextAroundSearch: function () {
+            if (this.view) {
+                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) {
+                if (data.length > 300) return;
+                var me = this;
+                me.resultItems = [];
+                data.forEach(function (item, ind) {
+                    var el = document.createElement("div"),
+                        isSelected = ind === me._state.currentResult;
+                    el.className = 'item';
+                    el.innerHTML = item[1].trim();
+                    me.view.$resultsContainer.append(el);
+                    if (isSelected) {
+                        $(el).addClass('selected');
+                    }
+
+                    var resultItem = {id: item[0], $el: $(el), el: el, selected: isSelected};
+                    me.resultItems.push(resultItem);
+                    $(el).on('click', _.bind(function (el) {
+                        var id = item[0];
+                        me.api.asc_SelectSearchElement(id);
+                    }, me));
+                });
+
+                this.view.$resultsContainer.show();
+            }
+        },
+
+        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();
+                this.view.$resultsContainer.empty();
+            }
+        },
+
+        onShowAfterSearch: function (findText) {
+            var viewport = this.getApplication().getController('Viewport');
+            if (viewport.isSearchBarVisible()) {
+                viewport.searchBar.hide();
+            }
+
+            var text = findText || this.api.asc_GetSelectedText() || this._state.searchText;
+            if (text) {
+                this.view.setFindText(text);
+            } else if (text !== undefined) {
+                this.view.setFindText('');
+            }
+
+            this.hideResults();
+            if (text !== '' && text === this._state.searchText) { // search was made
+                this.view.disableReplaceButtons(false);
+                this.api.asc_StartTextAroundSearch();
+            } else if (text !== '') { // search wasn't made
+                this.onInputSearchChange(text);
+            } else {
+                this.resultItems = [];
+                this.view.disableReplaceButtons(true);
+                this.view.clearResultsNumber();
+            }
+            this.view.disableNavButtons(this._state.currentResult, this._state.resultsNumber);
+        },
+
+        onShowPanel: function () {
+            if (this.resultItems && this.resultItems.length > 0 && !this._state.isStartedAddingResults) {
+                var me = this;
+                this.view.$resultsContainer.show();
+                this.resultItems.forEach(function (item) {
+                    me.view.$resultsContainer.append(item.el);
+                    if (item.selected) {
+                        $(item.el).addClass('selected');
+                    }
+                    $(item.el).on('click', function (el) {
+                        me.api.asc_SelectSearchElement(item.id);
+                        $('#search-results').find('.item').removeClass('selected');
+                        $(el.currentTarget).addClass('selected');
+                    });
+                });
+                this.scrollToSelectedResult();
+            }
+        },
+
+        onHidePanel: function () {
+            this.hideResults();
+        },
+
+        notcriticalErrorTitle: 'Warning',
+        warnReplaceString: '{0} is not a valid special character for the Replace With box.'
 
     }, PE.Controllers.Search || {}));
 });

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

@@ -72,7 +72,10 @@ define([
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
-                'click #left-btn-searchbar': _.bind(this.onCoauthOptions, this),
+                'click #left-btn-searchbar':  _.bind(function () {
+                    this.onCoauthOptions();
+                    this.fireEvent('search:aftershow', this.leftMenu);
+                }, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -255,6 +258,7 @@ define([
             if (this.panelSearch) {
                 if (this.btnSearchBar.pressed) {
                     this.panelSearch.show();
+                    this.panelSearch.focus()
                 } else {
                     this.panelSearch.hide();
                 }
@@ -346,7 +350,7 @@ define([
             this.btnPlugins.setDisabled(disable);
         },
 
-        showMenu: function(menu, opts) {
+        showMenu: function(menu, opts, suspendAfter) {
             var re = /^(\w+):?(\w*)$/.exec(menu);
             if ( re[1] == 'file' ) {
                 this.menuFile.show(re[2].length ? re[2] : undefined, opts);
@@ -374,7 +378,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 **/