| modules/page/html/render/profile.jsView |
|---|
| 1 | 1 | var nest = require('depnest') |
| 2 | 2 | var ref = require('ssb-ref') |
| 3 | | -var {Value, h, when, computed, map, send, dictToCollection} = require('mutant') |
| 3 | +var {h, when, computed, map, send, dictToCollection, resolve} = require('mutant') |
| 4 | 4 | var extend = require('xtend') |
| 5 | 5 | |
| 6 | 6 | exports.needs = nest({ |
| 7 | 7 | 'about.obs': { |
| 10 | 10 | images: 'first', |
| 11 | 11 | color: 'first' |
| 12 | 12 | }, |
| 13 | 13 | 'blob.sync.url': 'first', |
| 14 | + 'blob.html.input': 'first', |
| 15 | + 'message.async.publish': 'first', |
| 14 | 16 | 'about.html.image': 'first', |
| 15 | 17 | 'feed.html.rollup': 'first', |
| 16 | 18 | 'sbot.pull.userFeed': 'first', |
| 17 | 19 | 'sbot.async.publish': 'first', |
| 18 | 20 | 'keys.sync.id': 'first', |
| 21 | + 'sheet.display': 'first', |
| 19 | 22 | 'contact.obs': { |
| 20 | 23 | followers: 'first', |
| 21 | 24 | following: 'first' |
| 22 | 25 | } |
| 65 | 68 | map(dictToCollection(names), (item) => { |
| 66 | 69 | var isSelf = computed(item.value, (ids) => ids.includes(id)) |
| 67 | 70 | var isAssigned = computed(item.value, (ids) => ids.includes(yourId)) |
| 68 | 71 | return h('a.name', { |
| 72 | + 'ev-click': () => { |
| 73 | + if (!isAssigned()) { |
| 74 | + assignName(id, resolve(item.key)) |
| 75 | + } |
| 76 | + }, |
| 77 | + href: '#', |
| 69 | 78 | classList: [ |
| 70 | 79 | when(isSelf, '-self'), |
| 71 | 80 | when(isAssigned, '-assigned') |
| 72 | 81 | ], |
| 73 | 82 | title: nameList(when(isSelf, 'Self Assigned', 'Assigned By'), item.value) |
| 74 | 83 | }, [ |
| 75 | 84 | item.key |
| 76 | 85 | ]) |
| 77 | | - }) |
| 86 | + }), |
| 87 | + h('a -add', { |
| 88 | + 'ev-click': () => { |
| 89 | + rename(id) |
| 90 | + }, |
| 91 | + href: '#', |
| 92 | + }, ['+']) |
| 78 | 93 | ]) |
| 79 | 94 | |
| 80 | 95 | var imagePicker = h('div', {className: 'Picker'}, [ |
| 81 | 96 | map(dictToCollection(images), (item) => { |
| 82 | 97 | var isSelf = computed(item.value, (ids) => ids.includes(id)) |
| 83 | 98 | var isAssigned = computed(item.value, (ids) => ids.includes(yourId)) |
| 84 | 99 | return h('a.name', { |
| 100 | + 'ev-click': () => { |
| 101 | + if (!isAssigned()) { |
| 102 | + assignImage(id, resolve(item.key)) |
| 103 | + } |
| 104 | + }, |
| 105 | + href: '#', |
| 85 | 106 | classList: [ |
| 86 | 107 | when(isSelf, '-self'), |
| 87 | 108 | when(isAssigned, '-assigned') |
| 88 | 109 | ], |
| 93 | 114 | style: { 'background-color': api.about.obs.color(id) }, |
| 94 | 115 | src: computed(item.key, api.blob.sync.url) |
| 95 | 116 | }) |
| 96 | 117 | ]) |
| 97 | | - }) |
| 118 | + }), |
| 119 | + h('span.add', [ |
| 120 | + api.blob.html.input(file => { |
| 121 | + assignImage(id, file.link) |
| 122 | + }, { |
| 123 | + accept: 'image/*', |
| 124 | + resize: { width: 500, height: 500 } |
| 125 | + }) |
| 126 | + ]) |
| 98 | 127 | ]) |
| 99 | 128 | |
| 100 | 129 | var prepend = h('header', {className: 'ProfileHeader'}, [ |
| 101 | 130 | h('div.image', api.about.html.image(id)), |
| 180 | 209 | following: false |
| 181 | 210 | }) |
| 182 | 211 | } |
| 183 | 212 | |
| 213 | + function assignImage (id, image) { |
| 214 | + api.message.async.publish({ |
| 215 | + type: 'about', |
| 216 | + about: id, |
| 217 | + image |
| 218 | + }) |
| 219 | + } |
| 220 | + |
| 221 | + function assignName (id, name) { |
| 222 | + api.message.async.publish({ |
| 223 | + type: 'about', |
| 224 | + about: id, |
| 225 | + name |
| 226 | + }) |
| 227 | + } |
| 228 | + |
| 229 | + function rename (id) { |
| 230 | + api.sheet.display(close => { |
| 231 | + var currentName = api.about.obs.name(id) |
| 232 | + var input = h('input', { |
| 233 | + style: {'font-size': '150%'}, |
| 234 | + value: currentName() |
| 235 | + }) |
| 236 | + setTimeout(() => { |
| 237 | + input.focus() |
| 238 | + input.select() |
| 239 | + }, 5) |
| 240 | + return { |
| 241 | + content: h('div', { |
| 242 | + style: { |
| 243 | + padding: '20px', |
| 244 | + 'text-align': 'center' |
| 245 | + } |
| 246 | + }, [ |
| 247 | + h('h2', { |
| 248 | + style: { |
| 249 | + 'font-weight': 'normal' |
| 250 | + } |
| 251 | + }, ['What whould you like to call ', h('strong', ['@', currentName]), '?']), |
| 252 | + input |
| 253 | + ]), |
| 254 | + footer: [ |
| 255 | + h('button -save', { |
| 256 | + 'ev-click': () => { |
| 257 | + if (input.value.trim() && input.value !== currentName()) { |
| 258 | + |
| 259 | + api.sbot.async.publish({ |
| 260 | + type: 'about', |
| 261 | + about: id, |
| 262 | + name: input.value.trim() |
| 263 | + }) |
| 264 | + } |
| 265 | + close() |
| 266 | + } |
| 267 | + }, 'Confirm'), |
| 268 | + h('button -cancel', { |
| 269 | + 'ev-click': close |
| 270 | + }, 'Cancel') |
| 271 | + ] |
| 272 | + } |
| 273 | + }) |
| 274 | + } |
| 275 | + |
| 184 | 276 | function nameList (prefix, ids) { |
| 185 | 277 | var items = map(ids, api.about.obs.name) |
| 186 | 278 | return computed([prefix, items], (prefix, names) => { |
| 187 | 279 | return (prefix ? (prefix + '\n') : '') + names.map((n) => `- ${n}`).join('\n') |