diff options
-rw-r--r-- | test/unit/lib/icon-factory-test.js | 31 | ||||
-rw-r--r-- | ui/app/components/identicon.js | 7 | ||||
-rw-r--r-- | ui/app/components/panel.js | 6 | ||||
-rw-r--r-- | ui/lib/icon-factory.js | 56 |
4 files changed, 37 insertions, 63 deletions
diff --git a/test/unit/lib/icon-factory-test.js b/test/unit/lib/icon-factory-test.js deleted file mode 100644 index 2f24d408c..000000000 --- a/test/unit/lib/icon-factory-test.js +++ /dev/null @@ -1,31 +0,0 @@ -const assert = require('assert') -const sinon = require('sinon') - -const path = require('path') -const IconFactoryGen = require(path.join(__dirname, '..', '..', '..', 'ui', 'lib', 'icon-factory.js')) - -describe('icon-factory', function() { - let iconFactory, address, diameter - - beforeEach(function() { - iconFactory = IconFactoryGen((d,n) => 'stubicon') - address = '0x012345671234567890' - diameter = 50 - }) - - it('should return a data-uri string for any address and diameter', function() { - const output = iconFactory.iconForAddress(address, diameter) - assert.ok(output.indexOf('data:image/svg') === 0) - assert.equal(output, iconFactory.cache[address][diameter]) - }) - - it('should default to cache first', function() { - const testOutput = 'foo' - const mockSizeCache = {} - mockSizeCache[diameter] = testOutput - iconFactory.cache[address] = mockSizeCache - - const output = iconFactory.iconForAddress(address, diameter) - assert.equal(output, testOutput) - }) -}) diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 5fe07ce7a..c17bd5122 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -39,12 +39,9 @@ IdenticonComponent.prototype.componentDidMount = function () { if (!address) return var container = findDOMNode(this) - var diameter = state.diameter || this.defaultDiameter - var dataUri = iconFactory.iconForAddress(address, diameter) - - var img = document.createElement('img') - img.src = dataUri + var imageify = state.imageify + var img = iconFactory.iconForAddress(address, diameter, imageify) container.appendChild(img) } diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js index 3efd3c661..cbdc82982 100644 --- a/ui/app/components/panel.js +++ b/ui/app/components/panel.js @@ -27,9 +27,9 @@ Panel.prototype.render = function () { // account identicon h('.identicon-wrapper.flex-column.select-none', [ - // h(Identicon, { - // address: state.identiconKey, - // }), + h(Identicon, { + address: state.identiconKey, + }), h('span.font-small', state.identiconLabel), ]), diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index 1f7cca859..ed9624c13 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -12,42 +12,50 @@ function IconFactory (jazzicon) { this.cache = {} } -IconFactory.prototype.iconForAddress = function (address, diameter) { - if (this.isCached(address, diameter)) { - return this.cache[address][diameter] +IconFactory.prototype.iconForAddress = function (address, diameter, imageify) { + if (imageify) { + return this.generateIdenticonImg(address, diameter) + } else { + return this.generateIdenticonSvg(address, diameter) } - - const dataUri = this.generateNewUri(address, diameter) - this.cacheIcon(address, diameter, dataUri) - return dataUri } -IconFactory.prototype.generateNewUri = function (address, diameter) { - var numericRepresentation = jsNumberForAddress(address) - var identicon = this.jazzicon(diameter, numericRepresentation) +// returns img dom element +IconFactory.prototype.generateIdenticonImg = function (address, diameter) { + var identicon = this.generateIdenticonSvg(address, diameter) var identiconSrc = identicon.innerHTML - var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) - return dataUri + var dataUri = toDataUri(identiconSrc) + var img = document.createElement('img') + img.src = dataUri + return img } -IconFactory.prototype.cacheIcon = function (address, diameter, icon) { - if (!(address in this.cache)) { - var sizeCache = {} - sizeCache[diameter] = icon - this.cache[address] = sizeCache - return sizeCache - } else { - this.cache[address][diameter] = icon - return icon - } +// returns svg dom element +IconFactory.prototype.generateIdenticonSvg = function (address, diameter) { + var numericRepresentation = jsNumberForAddress(address) + var cacheId = address+':'+diameter + // check cache, lazily generate and populate cache + var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter)) + // create a clean copy so you can modify it + var cleanCopy = identicon.cloneNode(true) + return cleanCopy } -IconFactory.prototype.isCached = function (address, diameter) { - return address in this.cache && diameter in this.cache[address] +// creates a new identicon +IconFactory.prototype.generateNewIdenticon = function (address, diameter) { + var numericRepresentation = jsNumberForAddress(address) + var identicon = this.jazzicon(diameter, numericRepresentation) + return identicon } +// util + function jsNumberForAddress (address) { var addr = address.slice(2, 10) var seed = parseInt(addr, 16) return seed } + +function toDataUri(identiconSrc){ + return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) +}
\ No newline at end of file |