add background photos -- not quite done yet

5 files changed, 119 insertions, 10 deletions

diff --git a/css/style.css b/css/style.css
index 7ec1ee4..df53ffe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -59,11 +59,16 @@ hr {
 .message, .profile {
   border: 1px solid #ddd;
   background: white;
-  margin-top: .5em;
+  margin-bottom: .5em;
   padding: .3em .5em;
+}
+
+.message {
   border-radius: 5px;
 }
 
+.banner { height: 275px; }
+
 #scroller:last-child { margin-bottom: 10em; }
 
 .message, .message > *, .navbar, .navbar > *, #ad, #ad > *, #viewer > * {
diff --git a/gossip.js b/gossip.js
index 26915b1..5cf19e9 100644
--- a/gossip.js
+++ b/gossip.js
@@ -49,7 +49,7 @@ function processreq (req, pubkey, connection, keys) {
                 var src = window.location.hash.substring(1)
                 if ((src === msg.author) || (src === '')) {
                   var scroller = document.getElementById('scroller')
-                  scroller.insertBefore(render(opened, keys), scroller.childNodes[1])
+                  scroller.insertBefore(render(opened, keys), scroller.childNodes[2])
                 }
                 if (opened.seq === req.length) {
                   localforage.setItem('log', log)
@@ -71,7 +71,7 @@ function processreq (req, pubkey, connection, keys) {
                     var src = window.location.hash.substring(1)
                     if ((src === msg.author) || (src === '')) {
                       var scroller = document.getElementById('scroller')
-                      scroller.insertBefore(render(opened, keys), scroller.childNodes[1])
+                      scroller.insertBefore(render(opened, keys), scroller.childNodes[2])
                     }
                     if (req.length + lastmsg.seq === opened.seq) {
                       localforage.setItem('log', log)
diff --git a/identify.js b/identify.js
index 1381c6f..eb8827c 100644
--- a/identify.js
+++ b/identify.js
@@ -8,6 +8,72 @@ function identify (src, profile, keys) {
 
   var photoURL = {}
 
+  // this could be a hell of a lot dry-er
+
+  // also we need to get rid of UI glitches when you hit the cancel button (it should return to the same state it started in)
+
+  var newBackground = h('span', [
+    h('input', {id: 'input', type: 'file', 
+      onclick: function () {
+        var canvas = document.getElementById("canvas")
+        var ctx = canvas.getContext("2d")
+        
+        var maxW
+        var maxH
+        
+        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
+
+            maxW = 800
+            maxH = 800
+            
+            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)
+            photoURL.value = canvas.toDataURL('image/jpeg', 0.7)
+          }
+          img.src = URL.createObjectURL(e.target.files[0])
+        } 
+      }
+    }),
+    h('canvas', {id: 'canvas', width: '0', height: '0'}),
+    h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(identifyButtons)
+        newBackground.parentNode.removeChild(newBackground)
+      }
+    }, ['Cancel']),
+    h('button', {
+      onclick: function () {
+        if (photoURL.value) {
+          content = {
+            type: 'background',
+            backgrounded: src,
+            background: photoURL.value
+          }
+          localforage.removeItem('image:' + src)
+          publish(content, keys).then(post => {
+            open(post).then(msg => {
+              nameInput.value = ''
+              scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
+            })
+          })
+          newBackground.parentNode.removeChild(newBackground)
+          identifyDiv.appendChild(identifyButton)
+        }
+      }
+    }, ['Publish'])
+  ])
+
   var newPhoto = h('span', [
     h('input', {id: 'input', type: 'file', 
       onclick: function () {
@@ -47,7 +113,6 @@ function identify (src, profile, keys) {
             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)
           }
           img.src = URL.createObjectURL(e.target.files[0])
@@ -69,7 +134,6 @@ function identify (src, profile, keys) {
             imaged: src,
             image: photoURL.value
           }
-          console.log(content)
           localforage.removeItem('image:' + src)
           publish(content, keys).then(post => {
             open(post).then(msg => {
@@ -84,6 +148,9 @@ function identify (src, profile, keys) {
     }, ['Publish'])
   ])
 
+
+
+
   var nameInput = h('input', {placeholder: 'New name'})
 
   var newName = h('div', [
@@ -125,7 +192,12 @@ function identify (src, profile, keys) {
         identifyButtons.parentNode.removeChild(identifyButtons)
       }
     }, ['New name']))
-
+    identifyButtons.appendChild(h('button', {
+      onclick: function () {
+        identifyDiv.appendChild(newBackground)
+        identifyButtons.parentNode.removeChild(identifyButtons)
+      }
+    }, ['New background']))
   }
   //}, ['Identify ' + src.substring(0, 10) + '... with a new name']),
   identifyButtons.appendChild(h('button', {
diff --git a/render.js b/render.js
index e440abd..faf3c17 100644
--- a/render.js
+++ b/render.js
@@ -183,10 +183,11 @@ function render (msg, keys, preview) {
 
       message.appendChild(buttons)
     }
-  } else if (msg.type == 'name') {
+  } if (msg.type == 'name') {
     var mini = h('span', [' identified ', h('a', {href: '#' + msg.named }, [msg.named.substring(0, 10) + '...']), ' as ' + msg.name])
     message.appendChild(getHeader(msg, keys, mini))
-  } else if (msg.type == 'image') {
+
+  } if (msg.type == 'image') {
     var mini = h('span', [
       ' added an image to ', 
       h('a', { href: '#' + msg.imaged }, [msg.imaged.substring(0, 10) + '...']), 
@@ -194,8 +195,19 @@ function render (msg, keys, preview) {
       h('img', {src: msg.image, classList: 'avatar'})
     ])
     message.appendChild(getHeader(msg, keys, mini))
+
+  } if (msg.type == 'background') {
+    var mini = h('span', [
+      ' added a background to ', 
+      h('a', { href: '#' + msg.backgrounded }, [msg.backgrounded.substring(0, 10) + '...']), 
+      ' ', 
+      h('img', {src: msg.background, classList: 'avatar'})
+    ])
+    message.appendChild(getHeader(msg, keys, mini))
   } 
 
+
+
   messageDiv.appendChild(message)
   return messageDiv
 }
diff --git a/views.js b/views.js
index b964915..da1eeb9 100644
--- a/views.js
+++ b/views.js
@@ -9,7 +9,24 @@ function profilePage (src, keys) {
   msg.author = src
 
   var profile = h('div', {classList: 'profile'})
+  var banner = h('div', {classList: 'banner'})
 
+  function getBg (src, profile) {
+    bog().then(log => {
+      if (log) {
+        for (var i = 0; i < log.length; i++) {
+          if ((log[i].backgrounded === src) && (log[i].author === src)) {
+            // if you've identified someone as something else show that something else
+            return banner.style.background = 'fixed top/680px no-repeat url(' + log[i].background + ')'
+          }
+        }
+      }
+    })
+  }
+
+  getBg(src, profile)
+
+  scroller.appendChild(banner)
   scroller.appendChild(profile)
   //scroller.appendChild(h('div'))
 
@@ -27,12 +44,15 @@ function profilePage (src, keys) {
 
   profile.appendChild(h('a', {href: '#' + src}, [
     getImage(src, keys, 'profileAvatar'),
-    getName(src, keys)
+    getName(src, keys),
+    h('br'),
+    h('br')
   ]))
 
   profile.appendChild(h('br'))
 
   quickName(src).then(name => {
+    profile.appendChild(identify(src, profile, keys, name))
     var mentionsButton = h('button', {
       onclick: function () {
         location.href = '#?' + src
@@ -76,7 +96,6 @@ function profilePage (src, keys) {
     }, ['Delete ' + name + '\'s feed']))
   })
 
-  profile.appendChild(identify(src, profile, keys))
 
   async function addPosts (posts, keys) {
     posts.forEach(function (msg) {
@@ -197,3 +216,4 @@ function publicPage (keys) {
   })
 }
 
+