[DE mobile] extended Searchbar

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

@@ -15,6 +15,9 @@ const popoverStyle = {
     height: '300px'
 };
 
+const SEARCH_BACKWARD = 'back';
+const SEARCH_FORWARD = 'next';
+
 class SearchSettingsView extends Component {
     constructor(props) {
         super(props);
@@ -82,9 +85,30 @@ class SearchView extends Component {
                     backdrop: false,
                     on: {
                         search: (bar, curval, prevval) => {
-                        }
+                        },
+                        enable: this.onSearchbarShow.bind(this, true),
+                        disable: this.onSearchbarShow.bind(this, false)
                     }
                 });
+
+                // function iOSVersion() {
+                //     var ua = navigator.userAgent;
+                //     var m;
+                //     return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
+                // }
+
+                const $$ = Dom7;
+                const $editor = $$('#editor_sdk');
+                if (false /*iOSVersion() < 13*/) {
+                    // $editor.single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
+                    // $editor.single('mouseup touchend',     _.bind(me.onEditorTouchEnd, me));
+                } else {
+                    // $editor.single('pointerdown', this.onEditorTouchStart, me));
+                    // $editor.single('pointerup',     _.bind(me.onEditorTouchEnd, me));
+                }
+
+                $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
+                $editor.on('pointerup',   this.onEditorTouchEnd.bind(this));
             }
         });
 
@@ -118,13 +142,51 @@ class SearchView extends Component {
         if ( this.searchbar && this.searchbar.query) {
             if ( this.props.onSearchQuery ) {
                 let params = this.searchParams();
-                params.to = action;
+                params.forward = action != SEARCH_BACKWARD;
 
                 this.props.onSearchQuery(params);
             }
         }
     }
 
+    onSearchbarShow(isshowed, bar) {
+        if ( !isshowed ) {
+            this.$repalce.val('');
+        }
+    }
+
+    onEditorTouchStart(e) {
+        this.startPoint = this.pointerPosition(e);
+    }
+
+    onEditorTouchEnd(e) {
+        const endPoint = this.pointerPosition(e);
+
+        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 ( distance < 1 ) {
+                this.searchbar.disable();
+            }
+        }
+    }
+
+    pointerPosition(e) {
+        let out = {x:0, y:0};
+        if ( e.type == 'touchstart' || e.type == 'touchend' ) {
+            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' ) {
+            out.x = e.pageX;
+            out.y = e.pageY;
+        }
+
+        return out;
+    }
+
     render() {
         const usereplace = searchOptions.usereplace;
         const hidden = {display: "none"};
@@ -148,14 +210,13 @@ class SearchView extends Component {
                         <span className="input-clear-button" />
                     </div>
                     <div className="buttons-row">
-                        <a className="link icon-only prev disabled1" onClick={e => this.onSearchClick('back')}>
+                        <a className="link icon-only prev" onClick={e => this.onSearchClick(SEARCH_BACKWARD)}>
                             <i className="icon icon-prev" />
                         </a>
-                        <a className="link icon-only next disabled1" onClick={e => this.onSearchClick('next')}>
+                        <a className="link icon-only next" onClick={e => this.onSearchClick(SEARCH_FORWARD)}>
                             <i className="icon icon-next" />
                         </a>
                     </div>
-                    <span className="searchbar-disable-button">Cancel</span>
                 </div>
             </form>
         )

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

@@ -7,6 +7,13 @@ import { f7 } from 'framework7-react';
 class SearchSettings extends SearchSettingsView {
     constructor(props) {
         super(props);
+
+        this.onToggleMarkResults = this.onToggleMarkResults.bind(this);
+    }
+
+    onToggleMarkResults(checked) {
+        const api = Common.EditorApi.get();
+        api.asc_selectSearchingResults(checked);
     }
 
     extraSearchOptions() {
@@ -17,7 +24,7 @@ class SearchSettings extends SearchSettingsView {
                             <Toggle slot="after" className="toggle-case-sensitive" />
                         </ListItem>
                         <ListItem title="Highlight results">
-                            <Toggle slot="after" className="toggle-mark-results" defaultChecked />
+                            <Toggle slot="after" className="toggle-mark-results" defaultChecked onToggleChange={this.onToggleMarkResults} />
                         </ListItem>
                     </List>;
 
@@ -38,11 +45,28 @@ class DESearchView extends SearchView {
 
         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 onSearchQuery = params => {
-        console.log('on search: ' + params.find);
+        const api = Common.EditorApi.get();
+
+        if ( !params.replace ) {
+            if ( !api.asc_findText(params.find, params.forward, params.caseSensitive, params.highlight) ) {
+                f7.dialog.alert('there are no more results', e => {
+                });
+            }
+        }
     };
 
     return <DESearchView onSearchQuery={onSearchQuery} />