random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-02-24 16:56:07 -05:00
parent d255982ec5
commit 7679012e2f
84 changed files with 1048 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
app/javascript/gabsocial/features/ui/ui.js
View File

@@ -1,28 +1,27 @@
'use strict';
'use strict'
import classNames from 'classnames';
import { HotKeys } from 'react-hotkeys';
import { defineMessages, injectIntl } from 'react-intl';
import { Switch, Redirect, withRouter } from 'react-router-dom';
import { debounce } from 'lodash';
import { uploadCompose, resetCompose } from '../../actions/compose';
import { expandHomeTimeline } from '../../actions/timelines';
import { HotKeys } from 'react-hotkeys'
import { defineMessages, injectIntl } from 'react-intl'
import { Switch, Redirect, withRouter } from 'react-router-dom'
import { debounce } from 'lodash'
import { uploadCompose, resetCompose } from '../../actions/compose'
import { expandHomeTimeline } from '../../actions/timelines'
import {
initializeNotifications,
expandNotifications,
} from '../../actions/notifications';
import { fetchFilters } from '../../actions/filters';
import { clearHeight } from '../../actions/height_cache';
import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route';
// import NotificationsContainer from '../../containers/notifications_container';
// import ModalContainer from '../../containers/modal_container';
// import UploadArea from '../../components/upload_area';
// import TrendsPanel from './components/trends_panel';
// import { WhoToFollowPanel } from '../../components/panel';
// import LinkFooter from '../../components/link_footer';
} from '../../actions/notifications'
import { fetchFilters } from '../../actions/filters'
import { clearHeight } from '../../actions/height_cache'
import { openModal } from '../../actions/modal'
import WrappedRoute from './util/wrapped_route'
import NotificationsContainer from '../../containers/notifications_container'
import ModalContainer from '../../containers/modal_container'
import UploadArea from '../../components/upload_area'
// import TrendsPanel from './components/trends_panel'
// import { WhoToFollowPanel } from '../../components/panel'
// import LinkFooter from '../../components/link_footer'
import ProfilePage from '../../pages/profile_page'
// import GroupPage from '../../pages/group_page';
// import GroupPage from '../../pages/group_page'
import GroupsPage from '../../pages/groups_page'
import SearchPage from '../../pages/search_page'
import ErrorPage from '../../pages/error_page'
@@ -30,12 +29,13 @@ import HomePage from '../../pages/home_page'
import NotificationsPage from '../../pages/notifications_page'
import ListPage from '../../pages/list_page'
import ListsPage from '../../pages/lists_page'
// import GroupSidebarPanel from '../groups/sidebar_panel';
import SettingsPage from '../../pages/settings_page'
// import GroupSidebarPanel from '../groups/sidebar_panel'
import {
Status,
// GettingStarted,
// CommunityTimeline,
CommunityTimeline,
AccountTimeline,
// AccountGallery,
HomeTimeline,
@@ -63,25 +63,25 @@ import {
// GroupRemovedAccounts,
// GroupCreate,
// GroupEdit,
} from './util/async-components';
import { me, meUsername } from '../../initial_state';
} from './util/async-components'
import { me, meUsername } from '../../initial_state'
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../components/status';
import { fetchGroups } from '../../actions/groups';
import '../../components/status'
import { fetchGroups } from '../../actions/groups'
const messages = defineMessages({
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' },
publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
});
})
const mapStateToProps = state => ({
isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
});
})
const keyMap = {
help: '?',
@@ -109,7 +109,7 @@ const keyMap = {
goToRequests: 'g r',
toggleHidden: 'x',
toggleSensitive: 'h',
};
}
class SwitchingArea extends PureComponent {
@@ -117,7 +117,7 @@ class SwitchingArea extends PureComponent {
children: PropTypes.node,
location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired,
};
}
componentWillMount() {
window.addEventListener('resize', this.handleResize, {
@@ -148,7 +148,7 @@ class SwitchingArea extends PureComponent {
<Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
{/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />*/}
<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
<WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
@@ -184,10 +184,11 @@ class SwitchingArea extends PureComponent {
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} />
*/ }
*/ }
<Redirect from='/@:username' to='/:username' exact />
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
{ /*
<Redirect from='/@:username/with_replies' to='/:username/with_replies' />
<WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
@@ -220,7 +221,7 @@ class SwitchingArea extends PureComponent {
*/}
<WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
</Switch>
);
)
}
}
@@ -295,7 +296,7 @@ class UI extends PureComponent {
e.stopPropagation()
try {
e.dataTransfer.dropEffect = 'copy';
e.dataTransfer.dropEffect = 'copy'
} catch (err) {
//
}
@@ -320,10 +321,10 @@ class UI extends PureComponent {
}
handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
e.preventDefault()
e.stopPropagation()
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el))
if (this.dragTargets.length > 0) return
@@ -348,99 +349,99 @@ class UI extends PureComponent {
handleServiceWorkerPostMessage = ({ data }) => {
if (data.type === 'navigate') {
this.context.router.history.push(data.path);
this.context.router.history.push(data.path)
} else {
console.warn('Unknown message type:', data.type);
console.warn('Unknown message type:', data.type)
}
}
componentWillMount() {
window.addEventListener('beforeunload', this.handleBeforeUnload, false);
window.addEventListener('beforeunload', this.handleBeforeUnload, false)
document.addEventListener('dragenter', this.handleDragEnter, false);
document.addEventListener('dragover', this.handleDragOver, false);
document.addEventListener('drop', this.handleDrop, false);
document.addEventListener('dragleave', this.handleDragLeave, false);
document.addEventListener('dragend', this.handleDragEnd, false);
document.addEventListener('dragenter', this.handleDragEnter, false)
document.addEventListener('dragover', this.handleDragOver, false)
document.addEventListener('drop', this.handleDrop, false)
document.addEventListener('dragleave', this.handleDragLeave, false)
document.addEventListener('dragend', this.handleDragEnd, false)
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage)
}
if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
window.setTimeout(() => Notification.requestPermission(), 120 * 1000);
window.setTimeout(() => Notification.requestPermission(), 120 * 1000)
}
if (me) {
this.props.dispatch(expandHomeTimeline());
this.props.dispatch(expandNotifications());
this.props.dispatch(initializeNotifications());
this.props.dispatch(fetchGroups('member'));
this.props.dispatch(expandHomeTimeline())
this.props.dispatch(expandNotifications())
this.props.dispatch(initializeNotifications())
this.props.dispatch(fetchGroups('member'))
setTimeout(() => this.props.dispatch(fetchFilters()), 500);
setTimeout(() => this.props.dispatch(fetchFilters()), 500)
}
}
componentDidMount() {
if (!me) return;
if (!me) return
this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
};
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName)
}
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeUnload);
document.removeEventListener('dragenter', this.handleDragEnter);
document.removeEventListener('dragover', this.handleDragOver);
document.removeEventListener('drop', this.handleDrop);
document.removeEventListener('dragleave', this.handleDragLeave);
document.removeEventListener('dragend', this.handleDragEnd);
window.removeEventListener('beforeunload', this.handleBeforeUnload)
document.removeEventListener('dragenter', this.handleDragEnter)
document.removeEventListener('dragover', this.handleDragOver)
document.removeEventListener('drop', this.handleDrop)
document.removeEventListener('dragleave', this.handleDragLeave)
document.removeEventListener('dragend', this.handleDragEnd)
}
setRef = c => {
this.node = c;
this.node = c
}
handleHotkeyNew = e => {
e.preventDefault();
e.preventDefault()
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea');
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea')
if (element) {
element.focus();
element.focus()
}
}
handleHotkeySearch = e => {
e.preventDefault();
e.preventDefault()
const element = this.node.querySelector('.search__input');
const element = this.node.querySelector('.search__input')
if (element) {
element.focus();
element.focus()
}
}
handleHotkeyForceNew = e => {
this.handleHotkeyNew(e);
this.props.dispatch(resetCompose());
this.handleHotkeyNew(e)
this.props.dispatch(resetCompose())
}
handleHotkeyFocusColumn = e => {
const index = (e.key * 1) + 1; // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`);
if (!column) return;
const container = column.querySelector('.scrollable');
const index = (e.key * 1) + 1 // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`)
if (!column) return
const container = column.querySelector('.scrollable')
if (container) {
const status = container.querySelector('.focusable');
const status = container.querySelector('.focusable')
if (status) {
if (container.scrollTop > status.offsetTop) {
status.scrollIntoView(true);
status.scrollIntoView(true)
}
status.focus();
status.focus()
}
}
}
@@ -454,7 +455,7 @@ class UI extends PureComponent {
}
setHotkeysRef = c => {
this.hotkeys = c;
this.hotkeys = c
}
handleHotkeyToggleHelp = () => {
@@ -502,8 +503,8 @@ class UI extends PureComponent {
}
render() {
const { draggingOver } = this.state;
const { children, location, dropdownMenuIsOpen } = this.props;
const { draggingOver } = this.state
const { children, location, dropdownMenuIsOpen } = this.props
const handlers = me ? {
help: this.handleHotkeyToggleHelp,
@@ -521,7 +522,7 @@ class UI extends PureComponent {
goToBlocked: this.handleHotkeyGoToBlocked,
goToMuted: this.handleHotkeyGoToMuted,
goToRequests: this.handleHotkeyGoToRequests,
} : {};
} : {}
return (
<HotKeys
@@ -544,14 +545,12 @@ class UI extends PureComponent {
{children}
</SwitchingArea>
{ /*
<NotificationsContainer />
<ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} />
*/ }
</div>
</HotKeys>
);
)
}
}