add profile photos that are cropped to 250 by 250 and saved to your log

6 files changed, 184 insertions, 177 deletions

diff --git a/bog.js b/bog.js
index 6e6df7c..1aff354 100644
--- a/bog.js
+++ b/bog.js
@@ -96,6 +96,40 @@ async function get (key) {
   }
 }
 
+// bog.getImage
+
+function getImage (id, keys) {
+  var image = h('img', {classList: 'avatar'})
+
+  localforage.getItem('image:' + id).then(cache => {
+    if (cache) {
+      console.log('GOT IMAGE FROM CACHE: ' + cache)
+      return image.src = cache
+    } else {
+      bog().then(log => {
+        if (log) {
+          for (var i = 0; i < log.length; i++) {
+            if ((log[i].imaged === id) && (log[i].author === keys.publicKey)) {
+              // if you've identified someone as something else show that something else
+              localforage.setItem('image:' + id, log[i].image)
+              console.log('FINDING IMAGE AND SAVING TO CACHE: ' + log[i].image)
+              image.src = cache
+              return image.src = cache
+            } else if ((log[i].imaged === id) && (log[i].author === id)) {
+              // else if show the image they gave themselves
+              localforage.setItem('image:' + id, log[i].image)
+              console.log('FINDING IMAGE AND SAVING TO CACHE: ' + log[i].image)
+              image.src = cache
+              return image.src = cache
+            }
+          }
+        }
+      })
+    }
+  })
+  return image
+}
+
 // bog.getName -- iterates over a feed and returns a person's name
 
 function getName (id, keys) {
@@ -129,7 +163,6 @@ function getName (id, keys) {
     }
   })
   return name
-
 }
 
 // bog.regenerate -- regenerates main log by taking all of the feed logs, combinging them, and then sorting them
diff --git a/css/style.css b/css/style.css
index 606590b..0e27c1e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -202,6 +202,8 @@ form.search {
   text-decoration: none;
 }
 
