Changed how we scroll to articles already on-screen.

master
Pacman Ghost 3 years ago
parent 1446d97ac3
commit 11c8f0dced
  1. 26
      web/src/PublicationSearchResult.js
  2. 12
      web/src/SearchResults.js

@ -58,21 +58,17 @@ export class PublicationSearchResult extends React.Component
if ( this.props.data.articles ) { if ( this.props.data.articles ) {
for ( let i=0 ; i < this.props.data.articles.length ; ++i ) { for ( let i=0 ; i < this.props.data.articles.length ; ++i ) {
const article = this.props.data.articles[ i ] ; const article = this.props.data.articles[ i ] ;
if ( this.props.onArticleClick ) { let onArticleClick = (evt) => {
// forward clicks on the article to the parent // NOTE: We let the parent take a look at clicks first, so that they can scroll
articles.push( <div // to the article if it's already on-screen.
dangerouslySetInnerHTML = {{__html: article.article_title}} if ( this.props.onArticleClick && this.props.onArticleClick( article.article_id ) )
onClick = { () => this.props.onArticleClick( article.article_id ) } evt.preventDefault() ;
style = {{ cursor: "pointer" }} } ;
title = "Go to this article." articles.push( <Link title="Show this article."
/> ) ; to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
} else { onClick = {onArticleClick}
// handle clicks on the article normally dangerouslySetInnerHTML = {{ __html: article.article_title }}
articles.push( <Link title="Show this article." /> ) ;
to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
dangerouslySetInnerHTML = {{ __html: article.article_title }}
/> ) ;
}
} }
} }

@ -34,11 +34,17 @@ export class SearchResults extends React.Component
// track articles // track articles
let articleRefs = {} ; let articleRefs = {} ;
function scrollToArticle( article_id ) { function scrollToArticle( article_id ) {
// NOTE: If the user has clicked on an article that has been listed as part of a publication,
// we just scroll to that article (since articles are also returned as part of the search results
// when searching for a publication).
// NOTE: We could do the same thing when clicking on a publication that has been listed as part
// of a publisher, but in this case, it's probably better UX to show the publication's page,
// along with its articles.
const node = ReactDOM.findDOMNode( articleRefs[article_id] ) ; const node = ReactDOM.findDOMNode( articleRefs[article_id] ) ;
if ( node ) if ( node ) {
node.scrollIntoView() ; node.scrollIntoView() ;
else return true ;
document.location = gAppRef.makeAppUrl( "/article/" + article_id ) ; }
} }
// render the search results // render the search results
results = [] ; results = [] ;

Loading…
Cancel
Save