[PE mobile] Added Find and Replace

apps/common/mobile/lib/view/Search.jsx

@@ -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 :

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -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');
             }
         }

apps/presentationeditor/mobile/locale/en.json

@@ -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": {

apps/presentationeditor/mobile/src/controller/Search.jsx

@@ -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}

apps/presentationeditor/mobile/src/less/app.less

@@ -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';

apps/presentationeditor/mobile/src/page/main.jsx

@@ -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')} />

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -106,7 +106,7 @@ const SettingsList = withTranslation()(props => {
                 {navbar}
                 <List>
                     {!props.inPopover &&
-                    <ListItem title={_t.textFindAndReplace}>
+                        <ListItem title={_t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
                             <Icon slot="media" icon="icon-search"></Icon>
                         </ListItem>
                     }