icon-factory - overhaul to provide svg or imagified el
This commit is contained in:
parent
cc7dbace38
commit
7eb89613cc
|
@ -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
|
if (!address) return
|
||||||
|
|
||||||
var container = findDOMNode(this)
|
var container = findDOMNode(this)
|
||||||
|
|
||||||
var diameter = state.diameter || this.defaultDiameter
|
var diameter = state.diameter || this.defaultDiameter
|
||||||
var dataUri = iconFactory.iconForAddress(address, diameter)
|
var imageify = state.imageify
|
||||||
|
var img = iconFactory.iconForAddress(address, diameter, imageify)
|
||||||
var img = document.createElement('img')
|
|
||||||
img.src = dataUri
|
|
||||||
container.appendChild(img)
|
container.appendChild(img)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,9 +27,9 @@ Panel.prototype.render = function () {
|
||||||
|
|
||||||
// account identicon
|
// account identicon
|
||||||
h('.identicon-wrapper.flex-column.select-none', [
|
h('.identicon-wrapper.flex-column.select-none', [
|
||||||
// h(Identicon, {
|
h(Identicon, {
|
||||||
// address: state.identiconKey,
|
address: state.identiconKey,
|
||||||
// }),
|
}),
|
||||||
h('span.font-small', state.identiconLabel),
|
h('span.font-small', state.identiconLabel),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
|
|
@ -12,42 +12,50 @@ function IconFactory (jazzicon) {
|
||||||
this.cache = {}
|
this.cache = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
IconFactory.prototype.iconForAddress = function (address, diameter) {
|
IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
|
||||||
if (this.isCached(address, diameter)) {
|
if (imageify) {
|
||||||
return this.cache[address][diameter]
|
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) {
|
// returns img dom element
|
||||||
|
IconFactory.prototype.generateIdenticonImg = function (address, diameter) {
|
||||||
|
var identicon = this.generateIdenticonSvg(address, diameter)
|
||||||
|
var identiconSrc = identicon.innerHTML
|
||||||
|
var dataUri = toDataUri(identiconSrc)
|
||||||
|
var img = document.createElement('img')
|
||||||
|
img.src = dataUri
|
||||||
|
return img
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
|
||||||
|
// creates a new identicon
|
||||||
|
IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
|
||||||
var numericRepresentation = jsNumberForAddress(address)
|
var numericRepresentation = jsNumberForAddress(address)
|
||||||
var identicon = this.jazzicon(diameter, numericRepresentation)
|
var identicon = this.jazzicon(diameter, numericRepresentation)
|
||||||
var identiconSrc = identicon.innerHTML
|
return identicon
|
||||||
var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
|
|
||||||
return dataUri
|
|
||||||
}
|
}
|
||||||
|
|
||||||
IconFactory.prototype.cacheIcon = function (address, diameter, icon) {
|
// util
|
||||||
if (!(address in this.cache)) {
|
|
||||||
var sizeCache = {}
|
|
||||||
sizeCache[diameter] = icon
|
|
||||||
this.cache[address] = sizeCache
|
|
||||||
return sizeCache
|
|
||||||
} else {
|
|
||||||
this.cache[address][diameter] = icon
|
|
||||||
return icon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
IconFactory.prototype.isCached = function (address, diameter) {
|
|
||||||
return address in this.cache && diameter in this.cache[address]
|
|
||||||
}
|
|
||||||
|
|
||||||
function jsNumberForAddress (address) {
|
function jsNumberForAddress (address) {
|
||||||
var addr = address.slice(2, 10)
|
var addr = address.slice(2, 10)
|
||||||
var seed = parseInt(addr, 16)
|
var seed = parseInt(addr, 16)
|
||||||
return seed
|
return seed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toDataUri(identiconSrc){
|
||||||
|
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
|
||||||
|
}
|
Loading…
Reference in New Issue