Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Search and replace.

Browse source
This commit is contained in:
Alexander Yuzhin 2016-11-16 13:44:42 +03:00
parent 0255f1b309
commit 8d4a878299
5 changed files with 125 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/mobile/resources/less/material/_container.less
View file

@ -17,7 +17,9 @@
&.popover {
width: 360px;
}
}
.settings {
&.popup,
&.popover {
.list-block {

102
apps/documenteditor/mobile/app/controller/Search.js
View file

@ -81,7 +81,8 @@ define([
'Search': {
'searchbar:show' : this.onSearchbarShow,
'searchbar:hide' : this.onSearchbarHide,
'searchbar:render' : this.onSearchbarRender
'searchbar:render' : this.onSearchbarRender,
'searchbar:showsettings': this.onSearchbarSettings
}
});
},
@ -129,7 +130,9 @@ define([
},
onSearchbarRender: function(bar) {
var me = this;
var me = this,
searchString = Common.SharedSettings.get('search-search') || '',
replaceString = Common.SharedSettings.get('search-replace')|| '';
me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', {
customSearch: true,
@ -147,9 +150,39 @@ define([
me.searchPrev = $('.searchbar.document .prev');
me.searchNext = $('.searchbar.document .next');
me.replaceBtn = $('.searchbar.document .link.replace');
me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
me.searchNext.single('click', _.bind(me.onSearchNext, me));
me.replaceBtn.single('click', _.bind(me.onReplace, me));
me.searchBar.search(searchString);
me.replaceBar.search(replaceString);
},
onSearchbarSettings: function (view) {
var strictBool = function (settingName) {
var value = Common.SharedSettings.get(settingName);
return !_.isUndefined(value) && (value === true);
};
var me = this,
isReplace = strictBool('search-is-replace'),
isCaseSensitive = strictBool('search-case-sensitive'),
isHighlight = strictBool('search-highlight'),
$pageSettings = $('.page[data-page=search-settings]'),
$inputType = $pageSettings.find('input[name=search-type]'),
$inputCase = $pageSettings.find('#search-case-sensitive input:checkbox'),
$inputHighlight = $pageSettings.find('#search-highlight-results input:checkbox');
$inputType.val([isReplace ? 'replace' : 'search']);
$inputCase.attr('checked', isCaseSensitive);
$inputHighlight.attr('checked', isHighlight);
// init events
$inputType.single('change', _.bind(me.onTypeChange, me));
$inputCase.single('click', _.bind(me.onCaseClick, me));
$inputHighlight.single('click', _.bind(me.onHighlightClick, me));
},
onSearchbarShow: function(bar) {
@ -168,12 +201,15 @@ define([
var me = this,
isEmpty = (search.query.trim().length < 1);
_.each([me.searchPrev, me.searchNext], function(btn) {
btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
Common.SharedSettings.set('search-search', search.query);
_.each([me.searchPrev, me.searchNext, me.replaceBtn], function(btn) {
btn.toggleClass('disabled', isEmpty);
});
},
onSearchClear: function(search) {
Common.SharedSettings.set('search-search', '');
// window.focus();
// document.activeElement.blur();
},
@ -182,6 +218,7 @@ define([
var me = this,
isEmpty = (replace.query.trim().length < 1);
Common.SharedSettings.set('search-replace', replace.query);
},
onReplaceEnable: function (bar) {
@ -189,7 +226,7 @@ define([
},
onReplaceClear: function(replace) {
//
Common.SharedSettings.set('search-replace', '');
},
onSearchPrev: function(btn) {
@ -200,9 +237,16 @@ define([
this.onQuerySearch(this.searchBar.query, 'next');
},
onQuerySearch: function(query, direction, opts) {
onReplace: function (btn) {
this.onQueryReplace(this.searchBar.query, this.replaceBar.query);
},
onQuerySearch: function(query, direction) {
var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
matchword = Common.SharedSettings.get('search-highlight') || false;
if (query && query.length) {
if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
if (!this.api.asc_findText(query, direction != 'back', matchcase, matchword)) {
var me = this;
uiApp.alert(
'',
@ -215,6 +259,50 @@ define([
}
},
onQueryReplace: function(search, replace) {
var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
matchword = Common.SharedSettings.get('search-highlight') || false;
if (search && search.length) {
if (!this.api.asc_replaceText(search, replace, false, matchcase, matchword)) {
var me = this;
uiApp.alert(
'',
me.textNoTextFound,
function () {
me.searchBar.input.focus();
}
);
}
}
},
onQueryReplaceAll: function(search, replace) {
var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
matchword = Common.SharedSettings.get('search-highlight') || false;
if (search && search.length) {
this.api.asc_replaceText(search, replace, true, matchcase, matchword);
}
},
onTypeChange: function (e) {
var me = this,
$target = $(e.currentTarget),
isReplace = ($target.val() === 'replace');
Common.SharedSettings.set('search-is-replace', isReplace);
$('.searchbar.document').toggleClass('replace', isReplace);
},
onCaseClick: function (e) {
Common.SharedSettings.set('search-case-sensitive', $(e.currentTarget).is(':checked'));
},
onHighlightClick: function (e) {
Common.SharedSettings.set('search-highlight', $(e.currentTarget).is(':checked'));
},
// API handlers
textNoTextFound : 'Text not found',

8
apps/documenteditor/mobile/app/template/Search.template
View file

@ -1,6 +1,6 @@
<!--Toolbar panel-->
<div id="search-panel-view">
<div class="searchbar document navbar navbar-hidden replace">
<div class="searchbar document navbar navbar-hidden">
<div class="navbar-inner">
<div class="left">
<a id="search-settings" href="#" class="link icon-only"><i class="icon icon-settings"></i></a>
@ -42,12 +42,13 @@
<div id="search-settings-view">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Find and Replace</div>
<div class="center sliding"><% if (isEdit) { %>Find and Replace<% } else { %>Find<% } %></div>
<div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b>Done</b></a><% } %></div>
</div>
</div>
<div class="page">
<div class="page" data-page="search-settings">
<div class="page-content">
<% if (isEdit) { %>
<div class="list-block">
<ul>
<li>
@ -70,6 +71,7 @@
</li>
</ul>
</div>
<% } %>
<div class="list-block">
<ul>
<li>

6
apps/documenteditor/mobile/app/view/Search.js
View file

@ -132,6 +132,8 @@ define([
$$('.view.search-settings-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
$$('.view.search-settings-view .navbar').prependTo('.view.search-settings-view > .pages > .page');
}
me.fireEvent('searchbar:showsettings', me);
},
showSearch: function () {
@ -141,6 +143,10 @@ define([
if (searchBar.length < 1) {
$(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html());
// Show replace mode if needed
var isReplace = Common.SharedSettings.get('search-is-replace');
$('.searchbar.document').toggleClass('replace', !_.isUndefined(isReplace) && (isReplace === true));
me.fireEvent('searchbar:render', me);
me.fireEvent('searchbar:show', me);

68
apps/documenteditor/mobile/resources/css/app-material.css
View file

@ -5636,81 +5636,47 @@ a.item-link,
.container-settings.popover {
width: 360px;
}
.container-edit.popup .list-block ul,
.container-add.popup .list-block ul,
.container-settings.popup .list-block ul,
.container-edit.popover .list-block ul,
.container-add.popover .list-block ul,
.container-settings.popover .list-block ul {
.settings.popup .list-block ul,
.settings.popover .list-block ul {
border-radius: 0;
background: #fff;
}
.container-edit.popup .list-block:first-child,
.container-add.popup .list-block:first-child,
.container-settings.popup .list-block:first-child,
.container-edit.popover .list-block:first-child,
.container-add.popover .list-block:first-child,
.container-settings.popover .list-block:first-child {
.settings.popup .list-block:first-child,
.settings.popover .list-block:first-child {
margin-top: 0;
}
.container-edit.popup .list-block:first-child li:first-child a,
.container-add.popup .list-block:first-child li:first-child a,
.container-settings.popup .list-block:first-child li:first-child a,
.container-edit.popover .list-block:first-child li:first-child a,
.container-add.popover .list-block:first-child li:first-child a,
.container-settings.popover .list-block:first-child li:first-child a {
.settings.popup .list-block:first-child li:first-child a,
.settings.popover .list-block:first-child li:first-child a {
border-radius: 0;
}
.container-edit.popup > .content-block,
.container-add.popup > .content-block,
.container-settings.popup > .content-block,
.container-edit.popover > .content-block,
.container-add.popover > .content-block,
.container-settings.popover > .content-block,
.container-edit.popup .popover-inner > .content-block,
.container-add.popup .popover-inner > .content-block,
.container-settings.popup .popover-inner > .content-block,
.container-edit.popover .popover-inner > .content-block,
.container-add.popover .popover-inner > .content-block,
.container-settings.popover .popover-inner > .content-block {
.settings.popup > .content-block,
.settings.popover > .content-block,
.settings.popup .popover-inner > .content-block,
.settings.popover .popover-inner > .content-block {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-edit.popup .popover-view,
.container-add.popup .popover-view,
.container-settings.popup .popover-view,
.container-edit.popover .popover-view,
.container-add.popover .popover-view,
.container-settings.popover .popover-view {
.settings.popup .popover-view,
.settings.popover .popover-view {
border-radius: 3px;
}
.container-edit.popup .popover-view > .pages,
.container-add.popup .popover-view > .pages,
.container-settings.popup .popover-view > .pages,
.container-edit.popover .popover-view > .pages,
.container-add.popover .popover-view > .pages,
.container-settings.popover .popover-view > .pages {
.settings.popup .popover-view > .pages,
.settings.popover .popover-view > .pages {
border-radius: 3px;
}
.container-edit .categories,
.container-add .categories,
.container-settings .categories {
.settings .categories {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-edit .categories > .toolbar,
.container-add .categories > .toolbar,
.container-settings .categories > .toolbar {
.settings .categories > .toolbar {
top: 0;
height: 100%;
}
.container-edit .popover-inner,
.container-add .popover-inner,
.container-settings .popover-inner {
.settings .popover-inner {
height: 400px;
}
.dataview .row {