Commit 9559b880d14951aa95c73f0af2844ebf330d389a
refactor profile editing to use more beautiful observables
mix irving committed on 2/28/2017, 5:22:47 AMParent: c50d342b5fb946f181fcee2b8be330d21f37c752
Files changed
| about/html/edit.js | changed |
| message/html/confirm.js | changed |
| package.json | changed |
| about/html/edit.js | ||
|---|---|---|
| @@ -7,16 +7,14 @@ | ||
| 7 | 7 | h, Value, Array: MutantArray, Dict: MutantObject, Struct, |
| 8 | 8 | map, computed, when, dictToCollection |
| 9 | 9 | } = require('mutant') |
| 10 | 10 | const pull = require('pull-stream') |
| 11 | -const getAvatar = require('ssb-avatar') | |
| 12 | -const ref = require('ssb-ref') | |
| 13 | -const visualize = require('visualize-buffer') | |
| 14 | 11 | |
| 15 | 12 | exports.gives = nest('about.html.edit') |
| 16 | 13 | |
| 17 | 14 | exports.needs = nest({ |
| 18 | 15 | 'about.obs.name': 'first', |
| 16 | + 'about.obs.imageUrl': 'first', | |
| 19 | 17 | 'blob.sync.url': 'first', |
| 20 | 18 | 'keys.sync.id': 'first', |
| 21 | 19 | 'message.html.confirm': 'first', |
| 22 | 20 | sbot: { |
| @@ -29,29 +27,23 @@ | ||
| 29 | 27 | return nest({ |
| 30 | 28 | 'about.html.edit': edit |
| 31 | 29 | }) |
| 32 | 30 | |
| 31 | + // TODO refactor this to use obs better | |
| 33 | 32 | function edit (id) { |
| 34 | 33 | var avatar = Struct({ |
| 35 | - original: Value(visualize(new Buffer(id.substring(1), 'base64'), 256).src), | |
| 34 | + current: api.about.obs.imageUrl(id), | |
| 36 | 35 | new: MutantObject() |
| 37 | 36 | }) |
| 38 | 37 | |
| 39 | 38 | const links = api.sbot.pull.links |
| 40 | 39 | |
| 41 | - getAvatar({ links }, api.keys.sync.id(), id, (err, _avatar) => { | |
| 42 | - if (err) return console.error(err) | |
| 43 | - // don't show user has already selected an avatar. | |
| 44 | - if (ref.isBlob(_avatar.image)) { | |
| 45 | - avatar.original.set(api.blob.sync.url(_avatar.image)) | |
| 46 | - } | |
| 47 | - }) | |
| 48 | - | |
| 49 | 40 | var name = Struct({ |
| 50 | - original: Value('@' + api.about.obs.name(id)()), | |
| 41 | + current: api.about.obs.name(id), | |
| 51 | 42 | new: Value() |
| 52 | 43 | }) |
| 53 | 44 | |
| 45 | + // TODO use patchcores observable images + names | |
| 54 | 46 | var images = MutantArray() |
| 55 | 47 | pull( |
| 56 | 48 | links({dest: id, rel: 'about', values: true}), |
| 57 | 49 | pull.map(e => e.value.content.image), |
| @@ -83,14 +75,14 @@ | ||
| 83 | 75 | }) |
| 84 | 76 | |
| 85 | 77 | var avatarSrc = computed([avatar], avatar => { |
| 86 | 78 | if (avatar.new.link) return api.blob.sync.url(avatar.new.link) |
| 87 | - else return avatar.original | |
| 79 | + else return avatar.current | |
| 88 | 80 | }) |
| 89 | 81 | |
| 90 | 82 | var displayedName = computed([name], name => { |
| 91 | 83 | if (name.new) return '@' + name.new |
| 92 | - else return name.original | |
| 84 | + else return '@' + name.current | |
| 93 | 85 | }) |
| 94 | 86 | |
| 95 | 87 | return h('AboutEditor', [ |
| 96 | 88 | h('section.lightbox', lb), |
| @@ -180,11 +172,8 @@ | ||
| 180 | 172 | |
| 181 | 173 | api.message.html.confirm(msg, (err, data) => { |
| 182 | 174 | if (err) return console.error(err) |
| 183 | 175 | |
| 184 | - if (newName) name.original.set('@' + newName) | |
| 185 | - if (newAvatar.link) avatar.original.set(api.blob.sync.url(newAvatar.link)) | |
| 186 | - | |
| 187 | 176 | clearNewSelections() |
| 188 | 177 | |
| 189 | 178 | // TODO - update aliases displayed |
| 190 | 179 | }) |
| message/html/confirm.js | ||
|---|---|---|
| @@ -1,35 +1,32 @@ | ||
| 1 | 1 | const nest = require('depnest') |
| 2 | 2 | const lightbox = require('hyperlightbox') |
| 3 | 3 | const { h } = require('mutant') |
| 4 | -//publish or add | |
| 4 | +// publish or add | |
| 5 | 5 | |
| 6 | 6 | exports.gives = nest('message.html.confirm') |
| 7 | 7 | |
| 8 | 8 | exports.needs = nest({ |
| 9 | - // about: { image_name_link: 'first' }, | |
| 10 | 9 | message: { |
| 11 | 10 | 'async.publish': 'first', |
| 12 | 11 | 'html.render': 'first' |
| 13 | 12 | }, |
| 14 | - 'keys.sync.id': 'first', | |
| 13 | + 'keys.sync.id': 'first' | |
| 15 | 14 | }) |
| 16 | 15 | |
| 17 | - | |
| 18 | 16 | exports.create = function (api) { |
| 19 | 17 | return nest({ |
| 20 | 18 | 'message.html': { confirm } |
| 21 | 19 | }) |
| 22 | 20 | |
| 23 | 21 | function confirm (content, cb) { |
| 24 | - | |
| 25 | 22 | cb = cb || function () {} |
| 26 | 23 | |
| 27 | 24 | var lb = lightbox() |
| 28 | 25 | document.body.appendChild(lb) |
| 29 | 26 | |
| 30 | 27 | var msg = { |
| 31 | - key: "DRAFT", | |
| 28 | + key: 'DRAFT', | |
| 32 | 29 | value: { |
| 33 | 30 | author: api.keys.sync.id(), |
| 34 | 31 | previous: null, |
| 35 | 32 | sequence: null, |
| @@ -37,9 +34,9 @@ | ||
| 37 | 34 | content: content |
| 38 | 35 | } |
| 39 | 36 | } |
| 40 | 37 | |
| 41 | - var okay = h('button.okay', { | |
| 38 | + var okay = h('button.okay', { | |
| 42 | 39 | 'ev-click': () => { |
| 43 | 40 | lb.remove() |
| 44 | 41 | api.message.async.publish(content, cb) |
| 45 | 42 | }}, |
| @@ -54,9 +51,9 @@ | ||
| 54 | 51 | 'cancel' |
| 55 | 52 | ) |
| 56 | 53 | |
| 57 | 54 | okay.addEventListener('keydown', function (ev) { |
| 58 | - if(ev.keyCode === 27) cancel.click() //escape | |
| 55 | + if (ev.keyCode === 27) cancel.click() // escape | |
| 59 | 56 | }) |
| 60 | 57 | |
| 61 | 58 | lb.show(h('MessageConfirm', [ |
| 62 | 59 | h('header -preview_description', [ |
| @@ -69,5 +66,4 @@ | ||
| 69 | 66 | okay.focus() |
| 70 | 67 | } |
| 71 | 68 | } |
| 72 | 69 | |
| 73 | - | |
| package.json | ||
|---|---|---|
| @@ -41,12 +41,10 @@ | ||
| 41 | 41 | "pull-scroll": "^1.0.3", |
| 42 | 42 | "pull-stream": "^3.5.0", |
| 43 | 43 | "read-directory": "^2.0.0", |
| 44 | 44 | "setimmediate": "^1.0.5", |
| 45 | - "ssb-avatar": "^0.2.0", | |
| 46 | 45 | "ssb-mentions": "^0.1.1", |
| 47 | 46 | "suggest-box": "^2.2.3", |
| 48 | - "visualize-buffer": "0.0.1", | |
| 49 | 47 | "xtend": "^4.0.1" |
| 50 | 48 | }, |
| 51 | 49 | "devDependencies": { |
| 52 | 50 | "standard": "^8.6.0" |
Built with git-ssb-web