public
/
asl-articles
1
0
Fork 0
Code Issues Pull Requests Projects Releases 5 Wiki Activity

Scroll to an article when clicking on them within a publication.

Browse Source
master
Pacman Ghost 4 years ago
parent 409678ecce
commit 5b1305a1d3
4 changed files with 48 additions and 19 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      web/src/App.js
  2. 19
      web/src/PublicationSearchResult.js
  3. 29
      web/src/SearchResults.js
  4. 18
      web/src/index.js

1
web/src/App.js
Unescape View File

@ -112,6 +112,7 @@ export class App extends React.Component
<SearchResults ref={this._searchResultsRef}
seqNo = {this.state.searchSeqNo}
searchResults = {this.state.searchResults}
type = {this.props.type}
/>
</div> ) ;
}

19
web/src/PublicationSearchResult.js
Unescape View File

@ -55,10 +55,21 @@ export class PublicationSearchResult extends React.Component
if ( this.props.data.articles ) {
for ( let i=0 ; i < this.props.data.articles.length ; ++i ) {
const article = this.props.data.articles[ i ] ;
articles.push( <Link title="Show this article."
to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
dangerouslySetInnerHTML = {{ __html: article.article_title }}
/> ) ;
if ( this.props.onArticleClick ) {
// forward clicks on the article to the parent
articles.push( <div
dangerouslySetInnerHTML = {{__html: article.article_title}}
onClick = { () => this.props.onArticleClick( article.article_id ) }
style = {{ cursor: "pointer" }}
title = "Go to this article."
/> ) ;
} else {
// handle clicks on the article normally
articles.push( <Link title="Show this article."
to = { gAppRef.makeAppUrl( "/article/" + article.article_id ) }
dangerouslySetInnerHTML = {{ __html: article.article_title }}
/> ) ;
}
}
}

29
web/src/SearchResults.js
Unescape View File

