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

[DE PE mobile] Correcting Find and Replace

Browse source
This commit is contained in:
SergeyEzhin 2021-03-15 21:35:19 +03:00
parent e47157f949
commit 32f5bd693e
8 changed files with 138 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/mobile/lib/controller/Search.jsx
View file

@ -1,7 +1,5 @@
import React from 'react';
import SearchView, {SearchSettingsView} from '../view/Search';
import { useTranslation, withTranslation } from 'react-i18next';
import {SearchView, SearchSettingsView} from '../view/Search';
const SearchController = props => {
const onSearchQuery = params => {

78
apps/common/mobile/lib/view/Search.jsx
View file

@ -6,7 +6,6 @@ import { Dom7 } from 'framework7';
import { Device } from '../../../../common/mobile/utils/device';
import { observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import { useTranslation, withTranslation } from 'react-i18next';
const searchOptions = observable({
usereplace: false
@ -25,8 +24,13 @@ class SearchSettingsView extends Component {
this.state = {
useReplace: false,
caseSensitive: false,
markResults: false
// caseSensitive: false,
// markResults: false
searchIn: 0,
searchBy: 1,
lookIn: 1,
isMatchCase: false,
isMatchCell: false
};
}
@ -45,25 +49,21 @@ class SearchSettingsView extends Component {
render() {
const show_popover = !Device.phone;
const navbar =
<Navbar title="Find and replace">
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">Done</Link>
</NavRight>
}
</Navbar>;
// const navbar =
// <Navbar title="Find and replace">
// {!show_popover &&
// <NavRight>
// <Link popupClose=".search-settings-popup">Done</Link>
// </NavRight>
// }
// </Navbar>;
const extra = this.extraSearchOptions();
const content =
<View style={show_popover ? popoverStyle : null}>
<Page>
{navbar}
<List>
<ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
<ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List>
{ extra }
</Page>
{/* <Page> */}
{/* {navbar} */}
{extra}
{/* </Page> */}
</View>;
return (
show_popover ?
@ -73,7 +73,7 @@ class SearchSettingsView extends Component {
}
}
@observer
// @observer
class SearchView extends Component {
constructor(props) {
super(props);
@ -107,7 +107,7 @@ class SearchView extends Component {
// }
const $editor = $$('#editor_sdk');
const $replaceLink = $$('#replace-link');
// const $replaceLink = $$('#replace-link');
if (false /*iOSVersion() < 13*/) {
// $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
@ -203,11 +203,20 @@ class SearchView extends Component {
const endPoint = this.pointerPosition(e);
// console.log(endPoint);
if ( this.searchbar.enabled ) {
const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
if (this.searchbar.enabled) {
let distance;
if ( distance < 1 ) {
if(this.startPoint) {
distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 :
Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
} else {
distance = 0;
}
// const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
// Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
if (distance < 1) {
this.searchbar.disable();
}
}
@ -219,8 +228,7 @@ class SearchView extends Component {
const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
out.x = touch.pageX;
out.y = touch.pageY;
} else
if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
} else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
out.x = e.pageX;
out.y = e.pageY;
}
@ -246,9 +254,7 @@ class SearchView extends Component {
const searchQuery = this.state.searchQuery;
const replaceQuery = this.state.replaceQuery;
const isIos = Device.ios;
// const _t = this.t('View.Settings', {returnObjects: true});
// console.log(this.state.searchQuery, this.state.replaceQuery);
const { _t } = this.props;
if(this.searchbar && this.searchbar.enabled) {
usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
@ -265,13 +271,13 @@ class SearchView extends Component {
</div>
<div className="searchbar-inner__center">
<div className="searchbar-input-wrap">
<input placeholder="Search" type="search" value={searchQuery}
<input placeholder={_t.textSearch} type="search" value={searchQuery}
onChange={e => {this.changeSearchQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" />
</div>
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
<input placeholder={_t.textReplace} type="search" id="idx-replace-val" value={replaceQuery}
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
{isIos ? <i className="searchbar-icon" /> : null}
<span className="input-clear-button" />
@ -279,8 +285,8 @@ class SearchView extends Component {
</div>
<div className="buttons-row searchbar-inner__right">
<div className="buttons-row buttons-row-replace">
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>Replace</a>
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>Replace All</a>
<a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
<a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
</div>
<div className="buttons-row">
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
@ -297,4 +303,6 @@ class SearchView extends Component {
}
}
export {SearchView as default, SearchView, SearchSettingsView};
const SearchViewWithObserver = observer(SearchView);
export {SearchViewWithObserver as SearchView, SearchSettingsView};

5
apps/documenteditor/mobile/locale/en.json
View file

@ -198,7 +198,10 @@
"txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
"textNoTextFound": "Text not found",
"textReplace": "Replace",
"textReplaceAll": "Replace All"
"textReplaceAll": "Replace All",
"textCaseSensitive": "Case Sensitive",
"textHighlightResults": "Highlight Results",
"textSearch": "Search"
},
"Edit": {
"textClose": "Close",

51
apps/documenteditor/mobile/src/controller/Search.jsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import { List, ListItem, Toggle } from 'framework7-react';
import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react';
import { useTranslation, withTranslation } from 'react-i18next';
import { withTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
class SearchSettings extends SearchSettingsView {
constructor(props) {
@ -18,21 +19,43 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() {
const anc_markup = super.extraSearchOptions();
const show_popover = !Device.phone;
const { t } = this.props;
const _t = t("Settings", {returnObjects: true});
const markup = <List>
<ListItem title="Case sensitive">
const markup = (
<Page>
<Navbar title={_t.textFindAndReplace}>
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List>
<List>
<ListItem title={_t.textCaseSensitive}>
<Toggle slot="after" className="toggle-case-sensitive" />
</ListItem>
<ListItem title="Highlight results">
<ListItem title={_t.textHighlightResults}>
<Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
</ListItem>
</List>;
</List>
</Page>
);
return {...anc_markup, ...markup};
}
}
class DESearchView extends SearchView {
constructor(props) {
super(props);
}
searchParams() {
let params = super.searchParams();
@ -57,16 +80,16 @@ class DESearchView extends SearchView {
}
}
const Search = props => {
// const { t } = useTranslation();
// const _t = t('View.Settings', {returnObjects: true});
const Search = withTranslation()(props => {
const { t } = props;
const _t = t('Settings', {returnObjects: true});
const onSearchQuery = params => {
const api = Common.EditorApi.get();
if (params.find && params.find.length) {
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
f7.dialog.alert(null, 'Text not Found');
f7.dialog.alert(null, _t.textNoTextFound);
}
}
};
@ -87,7 +110,9 @@ const Search = props => {
}
}
return <DESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
};
return <DESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
});
export {Search, SearchSettings}
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
export {Search, SearchSettingsWithTranslation as SearchSettings}

4
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -71,7 +71,7 @@ export default class MainPage extends Component {
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
{/* { Device.phone ? null : <Search /> } */}
<Search />
<Search useSuspense={false} />
</Navbar>
{/* Page content */}
<View id="editor_sdk">
@ -80,7 +80,7 @@ export default class MainPage extends Component {
{/* {
Device.phone ? null : <SearchSettings />
} */}
<SearchSettings />
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />

15
apps/presentationeditor/mobile/locale/en.json
View file

@ -71,7 +71,14 @@
"textAddress": "address:",
"textEmail": "email:",
"textTel": "tel:",
"textPoweredBy": "Powered By"
"textPoweredBy": "Powered By",
"textReplaceAll": "Replace All",
"textFind": "Find",
"textSearch": "Search",
"textCaseSensitive": "Case Sensitive",
"textHighlight": "Highlight Results",
"textReplace": "Replace",
"textNoTextFound": "Text not Found"
},
"Add": {
"textSlide": "Slide",
@ -245,14 +252,14 @@
"textDisplay": "Display",
"textScreenTip": "Screen Tip",
"textDefault": "Selected text",
"textNoTextFound": "Text not found",
"textReplaceAll": "Replace All",
"textFind": "Find",
"textFindAndReplace": "Find and Replace",
"textDone": "Done",
"textSearch": "Search",
"textCase": "Case sensitive",
"textHighlight": "Highlight results"
"textCaseSensitive": "Case Sensitive",
"textHighlight": "Highlight Results",
"textNoTextFound": "Text not Found"
}
},
"Common": {

49
apps/presentationeditor/mobile/src/controller/Search.jsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import { List, ListItem, Toggle } from 'framework7-react';
import { List, ListItem, Toggle, Page, Navbar, NavRight, Link } from 'framework7-react';
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react';
import { useTranslation, withTranslation } from 'react-i18next';
import { withTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device';
class SearchSettings extends SearchSettingsView {
constructor(props) {
@ -11,18 +12,40 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() {
const anc_markup = super.extraSearchOptions();
const show_popover = !Device.phone;
const { t } = this.props;
const _t = t("View.Settings", {returnObjects: true});
const markup = <List>
<ListItem title="Case sensitive">
const markup = (
<Page>
<Navbar title={_t.textFindAndReplace}>
{!show_popover &&
<NavRight>
<Link popupClose=".search-settings-popup">{_t.textDone}</Link>
</NavRight>
}
</Navbar>
<List>
<ListItem radio title={_t.textFind} name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')} />
<ListItem radio title={_t.textFindAndReplace} name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')} />
</List>
<List>
<ListItem title={_t.textCaseSensitive}>
<Toggle slot="after" className="toggle-case-sensitive" />
</ListItem>
</List>;
</List>
</Page>
);
return {...anc_markup, ...markup};
}
}
class PESearchView extends SearchView {
constructor(props) {
super(props);
}
searchParams() {
let params = super.searchParams();
@ -39,16 +62,16 @@ class PESearchView extends SearchView {
}
}
const Search = props => {
// const { t } = useTranslation();
// const _t = t('View.Settings', {returnObjects: true});
const Search = withTranslation()(props => {
const { t } = props;
const _t = t('View.Settings', {returnObjects: true});
const onSearchQuery = params => {
const api = Common.EditorApi.get();
if (params.find && params.find.length) {
if (!api.findText(params.find, params.forward, params.caseSensitive) ) {
f7.dialog.alert(null, 'Text not Found');
f7.dialog.alert(null, _t.textNoTextFound);
}
}
};
@ -69,7 +92,9 @@ const Search = props => {
}
}
return <PESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
};
return <PESearchView _t={_t} onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
});
export {Search, SearchSettings}
const SearchSettingsWithTranslation = withTranslation()(SearchSettings);
export {Search, SearchSettingsWithTranslation as SearchSettings}

4
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -64,12 +64,12 @@ export default class MainPage extends Component {
<Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
<Search />
<Search useSuspense={false} />
</Navbar>
{/* Page content */}
<View id="editor_sdk" />
<SearchSettings />
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :