Repository: couchdb-fauxton Updated Branches: refs/heads/hide-navbar [created] 906f13852
A more flux way of hiding the navbar Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/906f1385 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/906f1385 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/906f1385 Branch: refs/heads/hide-navbar Commit: 906f138527eb0529c426b6aba0185bc074d858ad Parents: 5e64a1b Author: Garren Smith <garren.sm...@gmail.com> Authored: Wed May 11 16:11:40 2016 +0200 Committer: Garren Smith <garren.sm...@gmail.com> Committed: Thu May 12 11:55:49 2016 +0200 ---------------------------------------------------------------------- app/addons/fauxton/navigation/actions.js | 22 +++- app/addons/fauxton/navigation/actiontypes.js | 5 +- .../fauxton/navigation/components.react.jsx | 61 ++++++----- app/addons/fauxton/navigation/stores.js | 107 +++++++++++-------- 4 files changed, 119 insertions(+), 76 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/906f1385/app/addons/fauxton/navigation/actions.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/navigation/actions.js b/app/addons/fauxton/navigation/actions.js index a82760b..12e4bcb 100644 --- a/app/addons/fauxton/navigation/actions.js +++ b/app/addons/fauxton/navigation/actions.js @@ -18,38 +18,50 @@ define([ function (app, FauxtonAPI, ActionTypes) { return { - toggleNavbarMenu: function () { + toggleNavbarMenu () { FauxtonAPI.dispatch({ type: ActionTypes.TOGGLE_NAVBAR_MENU }); }, - addHeaderLink: function (link) { + addHeaderLink (link) { FauxtonAPI.dispatch({ type: ActionTypes.ADD_NAVBAR_LINK, link: link }); }, - removeHeaderLink: function (link) { + removeHeaderLink (link) { FauxtonAPI.dispatch({ type: ActionTypes.REMOVE_NAVBAR_LINK, link: link }); }, - setNavbarVersionInfo: function (versionInfo) { + setNavbarVersionInfo (versionInfo) { FauxtonAPI.dispatch({ type: ActionTypes.NAVBAR_SET_VERSION_INFO, version: versionInfo }); }, - setNavbarActiveLink: function (header) { + setNavbarActiveLink (header) { FauxtonAPI.dispatch({ type: ActionTypes.NAVBAR_ACTIVE_LINK, name: header }); + }, + + showNavBar () { + FauxtonAPI.dispatch({ + type: ActionTypes.NAVBAR_SHOW + }); + }, + + hideNavBar () { + FauxtonAPI.dispatch({ + type: ActionTypes.NAVBAR_HIDE + }); } }; }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/906f1385/app/addons/fauxton/navigation/actiontypes.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/navigation/actiontypes.js b/app/addons/fauxton/navigation/actiontypes.js index 0c9ccdd..9c2aedd 100644 --- a/app/addons/fauxton/navigation/actiontypes.js +++ b/app/addons/fauxton/navigation/actiontypes.js @@ -18,7 +18,8 @@ define([], function () { CLEAR_NAVBAR_LINK: 'CLEAR_NAVBAR_LINK', REMOVE_NAVBAR_LINK: 'REMOVE_NAVBAR_LINK', NAVBAR_SET_VERSION_INFO: 'NAVBAR_SET_VERSION_INFO', - NAVBAR_ACTIVE_LINK: 'NAVBAR_ACTIVE_LINK' + NAVBAR_ACTIVE_LINK: 'NAVBAR_ACTIVE_LINK', + NAVBAR_HIDE: 'NAVBAR_HIDE', + NAVBAR_SHOW: 'NAVBAR_SHOW' }; }); - http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/906f1385/app/addons/fauxton/navigation/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/navigation/components.react.jsx b/app/addons/fauxton/navigation/components.react.jsx index 564e981..3e145d2 100644 --- a/app/addons/fauxton/navigation/components.react.jsx +++ b/app/addons/fauxton/navigation/components.react.jsx @@ -19,11 +19,11 @@ define([ ], function (app, FauxtonAPI, React, ReactDOM, Stores, Actions) { - var navBarStore = Stores.navBarStore; + const navBarStore = Stores.navBarStore; - var Footer = React.createClass({ - render: function () { - var version = this.props.version; + const Footer = React.createClass({ + render () { + const version = this.props.version; if (!version) { return null; } return ( @@ -37,8 +37,8 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions) { } }); - var Burger = React.createClass({ - render: function () { + const Burger = React.createClass({ + render () { return ( <div className="burger" onClick={this.props.toggleMenu}> <div></div> @@ -49,10 +49,10 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions) { } }); - var NavLink = React.createClass({ - render: function () { - var link = this.props.link; - var liClassName = this.props.active === link.title ? 'active' : ''; + const NavLink = React.createClass({ + render () { + const link = this.props.link; + const liClassName = this.props.active === link.title ? 'active' : ''; return ( <li data-nav-name={link.title} className={liClassName} > @@ -65,58 +65,67 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions) { } }); - var NavBar = React.createClass({ - getStoreState: function () { + const NavBar = React.createClass({ + getStoreState () { return { navLinks: navBarStore.getNavLinks(), bottomNavLinks: navBarStore.getBottomNavLinks(), footerNavLinks: navBarStore.getFooterNavLinks(), activeLink: navBarStore.getActiveLink(), version: navBarStore.getVersion(), - isMinimized: navBarStore.isMinimized() + isMinimized: navBarStore.isMinimized(), + isNavBarVisible: navBarStore.isNavBarVisible() }; }, - getInitialState: function () { + getInitialState () { return this.getStoreState(); }, - createLinks: function (links) { + createLinks (links) { return _.map(links, function (link, i) { return <NavLink key={i} link={link} active={this.state.activeLink} />; }, this); }, - onChange: function () { + onChange () { this.setState(this.getStoreState()); }, - setMenuState: function () { + setMenuState () { $('body').toggleClass('closeMenu', this.state.isMinimized); FauxtonAPI.Events.trigger(FauxtonAPI.constants.EVENTS.NAVBAR_SIZE_CHANGED, this.state.isMinimized); }, - componentDidMount: function () { + componentDidMount () { navBarStore.on('change', this.onChange, this); this.setMenuState(); }, - componentDidUpdate: function () { + componentDidUpdate () { this.setMenuState(); }, - componentWillUnmount: function () { + componentWillUnmount () { navBarStore.off('change', this.onChange); }, - toggleMenu: function () { + toggleMenu () { Actions.toggleNavbarMenu(); }, - render: function () { - var navLinks = this.createLinks(this.state.navLinks); - var bottomNavLinks = this.createLinks(this.state.bottomNavLinks); - var footerNavLinks = this.createLinks(this.state.footerNavLinks); + render () { + //YUCK!! but we can only really fix this once we have removed all backbone + if (!this.state.isNavBarVisible) { + $('#primary-navbar').hide(); + return null; + } + + $('#primary-navbar').show(); + + const navLinks = this.createLinks(this.state.navLinks); + const bottomNavLinks = this.createLinks(this.state.bottomNavLinks); + const footerNavLinks = this.createLinks(this.state.footerNavLinks); return ( <div className="navbar"> @@ -152,7 +161,7 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions) { }); return { - renderNavBar: function (el) { + renderNavBar (el) { ReactDOM.render(<NavBar/>, el); }, NavBar: NavBar, http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/906f1385/app/addons/fauxton/navigation/stores.js ---------------------------------------------------------------------- diff --git a/app/addons/fauxton/navigation/stores.js b/app/addons/fauxton/navigation/stores.js index afe80e5..c45d194 100644 --- a/app/addons/fauxton/navigation/stores.js +++ b/app/addons/fauxton/navigation/stores.js @@ -17,48 +17,61 @@ define([ ], function (app, FauxtonAPI, ActionTypes) { - var Stores = {}; + const Stores = {}; Stores.NavBarStore = FauxtonAPI.Store.extend({ - initialize: function () { + initialize () { this.reset(); }, - reset: function () { - this.activeLink = null; - this.version = null; - this.navLinks = []; - this.footerNavLinks = []; - this.bottomNavLinks = []; + reset () { + this._activeLink = null; + this._version = null; + this._navLinks = []; + this._footerNavLinks = []; + this._bottomNavLinks = []; + this._navBarVisible = true; }, - addLink: function (link) { + isNavBarVisible () { + return this._navBarVisible; + }, + + showNavBar () { + this._navBarVisible = true; + }, + + hideNavBar () { + this._navBarVisible = false; + }, + + addLink (link) { if (link.top && !link.bottomNav) { - this.navLinks.unshift(link); + this._navLinks.unshift(link); return; } if (link.top && link.bottomNav) { - this.bottomNavLinks.unshift(link); + this._bottomNavLinks.unshift(link); return; } if (link.bottomNav) { - this.bottomNavLinks.push(link); + this._bottomNavLinks.push(link); return; } if (link.footerNav) { - this.footerNavLinks.push(link); + this._footerNavLinks.push(link); return; } - this.navLinks.push(link); + this._navLinks.push(link); }, - removeLink: function (removeLink) { - var links = this.getLinkSection(removeLink); - var indexOf = 0; + removeLink (removeLink) { + const links = this.getLinkSection(removeLink); + let indexOf = 0; - var res = _.filter(links, function (link) { + const res = _.filter(links, function (link) { if (link.id === removeLink.id) { return true; } @@ -72,40 +85,40 @@ function (app, FauxtonAPI, ActionTypes) { links.splice(indexOf, 1); }, - getNavLinks: function () { - return this.navLinks; + getNavLinks () { + return this._navLinks; }, - getBottomNavLinks: function () { - return this.bottomNavLinks; + getBottomNavLinks () { + return this._bottomNavLinks; }, - getFooterNavLinks: function () { - return this.footerNavLinks; + getFooterNavLinks () { + return this._footerNavLinks; }, - toggleMenu: function () { + toggleMenu () { app.utils.localStorageSet(FauxtonAPI.constants.LOCAL_STORAGE.SIDEBAR_MINIMIZED, !this.isMinimized()); }, - getLinkSection: function (link) { - var links = this.navLinks; + getLinkSection (link) { + let links = this._navLinks; if (link.bottomNav) { - links = this.bottomNavLinks; + links = this._bottomNavLinks; } if (link.footerNav) { - links = this.footerNavLinks; + links = this._footerNavLinks; } return links; }, - updateLink: function (link) { - var oldLink; - var links = this.getLinkSection(link); + updateLink (link) { + let oldLink; + const links = this.getLinkSection(link); oldLink = _.find(links, function (oldLink) { return oldLink.id === link.id; @@ -117,28 +130,28 @@ function (app, FauxtonAPI, ActionTypes) { oldLink.href = link.href; }, - getVersion: function () { - return this.version; + getVersion () { + return this._version; }, - setVersion: function (version) { - this.version = version; + setVersion (version) { + this._version = version; }, - getActiveLink: function () { - return this.activeLink; + getActiveLink () { + return this._activeLink; }, - setActiveLink: function (activeLink) { - this.activeLink = activeLink; + setActiveLink (activeLink) { + this._activeLink = activeLink; }, - isMinimized: function () { - var isMinimized = app.utils.localStorageGet(FauxtonAPI.constants.LOCAL_STORAGE.SIDEBAR_MINIMIZED); + isMinimized () { + const isMinimized = app.utils.localStorageGet(FauxtonAPI.constants.LOCAL_STORAGE.SIDEBAR_MINIMIZED); return (_.isUndefined(isMinimized)) ? false : isMinimized; }, - dispatch: function (action) { + dispatch (action) { switch (action.type) { case ActionTypes.ADD_NAVBAR_LINK: this.addLink(action.link); @@ -168,6 +181,14 @@ function (app, FauxtonAPI, ActionTypes) { this.setActiveLink(action.name); break; + case ActionTypes.NAVBAR_HIDE: + this.hideNavBar(); + break; + + case ActionTypes.NAVBAR_SHOW: + this.showNavBar(); + break; + default: return; // do nothing
