diff options
author | Dan <danjm.com@gmail.com> | 2017-11-15 00:04:23 +0800 |
---|---|---|
committer | Dan <danjm.com@gmail.com> | 2017-12-05 10:36:26 +0800 |
commit | 6561e75aa2fb03c77544da3c090ad6ea2883d29a (patch) | |
tree | d2203d198a2c49049fa8eb3d566e2bb00ebcdb45 /old-ui/app/components/mascot.js | |
parent | 2b1f2557c7dbd589724fd690ec72f789f9650e3c (diff) | |
download | tangerine-wallet-browser-6561e75aa2fb03c77544da3c090ad6ea2883d29a.tar.gz tangerine-wallet-browser-6561e75aa2fb03c77544da3c090ad6ea2883d29a.tar.zst tangerine-wallet-browser-6561e75aa2fb03c77544da3c090ad6ea2883d29a.zip |
Add old-ui directory
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() +} |