| 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') |