icon-factory - overhaul to provide svg or imagified el

1 files changed, 32 insertions, 24 deletions

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