forked from Qortal/qortal-ui
AlphaX-Projects
2 years ago
21 changed files with 50 additions and 234 deletions
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,186 +0,0 @@
|
||||
import { LitElement, html, css } from 'lit' |
||||
import { connect } from 'pwa-helpers' |
||||
import { store } from '../../store.js' |
||||
|
||||
const TRANSITION_EVENT_NAMES = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd', 'MSTransitionEnd'] |
||||
|
||||
class LoadingRipple extends connect(store)(LitElement) { |
||||
static get properties () { |
||||
return { |
||||
welcomeMessage: { |
||||
type: String, |
||||
attribute: 'welcome-message', |
||||
reflectToAttribute: true |
||||
}, |
||||
loadingMessage: { |
||||
type: String, |
||||
attribute: 'loading-message', |
||||
reflectToAttribute: true |
||||
} |
||||
} |
||||
} |
||||
|
||||
constructor () { |
||||
super() |
||||
this.welcomeMessage = '' |
||||
this.loadingMessage = '' |
||||
} |
||||
|
||||
static get styles () { |
||||
return css` |
||||
* { |
||||
--paper-spinner-color: var(--mdc-theme-secondary); |
||||
} |
||||
|
||||
` |
||||
} |
||||
|
||||
render () { |
||||
return html` |
||||
<style> |
||||
#rippleWrapper{ |
||||
position:fixed; |
||||
top:0; |
||||
left:0; |
||||
bottom:0; |
||||
right:0; |
||||
height:0; |
||||
width:0; |
||||
z-index:999; |
||||
overflow: visible; |
||||
--ripple-activating-transition: transform 0.3s cubic-bezier(0.6, 0.0, 1, 1), opacity 0.3s cubic-bezier(0.6, 0.0, 1, 1); |
||||
--ripple-disable-transition: opacity 0.5s ease; |
||||
} |
||||
#ripple{ |
||||
border-radius:50%; |
||||
border-width:0; |
||||
margin-left:-100vmax; |
||||
margin-top: -100vmax; |
||||
height:200vmax; |
||||
width:200vmax; |
||||
overflow:hidden; |
||||
background: var(--mdc-theme-secondary); |
||||
transform: scale(0); |
||||
overflow:hidden; |
||||
} |
||||
#ripple.error { |
||||
transition: var(--ripple-activating-transition); |
||||
background: var(--mdc-theme-error) |
||||
} |
||||
#rippleShader { |
||||
background: var(--mdc-theme-surface); |
||||
opacity:0; |
||||
height:100%; |
||||
width:100%; |
||||
} |
||||
#ripple.activating{ |
||||
transition: var(--ripple-activating-transition); |
||||
transform: scale(1) |
||||
} |
||||
.activating #rippleShader { |
||||
transition: var(--ripple-activating-transition); |
||||
opacity: 1; |
||||
} |
||||
#ripple.disabling{ |
||||
transition: var(--ripple-disable-transition); |
||||
opacity: 0; |
||||
} |
||||
#rippleContentWrapper { |
||||
position: absolute; |
||||
top:100vmax; |
||||
left:100vmax; |
||||
height:var(--window-height); |
||||
width:100vw; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
#rippleContent { |
||||
opacity: 0; |
||||
text-align:center; |
||||
} |
||||
.activating-done #rippleContent { |
||||
opacity: 1; |
||||
transition: var(--ripple-activating-transition); |
||||
} |
||||
</style> |
||||
<div id="rippleWrapper"> |
||||
<div id="ripple"> |
||||
<div id="rippleShader"></div> |
||||
<div id="rippleContentWrapper"> |
||||
<div id="rippleContent"> |
||||
<h1>${this.welcomeMessage}</h1> |
||||
<paper-spinner-lite active></paper-spinner-lite> |
||||
<p>${this.loadingMessage}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
` |
||||
} |
||||
|
||||
firstUpdated () { |
||||
this._rippleWrapper = this.shadowRoot.getElementById('rippleWrapper') |
||||
this._ripple = this.shadowRoot.getElementById('ripple') |
||||
this._rippleContentWrapper = this.shadowRoot.getElementById('rippleContentWrapper') |
||||
} |
||||
|
||||
// duh
|
||||
open (origin) { |
||||
this._rippleWrapper.style.top = origin.y + 'px' |
||||
this._rippleWrapper.style.left = origin.x + 'px' |
||||
this._rippleContentWrapper.style.marginTop = -origin.y + 'px' |
||||
this._rippleContentWrapper.style.marginLeft = -origin.x + 'px' |
||||
|
||||
return new Promise((resolve, reject) => { |
||||
this._ripple.classList.add('activating') |
||||
let isOpened = false |
||||
const doneOpeningEvent = () => { |
||||
if (isOpened) return |
||||
// Clear events
|
||||
TRANSITION_EVENT_NAMES.forEach(name => this._ripple.removeEventListener(name, doneOpeningEvent)) |
||||
this._ripple.classList.add('activating-done') |
||||
isOpened = true |
||||
resolve() |
||||
} |
||||
TRANSITION_EVENT_NAMES.forEach(name => this._ripple.addEventListener(name, doneOpeningEvent)) |
||||
}) |
||||
} |
||||
|
||||
// Fades out
|
||||
fade () { |
||||
return new Promise((resolve, reject) => { |
||||
// CAN'T FADE OUT CAUSE THE STUPID THING GETS KILLED CAUSE OF STATE.APP.LOGGEEDIN
|
||||
// let rippleClosed = false
|
||||
this._ripple.classList.remove('activating') |
||||
this._ripple.classList.remove('activating-done') |
||||
this._ripple.classList.remove('disabling') |
||||
resolve() |
||||
}) |
||||
} |
||||
|
||||
// un-ripples...
|
||||
close () { |
||||
return new Promise((resolve, reject) => { |
||||
let rippleClosed = false |
||||
this._ripple.classList.add('error') |
||||
this._ripple.classList.remove('activating') |
||||
this._ripple.classList.remove('activating-done') |
||||
const rippleClosedEvent = () => { |
||||
if (rippleClosed) return |
||||
rippleClosed = true |
||||
TRANSITION_EVENT_NAMES.forEach(name => this._ripple.removeEventListener(name, rippleClosedEvent)) |
||||
// Reset the ripple
|
||||
this._ripple.classList.remove('error') |
||||
this.rippleIsOpen = false |
||||
resolve() |
||||
} |
||||
TRANSITION_EVENT_NAMES.forEach(name => this._ripple.addEventListener(name, rippleClosedEvent)) |
||||
}) |
||||
} |
||||
|
||||
stateChanged (state) { |
||||
} |
||||
} |
||||
|
||||
window.customElements.define('loading-ripple', LoadingRipple) |
||||
Loading…
Reference in new issue