diff options
Diffstat (limited to 'frontend/site/projects/museum/views')
| -rw-r--r-- | frontend/site/projects/museum/views/_subtitles.css (renamed from frontend/site/projects/museum/views/subtitles.css) | 0 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/_subtitles.overlay.js (renamed from frontend/site/projects/museum/views/subtitles.overlay.js) | 0 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/artists.css | 7 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/artists.js | 10 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/credits.css | 1 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/credits.js | 10 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/essay.css | 33 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/essay.js | 10 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/jakrawal.links.css | 49 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/jakrawal.links.js | 130 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/nav.css | 4 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/nav.overlay.js | 8 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/titles.css | 12 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/titles.overlay.js | 136 |
14 files changed, 403 insertions, 7 deletions
diff --git a/frontend/site/projects/museum/views/subtitles.css b/frontend/site/projects/museum/views/_subtitles.css index 059acec..059acec 100644 --- a/frontend/site/projects/museum/views/subtitles.css +++ b/frontend/site/projects/museum/views/_subtitles.css diff --git a/frontend/site/projects/museum/views/subtitles.overlay.js b/frontend/site/projects/museum/views/_subtitles.overlay.js index 6d5a32a..6d5a32a 100644 --- a/frontend/site/projects/museum/views/subtitles.overlay.js +++ b/frontend/site/projects/museum/views/_subtitles.overlay.js diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css index 015a4db..c2350a6 100644 --- a/frontend/site/projects/museum/views/artists.css +++ b/frontend/site/projects/museum/views/artists.css @@ -69,9 +69,14 @@ pointer-events: none; } .page-artists .artist-detail.visible { + color: #000; + background: #FF790D; pointer-events: auto; opacity: 1; } +.page.page-artists .artist-detail.visible a { + color: #000; +} .page-artists .artist-detail-name { font-size: 14.5vh; @@ -87,7 +92,7 @@ } .page-artists .nav-arrow path { stroke: #FF790D; - fill: transparent; + fill: #FF790D; } .page-artists .artist-content { diff --git a/frontend/site/projects/museum/views/artists.js b/frontend/site/projects/museum/views/artists.js index 912e0e8..591b1d5 100644 --- a/frontend/site/projects/museum/views/artists.js +++ b/frontend/site/projects/museum/views/artists.js @@ -6,6 +6,8 @@ import "./artists.css" import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight } from "site/projects/museum/icons" +import { history } from "site/store" + export default class Artists extends Component { state = { currentIndex: 0, @@ -18,6 +20,7 @@ export default class Artists extends Component { this.showArtist = this.showArtist.bind(this) this.previousArtist = this.previousArtist.bind(this) this.nextArtist = this.nextArtist.bind(this) + this.goHome = this.goHome.bind(this) } componentDidMount() { @@ -43,6 +46,10 @@ export default class Artists extends Component { this.scrollToTop() } + goHome() { + history.push(`/last-museum/home/`) + } + scrollToTop() { setTimeout(() => { Array.from(this.ref.current.querySelectorAll(".artist-content")).forEach(el => { @@ -79,6 +86,9 @@ export default class Artists extends Component { <div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div> <div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div> </div> + <div className={detail ? "home-link black" : "home-link"} onClick={this.goHome}> + Home + </div> </div> ) } diff --git a/frontend/site/projects/museum/views/credits.css b/frontend/site/projects/museum/views/credits.css index 73343f7..d7c6f35 100644 --- a/frontend/site/projects/museum/views/credits.css +++ b/frontend/site/projects/museum/views/credits.css @@ -22,6 +22,7 @@ text-align: center; line-height: 1; white-space: nowrap; + cursor: default; } .page-title span { margin-left: -0.45vw; diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js index 8e91ea5..fd17045 100644 --- a/frontend/site/projects/museum/views/credits.js +++ b/frontend/site/projects/museum/views/credits.js @@ -1,12 +1,15 @@ import React, { Component } from 'react' import actions from 'site/actions' +import { history } from "site/store" + import "./credits.css" export default class Credits extends Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) + this.goHome = this.goHome.bind(this) this.state = { } } @@ -19,6 +22,10 @@ export default class Credits extends Component { e && e.preventDefault() } + goHome() { + history.push(`/last-museum/home/`) + } + render() { return ( <div className="page page-credits"> @@ -114,6 +121,9 @@ export default class Credits extends Component { </div> </div> + <div className="home-link" onClick={this.goHome}> + Home + </div> </div> ) } diff --git a/frontend/site/projects/museum/views/essay.css b/frontend/site/projects/museum/views/essay.css index 24917fd..0cc66a9 100644 --- a/frontend/site/projects/museum/views/essay.css +++ b/frontend/site/projects/museum/views/essay.css @@ -1,3 +1,25 @@ + +.page .home-link { + position: fixed; + top: 0; + left: 0; + padding: 1rem; + color: black; + font-family: 'Helvetica', sans-serif; + font-size: 1.2rem; + cursor: pointer; + user-select: none; + transition: color 0.1s; + color: rgb(255, 121, 13); +} +.page .home-link:hover { + color: #fff; +} +.page .home-link.black { + color: #000; +} + + .page-essay.page-artists .artist-list { justify-content: flex-start; } @@ -19,6 +41,14 @@ line-height: 1.4; } +.page-essay.page-artists .artist-detail.visible { + background: rgb(255, 121, 13); + color: #000; +} +.page.page-essay.page-artists .artist-detail.visible a { + color: #000; +} + .page-essay a:hover { text-decoration: underline; } @@ -46,7 +76,8 @@ width: 100%; } .globe path { - stroke: rgb(255, 121, 13); + /*stroke: rgb(255, 121, 13);*/ + stroke: rgb(0, 0, 0); stroke-miterlimit: 10; stroke-linecap: round; stroke-linejoin: round; diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js index e271934..ddfbfcb 100644 --- a/frontend/site/projects/museum/views/essay.js +++ b/frontend/site/projects/museum/views/essay.js @@ -7,6 +7,8 @@ import "./essay.css" import { ARTISTS, ARTIST_ORDER, ESSAYS, ESSAY_ORDER } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight, Globe } from "site/projects/museum/icons" +import { history } from "site/store" + export default class Essays extends Component { state = { currentIndex: 0, @@ -20,6 +22,7 @@ export default class Essays extends Component { this.previousEssay = this.previousEssay.bind(this) this.nextEssay = this.nextEssay.bind(this) this.close = this.close.bind(this) + this.goHome = this.goHome.bind(this) } componentDidMount() { @@ -45,6 +48,10 @@ export default class Essays extends Component { this.scrollToTop() } + goHome() { + history.push(`/last-museum/home/`) + } + scrollToTop() { setTimeout(() => { Array.from(this.ref.current.querySelectorAll(".artist-detail")).forEach(el => { @@ -88,6 +95,9 @@ export default class Essays extends Component { <div className="nav-arrow arrow-left" onClick={this.previousEssay}>{ArrowLeft}</div> <div className="nav-arrow arrow-right" onClick={this.nextEssay}>{ArrowRight}</div> </div> + <div className={detail ? "home-link black" : "home-link"} onClick={this.goHome}> + Home + </div> </div> ) } diff --git a/frontend/site/projects/museum/views/jakrawal.links.css b/frontend/site/projects/museum/views/jakrawal.links.css new file mode 100644 index 0000000..96cc0d3 --- /dev/null +++ b/frontend/site/projects/museum/views/jakrawal.links.css @@ -0,0 +1,49 @@ +.jakrawal-left { + position: absolute; + top: 0; + left: 0; + width: 20%; + min-width: 140px; + height: 100%; + background-image: url(/last-museum/static/media/last-museum/jakrawal-nilthamrong/left.png); + background-position: left 40px center; + background-repeat: no-repeat; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-102.png) 50 50, pointer; +} + +.jakrawal-right { + position: absolute; + top: 0; + right: 0; + width: 20%; + min-width: 140px; + height: 100%; + background-image: url(/last-museum/static/media/last-museum/jakrawal-nilthamrong/right.png); + background-position: right 40px center; + background-repeat: no-repeat; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-102.png) 50 50, pointer; +} + +.jakrawal-text { + position: absolute; + bottom: 5rem; + left: 0; + width: 100%; + padding: 0 5rem 0 5rem; + color: rgba(255, 121, 13, 1.0); + font-family: "Druk Wide"; + font-size: 1.66vw; + transition: opacity 0.2s; + opacity: 0; + text-align: center; +} +.jakrawal-text.hovering { + opacity: 1; +} + +.jakrawal-text-icon { + position: absolute; + top: 1rem; + right: 1rem; + cursor: url(/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-103.png), pointer; +} diff --git a/frontend/site/projects/museum/views/jakrawal.links.js b/frontend/site/projects/museum/views/jakrawal.links.js new file mode 100644 index 0000000..880d0e6 --- /dev/null +++ b/frontend/site/projects/museum/views/jakrawal.links.js @@ -0,0 +1,130 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import './jakrawal.links.css' + +import { history } from "site/store" + +const JAKRAWAL_TEXTS = [ + "<i>Wildfires</i> occur frequently during the dry season in northern Thailand’s high mountains. The source of fire is not natural but arson.", + "In the past it was hypothesized that local people set the fires to clear land for agricultural use, or for hunting. There were efforts to solve the problem at the community level, but the fires only became more severe.", + "Strangely, the blazes often occurred in the national park—an area difficult for villagers to access.", + "During the wildfire suppression efforts of May 2020, a group of scholars and volunteers discovered important evidence that would change the original hypothesis.", + "They found several instances of improvised devices made of clothes pegs connected to a small battery by a power cable.", + "Combustion was triggered by a small clod of clay positioned in the middle between the pegs, acting as a timer. After melting in the heat the wires attached to the batteries would ignite.", + "Villagers who were interviewed said that this was not a technique that they were familiar with.", + "Although we cannot know the intention of the burners, it is likely that the park’s natural resources are being used to benefit some group of people. And the poor have always been condemned.", +] + +const RESET_STATE = { + left: null, + right: null, + lateralLink: null, + verticalLink: null, + text: null, + hovering: false, +} + +const VERTICAL_TIMEOUT = 40000 + +class JakrawalLinks extends Component { + state = { + ...RESET_STATE + } + + constructor(props) { + super(props) + this.goLateral = this.goLateral.bind(this) + this.goVertical = this.goVertical.bind(this) + this.handleEnter = this.handleEnter.bind(this) + this.handleLeave = this.handleLeave.bind(this) + } + + componentDidMount() { + if (this.props.interactive) { + this.load() + } + } + + componentDidUpdate(prevProps) { + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || this.props.location.pathname !== prevProps.location.pathname + ) { + this.load(prevProps.match && prevProps.match.params) + } + } + + load(lastParams) { + const { page_name } = this.props.match.params + const page_partz = page_name.split("-") + const isJakrawal = page_partz[0] === 'nilthamrong' + + if (!isJakrawal || page_partz[1] === 'home') { + clearTimeout(this.timeout) + this.setState({ + ...RESET_STATE, + }) + return + } + if (page_partz[1] === 'a9') { + clearTimeout(this.timeout) + this.timeout = setTimeout(this.goVertical, VERTICAL_TIMEOUT) + this.setState({ + ...RESET_STATE, + verticalLink: "home", + }) + return + } + const partz = page_partz[1].split("") + const isOnA = partz[0] === 'a'; + const lateralLink = (isOnA ? 'b' : 'a') + partz[1] + const verticalLink = partz[0] + (parseInt(partz[1]) + 1) + const text = JAKRAWAL_TEXTS[parseInt(partz[1]) - 1] + this.setState({ + left: !isOnA, + right: isOnA, + lateralLink, + verticalLink, + text, + hovering: false, + }) + console.log(isOnA, lateralLink, verticalLink) + if (!lastParams || lastParams.page_name !== ('nilthamrong' + lateralLink)) { + clearTimeout(this.timeout) + this.timeout = setTimeout(this.goVertical, VERTICAL_TIMEOUT) + } + } + + handleEnter() { + this.setState({ hovering: true }) + } + handleLeave() { + this.setState({ hovering: false }) + } + goLateral() { + history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) + } + goVertical() { + history.push(`/last-museum/nilthamrong-${this.state.lateralLink}/`) + } + + render() { + const { left, right, text, hovering } = this.state + if (!this.props.interactive || !text) return null + return ( + <div> + {left && <div className="jakrawal-left" onClick={this.goLateral} />} + {right && <div className="jakrawal-right" onClick={this.goLateral} />} + {text && <div className={hovering ? "jakrawal-text hovering" : "jakrawal-text"}>{text}</div>} + {text && <div className="jakrawal-text-icon" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave}><img src="/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-103.png"/></div>} + </div> + ) + } +} + +const mapStateToProps = state => ({ + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(JakrawalLinks) diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css index 27b9190..bd584a6 100644 --- a/frontend/site/projects/museum/views/nav.css +++ b/frontend/site/projects/museum/views/nav.css @@ -46,12 +46,12 @@ transform: translateY(3rem); } .nav-arrow path { - fill: transparent; - + fill: rgba(255, 121, 13, 1.0); stroke: rgba(255, 121, 13, 1.0); stroke-width: 2px; } .nav-arrow:hover path { + fill: rgba(255, 255, 255, 1.0); stroke: rgba(255, 255, 255, 1.0); } .nav-arrow.arrow-left { diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js index c2bd94b..f9ece7a 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -5,7 +5,8 @@ import actions from 'site/actions' import "./nav.css" import TextOverlay from './text.overlay' -import SubtitlesOverlay from './subtitles.overlay' +import JakrawalLinks from './jakrawal.links' +import TitlesOverlay from './titles.overlay' import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants" import { ArrowLeft, ArrowRight } from "site/projects/museum/icons" import { history } from "site/store" @@ -68,7 +69,7 @@ export default class NavOverlay extends Component { } else if (PROJECT_PAGE_SET.has(pathkey)) { this.setState({ - showHome: true, + showHome: false, showFooter: false, showArtist: false, showCounter: false, @@ -131,6 +132,7 @@ export default class NavOverlay extends Component { const { showArtist, showHome, showCounter, showFooter, artist } = this.state return ( <div className="museum-nav"> + <JakrawalLinks location={this.props.location} match={this.props.match} /> {showHome && ( <div className="home-link" onClick={this.goHome}> Home @@ -153,7 +155,7 @@ export default class NavOverlay extends Component { <div className="footer no-artist" ref={this.footerRef} /> ) )} - <SubtitlesOverlay location={this.props.location} match={this.props.match} /> + <TitlesOverlay location={this.props.location} match={this.props.match} /> </div> ) } diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css new file mode 100644 index 0000000..a02ab26 --- /dev/null +++ b/frontend/site/projects/museum/views/titles.css @@ -0,0 +1,12 @@ +.chapter-title { + position: absolute; + top: 2vh; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; + color: rgba(255, 121, 13, 1.0); + font-family: "Druk Wide"; + font-size: 1.66vw; + transition: opacity 0.5s; + opacity: 0; +} diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js new file mode 100644 index 0000000..26acc05 --- /dev/null +++ b/frontend/site/projects/museum/views/titles.overlay.js @@ -0,0 +1,136 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import { SUBTITLES } from '../subtitles.js' + +import './titles.css' + +const TITLE_SHOW_DELAY = 1000 +const TITLE_HIDE_DELAY = 6000 +const FIRST_SUBTITLE_DELAY = 3000 +const SUBTITLE_DELAY = 3500 +const LAST_SUBTITLE_DELAY = 5000 + +class TitlesOverlay extends Component { + state = { + content: null, + } + + constructor(props) { + super(props) + this.titleRef = React.createRef() + this.subtitleRef = React.createRef() + this.showTitle = this.showTitle.bind(this) + this.nextSubtitle = this.nextSubtitle.bind(this) + } + + componentDidMount() { + if (this.props.interactive) { + this.load() + } + } + + componentDidUpdate(prevProps) { + if ( + (this.props.interactive && this.props.interactive !== prevProps.interactive) + || this.props.location.pathname !== prevProps.location.pathname + ) { + this.load() + } + if ( + this.props.popups !== prevProps.popups + && this.state.content + && this.state.content.popup + && this.props.popups[this.state.content.popup] + ) { + this.startSubtitles() + } + } + + load() { + const { page_name } = this.props.match.params + clearTimeout(this.titleTimeout) + clearTimeout(this.subtitleTimeout) + this.props.audio.player.stop("text-overlay") + if (SUBTITLES[page_name]) { + this.setState({ + content: SUBTITLES[page_name], + open: false, + }) + setTimeout(this.showTitle, 0) + } else { + this.setState({ + content: null, + open: false, + }) + } + } + + showTitle() { + if (!this.titleRef.current) return + this.titleRef.current.style.color = this.state.content.color || "rgba(255, 121, 13, 1.0)" + this.titleRef.current.style.opacity = 0 + this.titleTimeout = setTimeout(() => { + this.titleRef.current.style.opacity = 1 + this.titleTimeout = setTimeout(() => { + this.titleRef.current.style.opacity = 0 + }, TITLE_HIDE_DELAY) + }, TITLE_SHOW_DELAY) + } + + startSubtitles() { + if (this.state.content.audio_url) { + this.props.audio.player.stop("text-overlay") + this.props.audio.player.playURL({ + id: "text-overlay", + url: this.state.content.audio_url, + }) + } + clearTimeout(this.subtitleTimeout) + this.index = -1 + this.subtitleTimeout = setTimeout(this.nextSubtitle, FIRST_SUBTITLE_DELAY) + } + + nextSubtitle() { + if (!this.subtitleRef.current) return + this.index += 1 + const subtitle = this.state.content.subtitles[this.index] || "" + this.subtitleRef.current.style.color = this.state.content.color || "rgba(255, 121, 13, 1.0)" + this.subtitleRef.current.innerHTML = subtitle + if (this.index === (this.state.content.subtitles.length - 1)) { + this.subtitleTimeout = setTimeout(this.nextSubtitle, LAST_SUBTITLE_DELAY) + } + else if (subtitle.length) { + this.subtitleTimeout = setTimeout(this.nextSubtitle, SUBTITLE_DELAY) + } + } + + render() { + const { content } = this.state + const { popups, interactive } = this.props + if (!interactive || !content) return null + return ( + <div> + <div + ref={this.titleRef} + className="chapter-title" + dangerouslySetInnerHTML={{ __html: content.title }} + /> + {content.popup && popups[content.popup] && ( + <div + ref={this.subtitleRef} + className="subtitles" + /> + )} + </div> + ) + } +} + +const mapStateToProps = state => ({ + audio: state.audio, + popups: state.site.popups, + interactive: state.site.interactive, +}) + +export default connect(mapStateToProps)(TitlesOverlay) |