git ssb

2+

ev / mvd



Commit 65ce170e059f57ece5d94c7f5d29f1efff4d2b7c

Browse Files

add stars messages, star buttons, and realtime star updates on messages!

Ev Bogue committed on 5/30/2018, 11:52:43 PM
Parent: f0a148f88934ef29c598e1e1521839e2bf5b75ca

Files changed

render.jschanged
style.csschanged
style.css.jsonchanged
tools.jschanged
views.jschanged
render.jsView
@@ -10,9 +10,8 @@
1010 … var id = require('./keys').id
1111 …
1212 …
1313 … module.exports = function (msg) {
14- console.log(msg)
1514 … var message = h('div.message#' + msg.key.substring(0, 44))
1615 … if (msg.value.content.type == 'post') {
1716 … var opts = {
1817 … type: 'post',
@@ -36,11 +35,10 @@
3635 …
3736 … pull(
3837 … sbot.query({query: [{$filter: {value: {content: {type: 'edit', original: msg.key}}}}], limit: 100, live: true}),
3938 … pull.drain(function (update) {
40- console.log(update)
4139 … if (update.sync) {
42- console.log('Waiting for new edits.')
40 …+ //console.log('Waiting for new edits.')
4341 … } else {
4442 … var newMessage = h('div', tools.markdown(update.value.content.text))
4543 … var latest = h('div.message__body',
4644 … tools.timestamp(update, {edited: true}),
@@ -86,33 +84,18 @@
8684 … var compose = h('div#edit:' + msg.key.substring(0, 44), composer(opts, fallback))
8785 … message.replaceChild(compose, message.lastElementChild)
8886 … }
8987 … }))
90-
88 …+ buttons.appendChild(tools.star(msg))
9189 … message.appendChild(buttons)
9290 … return message
9391 …
9492 … } else if (msg.value.content.type == 'vote') {
95- message.appendChild(tools.header(msg))
96- message.appendChild(h('span', 'Starred:'))
97- var embed = msg.value.content.vote.link
98-
99- var embedded = h('div.embedded')
100- sbot.get(embed, function (err, msg) {
101- if (err) {console.log('could not find message locally, try ooo?') }
102- msg.value = msg
103- msg.key = embed
104- if (msg.value.content.text) {
105- message.appendChild(embedded)
106- embedded.appendChild(tools.header(msg))
107- embedded.appendChild(
108- h('div.message__body',
109- tools.markdown(msg.value.content.text.substring(0, 256) + '...'),
110- h('span', '[', h('a', {href: '#' + msg.key}, 'Full Post'), ']')
111- )
112- )
113- }
114- })
93 …+ if (msg.value.content.vote.value == 1)
94 …+ var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'star.png'}), ' ', h('a', {href: msg.value.content.vote.link}, msg.value.content.vote.link.substring(0,16) + '...'))
95 …+ else if (msg.value.content.vote.value == -1)
96 …+ var link = h('span', ' ', h('img.emoji', {src: config.emojiUrl + 'stars.png'}), ' ', h('a', {href: msg.value.content.vote.link}, msg.value.content.vote.link.substring(0,16) + '...'))
97 …+ message.appendChild(tools.mini(msg, link))
11598 … return message
11699 … } else {
117100 … //message.appendChild(tools.header(msg))
118101 … //message.appendChild(h('pre', tools.rawJSON(msg.value.content)))
style.cssView
@@ -158,31 +158,41 @@
158158 … height: 1.4em;
159159 … margin-right: .2em;
160160 … }
161161 …
162-.compose, textarea {
162 …+.compose, textarea, input {
163163 … font-family: sans-serif;
164164 … font-size: 14px;
165165 … line-height: 20px;
166166 … background: #111;
167167 … color: #ccc;
168- width: 100%;
169- height: 100px;
170168 … border: none;
171- *border: 1px solid #252525;
172169 … border-radius: 3px;
173170 … }
174171 …
172 …+textarea {
173 …+ width: 100%;
174 …+ height: 100px;
175 …+}
176 …+
175177 … .compose:hover {
176178 … background: #141414;
177179 … }
178180 …
179181 … .compose:focus {
180182 … outline: none;
181183 … }
182184 …
185 …+.btn .emoji {
186 …+ padding: .2em;
187 …+}
188 …+
189 …+.right {
190 …+ float: right;
191 …+}
192 …+
183193 … .emoji {
184- float: left;
194 …+ *float: left;
185195 … width: 1em;
186196 … vertical-align: top;
187197 … }
188198 …
style.css.jsonView
@@ -1,1 +1,1 @@
1-"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose, textarea {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: none;\n *border: 1px solid #252525;\n border-radius: 3px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.emoji {\n float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"
1 …+"body {\n margin: 0;\n background: #141414;\n font-family: sans-serif;\n color: #d5d5d5;\n font-size: 14px; \n line-height: 20px;\n}\n\n#screen {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n}\n\n.hyperscroll {\n width: 100%;\n}\n\n.header {\n padding-bottom: .7em;\n border-bottom: 1px solid #252525;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-size: 1.2em;\n margin-top: .35ex;\n}\n\nhr {\n border: solid #222;\n clear: both;\n border-width: 1px 0 0;\n height: 0;\n margin-bottom: .9em;\n}\n\n\np {\n margin-top: .35ex;\n margin-bottom: 10px;\n}\n\n\na {\n color: white;\n *text-decoration: none;\n}\n\na:hover {\n color: #ddd;\n}\n\n.navbar a {\n color: #999;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n text-decoration: none;\n}\n\n.navbar a:hover, .navbar a:focus {\n color: #fff;\n text-decoration: none;\n}\n\n.navbar {\n background: #1b1b1b;\n background: linear-gradient(#222, #111);\n border-bottom: 1px solid #252525;\n}\n\n.navbar {\n width: 100%;\n position: fixed;\n z-index: 1000;\n margin: 0;\n padding-top: .3em;\n padding-bottom: .3em;\n left: 0; right: 0;\n top: 0;\n}\n\n.navbar .internal {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.navbar li {\n margin-top: .3em;\n float: left;\n margin-right: .6em;\n margin-left: .3em;\n list-style-type: none;\n}\n\n.navbar li.right {\n padding-left: .4em;\n padding-right: .4em;\n margin-top: .3em;\n margin-right: 1.7em;\n float: right;\n list-style-type: none;\n background: #333;\n border-radius: 100%;\n}\n\n.content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.hyperscroll > .content {\n max-width: 680px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.message, .message > *, .navbar, .navbar > * {\n animation: fadein .5s;\n}\n\n@keyframes fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.message, .embedded {\n display: block;\n margin: .6em;\n background: #111;\n padding: .7em;\n border-radius: 3px;\n border: 1px solid #252525;\n}\n\n.embedded {\n padding-left: 1em;\n}\n\n.message:hover, .embedded:hover {\n background: #141414;\n}\n\n.message img, .message video {\n max-width: 100%;\n}\n\n.timestamp, .votes {\n float: right;\n}\n \n.avatar--small img {\n vertical-align: top;\n width: 1.4em;\n height: 1.4em;\n margin-right: .2em;\n}\n\n.compose, textarea, input {\n font-family: sans-serif;\n font-size: 14px;\n line-height: 20px;\n background: #111;\n color: #ccc;\n border: none;\n border-radius: 3px;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n}\n\n.compose:hover {\n background: #141414;\n}\n\n.compose:focus {\n outline: none;\n}\n\n.btn .emoji {\n padding: .2em;\n}\n\n.right {\n float: right;\n}\n\n.emoji {\n *float: left;\n width: 1em;\n vertical-align: top;\n}\n\npre {\n width: 100%;\n display: block;\n}\n\ncode {\n display: inline-block;\n vertical-align: bottom;\n}\n\ncode, pre {\noverflow: auto;\nword-break: break-all;\nword-wrap: break-word;\nwhite-space: pre;\nwhite-space: -moz-pre-wrap;\nwhite-space: pre-wrap;\nwhite-space: pre\\9;\n}\n\n\n.btn {\n display: inline-block;\n *display: inline;\n padding: 2px 6px;\n margin-bottom: 0;\n margin-right: .2em;\n font-size: 14px;\n line-height: 20px;\n color: #d5d5d5;\n text-align: center;\n text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);\n vertical-align: middle;\n cursor: pointer;\n background-color: #222;\n border: 1px solid #222;\n border-radius: 4px;\n}\n\n\n.btn:hover,\n.btn:focus,\n.btn:active,\n.btn.active,\n.btn.disabled,\n.btn[disabled] {\n color: white;\n background-color: black;\n}\n\n.btn:active,\n.btn.active {\n background-color: #111;\n}\n\n.btn:first-child {\n *margin-left: 0;\n}\n\n"
tools.jsView
@@ -8,9 +8,11 @@
88 … var sbot = require('./scuttlebot')
99 …
1010 … var config = require('./config')()
1111 …
12-function votes (msg) {
12 …+var id = require('./keys').id
13 …+
14 …+/*function votes (msg) {
1315 … var votes = h('div.votes')
1416 … if (msg.key) {
1517 … pull(
1618 … sbot.links({dest: msg.key, rel: 'vote'}),
@@ -21,10 +23,94 @@
2123 … })
2224 … )
2325 … }
2426 … return votes
27 …+}*/
28 …+
29 …+function votes (msg) {
30 …+ var votes = h('div.votes')
31 …+ if (msg.key) {
32 …+ console.log('Looking for votes')
33 …+ pull(
34 …+ sbot.backlinks({query: [{$filter: {value: {content: {type: 'vote', vote: {link: msg.key}}}}}], live: true}),
35 …+ pull.drain(function (data) {
36 …+ if (data.sync) { console.log('waiting for new votes')}
37 …+ else if (data.value.content.vote.value == 1) {
38 …+ votes.appendChild(h('a#vote:' + data.value.author.substring(0, 44), {href:'#' + data.value.author}, h('img.emoji', {src: config.emojiUrl + 'star.png'})))
39 …+ }
40 …+ else if (data.value.content.vote.value == -1) {
41 …+ var lookFor = 'vote:' + data.value.author.substring(0, 44)
42 …+ var remove = document.getElementById(lookFor)
43 …+ remove.parentNode.removeChild(remove)
44 …+ }
45 …+ })
46 …+ )
47 …+ }
48 …+ return votes
2549 … }
2650 …
51 …+module.exports.star = function (msg) {
52 …+ var votebutton = h('span#star:' + msg.key.substring(0, 44))
53 …+ var vote = {
54 …+ type: 'vote',
55 …+ vote: { link: msg.key, expression: 'Star' }
56 …+ }
57 …+
58 …+ var star = h('button.btn.right',
59 …+ h('img.emoji', {src: config.emojiUrl + 'star.png'}), {
60 …+ onclick: function () {
61 …+ console.log(vote)
62 …+ vote.vote.value = 1
63 …+ sbot.publish(vote, function (err, voted) {
64 …+ if(err) throw err
65 …+ console.log('Starred!', voted)
66 …+ votebutton.replaceChild(unstar, star)
67 …+ })
68 …+ }
69 …+ }
70 …+ )
71 …+
72 …+ var unstar = h('button.btn.right',
73 …+ h('img.emoji', {src: config.emojiUrl + 'stars.png'}), {
74 …+ onclick: function () {
75 …+ vote.vote.value = -1
76 …+ sbot.publish(vote, function (err, voted) {
77 …+ if(err) throw err
78 …+ console.log('Unstarred!', voted)
79 …+ votebutton.replaceChild(star, unstar)
80 …+ })
81 …+ }
82 …+ }
83 …+ )
84 …+
85 …+ pull(
86 …+ sbot.backlinks({query: [{$filter: {value: {content: {type: 'vote', vote: {link: msg.key}}}}}]}),
87 …+ pull.drain(function (data) {
88 …+ if (data.sync) { }
89 …+ else if (data.value.content.vote.value == 1) {
90 …+ votebutton.replaceChild(unstar, star)
91 …+ }
92 …+ else if (data.value.content.vote.value == -1) {
93 …+ votebutton.replaceChild(star, unstar)
94 …+ }
95 …+ })
96 …+ )
97 …+ /*pull(
98 …+ sbot.links({dest: msg.key, rel: 'vote', author: id}),
99 …+ pull.drain(function (data) {
100 …+ if (data)
101 …+ console.log(data)
102 …+ if (data.value.vote.value == 1)
103 …+ votebutton.replaceChild(unstar, star)
104 …+ else if (data.value.vote.value == -1)
105 …+ votebutton.replaceChild(star, unstar)
106 …+ })
107 …+ )*/
108 …+
109 …+ votebutton.appendChild(star)
110 …+ return votebutton
111 …+}
112 …+
27113 … module.exports.timestamp = function (msg, edited) {
28114 … var timestamp
29115 … if (edited)
30116 … timestamp = h('span.timestamp', 'Edited: ', h('a', {href: '#' + msg.key}, human(new Date(msg.value.timestamp))))
@@ -32,8 +118,23 @@
32118 … timestamp = h('span.timestamp', h('a', {href: '#' + msg.key}, human(new Date(msg.value.timestamp))))
33119 … return timestamp
34120 … }
35121 …
122 …+
123 …+module.exports.mini = function (msg, content) {
124 …+ return h('div.mini',
125 …+ h('span.avatar',
126 …+ h('a', {href: '#' + msg.value.author},
127 …+ h('span.avatar--small', avatar.image(msg.value.author)),
128 …+ avatar.name(msg.value.author)
129 …+ )
130 …+ ),
131 …+ exports.timestamp(msg),
132 …+ content
133 …+ )
134 …+}
135 …+
136 …+
36137 … module.exports.header = function (msg) {
37138 … return h('div.header',
38139 … h('span.avatar',
39140 … h('a', {href: '#' + msg.value.author},
views.jsView
@@ -24,8 +24,61 @@
2424 …
2525 … screen.appendChild(hyperscroll(content))
2626 … }
2727 …
28 …+var edit = function() {
29 …+ var content = h('div.content')
30 …+
31 …+ var screen = document.getElementById('screen')
32 …+
33 …+ screen.appendChild(hyperscroll(content))
34 …+
35 …+ var nameInput = h('input', {placeholder: 'New name'})
36 …+
37 …+ var locInput = h('input', {placeholder: 'New location'})
38 …+
39 …+ var descInput = h('textarea', {placeholder: 'New description'})
40 …+
41 …+ var editor = h('div.message',
42 …+ h('h1', 'Edit profile'),
43 …+ nameInput,
44 …+ h('button.btn.btn-primary', 'Preview', {onclick: function () {
45 …+ if(nameInput.value) {
46 …+ api.message_confirm({
47 …+ type: 'about',
48 …+ about: id,
49 …+ name: nameInput.value || undefined
50 …+ })
51 …+ }
52 …+ }}),
53 …+ h('hr'),
54 …+ locInput,
55 …+ h('button.btn.btn-primary', 'Preview', {onclick: function () {
56 …+ if(locInput.value) {
57 …+ api.message_confirm({
58 …+ type: 'loc',
59 …+ about: id,
60 …+ loc: locInput.value || undefined
61 …+ })
62 …+ }
63 …+ }}),
64 …+ h('hr'),
65 …+ descInput,
66 …+ h('button.btn.btn-primary', 'Preview', {onclick: function (){
67 …+ if(descInput.value) {
68 …+ api.message_confirm({
69 …+ type: 'description',
70 …+ about: id,
71 …+ description: descInput.value || undefined
72 …+ })
73 …+ }
74 …+ }}),
75 …+ h('hr')
76 …+ )
77 …+
78 …+ content.appendChild(editor)
79 …+}
80 …+
2881 … var mentionsStream = function () {
2982 … var content = h('div.content')
3083 …
3184 … var screen = document.getElementById('screen')
@@ -182,8 +235,10 @@
182235 … console.log('mentions')
183236 … mentionsStream()
184237 … } else if (src == 'about') {
185238 … about()
239 …+ } else if (src == 'edit') {
240 …+ edit()
186241 … } else if (src == 'key') {
187242 … keyPage()
188243 … } else {
189244 … logStream()

Built with git-ssb-web