diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2017-12-23 03:40:20 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-12-23 03:40:20 +0800 |
commit | 409d1d30e9d836926e5361fb9e4b5b025b66e313 (patch) | |
tree | c7f247d1e973c50697af8b9905d9fd40d4575659 /old-ui/app/components/mascot.js | |
parent | b944a63ff89e3c45f7d7e49b2d93a5442cde4462 (diff) | |
parent | 5a58add797fcdbb023678af84a61f1d2bfdafaf1 (diff) | |
download | tangerine-wallet-browser-409d1d30e9d836926e5361fb9e4b5b025b66e313.tar.gz tangerine-wallet-browser-409d1d30e9d836926e5361fb9e4b5b025b66e313.tar.zst tangerine-wallet-browser-409d1d30e9d836926e5361fb9e4b5b025b66e313.zip |
Merge pull request #2799 from MetaMask/NewUI-flat
Update UAT to version 4.0.5
Diffstat (limited to 'old-ui/app/components/mascot.js')
-rw-r--r-- | old-ui/app/components/mascot.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/old-ui/app/components/mascot.js b/old-ui/app/components/mascot.js new file mode 100644 index 000000000..973ec2cad --- /dev/null +++ b/old-ui/app/components/mascot.js @@ -0,0 +1,59 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const metamaskLogo = require('metamask-logo') +const debounce = require('debounce') + +module.exports = Mascot + +inherits(Mascot, Component) +function Mascot () { + Component.call(this) + this.logo = metamaskLogo({ + followMouse: true, + pxNotRatio: true, + width: 200, + height: 200, + }) + + this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000) + this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false) +} + +Mascot.prototype.render = function () { + // this is a bit hacky + // the event emitter is on `this.props` + // and we dont get that until render + this.handleAnimationEvents() + + return h('#metamask-mascot-container', { + style: { zIndex: 0 }, + }) +} + +Mascot.prototype.componentDidMount = function () { + var targetDivId = 'metamask-mascot-container' + var container = document.getElementById(targetDivId) + container.appendChild(this.logo.container) +} + +Mascot.prototype.componentWillUnmount = function () { + this.animations = this.props.animationEventEmitter + this.animations.removeAllListeners() + this.logo.container.remove() + this.logo.stopAnimation() +} + +Mascot.prototype.handleAnimationEvents = function () { + // only setup listeners once + if (this.animations) return + this.animations = this.props.animationEventEmitter + this.animations.on('point', this.lookAt.bind(this)) + this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo)) +} + +Mascot.prototype.lookAt = function (target) { + this.unfollowMouse() + this.logo.lookAt(target) + this.refollowMouse() +} |