Browse Source

implement editable messages (for authors only)

english
Ev Bogue 3 years ago
parent
commit
6f46259a1c
  1. 72
      app.js
  2. 31
      bog.js
  3. 88
      composer.js
  4. 5
      css/style.css
  5. 2
      index.html
  6. 1055
      lib/diff.js
  7. 85
      render.js

72
app.js

@ -1,78 +1,6 @@
var screen = h('div', {id: 'screen'})
document.body.appendChild(screen)
function composer (keys, reply, gotName) {
var messageDiv = h('div')
var message = h('div', {classList: 'message'})
if (gotName) {
console.log(gotName.textContent)
var textarea = h('textarea', ['[' + gotName.textContent + '](' + reply.author + ')'])
} else {
var textarea = h('textarea', {placeholder: 'Write a new bog post...'})
}
var publisher = h('div', [
textarea,
h('button', {
onclick: function () {
if (textarea.value) {
var content = {
type: 'post',
text: textarea.value
}
if (reply) {
content.reply = reply.key
}
publish(content, keys, {preview: true}).then(post => {
open(post).then(msg => {
var preview = render(msg, keys, {preview: true})
var cache = messageDiv.firstChild
messageDiv.appendChild(preview)
messageDiv.removeChild(messageDiv.firstChild)
preview.firstChild.appendChild(h('button', {
onclick: function () {
messageDiv.removeChild(messageDiv.firstChild)
messageDiv.appendChild(cache)
}
}, ['Cancel']))
preview.firstChild.appendChild(h('button', {
onclick: function () {
publish(content, keys).then(post => {
open(post).then(msg => {
textarea.value = ''
if (reply) {
messageDiv.removeChild(messageDiv.firstChild)
}
if (messageDiv.firstChild) {
messageDiv.removeChild(messageDiv.firstChild)
messageDiv = h('div')
messageDiv.appendChild(cache)
scroller.insertBefore(messageDiv, scroller.childNodes[2])
scroller.insertBefore(render(msg, keys), scroller.childNodes[3])
} else {
messageDiv.appendChild(render(msg, keys))
}
})
})
}
}, ['Publish']))
})
})
}
}
}, ['Preview'])
])
message.appendChild(publisher)
messageDiv.appendChild(message)
return messageDiv
}
function route (keys) {
src = window.location.hash.substring(1)

31
bog.js

@ -147,6 +147,7 @@ async function publish (post, keys, preview) {
var openedMsg = await open(message)
if (!preview) {
console.log('ADDING TO LOG AND FEED')
localforage.getItem('log').then(log => {
if (log) {
log.unshift(openedMsg)
@ -176,23 +177,25 @@ async function publish (post, keys, preview) {
var openedMsg = await open(message)
localforage.getItem('log').then(log => {
if (log) {
log.unshift(openedMsg)
localforage.setItem('log', log)
} else {
var feed = [openedMsg]
localforage.setItem('log', feed)
}
})
if (!preview) {
localforage.getItem('log').then(log => {
if (log) {
log.unshift(openedMsg)
localforage.setItem('log', log)
} else {
var feed = [openedMsg]
localforage.setItem('log', feed)
}
})
var feed = [message]
var feed = [message]
var subs = [keys.publicKey]
var subs = [keys.publicKey]
localforage.setItem(keys.publicKey, feed).then(function () {
sync(subs, keys)
})
localforage.setItem(keys.publicKey, feed).then(function () {
sync(subs, keys)
})
}
return message
}

88
composer.js

@ -0,0 +1,88 @@
function composer (keys, reply, gotName, edit) {
var messageDiv = h('div')
var message = h('div', {classList: 'message'})
if (edit) {
console.log(reply)
var textarea = h('textarea', [reply.text])
} else if (gotName) {
var textarea = h('textarea', ['[' + gotName.textContent + '](' + reply.author + ')'])
} else {
var textarea = h('textarea', {placeholder: 'Write a new bog post...'})
}
var publisher = h('div', [
textarea,
h('button', {
onclick: function () {
if (textarea.value) {
if (edit) {
var content = {
type: 'edit',
text: textarea.value
}
} else {
var content = {
type: 'post',
text: textarea.value
}
}
if (edit) {
content.edited = reply.key
} else if (reply) {
content.reply = reply.key
}
publish(content, keys, {preview: true}).then(post => {
open(post).then(msg => {
var preview = render(msg, keys, {preview: true})
var cache = messageDiv.firstChild
messageDiv.appendChild(preview)
messageDiv.removeChild(messageDiv.firstChild)
preview.firstChild.appendChild(h('button', {
onclick: function () {
messageDiv.removeChild(messageDiv.firstChild)
messageDiv.appendChild(cache)
}
}, ['Cancel']))
preview.firstChild.appendChild(h('button', {
onclick: function () {
publish(content, keys).then(post => {
open(post).then(msg => {
textarea.value = ''
if (edit) {
console.log('APPENDING EDIT')
var gotit = document.getElementById(reply.key)
gotit.appendChild(h('div', {classList: 'submessage'}, [render(msg, keys)]))
var newContent = h('div', {innerHTML: marked(msg.text)})
gotit.firstChild.replaceChild(newContent, gotit.firstChild.childNodes[1])
}
if (reply) {
messageDiv.removeChild(messageDiv.firstChild)
}
else if (messageDiv.firstChild) {
messageDiv.removeChild(messageDiv.firstChild)
messageDiv = h('div')
messageDiv.appendChild(cache)
scroller.insertBefore(messageDiv, scroller.childNodes[2])
scroller.insertBefore(render(msg, keys), scroller.childNodes[3])
} else {
messageDiv.appendChild(render(msg, keys))
}
})
})
}
}, ['Publish']))
})
})
}
}
}, ['Preview'])
])
message.appendChild(publisher)
messageDiv.appendChild(message)
return messageDiv
}

5
css/style.css

@ -14,6 +14,11 @@ p {
font-size: 1em;
}
blockquote {
border-left: 2px solid #ccc;
padding-left: .5em;
}
h1, h2, h3, h4, h5, h6 { margin-top: 5px;}
h1 { font-size: 1.4em; }

2
index.html

@ -10,9 +10,11 @@
<script src="./lib/nacl.min.js"></script>
<script src="./lib/nacl-util.min.js"></script>
<script src="./lib/localforage.min.js"></script>
<script src="./lib/diff.js"></script>
<script src="./lib/marked.min.js"></script>
<script src="./lib/misc.js"></script>
<script src="bog.js"></script>
<script src="composer.js"></script>
<script src="gossip.js"></script>
<script src="render.js"></script>
<script src="views.js"></script>

1055
lib/diff.js

File diff suppressed because it is too large Load Diff

85
render.js

@ -37,15 +37,35 @@ function render (msg, keys, preview) {
var message = h('div', {classList: 'message'})
bog().then(log => {
log.reverse().forEach(function (nextPost) {
if (nextPost.reply == msg.key) {
var messageExists = (document.getElementById(nextPost.key) !== null);
if (log) {
log.reverse().forEach(function (nextPost) {
if (nextPost.edited == msg.key) {
var messageExists = (document.getElementById(nextPost.key) !== null)
var msgcontents = document.getElementById('content:' + msg.key)
if (!messageExists) {
messageDiv.appendChild(h('div', {classList: 'submessage'}, [render(nextPost, keys)]))
msg.text = nextPost.text
var editedcontents = h('span', {id : 'content:' + msg.key, innerHTML: marked(nextPost.text)})
msgcontents.parentNode.replaceChild(editedcontents, msgcontents)
message.appendChild(h('div', [
'edited in:',
h('a', {href: '#' + nextPost.key}, [nextPost.key.substring(0, 10) + '...'])
]))
if (!messageExists) {
messageDiv.appendChild(h('div', {classList: 'submessage'}, [render(nextPost, keys)]))
}
}
}
})
if (nextPost.reply == msg.key) {
if (!messageExists) {
messageDiv.appendChild(h('div', {classList: 'submessage'}, [render(nextPost, keys)]))
}
}
})
}
})
var renderer = new marked.Renderer();
@ -62,6 +82,46 @@ function render (msg, keys, preview) {
})
if (msg.type == 'edit') {
message.appendChild(getHeader(msg))
message.appendChild(h('span', [
'edited: ',
h('a', {href: '#' + msg.edited}, [msg.edited.substring(0, 10) + '...'])
]))
var contents = h('div')
message.appendChild(contents)
get(msg.edited).then(previous => {
fragment = document.createDocumentFragment()
var diff = JsDiff.diffWords(previous.text, msg.text)
diff.forEach(function (part) {
if (part.added === true) {
color = 'blue'
} else if (part.removed === true) {
color = 'gray'
} else {color = '#333'}
var span = h('span')
span.style.color = color
if (part.removed === true) {
span.appendChild(h('del', document.createTextNode(part.value)))
} else {
span.appendChild(document.createTextNode(part.value))
}
/*color = part.added ? 'green' :
part.removed ? 'red' : 'grey'
span = document.createElement('span')
span.style.color = color
span.appendChild(document.createTextNode(part.value))*/
fragment.appendChild(span)
})
contents.appendChild(h('code', [fragment]))
})
//message.appendChild(h('div', {innerHTML: marked(msg.text)}))
}
if (msg.type == 'post') {
message.appendChild(getHeader(msg))
@ -72,7 +132,7 @@ function render (msg, keys, preview) {
]))
}
var gotName = getName(msg.author)
message.appendChild(h('div', {innerHTML: marked(msg.text)}))
message.appendChild(h('div',{id: 'content:' + msg.key, innerHTML: marked(msg.text)}))
if (!preview) {
message.appendChild(h('button', {
onclick: function () {
@ -83,6 +143,15 @@ function render (msg, keys, preview) {
}
}
}, ['Reply']))
if (msg.author === keys.publicKey) {
message.appendChild(h('button', {
onclick: function () {
var editor = h('div', [composer(keys, msg, {gotName: false}, {edit: true})])
message.appendChild(editor)
}
}, ['Edit']))
}
}
} else if (msg.type == 'name') {
message.appendChild(getHeader(msg))

Loading…
Cancel
Save