flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Globe: Add opacity option, Part globe WIP

Browse Source 
- Don't run the onScroll method on load, creates a funky translate otherwise
- Bind window innerHeight via Svelte
- Path scroll smoothing option value as prop
This commit is contained in:
Félix Péault
2020-04-21 09:46:27 +02:00
parent c9ba6a9f29
commit 65c9822b73
6 changed files with 62 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/globe/index.js
View File

@@ -31,8 +31,9 @@ class WebglGlobe {
this.options = options
this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0
this.options.scrollSmoothing = this.options.scrollSmoothing || 0.5 // Smooth the globe position to avoid janks on scroll (lower == smoother)
this.options.cameraDistance = 1//this.options.cameraDistance || 1 // A multiplier to move camera backward or forward
this.options.cameraDistance = 1 // this.options.cameraDistance || 1 // A multiplier to move camera backward or forward
this.options.opacity = this.options.opacity || 1
this.cities = options.markers // List of cities with their options
this._canUpdate = false
this.hasUpdateCameraPos = false
@@ -171,7 +172,7 @@ class WebglGlobe {
el.style.pointerEvents = 'auto'
el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug)
el.setAttribute('sapper-noscroll', '')
if (markers[i].className) el.classList.add( markers[i].className )
if (markers[i].className) el.classList.add(markers[i].className)
// Add label
let span = document.createElement('span')
@@ -193,6 +194,11 @@ class WebglGlobe {
// Add class
el.classList.add('marker')
// Add a class if opacity is below 1
if (this.options.opacity < 1) {
el.classList.add('is-light')
}
// Callback on click
el.addEventListener('click', () => {
this.options.onLinkClicked && this.options.onLinkClicked()
@@ -238,7 +244,7 @@ class WebglGlobe {
this.options.cameraDistance = this.height / this.$el.clientHeight;
// Remove retina on small screen (aka mobile) to boost perfs
this.renderer.setPixelRatio( window.innerWidth < 768 ? 1 : window.devicePixelRatio)
this.renderer.setPixelRatio(window.innerWidth < 768 ? 1 : window.devicePixelRatio)
this.renderer.resize(this.width , this.height)
// Update camera aspect ratio
@@ -277,8 +283,8 @@ class WebglGlobe {
// Destroy
destroy() {
this.disable()//stop render loop
document.body.removeChild( this.$markerWrapper )
document.body.removeChild( this.renderer.canvas )
document.body.removeChild(this.$markerWrapper )
document.body.removeChild(this.renderer.canvas )
this.camera.delete()//to remove event listeners
}
@@ -287,12 +293,12 @@ class WebglGlobe {
* This helps saving perfs and battery
*/
enable () {
this.renderer.canvas.style.opacity = 1
this.renderer.canvas.style.opacity = this.options.opacity
this.$markerWrapper.style.opacity = 1
this._canUpdate = true
}
disable () {
disable () {
this.renderer.canvas.style.opacity = 0
this.$markerWrapper.style.opacity = 0
this._canUpdate = false
@@ -305,7 +311,7 @@ class WebglGlobe {
}
if (this.globeMesh.material.uniforms.uCameraOffsetY) {
this.globeMesh.material.uniforms.uCameraOffsetY.value += ( this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
}
this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing