| modules_basic/avatar/edit.jsView |
|---|
| 5 | 5 … | const hypercrop = require('hypercrop') |
| 6 | 6 … | const hyperlightbox = require('hyperlightbox') |
| 7 | 7 … | const h = require('../../h') |
| 8 | 8 … | const { |
| 9 | | - Value, Array: MutantArray, Dict: MutantObject, |
| 9 … | + Value, Array: MutantArray, Dict: MutantObject, Struct, |
| 10 | 10 … | map, computed, when, dictToCollection |
| 11 | 11 … | } = require('@mmckegg/mutant') |
| 12 | 12 … | const pull = require('pull-stream') |
| 13 | 13 … | const getAvatar = require('ssb-avatar') |
| 47 | 47 … | mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') |
| 48 | 48 … | } |
| 49 | 49 … | |
| 50 | 50 … | function avatar_edit (id) { |
| 51 | | - var img = visualize(new Buffer(id.substring(1), 'base64'), 256) |
| 52 | 51 … | |
| 53 | | - var proposedAvatar = MutantObject() |
| 54 | | - getAvatar({links: api.sbot_links}, self_id, id, (err, avatar) => { |
| 52 … | + var avatar = Struct({ |
| 53 … | + original: Value(visualize(new Buffer(id.substring(1), 'base64'), 256).src), |
| 54 … | + new: MutantObject() |
| 55 … | + }) |
| 56 … | + |
| 57 … | + getAvatar({links: api.sbot_links}, self_id, id, (err, _avatar) => { |
| 55 | 58 … | if (err) return console.error(err) |
| 56 | 59 … | |
| 57 | | - if(proposedAvatar.keys().length) return |
| 58 | | - if(ref.isBlob(avatar.image)) |
| 59 | | - img.src = api.blob_url(avatar.image) |
| 60 … | + if(ref.isBlob(_avatar.image)) |
| 61 … | + avatar.original.set(api.blob_url(_avatar.image)) |
| 60 | 62 … | }) |
| 61 | 63 … | |
| 64 … | + var name = Struct({ |
| 65 … | + original: Value(api.avatar_name(id)), |
| 66 … | + new: Value() |
| 67 … | + }) |
| 68 … | + |
| 62 | 69 … | var images = MutantArray() |
| 63 | 70 … | pull( |
| 64 | 71 … | api.sbot_links({dest: id, rel: 'about', values: true}), |
| 65 | 72 … | pull.map(e => e.value.content.image), |
| 80 | 87 … | ) |
| 81 | 88 … | var names = dictToCollection(namesRecord) |
| 82 | 89 … | |
| 83 | 90 … | var lb = hyperlightbox() |
| 84 | | - var name = Value(api.avatar_name(id)) |
| 85 | | - var proposedName = Value() |
| 86 | | - var name_input = h('input', {placeholder: ' + another name', 'ev-keyup': (e) => proposedName.set(e.target.value) }) |
| 91 … | + |
| 92 … | + |
| 87 | 93 … | var description = '' |
| 88 | 94 … | |
| 89 | | - var isPossibleUpdate = computed([proposedName, proposedAvatar], (name, image) => { |
| 90 | | - return name || Object.keys(image).length |
| 95 … | + var isPossibleUpdate = computed([name.new, avatar.new], (name, avatar) => { |
| 96 … | + return name || avatar.link |
| 91 | 97 … | }) |
| 92 | 98 … | |
| 99 … | + var avatarSrc = computed([avatar], avatar => { |
| 100 … | + if (avatar.new.link) return api.blob_url(avatar.new.link) |
| 101 … | + else return avatar.original |
| 102 … | + }) |
| 103 … | + |
| 104 … | + var displayedName = computed([name], name => { |
| 105 … | + if (name.new) return '@'+name.new |
| 106 … | + else return name.original |
| 107 … | + }) |
| 108 … | + |
| 93 | 109 … | return h('ProfileEdit', [ |
| 94 | 110 … | h('section.lightbox', lb), |
| 95 | 111 … | h('section.avatar', [ |
| 96 | | - h('section', img), |
| 97 | | - h('footer', name), |
| 112 … | + h('section', [ |
| 113 … | + h('img', { src: avatarSrc }), |
| 114 … | + ]), |
| 115 … | + h('footer', displayedName), |
| 98 | 116 … | ]), |
| 99 | 117 … | h('section.description', description), |
| 100 | 118 … | h('section.aliases', [ |
| 101 | 119 … | h('header', 'Aliases'), |
| 102 | 120 … | h('section.avatars', [ |
| 103 | 121 … | h('header', 'Avatars'), |
| 104 | 122 … | map(images, image => h('img', { |
| 105 | 123 … | 'src': api.blob_url(image), |
| 106 | | - 'ev-click': changeSelectedImage(image) |
| 124 … | + 'ev-click': () => avatar.new.set(image) |
| 107 | 125 … | })), |
| 108 | 126 … | h('div.file-upload', [ |
| 109 | 127 … | hyperfile.asDataURL(dataUrlCallback) |
| 110 | 128 … | ]) |
| 111 | 129 … | ]), |
| 112 | 130 … | h('section.names', [ |
| 113 | 131 … | h('header', 'Names'), |
| 114 | 132 … | h('section', [ |
| 115 | | - map(names, name => h('div', [ |
| 116 | | - h('div.name', name.key), |
| 117 | | - h('div.count', name.value) |
| 133 … | + map(names, n => h('div', { 'ev-click': () => name.new.set(n.key()) }, [ |
| 134 … | + h('div.name', n.key), |
| 135 … | + h('div.count', n.value) |
| 118 | 136 … | ])), |
| 119 | | - name_input |
| 137 … | + h('input', { |
| 138 … | + placeholder: ' + another name', |
| 139 … | + 'ev-keyup': e => name.new.set(e.target.value) |
| 140 … | + }) |
| 120 | 141 … | ]) |
| 121 | 142 … | ]), |
| 122 | | - when(isPossibleUpdate, h('button.confirm', { 'ev-click': handleUpdateClick }, 'Confirm changes')) |
| 143 … | + when(isPossibleUpdate, h('section.action', [ |
| 144 … | + h('button.cancel', { 'ev-click': handleCancelClick }, 'cancel'), |
| 145 … | + h('button.confirm', { 'ev-click': handleUpdateClick }, 'confirm changes') |
| 146 … | + ])) |
| 123 | 147 … | ]) |
| 124 | 148 … | ]) |
| 125 | 149 … | |
| 126 | | - function changeSelectedImage (image) { |
| 127 | | - return () => { |
| 128 | | - proposedAvatar.set(image) |
| 129 | | - img.src = api.blob_url(image.link || image) |
| 130 | | - } |
| 131 | | - } |
| 132 | | - |
| 133 | 150 … | function dataUrlCallback (data) { |
| 134 | 151 … | var el = crop(data, (err, data) => { |
| 135 | 152 … | if(data) { |
| 136 | | - img.src = data |
| 137 | 153 … | var _data = dataurl.parse(data) |
| 138 | 154 … | pull( |
| 139 | 155 … | pull.once(_data.data), |
| 140 | 156 … | api.sbot_blobs_add((err, hash) => { |
| 141 | 157 … | |
| 142 | 158 … | |
| 143 | 159 … | |
| 144 | 160 … | if(err) return alert(err.stack) |
| 145 | | - proposedAvatar.set({ |
| 161 … | + avatar.new.set({ |
| 146 | 162 … | link: hash, |
| 147 | 163 … | size: _data.data.length, |
| 148 | 164 … | type: _data.mimetype, |
| 149 | 165 … | width: 512, |
| 156 | 172 … | }) |
| 157 | 173 … | lb.show(el) |
| 158 | 174 … | } |
| 159 | 175 … | |
| 176 … | + function handleCancelClick () { |
| 177 … | + name.new.set(null) |
| 178 … | + avatar.new.set({}) |
| 179 … | + } |
| 180 … | + |
| 160 | 181 … | function handleUpdateClick () { |
| 161 | | - const name = proposedName() |
| 162 | | - const avatar = proposedAvatar() |
| 182 … | + const newName = name.new() |
| 183 … | + const newAvatar = avatar.new() |
| 163 | 184 … | |
| 164 | 185 … | const msg = { |
| 165 | 186 … | type: 'about', |
| 166 | 187 … | about: id |
| 167 | 188 … | } |
| 168 | 189 … | |
| 169 | | - if (name) msg.name = name |
| 170 | | - if (Object.keys(avatar).length) msg.image = avatar |
| 190 … | + if (newName) msg.name = newName |
| 191 … | + if (newAvatar.link) msg.image = newAvatar |
| 171 | 192 … | |
| 172 | 193 … | api.message_confirm(msg) |
| 173 | | - |
| 174 | | - if (name) name.set('@'+name) |
| 175 | 194 … | } |
| 176 | 195 … | } |
| 177 | 196 … | |
| 178 | 197 … | } |