+.avatar { width: 25px; height: 25px; vertical-align: middle; border-radius: 5px; margin-right: .2em; }
+
 button {
   display: inline-block;
   *display: inline;
diff --git a/identify.js b/identify.js
new file mode 100644
index 0000000..2ba5eea
--- /dev/null
+++ b/identify.js
@@ -0,0 +1,136 @@
+function identify (src, profile, keys) {
+
+  var identifyDiv = h('div')
+
+  if (src != keys.publicKey) {
+    identifyDiv.appendChild(h('p', ['Please note: ' + src + ' is not you.']))
+  }
+
+  var photoURL = {}
+
+  var newPhoto = h('span', [
+    h('input', {id: 'input', type: 'file', 
+      onclick: function () {
+        var canvas = document.getElementById("canvas")
+        var ctx = canvas.getContext("2d")
+        
+        var maxW = 250
+        var maxH = 250
+        
+        var input = document.getElementById('input')
+        input.addEventListener('change', handleFiles)
+        
+        function handleFiles(e) {
+          var img = new Image
+          img.onload = function() {
+            var iw = img.width
+            var ih = img.height
+            var scale = Math.min((maxW/iw), (maxH/ih))
+            var iwScaled = iw*scale
+            var ihScaled = ih*scale
+            canvas.width = iwScaled
+            canvas.height = ihScaled
+            ctx.drawImage(img, 0, 0, iwScaled, ihScaled)
+            console.log(canvas.toDataURL('image/jpeg', 0.9))
+            photoURL.value = canvas.toDataURL('image/jpeg', 0.9)
+            //identifyDiv.appendChild(h('img', {src: photoURL.value}))
+          }
+          img.src = URL.createObjectURL(e.target.files[0])
+        } 
+      }
+    }),
+    h('p', ['We recommend uploading a square photo. It will automatically be cropped to 250 x 250 px.']),
+    h('canvas', {id: 'canvas', width: '0', height: '0'}),
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(identifyButtons)
+        newPhoto.parentNode.removeChild(newPhoto)
+      }
+    }, ['Cancel']),
+    h('button', {
+      onclick: function () {
+        if (photoURL.value) {
+          content = {
+            type: 'image',
+            imaged: src,
+            image: photoURL.value
+          }
+          console.log(content)
+          localforage.removeItem('image:' + src)
+          publish(content, keys).then(post => {
+            open(post).then(msg => {
+              nameInput.value = ''
+              scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
+            })
+          })
+          newPhoto.parentNode.removeChild(newPhoto)
+          identifyDiv.appendChild(identifyButton)
+        }
+      }
+    }, ['Publish'])
+  ])
+
+  var nameInput = h('input', {placeholder: 'New name'})
+
+  var newName = h('div', [
+    nameInput,
+    h('button', {
+      onclick: function () {
+        if (nameInput.value) {
+          content = {
+            type: 'name',
+            named: src,
+            name: nameInput.value
+          }
+          localforage.removeItem('name:' + src)
+          publish(content, keys).then(post => {
+            open(post).then(msg => {
+              nameInput.value = ''
+              scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
+            })
+          })
+          newName.parentNode.removeChild(newName)
+          identifyDiv.appendChild(identifyButton)
+        }
+      }
+    }, ['Publish']),
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(identifyButtons)
+        newName.parentNode.removeChild(newName)
+      }
+    }, ['Cancel'])
+  ])
+ 
+  var identifyButtons = h('span', [
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(newName)
+        identifyButtons.parentNode.removeChild(identifyButtons)
+      }
+    }, ['Identify ' + src.substring(0, 10) + '... with a new name']),
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(newPhoto)
+        identifyButtons.parentNode.removeChild(identifyButtons)
+      }
+    }, ['Identify ' + src.substring(0, 10) + '... with a new photo']),
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(identifyButton)
+        identifyButtons.parentNode.removeChild(identifyButtons)
+      }
+    }, ['Cancel'])
+  ])
+
+  var identifyButton = h('button', {
+    onclick: function () {
+      profile.appendChild(identifyDiv) 
+      profile.appendChild(identifyButtons)
+      identifyButton.parentNode.removeChild(identifyButton)
+    }
+  },['Identify ' + src.substring(0, 10) + '...'])
+
+  return identifyButton
+}
+
diff --git a/index.html b/index.html
index a470fc1..ba26d88 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
     <script src="./lib/misc.js"></script>
     <script src="bog.js"></script>
     <script src="composer.js"></script>
+    <script src="identify.js"></script>
     <script src="gossip.js"></script>
     <script src="render.js"></script>
     <script src="views.js"></script>
