diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-02-28 03:25:29 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-02-28 03:25:29 +0800 |
commit | 3fefccd37219c9b4b513fc8d929723e07022b9c4 (patch) | |
tree | 22865ecd672570a6162ac3c9402ec9d63ad3f7ef /old-ui/app/components/mascot.js | |
parent | 6a7ea00cd34f83b257f6b4280a5f4e20aa5d34ee (diff) | |
parent | ced62ac551a095c8f94f550f0c01a9d4fd04ce5b (diff) | |
download | tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.gz tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.tar.zst tangerine-wallet-browser-3fefccd37219c9b4b513fc8d929723e07022b9c4.zip |
Merge branch 'master' into mascara-deploy
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() +} |