[PE mobile] Added Find and Replace
This commit is contained in:
parent
e0258fa0b7
commit
de79f6e526
|
@ -55,7 +55,7 @@ class SearchSettingsView extends Component {
|
||||||
</Navbar>;
|
</Navbar>;
|
||||||
const extra = this.extraSearchOptions();
|
const extra = this.extraSearchOptions();
|
||||||
const content =
|
const content =
|
||||||
<View style={popoverStyle}>
|
<View style={show_popover ? popoverStyle : null}>
|
||||||
<Page>
|
<Page>
|
||||||
{navbar}
|
{navbar}
|
||||||
<List>
|
<List>
|
||||||
|
@ -83,6 +83,8 @@ class SearchView extends Component {
|
||||||
replaceQuery: ''
|
replaceQuery: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const $$ = Dom7;
|
||||||
|
|
||||||
$$(document).on('page:init', (e, page) => {
|
$$(document).on('page:init', (e, page) => {
|
||||||
if ( page.name == 'home' ) {
|
if ( page.name == 'home' ) {
|
||||||
this.searchbar = f7.searchbar.create({
|
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;
|
// return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
const $$ = Dom7;
|
|
||||||
const $editor = $$('#editor_sdk');
|
const $editor = $$('#editor_sdk');
|
||||||
const $replaceLink = $$('#replace-link');
|
const $replaceLink = $$('#replace-link');
|
||||||
|
|
||||||
|
@ -195,10 +196,12 @@ class SearchView extends Component {
|
||||||
|
|
||||||
onEditorTouchStart(e) {
|
onEditorTouchStart(e) {
|
||||||
this.startPoint = this.pointerPosition(e);
|
this.startPoint = this.pointerPosition(e);
|
||||||
|
// console.log(this.startPoint);
|
||||||
}
|
}
|
||||||
|
|
||||||
onEditorTouchEnd(e) {
|
onEditorTouchEnd(e) {
|
||||||
const endPoint = this.pointerPosition(e);
|
const endPoint = this.pointerPosition(e);
|
||||||
|
// console.log(endPoint);
|
||||||
|
|
||||||
if ( this.searchbar.enabled ) {
|
if ( this.searchbar.enabled ) {
|
||||||
const distance = (this.startPoint.x === undefined || this.startPoint.y === undefined) ? 0 :
|
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 (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) ) {
|
||||||
// const { t } = useTranslation();
|
|
||||||
// const _t = t('View.Settings', {returnObjects: true});
|
|
||||||
f7.dialog.alert(null, 'Text not Found');
|
f7.dialog.alert(null, 'Text not Found');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -244,7 +244,15 @@
|
||||||
"textRemoveLink": "Remove Link",
|
"textRemoveLink": "Remove Link",
|
||||||
"textDisplay": "Display",
|
"textDisplay": "Display",
|
||||||
"textScreenTip": "Screen Tip",
|
"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": {
|
"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;
|
@themeColor: #aa5252;
|
||||||
|
|
||||||
|
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
|
||||||
|
|
||||||
@import '../../../../common/mobile/resources/less/_mixins.less';
|
@import '../../../../common/mobile/resources/less/_mixins.less';
|
||||||
@import '../../../../common/mobile/resources/less/collaboration.less';
|
@import '../../../../common/mobile/resources/less/collaboration.less';
|
||||||
@import '../../../../common/mobile/resources/less/common.less';
|
@import '../../../../common/mobile/resources/less/common.less';
|
||||||
@import '../../../../common/mobile/resources/less/common-ios.less';
|
@import '../../../../common/mobile/resources/less/common-ios.less';
|
||||||
@import '../../../../common/mobile/resources/less/common-material.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/dataview.less';
|
||||||
@import '../../../../common/mobile/resources/less/about.less';
|
@import '../../../../common/mobile/resources/less/about.less';
|
||||||
|
@import '../../../../common/mobile/resources/less/search.less';
|
||||||
@import './app-material.less';
|
@import './app-material.less';
|
||||||
@import './app-ios.less';
|
@import './app-ios.less';
|
||||||
@import './icons-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 EditOptions from '../view/edit/Edit';
|
||||||
import AddOptions from '../view/add/Add';
|
import AddOptions from '../view/add/Add';
|
||||||
import Settings from '../view/settings/Settings';
|
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 {
|
export default class MainPage extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -58,12 +60,17 @@ export default class MainPage extends Component {
|
||||||
<NavRight>
|
<NavRight>
|
||||||
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
|
<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>
|
<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-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 />
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
<View id="editor_sdk" />
|
<View id="editor_sdk" />
|
||||||
|
|
||||||
|
<SearchSettings />
|
||||||
|
|
||||||
{
|
{
|
||||||
!this.state.editOptionsVisible ? null :
|
!this.state.editOptionsVisible ? null :
|
||||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||||
|
|
|
@ -106,9 +106,9 @@ const SettingsList = withTranslation()(props => {
|
||||||
{navbar}
|
{navbar}
|
||||||
<List>
|
<List>
|
||||||
{!props.inPopover &&
|
{!props.inPopover &&
|
||||||
<ListItem title={_t.textFindAndReplace}>
|
<ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
|
||||||
<Icon slot="media" icon="icon-search"></Icon>
|
<Icon slot="media" icon="icon-search"></Icon>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
}
|
}
|
||||||
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
|
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
|
||||||
<Icon slot="media" icon="icon-setup"></Icon>
|
<Icon slot="media" icon="icon-setup"></Icon>
|
||||||
|
|
Loading…
Reference in a new issue