@ -1,4 +1,5 @@
import React from "react" ;
import ReactDOM from "react-dom" ;
import "./SearchResults.css" ;
import { PublisherSearchResult } from "./PublisherSearchResult" ;
import { PublicationSearchResult } from "./PublicationSearchResult" ;
@ -11,12 +12,16 @@ export class SearchResults extends React.Component
{
render() {
let results ;
if ( this.props.searchResults && this.props.searchResults.error !== undefined )
if ( this.props.searchResults && this.props.searchResults.error !== undefined ) {
// show the error message
results = "ERROR: " + this.props.searchResults.error ;
else if ( ! this.props.searchResults || this.props.searchResults.length === 0 )
} else if ( ! this.props.searchResults || this.props.searchResults.length === 0 ) {
// show that no search results were found
results = (this.props.seqNo === 0) ? null : <div className="no-results"> No results. </div> ;
else if ( this.props.searchResults === "(loading)" ) {
} else if ( this.props.searchResults === "(loading)" ) {
// show the loading spinner
results = ( <div className="loading">
<img id="loading" src="/images/loading.gif" alt="Loading..." style={{display:"none"}} />
</div> ) ;
@ -26,19 +31,31 @@ export class SearchResults extends React.Component
elem.style.display = "block" ;
}, 500 ) ;
} else {
// track articles
let articleRefs = {} ;
function scrollToArticle( article_id ) {
const node = ReactDOM.findDOMNode( articleRefs[article_id] ) ;
if ( node )
node.scrollIntoView() ;
else
document.location = gAppRef.makeAppUrl( "/article/" + article_id ) ;
}
// render the search results
results = [] ;
this.props.searchResults.forEach( sr => {
if ( sr.type === "publisher" ) {
results.push( <PublisherSearchResult key={"publisher:"+sr.publ_id} data={sr}
onDelete = { this.onDeleteSearchResult.bind( this ) }
onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
/> ) ;
} else if ( sr.type === "publication" ) {
results.push( <PublicationSearchResult key={"publication:"+sr.pub_id} data={sr}
onDelete = { this.onDeleteSearchResult.bind( this ) }
onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
onArticleClick = { this.props.type === "publication" ? (a) => scrollToArticle(a) : null }
/> ) ;
} else if ( sr.type === "article" ) {
results.push( <ArticleSearchResult key={"article:"+sr.article_id} data={sr}
onDelete = { this.onDeleteSearchResult.bind( this ) }
onDelete = { (n,v) => this.onDeleteSearchResult( n, v ) }
ref = { r => articleRefs[sr.article_id] = r }
/> ) ;
} else {
gAppRef.logInternalError( "Unknown search result type.", "srType = "+sr.type ) ;

18
web/src/index.js
Unescape View File

@ -10,32 +10,32 @@ import "./index.css" ;
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/publishers" render={ (props) => <App {...props} key="publishers"
<Route path="/publishers" render={ (props) => <App {...props} type="publishers" key="publishers"
doSearch = { () => gAppRef._showPublishers() }
/> } />
<Route path="/technique" render={ (props) => <App {...props} key="technique"
<Route path="/technique" render={ (props) => <App {...props} type="technique" key="technique"
doSearch = { () => gAppRef._showTechniqueArticles() }
/> } />
<Route path="/tips" render={ (props) => <App {...props} key="tips"
<Route path="/tips" render={ (props) => <App {...props} type="tips" key="tips"
doSearch = { () => gAppRef._showTipsArticles() }
/> } />
<Route path="/publisher/:publId" render={ (props) => <App {...props} key={"publ:"+props.match.params.publId}
<Route path="/publisher/:publId" render={ (props) => <App {...props} type="publisher" key={"publ:"+props.match.params.publId}
doSearch = { () => gAppRef.runSpecialSearch( "/search/publisher/"+gAppRef.props.match.params.publId, null,
() => gAppRef.setWindowTitleFromSearchResults( "publisher", "publ_id", gAppRef.props.match.params.publId, "publ_name" )
) }
/> } />
<Route path="/publication/:pubId" render={ (props) => <App {...props} key={"pub:"+props.match.params.pubId}
<Route path="/publication/:pubId" render={ (props) => <App {...props} type="publication" key={"pub:"+props.match.params.pubId}
doSearch = { () => gAppRef.runSpecialSearch( "/search/publication/"+gAppRef.props.match.params.pubId, null,
() => gAppRef.setWindowTitleFromSearchResults( "publication", "pub_id", gAppRef.props.match.params.pubId,
sr => { return PublicationSearchResult.makeDisplayName( sr ) }
) ) }
/> } />
<Route path="/article/:articleId" render={ (props) => <App {...props} key={"article:"+props.match.params.articleId}
<Route path="/article/:articleId" render={ (props) => <App {...props} type="article" key={"article:"+props.match.params.articleId}
doSearch = { () => gAppRef.runSpecialSearch( "/search/article/"+gAppRef.props.match.params.articleId, null,
() => gAppRef.setWindowTitleFromSearchResults( "article", "article_id", gAppRef.props.match.params.articleId, "article_title" )
) }
/> } />
<Route path="/author/:authorId" render={ (props) => <App {...props} key={"author:"+props.match.params.authorId}
<Route path="/author/:authorId" render={ (props) => <App {...props} type="author" key={"author:"+props.match.params.authorId}
doSearch = { () => gAppRef.runSpecialSearch( "/search/author/"+gAppRef.props.match.params.authorId, null,
() => {
const author = gAppRef.caches.authors[ gAppRef.props.match.params.authorId ] ;
@ -43,13 +43,13 @@ ReactDOM.render(
}
) }
/> } />
<Route path="/tag/:tag" render={ (props) => <App {...props} key={"tag:"+props.match.params.tag}
<Route path="/tag/:tag" render={ (props) => <App {...props} type="tag" key={"tag:"+props.match.params.tag}
doSearch = { () => gAppRef.runSpecialSearch( "/search/tag/"+gAppRef.props.match.params.tag, null,
() => gAppRef.setWindowTitle( gAppRef.props.match.params.tag )
) }
/> } />
<Route path="/" exact component={App} />
<Route path="/" render={ (props) => <App {...props} warning="Unknown URL." key="unknown-url" /> } />
<Route path="/" render={ (props) => <App {...props} warning="Unknown URL." type="home" key="unknown-url" /> } />
</Switch>
</BrowserRouter>,
document.getElementById( "app" )

Write Preview
Loading…
Cancel
Save