[DE mobile] extended Searchbar
This commit is contained in:
Maxim Kadushkin
parent
6998771d0c
commit
c124342f12
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue