IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Browse Source

Adapted WBNavbar to handle URLs in addition to onclick callbacks.

master
parent
commit
d104d57027
3 changed files with 47 additions and 26 deletions
  1. +13
    -9
      frontend/src/js/component/wb-navbar-common.js
  2. +5
    -9
      frontend/src/js/page/wb-app.js
  3. +29
    -8
      frontend/src/js/widget/wb-navbar.js

+ 13
- 9
frontend/src/js/component/wb-navbar-common.js View File

@@ -5,15 +5,19 @@ import WBInlineSearch from 'wb-inline-search';
class WBNavbarCommon extends Component { class WBNavbarCommon extends Component {
render({ app, items, activeItem }) { render({ app, items, activeItem }) {
return ( return (
<WBNavbar items={ [
{ 'name': 'Home', 'id': 'home' },
{ 'name': 'All Projects', 'id': 'all-projects' },
{ 'name': 'All Users', 'id': 'all-users' },
{ 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
].concat(items) } rhs={ (
<WBInlineSearch />
) } onItemClicked={ item => app.navbarItemClicked(item) }
activeItem={ activeItem } />
<WBNavbar
items={ [
{ 'name': 'Home', 'id': 'home' },
{ 'name': 'All Projects', 'id': 'all-projects' },
{ 'name': 'All Users', 'id': 'all-users' },
{ 'name': 'Current User', 'dropdown': [ { 'id': 'sign-out', 'name': 'Sign Out' } ]}
].concat(items) }
rhs={ (
<WBInlineSearch />
) }
titleUrl = { '/browse/' + app.state.currentUser.uuid }
getItemUrl={ item => app.navbarItemUrl(item) }
activeItem={ activeItem } />
); );
} }
} }


+ 5
- 9
frontend/src/js/page/wb-app.js View File

@@ -26,22 +26,18 @@ class WBApp extends Component {
}; };
} }
navbarItemClicked(item) {
navbarItemUrl(item) {
if (item['id'] === 'sign-out') { if (item['id'] === 'sign-out') {
delete window.localStorage['arvHost']; delete window.localStorage['arvHost'];
delete window.localStorage['arvToken']; delete window.localStorage['arvToken'];
delete window.localStorage['currentUser']; delete window.localStorage['currentUser'];
route('/sign-in');
return ('/sign-in');
} else if (item['id'] === 'home') { } else if (item['id'] === 'home') {
route('/browse/' + this.appState.currentUser.uuid);
return ('/browse/' + this.appState.currentUser.uuid);
} else if (item['id'] === 'all-projects') { } else if (item['id'] === 'all-projects') {
route('/browse');
return ('/browse');
} else if (item['id'] === 'all-users') { } else if (item['id'] === 'all-users') {
route('/users');
return ('/users');
} }
} }


+ 29
- 8
frontend/src/js/widget/wb-navbar.js View File

@@ -1,10 +1,12 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
class WBNavbar extends Component { class WBNavbar extends Component {
render({ title, items, rhs, onItemClicked, onTitleClicked, activeItem }) {
render({ title, items, rhs, onItemClicked, onTitleClicked,
activeItem, titleUrl, getItemUrl }) {
return ( return (
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" onclick={ e => { e.preventDefault(); onTitleClicked(); } }>{ title }</a>
<a class="navbar-brand" href={ titleUrl } onclick={ e => this.titleClicked(e) }>{ title }</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@@ -45,7 +47,8 @@ class WBNavbar extends Component {
{ i['dropdown'].map(d => { { i['dropdown'].map(d => {
if (typeof(d) === 'string') if (typeof(d) === 'string')
return ( return (
<a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d }</a>
<a class="dropdown-item" href={ getItemUrl(d) }
onclick={ e => this.itemClicked(e, d) }>{ d }</a>
); );
else if (typeof(d) === 'object' && d['divider']) else if (typeof(d) === 'object' && d['divider'])
@@ -55,7 +58,8 @@ class WBNavbar extends Component {
else if (typeof(d) === 'object' && d['name']) else if (typeof(d) === 'object' && d['name'])
return ( return (
<a class="dropdown-item" href="#" onclick={ e => { e.preventDefault(); onItemClicked(d); } }>{ d['name'] }</a>
<a class="dropdown-item" href={ getItemUrl(d) }
onclick={ e => this.itemClicked(e, d) }>{ d['name'] }</a>
); );
}) } }) }
</div> </div>
@@ -67,7 +71,8 @@ class WBNavbar extends Component {
return ( return (
<li class={ li_cls }> <li class={ li_cls }>
<a class={ a_cls } href="#" onclick={ e => { e.preventDefault(); onItemClicked(i); } }>{ i['name'] }</a>
<a class={ a_cls } href={ getItemUrl(i) }
onclick={ e => this.itemClicked(e, i) }>{ i['name'] }</a>
</li> </li>
); );
} }
@@ -80,15 +85,31 @@ class WBNavbar extends Component {
</nav> </nav>
); );
} }
titleClicked(e) {
let { onTitleClicked } = this.props;
if (!onTitleClicked)
return;
e.preventDefault();
onTitleClicked();
}
itemClicked(e, i) {
let { onItemClicked } = this.props;
if (!onItemClicked)
return;
e.preventDefault();
onItemClicked(i);
}
} }
WBNavbar.defaultProps = { WBNavbar.defaultProps = {
'title': 'Workbench Advanced', 'title': 'Workbench Advanced',
'items': [], 'items': [],
'form': null, 'form': null,
'onItemClicked': () => {},
'onTitleClicked': () => {},
'activeItem': null
'activeItem': null,
'titleUrl': '#',
'getItemUrl': () => ('#')
} }
export default WBNavbar; export default WBNavbar;

Loading…
Cancel
Save