icon-factory - overhaul to provide svg or imagified el

feature/default_network_editable
kumavis 8 years ago
parent cc7dbace38
commit 7eb89613cc
  1. 31
      test/unit/lib/icon-factory-test.js
  2. 7
      ui/app/components/identicon.js
  3. 6
      ui/app/components/panel.js
  4. 56
      ui/lib/icon-factory.js

@ -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)
})
})

@ -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)
}

@ -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),
]),

@ -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)
}
Loading…
Cancel
Save