[PE mobile] Added Find and Replace
This commit is contained in:
SergeyEzhin
parent
e0258fa0b7
commit
de79f6e526
|
|
@ -55,7 +55,7 @@ class SearchSettingsView extends Component {
|
|||
</Navbar>;
|
||||
const extra = this.extraSearchOptions();
|
||||
const content =
|
||||
<View style={popoverStyle}>
|
||||
<View style={show_popover ? popoverStyle : null}>
|
||||
<Page>
|
||||
{navbar}
|
||||
<List>
|
||||
|
|
@ -83,6 +83,8 @@ class SearchView extends Component {
|
|||
replaceQuery: ''
|
||||
};
|
||||
|
||||
const $$ = Dom7;
|
||||
|
||||
$$(document).on('page:init', (e, page) => {
|
||||
if ( page.name == 'home' ) {
|
||||
this.searchbar = f7.searchbar.create({
|
||||
|
|
@ -104,7 +106,6 @@ class SearchView extends Component {
|
|||
// return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
|
||||
// }
|
||||
|
||||
const $$ = Dom7;
|
||||
const $editor = $$('#editor_sdk');
|
||||
const $replaceLink = $$('#replace-link');
|
||||
|
||||
|
|
@ -195,10 +196,12 @@ class SearchView extends Component {
|
|||
|
||||
onEditorTouchStart(e) {
|
||||
this.startPoint = this.pointerPosition(e);
|
||||
// console.log(this.startPoint);
|
||||
}
|
||||
|
||||
onEditorTouchEnd(e) {
|
||||
const endPoint = this.pointerPosition(e);
|
||||
// console.log(endPoint);
|
||||
|
||||
if ( this.searchbar.enabled ) {
|
||||
const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
|
||||
|
|
|
|||
|
|
@ -66,8 +66,6 @@ const Search = props => {
|
|||
|
||||
if (params.find && params.find.length) {
|
||||
if (!api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
|
||||
// const { t } = useTranslation();
|
||||
// const _t = t('View.Settings', {returnObjects: true});
|
||||
f7.dialog.alert(null, 'Text not Found');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,7 +244,15 @@
|
|||
"textRemoveLink": "Remove Link",
|
||||
"textDisplay": "Display",
|
||||
"textScreenTip": "Screen Tip",
|
||||
"textDefault": "Selected text"
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
81
apps/presentationeditor/mobile/src/controller/Search.jsx
Normal file
81
apps/presentationeditor/mobile/src/controller/Search.jsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import React from 'react';
|
||||
import { List, ListItem, Toggle } from 'framework7-react';
|
||||
import { SearchController, SearchView, SearchSettingsView } from '../../../../common/mobile/lib/controller/Search';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { useTranslation, withTranslation } from 'react-i18next';
|
||||
|
||||
class SearchSettings extends SearchSettingsView {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
extraSearchOptions() {
|
||||
const anc_markup = super.extraSearchOptions();
|
||||
|
||||
const markup = <List>
|
||||
<ListItem title="Case sensitive">
|
||||
<Toggle slot="after" className="toggle-case-sensitive" />
|
||||
</ListItem>
|
||||
</List>;
|
||||
|
||||
return {...anc_markup, ...markup};
|
||||
}
|
||||
}
|
||||
|
||||
class PESearchView extends SearchView {
|
||||
searchParams() {
|
||||
let params = super.searchParams();
|
||||
|
||||
const checkboxCaseSensitive = f7.toggle.get('.toggle-case-sensitive');
|
||||
const searchOptions = {
|
||||
caseSensitive: checkboxCaseSensitive.checked,
|
||||
};
|
||||
|
||||
return {...params, ...searchOptions};
|
||||
}
|
||||
|
||||
onSearchbarShow(isshowed, bar) {
|
||||
super.onSearchbarShow(isshowed, bar);
|
||||
|
||||
// const api = Common.EditorApi.get();
|
||||
// if ( isshowed ) {
|
||||
// const checkboxMarkResults = f7.toggle.get('.toggle-mark-results');
|
||||
// api.asc_selectSearchingResults(checkboxMarkResults.checked);
|
||||
// } else api.asc_selectSearchingResults(false);
|
||||
}
|
||||
}
|
||||
|
||||
const Search = props => {
|
||||
// const { t } = useTranslation();
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onReplaceQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, false, params.caseSensitive);
|
||||
}
|
||||
}
|
||||
|
||||
const onReplaceAllQuery = params => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (params.find && params.find.length) {
|
||||
api.asc_replaceText(params.find, params.replace, true, params.caseSensitive);
|
||||
}
|
||||
}
|
||||
|
||||
return <PESearchView onSearchQuery={onSearchQuery} onReplaceQuery={onReplaceQuery} onReplaceAllQuery={onReplaceAllQuery} />
|
||||
};
|
||||
|
||||
export {Search, SearchSettings}
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
@themeColor: #aa5252;
|
||||
|
||||
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
|
||||
|
||||
@import '../../../../common/mobile/resources/less/_mixins.less';
|
||||
@import '../../../../common/mobile/resources/less/collaboration.less';
|
||||
@import '../../../../common/mobile/resources/less/common.less';
|
||||
@import '../../../../common/mobile/resources/less/common-ios.less';
|
||||
@import '../../../../common/mobile/resources/less/common-material.less';
|
||||
@import '../../../../common/mobile/resources/less/icons.less';
|
||||
@import '../../../../common/mobile/resources/less/dataview.less';
|
||||
@import '../../../../common/mobile/resources/less/about.less';
|
||||
@import '../../../../common/mobile/resources/less/search.less';
|
||||
@import './app-material.less';
|
||||
@import './app-ios.less';
|
||||
@import './icons-ios.less';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
|
|||
import EditOptions from '../view/edit/Edit';
|
||||
import AddOptions from '../view/add/Add';
|
||||
import Settings from '../view/settings/Settings';
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
|
||||
import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx';
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { Search, SearchSettings } from '../controller/Search';
|
||||
|
||||
export default class MainPage extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -58,12 +60,17 @@ export default class MainPage extends Component {
|
|||
<NavRight>
|
||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
||||
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
|
||||
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></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>
|
||||
</NavRight>
|
||||
<Search />
|
||||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk" />
|
||||
|
||||
<SearchSettings />
|
||||
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
|
|
|
|||
|
|
@ -106,9 +106,9 @@ const SettingsList = withTranslation()(props => {
|
|||
{navbar}
|
||||
<List>
|
||||
{!props.inPopover &&
|
||||
<ListItem title={_t.textFindAndReplace}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
|
||||
<Icon slot="media" icon="icon-search"></Icon>
|
||||
</ListItem>
|
||||
}
|
||||
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
|
||||
<Icon slot="media" icon="icon-setup"></Icon>
|
||||
|
|
|
|||
Loading…
Reference in a new issue