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

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

@ -1,8 +1,9 @@
import React from 'react'; 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 { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react'; 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 { class SearchSettings extends SearchSettingsView {
constructor(props) { constructor(props) {
@ -18,21 +19,43 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() { extraSearchOptions() {
const anc_markup = super.extraSearchOptions(); const anc_markup = super.extraSearchOptions();
const show_popover = !Device.phone;
const { t } = this.props;
const _t = t("Settings", {returnObjects: true});
const markup = <List> const markup = (
<ListItem title="Case sensitive"> <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" /> <Toggle slot="after" className="toggle-case-sensitive" />
</ListItem> </ListItem>
<ListItem title="Highlight results"> <ListItem title={_t.textHighlightResults}>
<Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} /> <Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
</ListItem> </ListItem>
</List>; </List>
</Page>
);
return {...anc_markup, ...markup}; return {...anc_markup, ...markup};
} }
} }
class DESearchView extends SearchView { class DESearchView extends SearchView {
constructor(props) {
super(props);
}
searchParams() { searchParams() {
let params = super.searchParams(); let params = super.searchParams();
@ -57,16 +80,16 @@ class DESearchView extends SearchView {
} }
} }
const Search = props => { const Search = withTranslation()(props => {
// const { t } = useTranslation(); const { t } = props;
// const _t = t('View.Settings', {returnObjects: true}); const _t = t('Settings', {returnObjects: true});
const onSearchQuery = params => { const onSearchQuery = params => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (params.find && params.find.length) { if (params.find && params.find.length) {
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) { 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> <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight> </NavRight>
{/* { Device.phone ? null : <Search /> } */} {/* { Device.phone ? null : <Search /> } */}
<Search /> <Search useSuspense={false} />
</Navbar> </Navbar>
{/* Page content */} {/* Page content */}
<View id="editor_sdk"> <View id="editor_sdk">
@ -80,7 +80,7 @@ export default class MainPage extends Component {
{/* { {/* {
Device.phone ? null : <SearchSettings /> Device.phone ? null : <SearchSettings />
} */} } */}
<SearchSettings /> <SearchSettings useSuspense={false} />
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} /> <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />

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

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

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

@ -1,8 +1,9 @@
import React from 'react'; 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 { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
import { f7 } from 'framework7-react'; 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 { class SearchSettings extends SearchSettingsView {
constructor(props) { constructor(props) {
@ -11,18 +12,40 @@ class SearchSettings extends SearchSettingsView {
extraSearchOptions() { extraSearchOptions() {
const anc_markup = super.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> const markup = (
<ListItem title="Case sensitive"> <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" /> <Toggle slot="after" className="toggle-case-sensitive" />
</ListItem> </ListItem>
</List>; </List>
</Page>
);
return {...anc_markup, ...markup}; return {...anc_markup, ...markup};
} }
} }
class PESearchView extends SearchView { class PESearchView extends SearchView {
constructor(props) {
super(props);
}
searchParams() { searchParams() {
let params = super.searchParams(); let params = super.searchParams();
@ -39,16 +62,16 @@ class PESearchView extends SearchView {
} }
} }
const Search = props => { const Search = withTranslation()(props => {
// const { t } = useTranslation(); const { t } = props;
// const _t = t('View.Settings', {returnObjects: true}); const _t = t('View.Settings', {returnObjects: true});
const onSearchQuery = params => { const onSearchQuery = params => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
if (params.find && params.find.length) { if (params.find && params.find.length) {
if (!api.findText(params.find, params.forward, params.caseSensitive) ) { 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-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> <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight> </NavRight>
<Search /> <Search useSuspense={false} />
</Navbar> </Navbar>
{/* Page content */} {/* Page content */}
<View id="editor_sdk" /> <View id="editor_sdk" />
<SearchSettings /> <SearchSettings useSuspense={false} />
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :