diff options
author | Dan Finlay <dan@danfinlay.com> | 2017-07-21 03:38:38 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2017-07-21 03:38:38 +0800 |
commit | 86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6 (patch) | |
tree | b4a6805e5e2a4de48c880d80f4b87d1f3b560a18 /ui/app/components/mascot.js | |
parent | 199587383b022a17d56adcb56d6a99ceba71fec7 (diff) | |
download | tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.tar.gz tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.tar.zst tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.zip |
Move responsive ui into its own folder for easier merges
Diffstat (limited to 'ui/app/components/mascot.js')
-rw-r--r-- | ui/app/components/mascot.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js new file mode 100644 index 000000000..973ec2cad --- /dev/null +++ b/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() +} |