Compare commits

...

3 commits

Author SHA1 Message Date
JuliaSvinareva e27d11189e [DE PE SSE] Fix ability to navigate through search results by enter key 2022-07-21 20:44:48 +03:00
JuliaSvinareva e35f9f70b2 [DE PE SSE] Fix search styles 2022-07-21 18:26:46 +03:00
JuliaSvinareva fb067d893f [DE PE SSE] Add ability to navigate through search results by enter key 2022-07-20 23:04:55 +03:00
7 changed files with 161 additions and 18 deletions

View file

@ -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">

View file

@ -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,38 @@ 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');
if (e.keyCode === Common.UI.Keys.RETURN) {
this.fireEvent('search:keydown-next', [action, this.inputSearch.val(), e]);
} else {
this.onMousedown();
}
},
onMousedown: function () {
this.fireEvent('search:enable-key');
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 () {

View file

@ -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,38 @@ 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');
if (e.keyCode === Common.UI.Keys.RETURN) {
this.fireEvent('search:keydown-next', [action, this.inputText.getValue(), e]);
} else {
this.onMousedown();
}
},
onMousedown: function () {
this.fireEvent('search:enable-key');
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) {

View file

@ -98,6 +98,11 @@
&:first-of-type {
margin-left: 7px;
}
.focused:not(.disabled) {
.border-radius(@border-radius-small);
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus;
}
}
}
}
@ -113,6 +118,11 @@
display: table-row;
}
.btn-text-default {
display: inline-block;
width: auto;
}
#search-header {
position: absolute;
height: 45px;
@ -155,11 +165,29 @@
}
#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) {
.border-radius(@border-radius-small);
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus;
}
}
}
.search-options-block {

View file

@ -66,7 +66,9 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'Common.Views.SearchPanel': {
'search:back': _.bind(this.onSearchNext, this, 'back'),
@ -78,6 +80,8 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'LeftMenu': {
'search:aftershow': _.bind(this.onShowAfterSearch, this)
@ -155,7 +159,18 @@ define([
this.api.asc_StartTextAroundSearch();
}
}
if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
this.api.asc_enableKeyEvents(false);
}
}
},
onKeydownNext: function (type, text, e) {
this.onSearchNext(type, text, e);
},
enableKeyEvents: function () {
this.api.asc_enableKeyEvents(true);
},
onInputSearchChange: function (text) {

View file

@ -64,7 +64,9 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'Common.Views.SearchPanel': {
'search:back': _.bind(this.onSearchNext, this, 'back'),
@ -76,6 +78,8 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'LeftMenu': {
'search:aftershow': _.bind(this.onShowAfterSearch, this)
@ -152,7 +156,18 @@ define([
this.api.asc_StartTextAroundSearch();
}
}
if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
this.api.asc_enableKeyEvents(false);
}
}
},
onKeydownNext: function (type, text, e) {
this.onSearchNext(type, text, e);
},
enableKeyEvents: function () {
this.api.asc_enableKeyEvents(true);
},
onInputSearchChange: function (text) {

View file

@ -60,7 +60,9 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'Common.Views.SearchPanel': {
'search:back': _.bind(this.onSearchNext, this, 'back'),
@ -71,7 +73,9 @@ 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),
'search:enable-key': _.bind(this.enableKeyEvents, this)
},
'LeftMenu': { // TO DO
'search:aftershow': _.bind(this.onShowAfterSearch, this)
@ -209,7 +213,18 @@ define([
this.api.asc_StartTextAroundSearch();
}
}
if (type !== 'keydown' && e.keyCode !== Common.UI.Keys.RETURN) {
this.api.asc_enableKeyEvents(false);
}
}
},
onKeydownNext: function (type, text, e) {
this.onSearchNext(type, text, e);
},
enableKeyEvents: function () {
this.api.asc_enableKeyEvents(true);
},
onInputSearchChange: function (text) {