Files: 55b982e84f28bdac225f8b820c159d4a303cf019 / modules_basic / avatar-edit.js
4301 bytesRaw
1 | |
2 | var dataurl = require('dataurl-') |
3 | var hyperfile = require('hyperfile') |
4 | var hypercrop = require('hypercrop') |
5 | var hyperlightbox = require('hyperlightbox') |
6 | var h = require('hyperscript') |
7 | var pull = require('pull-stream') |
8 | var getAvatar = require('ssb-avatar') |
9 | var plugs = require('../plugs') |
10 | var ref = require('ssb-ref') |
11 | var visualize = require('visualize-buffer') |
12 | var self_id = require('../keys').id |
13 | |
14 | //var confirm = plugs.first(exports.message_confirm = []) |
15 | //var sbot_blobs_add = plugs.first(exports.sbot_blobs_add = []) |
16 | //var blob_url = plugs.first(exports.blob_url = []) |
17 | //var sbot_links = plugs.first(exports.sbot_links = []) |
18 | //var avatar_name = plugs.first(exports.avatar_name = []) |
19 | // |
20 | |
21 | function crop (d, cb) { |
22 | var data |
23 | var canvas = hypercrop(h('img', {src: d})) |
24 | |
25 | return h('div.column.avatar_pic', |
26 | canvas, |
27 | //canvas.selection, |
28 | h('div.row.avatar_pic__controls', |
29 | h('button', 'okay', {onclick: function () { |
30 | cb(null, canvas.selection.toDataURL()) |
31 | }}), |
32 | h('button', 'cancel', {onclick: function () { |
33 | cb(new Error('canceled')) |
34 | }}) |
35 | ) |
36 | ) |
37 | } |
38 | |
39 | exports.needs = { |
40 | message_confirm: 'first', |
41 | sbot_blobs_add: 'first', |
42 | blob_url: 'first', |
43 | sbot_links: 'first', |
44 | avatar_name: 'first' |
45 | } |
46 | |
47 | exports.gives = 'avatar_edit' |
48 | |
49 | exports.create = function (api) { |
50 | return function (id) { |
51 | |
52 | var img = visualize(new Buffer(id.substring(1), 'base64'), 256) |
53 | img.classList.add('avatar--large') |
54 | |
55 | var lb = hyperlightbox() |
56 | var name_input = h('input', {placeholder: 'rename'}) |
57 | var name = api.avatar_name(id) |
58 | var selected = null, selected_data = null |
59 | |
60 | getAvatar({links: api.sbot_links}, self_id, id, function (err, avatar) { |
61 | if (err) return console.error(err) |
62 | //don't show user has already selected an avatar. |
63 | if(selected) return |
64 | if(ref.isBlob(avatar.image)) |
65 | img.src = api.blob_url(avatar.image) |
66 | }) |
67 | |
68 | var also_pictured = h('div.profile__alsopicturedas.wrap') |
69 | |
70 | pull( |
71 | api.sbot_links({dest: id, rel: 'about', values: true}), |
72 | pull.map(function (e) { |
73 | return e.value.content.image |
74 | }), |
75 | pull.filter(function (e) { |
76 | return e && 'string' == typeof e.link |
77 | }), |
78 | pull.unique('link'), |
79 | pull.drain(function (image) { |
80 | also_pictured.appendChild( |
81 | h('a', {href:'#', onclick: function (ev) { |
82 | ev.stopPropagation() |
83 | ev.preventDefault() |
84 | selected = image |
85 | img.src = api.blob_url(image.link || image) |
86 | }}, |
87 | h('img.avatar--thumbnail', {src: api.blob_url(image)}) |
88 | ) |
89 | ) |
90 | }) |
91 | ) |
92 | |
93 | return h('div.row.profile', |
94 | lb, |
95 | img, |
96 | h('div.column.profile__info', |
97 | h('strong', name), |
98 | name_input, |
99 | |
100 | hyperfile.asDataURL(function (data) { |
101 | var el = crop(data, function (err, data) { |
102 | if(data) { |
103 | img.src = data |
104 | var _data = dataurl.parse(data) |
105 | pull( |
106 | pull.once(_data.data), |
107 | api.sbot_blobs_add(function (err, hash) { |
108 | //TODO. Alerts are EVIL. |
109 | //I use them only in a moment of weakness. |
110 | |
111 | if(err) return alert(err.stack) |
112 | selected = { |
113 | link: hash, |
114 | size: _data.data.length, |
115 | type: _data.mimetype, |
116 | width: 512, |
117 | height: 512 |
118 | } |
119 | |
120 | }) |
121 | ) |
122 | } |
123 | lb.close() |
124 | }) |
125 | lb.show(el) |
126 | }), |
127 | h('button', 'update', {onclick: function () { |
128 | if(name_input.value) |
129 | name.textContent = name_input.value |
130 | |
131 | if(selected) |
132 | api.message_confirm({ |
133 | type: 'about', |
134 | about: id, |
135 | name: name_input.value || undefined, |
136 | image: selected |
137 | }) |
138 | else if(name_input.value) //name only |
139 | api.message_confirm({ |
140 | type: 'about', |
141 | about: id, |
142 | name: name_input.value || undefined, |
143 | }) |
144 | else |
145 | //another moment of weakness |
146 | alert('must select a name or image') |
147 | }}), |
148 | also_pictured |
149 | ) |
150 | ) |
151 | } |
152 | } |
153 |
Built with git-ssb-web