[DE] New search: make auto search
This commit is contained in:
JuliaSvinareva
parent
c56c0b47be
commit
e7cc5fa105
|
|
@ -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) {
|
||||
if ( $('.asc-loadmask').length ) return;
|
||||
var opts = {
|
||||
textsearch : this.inputSearch.val()
|
||||
};
|
||||
this.fireEvent('search:'+action, [this, opts, false]);
|
||||
onBtnNextClick: function(action) {
|
||||
this.fireEvent('search:'+action, [this.inputSearch.val(), 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'
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
var opts = {
|
||||
textsearch : this.inputText.getValue(),
|
||||
textreplace : this.inputReplace.getValue(),
|
||||
matchcase : this.chCaseSensitive.checked,
|
||||
useregexp : this.chUseRegExp.checked,
|
||||
matchword : this.chMatchWord && this.chMatchWord.checked,
|
||||
//highlight : this.miHighlight.checked
|
||||
};
|
||||
this.fireEvent('search:'+action, [this, opts, true]);
|
||||
onBtnNextClick: function (action) {
|
||||
this.fireEvent('search:'+action, [this.inputText.getValue(), true]);
|
||||
},
|
||||
|
||||
onReplaceClick: function (action) {
|
||||
this.fireEvent('search:'+action, [this.inputText.getValue(), this.inputReplace.getValue()]);
|
||||
},
|
||||
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,8 +80,7 @@ define([
|
|||
},
|
||||
'LeftMenu': {
|
||||
'comments:show': _.bind(this.commentsShowHide, this, 'show'),
|
||||
'comments:hide': _.bind(this.commentsShowHide, this, 'hide'),
|
||||
'search:aftershow': _.bind(this.onShowAfterSearch, this)
|
||||
'comments:hide': _.bind(this.commentsShowHide, this, 'hide')
|
||||
},
|
||||
'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.onShowAfterSearch(findText);
|
||||
this.leftMenu.showMenu('advancedsearch', undefined, true);
|
||||
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';
|
||||
|
|
|
|||
|
|
@ -55,19 +55,32 @@ define([
|
|||
initialize: function () {
|
||||
this.addListeners({
|
||||
'SearchBar': {
|
||||
'search:back': _.bind(this.onQuerySearch, this, 'back'),
|
||||
'search:next': _.bind(this.onQuerySearch, this, 'next'),
|
||||
'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')
|
||||
},
|
||||
'Common.Views.SearchPanel': {
|
||||
'search:back': _.bind(this.onQuerySearch, this, 'back'),
|
||||
'search:next': _.bind(this.onQuerySearch, this, 'next'),
|
||||
'search:back': _.bind(this.onSearchNext, this, 'back'),
|
||||
'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) {
|
||||
if (opts.textsearch && opts.textsearch.length) {
|
||||
this.hideResults();
|
||||
onChangeSearchOption: function (option, checked) {
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
var searchSettings = new AscCommon.CSearchSettings();
|
||||
searchSettings.put_Text(opts.textsearch);
|
||||
searchSettings.put_MatchCase(opts.matchcase);
|
||||
searchSettings.put_WholeWords(opts.matchword);
|
||||
if (!this.api.asc_findText(searchSettings, d != 'back')) {
|
||||
var me = this;
|
||||
me.view.updateResultsNumber(undefined, 0);
|
||||
Common.UI.info({
|
||||
msg: this.textNoTextFound,
|
||||
callback: function() {
|
||||
//me.dlgSearch.focus();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.api.asc_StartTextAroundSearch();
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onQueryReplace: function(w, opts) {
|
||||
if (!_.isEmpty(opts.textsearch)) {
|
||||
this.hideResults();
|
||||
onInputSearchChange: function (text) {
|
||||
var me = this;
|
||||
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();
|
||||
searchSettings.put_Text(opts.textsearch);
|
||||
searchSettings.put_MatchCase(opts.matchcase);
|
||||
searchSettings.put_WholeWords(opts.matchword);
|
||||
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();
|
||||
me.hideResults();
|
||||
me._state.searchText = me._state.newSearchText;
|
||||
if (me.onQuerySearch() && me.view.$el.is(':visible')) {
|
||||
me.api.asc_StartTextAroundSearch();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.api.asc_StartTextAroundSearch();
|
||||
clearInterval(me.searchTimer);
|
||||
me.searchTimer = undefined;
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onQueryReplaceAll: function(w, opts) {
|
||||
if (!_.isEmpty(opts.textsearch)) {
|
||||
this.hideResults();
|
||||
onQuerySearch: function (d, w) {
|
||||
var searchSettings = new AscCommon.CSearchSettings();
|
||||
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_MatchCase(opts.matchcase);
|
||||
searchSettings.put_WholeWords(opts.matchword);
|
||||
this.api.asc_replaceText(searchSettings, opts.textreplace, true);
|
||||
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.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 || {}));
|
||||
});
|
||||
|
|
@ -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 **/
|
||||
|
|
|
|||
Loading…
Reference in a new issue