secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Scolling rules

Browse Source
This commit is contained in:
James Barnsley
2018-10-25 17:00:49 +13:00
parent 99b700d5aa
commit d5a96fe716
16 changed files with 13852 additions and 10508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/App.js
View File

@ -325,7 +325,7 @@ class App extends React.Component{
<div className="body">
<Sidebar />
<PlaybackControls />
<main id="main">
<main id="main" className="smooth-scroll">
<ErrorBoundary>
{this.props.children}
</ErrorBoundary>

5
src/js/components/GridItem.js
View File

@ -25,6 +25,11 @@ export default class GridItem extends React.Component{
handleClick(e){
if (this.props.onClick && e.target.tagName.toLowerCase() !== 'a'){
// Scroll to the top
helpers.scrollToTop();
// And then trigger the click event
this.props.onClick(e);
}
}

11
src/js/components/Link.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import {Link} from 'react-router';
import * as helpers from '../helpers';
/**
* Extends react-router's Link but provides the ability to hook in to the navigation event
* which lets us scroll to the top of our <main> for a more traditional navigation experience
@ -14,7 +16,14 @@ export default class extends React.Component{
handleClick(e){
if (!this.props.retainScroll){
document.getElementById('main').scrollTo(0, 0);
if (this.props.scrollTo){
var element = document.getElementById(this.props.scrollTo);
if (element){
element.scrollIntoView();
}
} else {
helpers.scrollToTop();
}
}
}

12
src/js/components/Services.js
View File

@ -295,9 +295,9 @@ class Services extends React.Component{
}
return (
<div className="menu">
<div className="menu" id="services-menu">
<div className="menu__inner">
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'}>
<Link className={"menu-item"+(this.props.active == 'spotify' ? ' menu-item--active' : '')} to={this.props.active == 'spotify' ? global.baseURL+'settings' : global.baseURL+'settings/service/spotify'} scrollTo="services-menu">
<div className="menu-item__inner">
{spotify_icon}
<div className="menu-item__title">
@ -306,7 +306,7 @@ class Services extends React.Component{
{this.props.spotify.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'}>
<Link className={"menu-item"+(this.props.active == 'lastfm' ? ' menu-item--active' : '')} to={this.props.active == 'lastfm' ? global.baseURL+'settings' : global.baseURL+'settings/service/lastfm'} scrollTo="services-menu">
<div className="menu-item__inner">
{lastfm_icon}
<div className="menu-item__title">
@ -315,7 +315,7 @@ class Services extends React.Component{
{this.props.lastfm.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Read-only</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'}>
<Link className={"menu-item"+(this.props.active == 'genius' ? ' menu-item--active' : '')} to={this.props.active == 'genius' ? global.baseURL+'settings' : global.baseURL+'settings/service/genius'} scrollTo="services-menu">
<div className="menu-item__inner">
{genius_icon}
<div className="menu-item__title">
@ -324,7 +324,7 @@ class Services extends React.Component{
{this.props.genius.authorization ? <span className="status green-text">Authorized</span> : <span className="status mid_grey-text">Unauthorized</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' menu-item--active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'} scrollTo="services-menu">
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="devices" />
<div className="menu-item__title">
@ -333,7 +333,7 @@ class Services extends React.Component{
{this.props.pusher.config.snapcast_enabled ? <span className="status green-text">Enabled</span> : <span className="status mid_grey-text">Disabled</span>}
</div>
</Link>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
<Link className={"menu-item"+(this.props.active == 'icecast' ? ' menu-item--active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'} scrollTo="services-menu">
<div className="menu-item__inner">
<Icon className="menu-item__icon" name="wifi_tethering" />
<div className="menu-item__title">

19
src/js/helpers.js
View File

@ -1419,3 +1419,22 @@ export let getIndexedRecords = function(index, uris){
export let titleCase = function(string){
return string.charAt(0).toUpperCase() + string.slice(1)
}
/**
* Scroll to the top of the page
* Our 'content' is housed in the <main> DOM element
*
**/
export let scrollToTop = function(){
var main = document.getElementById('main');
// Remove our smooth-scroll class
main.classList.remove("smooth-scroll");
// And now scroll it
main.scrollTo(0, 0);
// Now reinstate smooth scroll
main.classList.add("smooth-scroll");
}

12
src/js/views/Artist.js
View File

@ -37,8 +37,10 @@ class Artist extends React.Component{
}
componentWillReceiveProps(nextProps){
if (nextProps.params.uri != this.props.params.uri){
this.props.coreActions.loadArtist(nextProps.params.uri);
}else if (!this.props.mopidy_connected && nextProps.mopidy_connected){
if (helpers.uriSource(this.props.params.uri ) != 'spotify'){
this.props.coreActions.loadArtist(nextProps.params.uri);
@ -105,10 +107,10 @@ class Artist extends React.Component{
renderSubViewMenu(){
return (
<div className="sub-views">
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri}><h4>Overview</h4></Link>
{this.props.artist.related_artists_uris ? <Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/related-artists'}><h4>Related artists</h4></Link> : null}
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/about'}><h4>About</h4></Link>
<div className="sub-views" id="sub-views-menu">
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri} scrollTo="sub-views-menu"><h4>Overview</h4></Link>
{this.props.artist.related_artists_uris ? <Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/related-artists'} scrollTo="sub-views-menu"><h4>Related artists</h4></Link> : null}
<Link className="option" activeClassName="active" to={global.baseURL+'artist/'+this.props.params.uri+'/about'} scrollTo="sub-views-menu"><h4>About</h4></Link>
</div>
)
}
@ -223,7 +225,7 @@ class Artist extends React.Component{
<div className="col col--w5"></div>
{artist.related_artists && artist.related_artists.length > 0 ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} className="button grey">All related artists</Link></div> : null}
{artist.related_artists && artist.related_artists.length > 0 ? <div className="col col--w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0,6)} /></div><Link to={global.baseURL+'artist/'+artist.uri+'/related-artists'} scrollTo="sub-views-menu" className="button grey">All related artists</Link></div> : null}
<div className="cf"></div>

2
src/js/views/Track.js
View File

@ -243,7 +243,7 @@ class Track extends React.Component{
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
</div>
{!this.props.genius_authorized ? <p className="no-results">Want track lyrics? Authorize Genius under <Link to={global.baseURL+"settings/service/genius"}>Settings</Link>.</p> : null}
{!this.props.genius_authorized ? <p className="no-results">Want track lyrics? Authorize Genius under <Link to={global.baseURL+"settings/service/genius"} scrollTo="services-menu">Settings</Link>.</p> : null}
{this.props.genius_authorized ? this.renderLyricsSelector() : null}
{this.props.genius_authorized ? this.renderLyrics() : null}