diff --git a/render.js b/render.js
index 872aca0..a6fe7b2 100644
--- a/render.js
+++ b/render.js
@@ -1,98 +1,4 @@
-function addButton (post, message, keys) {
-  function readFile () {
-    if (this.files && this.files[0]) {
-  
-      var fr = new FileReader()
-  
-      fr.addEventListener("load", function(e) {
-        
-        var image = e.target.result
-        var signed = nacl.sign(nacl.util.decodeUTF8(image), nacl.util.decodeBase64(keys.privateKey))
-        var signed64 = nacl.util.encodeBase64(signed)
-        var hash64 = nacl.util.encodeBase64(nacl.hash(signed))
-        // we should probably throw out blobs that are too big!
-        localforage.setItem(hash64, signed64).then(function () {
-          console.log('saved image to localforage')
-          var obj = {
-            type: 'blob',
-            blobbed: post.key, 
-            hash: hash64
-          }
-          publish(obj, keys).then(published => {
-            var getPost = document.getElementById(post.key)
-            open(published).then(opened => {
-              localforage.getItem(opened.hash).then(signed => {
-                var openedImg = nacl.sign.open(nacl.util.decodeBase64(signed), nacl.util.decodeBase64(post.author.substring(1)))
-                console.log(openedImg)
-                var image = h('img', {src: nacl.util.encodeUTF8(openedImg)})
-                getPost.appendChild(image)
-                message.appendChild(render(published))
-              })
-            })
-          })
-        })
-
-      })
-  
-      fr.readAsDataURL( this.files[0] )
-    }
-  }
-
-  readFile()
-
-  var imageInput = h('span', [
-    h('input', {id: 'inp', type:'file'}),
-    h('img', {id: 'img'})
-  ])
-
-  var valueInput = h('input', {placeholder: '0.00'})
-  var currencyInput = h('input', {placeholder: 'Monunuo'})
-  var valueDiv = h('div', [
-    valueInput,
-    currencyInput,
-    h('button', {
-      onclick: function () {
-        var obj = {
-          type: 'value',
-          value: valueInput.value,
-          valuated: post.key,
-          currency: currencyInput.value
-        }
-        publish(obj, keys).then(published => {
-          open(published).then(opened => {
-            message.parentNode.appendChild(h('div', {classList: 'submessage'}, [render(opened, keys)]))
-            valueDiv.parentNode.removeChild(valueDiv)
-          })
-        })
-      }
-    }, ['Publikigi'])
-  ])
-
-  var button = h('button', {/*classList: 'right',*/
-    onclick: function () {
-      message.appendChild(h('button', {classList: 'right',
-        onclick: function () { 
-          message.appendChild(imageInput)
-          document.getElementById("inp").addEventListener("change", readFile);
-        }
-      }, ['Bildo']))     
-
-      message.appendChild(h('button', {classList: 'right',
-        onclick: function () {
-          message.appendChild(valueDiv)
-        }
-      }, ['Valoro']))     
-    }
-
-  }, ['Aldoni'])
-
-  
-
-  return button
-}
-
 function getHeader (post, keys, mini) {
-
   var getRaw = h('button', {
     onclick: function () {
       var raw = h('pre', [h('code', [JSON.stringify(post)])])
@@ -117,6 +23,7 @@ function getHeader (post, keys, mini) {
     ]),
     h('p', [
       h('a', {href: '#' + post.author}, [
+        getImage(post.author, keys),
         getName(post.author, keys)
       ]),
       mini 
@@ -132,30 +39,6 @@ function render (msg, keys, preview) {
   bog().then(log => {
     if (log) {
       log.reverse().forEach(function (nextPost) {
-
-        if (nextPost.blobbed == msg.key) {
-          localforage.getItem(nextPost.hash).then(signed => {
-            if (signed) {
-              var openedImg = nacl.sign.open(nacl.util.decodeBase64(signed), nacl.util.decodeBase64(nextPost.author.substring(1)))
-              var image = h('img', {src: nacl.util.encodeUTF8(openedImg)})
-              blobSync(nextPost.hash, nextPost.author, keys, false ) 
-              message.appendChild(image)
-            } else {
-              console.log('we don\'t have the blob') 
-              blobSync(nextPost.hash, nextPost.author, keys, true )
-            } 
-          })
-        }
-
-        if (nextPost.valuated == msg.key) {
-          var valuatedExists = document.getElementById('valuated:' + msg.key)
-          var valuated = h('div', {id: 'valuated:' + msg.key}, [h('strong', ['Prezo: ' ]), nextPost.value + ' ' + nextPost.currency])
-          if (valuatedExists) {
-            valuatedExists.parentNode.removeChild(valuatedExists)
-          }
-          message.appendChild(valuated)
-        }
-
         if (nextPost.edited == msg.key) {
           var messageExists = (document.getElementById(nextPost.key) !== null)
           var msgcontents = document.getElementById('content:' + msg.key)
@@ -260,22 +143,19 @@ function render (msg, keys, preview) {
           }
         }, ['Redakti']))
       }
-      message.appendChild(addButton(msg, message, keys))
     }
   } else if (msg.type == 'name') {
     message.appendChild(getHeader(msg, keys))
-    message.appendChild(h('span', ['identigis ', h('a', {href: '#' + msg.named }, [msg.named.substring(0, 10) + '...']), ' kiel ' + msg.name]))
-  } else if (msg.type == 'value') {
-    message.appendChild(getHeader(msg, keys))
-    message.appendChild(h('span', [h('a', {href: '#' + msg.valuated}, [msg.valuated.substring(0, 10) + '...']), ' havas valoron: ' + msg.value + ' ' + msg.currency]))
-  } else if (msg.type == 'blob') {
+    message.appendChild(h('span', ['identifigis ', h('a', {href: '#' + msg.named }, [msg.named.substring(0, 10) + '...']), ' as ' + msg.name]))
+  } else if (msg.type == 'image') {
     message.appendChild(getHeader(msg, keys))
-    localforage.getItem(msg.hash).then(signed => {
-      var openedImg = nacl.sign.open(nacl.util.decodeBase64(signed), nacl.util.decodeBase64(msg.author.substring(1)))
-      var image = h('img', {src: nacl.util.encodeUTF8(openedImg)})
-      message.appendChild(image)
-    })
-  }
+    message.appendChild(h('span', [
+      'identifigis ', 
+      h('a', { href: '#' + msg.imaged }, [msg.imaged.substring(0, 10) + '...']), 
+      ' as ', 
+      h('img', {src: msg.image})
+    ]))
+  } 
 
   messageDiv.appendChild(message)
   return messageDiv
diff --git a/views.js b/views.js
index 0341393..36bff70 100644
--- a/views.js
+++ b/views.js
@@ -10,7 +10,6 @@ function profilePage (src, keys) {
 
   scroller.appendChild(profile)
 
-
   if (src != keys.publicKey) {
     reply = { author: src }
     scroller.appendChild(composer(keys, reply))
@@ -22,49 +21,16 @@ function profilePage (src, keys) {
 
   sync(subs, keys)
 
-  var input = h('input', {placeholder: 'Nova nomo'})
-
   profile.appendChild(h('a', {href: '#' + src}, [getName(src, keys)]))
-
   profile.appendChild(h('br'))
 
-  var identify = h('div', [
-    input,
-    h('button', {
-      onclick: function () {
-        if (input.value) {
-          content = {
-            type: 'name',
-            named: src,
-            name: input.value
-          }
-          localforage.removeItem('name:' + src)
-          publish(content, keys).then(post => {
-            open(post).then(msg => {
-              input.value = ''
-              scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
-            })
-          })
-        }
-      }
-    }, ['Identigi'])
-  ])
-
-  var identifyButton = h('button', {
-    onclick: function () {
-      profile.appendChild(identify)
-      identifyButton.parentNode.removeChild(identifyButton) 
-    }
-  }, ['Identigi ' + src.substring(0, 10) + '...'])
-
   var mentionsButton = h('button', {
     onclick: function () {
       location.href = '#?' + src
     }
   }, ['Mencioj'])
 
-  profile.appendChild(identifyButton)
-
+  profile.appendChild(identify(src, profile, keys))
   profile.appendChild(mentionsButton)
 
   localforage.getItem('subscriptions').then(function (subs) {
@@ -103,22 +69,11 @@ function profilePage (src, keys) {
       })
     }
   })
-
-  /*bog(src).then(log => {
-    if (log) {
-      log.forEach(function (msg) {
-        open(msg).then(post => {
-          scroller.appendChild(render(post, keys))
-        })
-      })
-    }
-  })*/
 }
 
 function searchPage (src, keys) {
   var search = src.substring(1).replace("%20"," ").toUpperCase()
 
-  //scroller.appendChild(composer(keys))
   bog().then(log => {
     if (log) {
       log.forEach(function (msg) {