103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import React, { Component } from 'react'
|
|
import FileList from 'components/file-list';
|
|
import Navigation from 'components/navigation';
|
|
import Header from 'components/header';
|
|
import Breadcrumb from 'components/breadcrumb';
|
|
import Toolbar from 'components/toolbar';
|
|
import Menu from 'components/menu';
|
|
import Dialog from 'components/dialog';
|
|
import Spinner from 'components/spinner';
|
|
import { connect } from 'react-redux';
|
|
import { hideAll as hideAllMenus } from 'actions/menu';
|
|
import { hideAll as hideAllDialogs} from 'actions/dialog';
|
|
|
|
import tour from 'tour';
|
|
import changedir from 'actions/changedir';
|
|
import store from 'store';
|
|
|
|
window.store = store;
|
|
window.changedir = changedir;
|
|
|
|
let FileMenu = connect(state => state.get('fileMenu'))(Menu);
|
|
// let DirectoryMenu = connect(state => state.get('directoryMenu'))(Menu);
|
|
let MoreMenu = connect(state => state.get('moreMenu'))(Menu);
|
|
|
|
let RenameDialog = connect(state => state.get('renameDialog'))(Dialog);
|
|
let DeleteDialog = connect(state => state.get('deleteDialog'))(Dialog);
|
|
let ErrorDialog = connect(state => state.get('errorDialog'))(Dialog);
|
|
let CreateDialog = connect(state => state.get('createDialog'))(Dialog);
|
|
let SearchDialog = connect(state => state.get('searchDialog'))(Dialog);
|
|
|
|
export default class Root extends Component {
|
|
render() {
|
|
return (
|
|
<div onTouchStart={this.touchStart.bind(this)}
|
|
onClick={this.onClick.bind(this)}>
|
|
<Header />
|
|
<Breadcrumb />
|
|
<Navigation />
|
|
<FileList />
|
|
<Toolbar />
|
|
|
|
<FileMenu id='file-menu' />
|
|
<MoreMenu id='more-menu' />
|
|
|
|
<RenameDialog />
|
|
<DeleteDialog />
|
|
<ErrorDialog />
|
|
<CreateDialog />
|
|
<SearchDialog />
|
|
|
|
<Spinner />
|
|
|
|
<div className='swipe-instruction tour-item'></div>
|
|
|
|
<div className='tour-dialog'>
|
|
Hello! Tap each highlighted button to get an understanding of how they work.
|
|
</div>
|
|
<button id='skip-tour'>Skip</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
tour();
|
|
}
|
|
|
|
touchStart(e) {
|
|
let active = document.querySelector('.active');
|
|
let inside = e.target.closest('.active');
|
|
if (active && !inside) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
store.dispatch(hideAllMenus());
|
|
store.dispatch(hideAllDialogs());
|
|
}
|
|
|
|
if (document.querySelector('.sk-cube-grid.show')) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
onClick(e) {
|
|
let tag = e.target.nodeName.toLowerCase();
|
|
if (tag === 'a') {
|
|
let url = new URL(e.target.href);
|
|
|
|
if (url.origin !== location.origin) {
|
|
e.preventDefault();
|
|
new MozActivity({
|
|
name: 'view',
|
|
|
|
data: {
|
|
type: 'url',
|
|
url: e.target.href
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
};
|