Commit bdc777360c48b4ead49e30a0a5932c35621c0c90
launch generic composer into feed
Ev Bogue committed on 5/25/2018, 8:38:32 PMParent: a7f68e1a76889ae73272b63475776b226d864a95
Files changed
| compose.js | changed |
| index.js | changed |
| render.js | changed |
| style.css | changed |
| style.css.json | changed |
| views.js | changed |
| compose.js | ||
|---|---|---|
| @@ -8,8 +8,10 @@ | ||
| 8 | 8 … | |
| 9 | 9 … | var mime = require('simple-mime')('application/octect-stream') |
| 10 | 10 … | var split = require('split-buffer') |
| 11 | 11 … | |
| 12 … | +var route = require('./views') | |
| 13 … | + | |
| 12 | 14 … | function file_input (onAdded) { |
| 13 | 15 … | return h('label.btn', 'Upload file', |
| 14 | 16 … | h('input', { type: 'file', hidden: true, |
| 15 | 17 … | onchange: function (ev) { |
| @@ -34,9 +36,9 @@ | ||
| 34 | 36 … | } |
| 35 | 37 … | })) |
| 36 | 38 … | } |
| 37 | 39 … | |
| 38 | -module.exports = function (opts) { | |
| 40 … | +module.exports = function (opts, buttons) { | |
| 39 | 41 … | var files = [] |
| 40 | 42 … | var filesById = {} |
| 41 | 43 … | |
| 42 | 44 … | var composer = h('div.composer') |
| @@ -54,13 +56,15 @@ | ||
| 54 | 56 … | if (opts.updated) { |
| 55 | 57 … | cancel = document.getElementById(opts.updated.substring(0,10)) |
| 56 | 58 … | var oldMessage = h('div.message__body', tools.markdown(opts.messageText)) |
| 57 | 59 … | cancel.parentNode.replaceChild(oldMessage, cancel) |
| 58 | - console.log(opts.buttons) | |
| 59 | - oldMessage.parentNode.appendChild(opts.buttons) | |
| 60 … | + oldMessage.parentNode.appendChild(buttons) | |
| 60 | 61 … | } else if (opts.branch) { |
| 61 | 62 … | cancel = document.getElementById(opts.branch.substring(0,10)) |
| 62 | 63 … | cancel.parentNode.removeChild(cancel) |
| 64 … | + } else { | |
| 65 … | + cancel = document.getElementById('composer') | |
| 66 … | + cancel.parentNode.removeChild(cancel) | |
| 63 | 67 … | } |
| 64 | 68 … | } |
| 65 | 69 … | |
| 66 | 70 … | }) |
| @@ -92,9 +96,9 @@ | ||
| 92 | 96 … | |
| 93 | 97 … | if (opts.type == 'post') |
| 94 | 98 … | var header = tools.header(msg) |
| 95 | 99 … | if (opts.type == 'update') |
| 96 | - var header = h('div.timestamp', 'Edited:', h('a', {href: msg.key}, human(new Date(msg.value.timestamp)))) | |
| 100 … | + var header = h('div.timestamp', 'Edited: ', h('a', {href: msg.key}, human(new Date(msg.value.timestamp)))) | |
| 97 | 101 … | |
| 98 | 102 … | var preview = h('div', |
| 99 | 103 … | header, |
| 100 | 104 … | h('div.message__content', tools.markdown(msg.value.content.text)), |
| @@ -102,10 +106,19 @@ | ||
| 102 | 106 … | onclick: function () { |
| 103 | 107 … | sbot.publish(msg.value.content, function (err, msg) { |
| 104 | 108 … | if(err) throw err |
| 105 | 109 … | console.log('Published!', msg) |
| 106 | - window.location.reload() | |
| 107 | - if(cb) cb(err, msg) | |
| 110 … | + if (opts.type == 'update') { | |
| 111 … | + var originalMessage = document.getElementById(opts.updated.substring(0,10)) | |
| 112 … | + console.log(originalMessage) | |
| 113 … | + opts.messageText = msg.value.content.text | |
| 114 … | + var newMessage = h('div.message__body', | |
| 115 … | + h('div.timestamp', 'Edited: ', h('a', {href: msg.key}, human(new Date(msg.value.timestamp)))), | |
| 116 … | + h('div', tools.markdown(msg.value.content.text)) | |
| 117 … | + ) | |
| 118 … | + originalMessage.parentNode.replaceChild(newMessage, originalMessage) | |
| 119 … | + newMessage.parentNode.appendChild(buttons) | |
| 120 … | + } | |
| 108 | 121 … | }) |
| 109 | 122 … | } |
| 110 | 123 … | }), |
| 111 | 124 … | h('button.btn', 'Cancel', { |
| index.js | ||
|---|---|---|
| @@ -1,8 +1,10 @@ | ||
| 1 | 1 … | var h = require('hyperscript') |
| 2 | 2 … | var route = require('./views') |
| 3 | 3 … | var avatar = require('./avatar') |
| 4 | 4 … | |
| 5 … | +var compose = require('./compose') | |
| 6 … | + | |
| 5 | 7 … | var id = require('./keys').id |
| 6 | 8 … | |
| 7 | 9 … | document.head.appendChild(h('style', require('./style.css.json'))) |
| 8 | 10 … | |
| @@ -11,9 +13,17 @@ | ||
| 11 | 13 … | var nav = h('div.navbar', |
| 12 | 14 … | h('div.internal', |
| 13 | 15 … | h('li', h('a', {href: '#' + id}, h('span.avatar--small', avatar.image(id)))), |
| 14 | 16 … | h('li', h('a', {href: '#' + id}, avatar.name(id))), |
| 15 | - h('li', h('a', {href: '#compose' }, 'Compose')), | |
| 17 … | + h('li', h('a', 'Compose', { | |
| 18 … | + onclick: function () { | |
| 19 … | + document.getElementById('screen') | |
| 20 … | + var opts = {} | |
| 21 … | + opts.type = 'post' | |
| 22 … | + var composer = h('div.content#composer', h('div.message', compose(opts))) | |
| 23 … | + screen.firstChild.insertBefore(composer, screen.firstChild.firstChild) | |
| 24 … | + } | |
| 25 … | + })), | |
| 16 | 26 … | h('li', h('a', {href: '#'}, 'Public')), |
| 17 | 27 … | h('li', h('a', {href: '#private' }, 'Private')), |
| 18 | 28 … | h('li', h('a', {href: '#mentions' }, 'Mentions')), |
| 19 | 29 … | h('li', h('a', {href: '#key' }, 'Key')), |
| render.js | ||
|---|---|---|
| @@ -57,22 +57,24 @@ | ||
| 57 | 57 … | ) |
| 58 | 58 … | var buttons = h('div.buttons') |
| 59 | 59 … | buttons.appendChild(h('button.btn', 'Reply', { |
| 60 | 60 … | onclick: function () { |
| 61 … | + var r = message.childNodes.length - 1 | |
| 62 … | + buttons = message.childNodes[r] | |
| 61 | 63 … | //fallback = message.lastElementChild |
| 62 | 64 … | //console.log(fallback) |
| 63 | - var compose = h('div.message#' + reply.branch.substring(0, 10), composer(reply)) | |
| 65 … | + var compose = h('div.message#' + reply.branch.substring(0, 10), composer(reply, buttons)) | |
| 64 | 66 … | message.parentNode.appendChild(compose) |
| 65 | 67 … | //message.replaceChild(compose, message.lastElementChild) |
| 66 | 68 … | } |
| 67 | 69 … | })) |
| 68 | 70 … | if (msg.value.author == id) |
| 69 | 71 … | buttons.appendChild(h('button.btn', 'Edit', { |
| 70 | 72 … | onclick: function () { |
| 71 | 73 … | var r = message.childNodes.length - 1 |
| 72 | - edit.buttons = message.childNodes[r] | |
| 74 … | + buttons = message.childNodes[r] | |
| 73 | 75 … | message.removeChild(message.childNodes[r]) |
| 74 | - var compose = h('div#' + edit.updated.substring(0, 10), composer(edit)) | |
| 76 … | + var compose = h('div#' + edit.updated.substring(0, 10), composer(edit, buttons)) | |
| 75 | 77 … | message.replaceChild(compose, message.lastElementChild) |
| 76 | 78 … | } |
| 77 | 79 … | })) |
| 78 | 80 … | |
| style.css | ||
|---|---|---|
| @@ -96,8 +96,14 @@ | ||
| 96 | 96 … | background: #333; |
| 97 | 97 … | border-radius: 100%; |
| 98 | 98 … | } |
| 99 | 99 … | |
| 100 … | +.content { | |
| 101 … | + max-width: 680px; | |
| 102 … | + margin-left: auto; | |
| 103 … | + margin-right: auto; | |
| 104 … | +} | |
| 105 … | + | |
| 100 | 106 … | .hyperscroll > .content { |
| 101 | 107 … | max-width: 680px; |
| 102 | 108 … | margin-left: auto; |
| 103 | 109 … | margin-right: auto; |
| style.css.json | ||
|---|---|---|
| @@ -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\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.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 {\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 {\n background: #222;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: 1px solid #252525;\n border-radius: 3px;\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\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 {\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 {\n background: #222;\n color: #ccc;\n width: 100%;\n height: 100px;\n border: 1px solid #252525;\n border-radius: 3px;\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" | |
| views.js | |||
|---|---|---|---|
| @@ -69,18 +69,8 @@ | |||
| 69 | 69 … | }) | |
| 70 | 70 … | }) | |
| 71 | 71 … | } | |
| 72 | 72 … | ||
| 73 | - else if (src == 'compose') { | ||
| 74 | - var screen = document.getElementById('screen') | ||
| 75 | - | ||
| 76 | - var opts = {} | ||
| 77 | - opts.type = 'post' | ||
| 78 | - | ||
| 79 | - var content = h('div.content', h('div.message', compose(opts))) | ||
| 80 | - | ||
| 81 | - screen.appendChild(hyperscroll(content)) | ||
| 82 | - } | ||
| 83 | 73 … | else if (src == 'about') { | |
| 84 | 74 … | ||
| 85 | 75 … | var screen = document.getElementById('screen') | |
| 86 | 76 … | ||
Built with git-ssb-web