fix methods namings

This commit is contained in:
srgooglo 2022-05-31 02:26:04 +02:00
parent 8353de34a2
commit aea40be34e
4 changed files with 40 additions and 35 deletions

View File

@ -7,25 +7,29 @@ import classnames from "classnames"
import "./index.less" import "./index.less"
export default class Header extends React.Component { export default class Header extends React.Component {
constructor(props) { controller = window.app["HeaderController"] = {
super(props) toggleVisibility: (to) => {
if (window.isMobile) {
to = true
}
this.state = { this.setState({ visible: to ?? !this.state.visible })
visible: true, },
} isVisible: () => this.state.visible,
}
this.HeaderController = { state = {
toogleVisible: (to) => { visible: false, // set by default to create an animation
if (window.isMobile) { }
to = true
}
this.setState({ visible: to ?? !this.state.visible }) componentDidMount = async () => {
}, // wait to app finish of load
isVisible: () => this.state.visible, app.eventBus.on(`app.initialization.finish`, () => {
} // create an fade in animation
setTimeout(() => {
window.app["HeaderController"] = this.HeaderController this.controller.toggleVisibility(true)
}, 400)
})
} }
render() { render() {

View File

@ -23,6 +23,14 @@ export default class Sidebar extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.controller = window.app["SidebarController"] = {
toggleVisibility: this.toggleVisibility,
toggleEdit: this.toggleEditMode,
isVisible: () => this.state.visible,
isEditMode: () => this.state.visible,
isCollapsed: () => this.state.collapsed,
}
this.state = { this.state = {
editMode: false, editMode: false,
visible: false, visible: false,
@ -36,16 +44,6 @@ export default class Sidebar extends React.Component {
}, },
} }
this.SidebarController = {
toggleVisibility: this.toggleVisibility,
toggleEdit: this.toggleEditMode,
isVisible: () => this.state.visible,
isEditMode: () => this.state.visible,
isCollapsed: () => this.state.collapsed,
}
window.app["SidebarController"] = this.SidebarController
window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode()) window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => { window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
@ -58,10 +56,13 @@ export default class Sidebar extends React.Component {
componentDidMount = async () => { componentDidMount = async () => {
await this.loadSidebarItems() await this.loadSidebarItems()
// create a cool debounced animation // wait to app finish of load
setTimeout(() => { app.eventBus.on(`app.initialization.finish`, () => {
this.toggleVisibility(true) // create an fade in animation
}, 400) setTimeout(() => {
this.controller.toggleVisibility(true)
}, 400)
})
} }
getStoragedKeys = () => { getStoragedKeys = () => {

View File

@ -11,13 +11,13 @@ import "./index.less"
export default class Main extends React.Component { export default class Main extends React.Component {
componentDidMount = async () => { componentDidMount = async () => {
if (!window.isMobile && window.app?.HeaderController?.isVisible()) { if (!window.isMobile && window.app?.HeaderController?.isVisible()) {
window.app.HeaderController.toogleVisible(false) window.app.HeaderController.toggleVisibility(false)
} }
} }
componentWillUnmount() { componentWillUnmount() {
if (!window.isMobile && !window.app?.HeaderController?.isVisible()) { if (!window.isMobile && !window.app?.HeaderController?.isVisible()) {
window.app.HeaderController.toogleVisible(true) window.app.HeaderController.toggleVisibility(true)
} }
} }

View File

@ -62,7 +62,7 @@ export default class StreamViewer extends React.Component {
app.ThemeController.applyVariant("dark") app.ThemeController.applyVariant("dark")
app.eventBus.emit("toogleCompactMode", true) app.eventBus.emit("toogleCompactMode", true)
app.SidebarController.tooggleVisibility(false) app.SidebarController.tooggleVisibility(false)
app.HeaderController.toogleVisible(false) app.HeaderController.toggleVisibility(false)
// fetch user info in the background // fetch user info in the background
this.gatherUserInfo() this.gatherUserInfo()
@ -81,8 +81,8 @@ export default class StreamViewer extends React.Component {
app.ThemeController.applyVariant(app.settings.get("themeVariant")) app.ThemeController.applyVariant(app.settings.get("themeVariant"))
app.eventBus.emit("toogleCompactMode", false) app.eventBus.emit("toogleCompactMode", false)
app.SidebarController.toggleVisibility(true) app.SidebarController.toggleVisibility(true)
app.HeaderController.toogleVisible(true) app.HeaderController.toggleVisibility(true)
app.HeaderController.toogleVisible(true) app.HeaderController.toggleVisibility(true)
if (this.timerCounterInterval) { if (this.timerCounterInterval) {
this.timerCounterInterval = clearInterval(this.timerCounterInterval) this.timerCounterInterval = clearInterval(this.timerCounterInterval)