git ssb

2+

mixmix / ticktack



Commit c20f1f54514253fb0cd2fbeb38bc3cbbc5f0f12d

add click handler, "publish" translation

mix irving committed on 4/10/2018, 10:06:11 PM
Parent: 35b74ae2d81cf0619ba5864d5875785f83255ef3

Files changed

app/page/blogNew.jschanged
app/page/blogNew.mcsschanged
app/page/blogShow.jschanged
app/page/blogShow.mcsschanged
message/html/compose.jschanged
styles/mixins.jschanged
translations/en.jschanged
app/page/blogNew.jsView
@@ -33,12 +33,9 @@
3333 summary: Value(),
3434 text: Value('')
3535 })
3636
37- const mediumComposer = h('div.editor.Markdown', {
38- 'ev-input': e => {
39- }
40- })
37 + const mediumComposer = h('Markdown.editor')
4138 var filesById = {}
4239 const composer = initialiseDummyComposer({ filesById, meta, api })
4340 // NOTE we are bootstrapping off the message.html.compose logic
4441 // - the mediumComposer feeds content into the composer, which the provides publishing
@@ -49,18 +46,28 @@
4946 'ev-input': e => meta.channel.set(e.target.value),
5047 value: meta.channel,
5148 placeholder: strings.channel
5249 })
50 + const updateTitle = e => {
51 + if (e.target.childElementCount) {
52 + // catch people pasting html in here!
53 + e.target.innerHTML = e.target.innerText
54 + }
55 + meta.title.set(e.target.innerText)
56 + }
5357
5458 var page = h('Page -blogNew', [
5559 api.app.html.sideNav(location),
5660 h('div.content', [
5761 h('div.container', [
5862 h('div.field -title', [
59- h('input', {
60- 'ev-input': e => meta.title.set(e.target.value),
61- className: when(meta.title, '', '-empty'),
62- placeholder: strings.blogNew.field.title
63 + h('h1.input', {
64 + attributes: {
65 + contenteditable: true,
66 + 'data-placeholder': strings.blogNew.field.title
67 + },
68 + 'ev-input': updateTitle,
69 + className: when(meta.title, '', '-empty')
6370 })
6471 ]),
6572 mediumComposer,
6673 h('div.field -attachment',
@@ -90,8 +97,9 @@
9097 }
9198
9299 function AddFileButton ({ api, filesById, meta, textArea }) {
93100 // var textRaw = meta.text
101 + //
94102
95103 const fileInput = api.blob.html.input(file => {
96104 filesById[file.link] = file
97105
@@ -107,9 +115,14 @@
107115 } else {
108116 content = h('a', { href: file.link }, file.name)
109117 }
110118 // TODO - insert where the mouse is yo
111- textArea.appendChild(h('p', content))
119 + var editor = MediumEditor.getEditorFromElement(textArea)
120 + debugger
121 + textArea.insertBefore(
122 + h('p', content),
123 + editor.currentEl || null
124 + )
112125
113126 console.log('added:', file)
114127 })
115128
@@ -121,8 +134,11 @@
121134 {
122135 meta,
123136 // placeholder: strings.blogNew.actions.writeBlog,
124137 shrink: false,
138 + canAttach: false,
139 + canPreview: false,
140 + publishString: api.translations.sync.strings().publishBlog,
125141 filesById,
126142 prepublish: function (content, cb) {
127143 var m = /\!\[[^]+\]\(([^\)]+)\)/.exec(marksum.image(content.text))
128144 content.thumbnail = m && m[1]
@@ -172,11 +188,8 @@
172188 })
173189 }
174190
175191 function initialiseMedium ({ page, el, meta }) {
176- // el.addEventListener('keyup', ev => {
177- // debugger
178- // })
179192 var editor = new MediumEditor(el, {
180193 elementsContainer: page,
181194 // autoLink: true,
182195 buttonLabels: 'fontawesome',
@@ -220,8 +233,11 @@
220233 replacement: (content, node) => {
221234 var blob = decodeURIComponent(node.src.replace('http://localhost:8989/blobs/get/', ''))
222235 return `![${node.alt}](${blob})`
223236 }
237 + }, {
238 + filter: 'span',
239 + replacement: (content, node) => content
224240 }]
225241 },
226242 events: ['input', 'change', 'DOMNodeInserted']
227243 },
@@ -229,6 +245,17 @@
229245 )
230246 }
231247 })
232248
249 + editor.on(el, 'keyup', setCurrentEl)
250 + editor.on(el, 'click', setCurrentEl)
251 +
252 + function setCurrentEl (ev) {
253 + var sel = window.getSelection()
254 + var container = sel.getRangeAt(0).commonAncestorContainer
255 + editor.currentEl = container.textContent === '' // NOTE this could be a brittle check
256 + ? container
257 + : container.parentElement
258 + }
259 +
233260 return editor
234261 }
app/page/blogNew.mcssView
@@ -33,19 +33,27 @@
3333 }
3434
3535 -title {
3636 margin: 0
37 + background-color: #fff
3738
38- input {
39- font-size: 2em
40- font-weight: bold
39 + h1.input {
40 + flex-grow: 1
41 + $fontTitle
4142
42- padding-top: 2rem
43 + padding: 2rem 1rem .6rem 1rem
4344 border: none
4445 border-radius: 0
46 + margin: 0
47 + outline: none
4548
4649 -empty {
4750 font-style: italic
51 + color: #b3b3b1
52 +
53 + ::after {
54 + content: attr(data-placeholder)
55 + }
4856 }
4957 }
5058 }
5159
@@ -86,9 +94,11 @@
8694
8795 -channel {}
8896 }
8997
90- div.editor{
98 + div.editor.Makdown {
99 + $markdownBlog
100 +
91101 background-color: #fff
92102 padding: 1rem
93103 min-height: 30rem
94104 outline: none
@@ -100,11 +110,12 @@
100110 }
101111 }
102112
103113 div.Compose {
114 + margin-bottom: 4rem
115 +
104116 textarea {
105- margin-top: 2rem
106- min-height: 30rem
117 + display: none
107118 }
108119 }
109120 }
110121 }
app/page/blogShow.jsView
@@ -37,9 +37,9 @@
3737 return h('Page -blogShow', [
3838 api.app.html.sideNav({ page: 'blogShow' }), // HACK to highlight discover
3939 h('Scroller.content', [
4040 h('section.top', [
41- api.app.html.topNav(location)
41 + api.app.html.topNav(blogMsg)
4242 ]),
4343 h('section.content', [
4444 h('header', [
4545 h('div.blog', [
app/page/blogShow.mcssView
@@ -32,12 +32,10 @@
3232 align-items: center
3333
3434 h1 {
3535 flex-basis: 100%
36 + $fontTitle
3637
37- $markdownLarge
38- font-size: 2rem
39- font-weight: 300
4038 margin: 0 0 1rem 0
4139 }
4240
4341 div.Timeago {
@@ -87,8 +85,12 @@
8785 $backgroundPrimaryText
8886 padding: 1.5rem
8987
9088 margin-bottom: 1.5rem
89 +
90 + div.Markdown {
91 + $markdownBlog
92 + }
9193 }
9294
9395 div.Comments {
9496 flex-basis: 100%
message/html/compose.jsView
@@ -27,8 +27,9 @@
2727 var {
2828 meta, // required
2929 feedIdsInThread = [],
3030 placeholder,
31 + publishString,
3132 shrink = true,
3233 canAttach = true, canPreview = true,
3334 filesById = {},
3435 prepublish
@@ -39,8 +40,9 @@
3940 const getChannelSuggestions = api.channel.async.suggest()
4041 const getEmojiSuggestions = api.emoji.async.suggest()
4142
4243 placeholder = placeholder || strings.writeMessage
44 + publishString = publishString || strings.sendMessage
4345
4446 var textAreaFocused = Value(false)
4547 var focused = textAreaFocused
4648 var hasContent = Value(false)
@@ -104,9 +106,9 @@
104106 }
105107 var { previewBtn, showPreview } = PreviewSetup(strings)
106108 var preview = computed(textRaw, text => api.message.html.markdown(text))
107109
108- var publishBtn = h('Button -primary', { 'ev-click': () => publish({ filesById }) }, strings.sendMessage)
110 + var publishBtn = h('Button -primary', { 'ev-click': () => publish({ filesById }) }, publishString)
109111
110112 var actions = h('section.actions', [
111113 canAttach ? fileInput : '',
112114 canPreview ? previewBtn : '',
@@ -163,9 +165,11 @@
163165 prepublish(content, function (err, content) {
164166 if (err) handleErr(err)
165167 else api.message.async.publish(content, done)
166168 })
167- } else { api.message.async.publish(content, done) }
169 + } else {
170 + api.message.async.publish(content, done)
171 + }
168172
169173 function done (err, msg) {
170174 publishBtn.disabled = false
171175 if (err) handleErr(err)
styles/mixins.jsView
@@ -9,14 +9,28 @@
99 })
1010 }
1111
1212 const mainMixins = `
13 +$fontSerif {
14 + font-family: Georgia,Cambria,"Times New Roman",Times,serif
15 +}
16 +
17 +$fontSansSerif {
18 + font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Arial,sans-serif
19 +}
20 +
1321 $fontBasic {
14- font-family: arial
22 + color: rgba(0,0,0,.84)
23 + $fontSansSerif
24 + font-size: 1rem
1525 line-height: 1.2
16- font-size: 1rem
1726 }
1827
28 +$fontTitle {
29 + $fontSansSerif
30 + font-size: 2.5rem
31 +}
32 +
1933 $maxWidth {
2034 max-width: 1000px
2135 }
2236
@@ -114,23 +128,23 @@
114128
115129 $markdownSmall {
116130 div.Markdown {
117131 h1, h2, h3, h4, h5, h6, p {
118- font-size: .9rem
132 + font-size: 1rem
119133 font-weight: 300
120134 margin: 0
121135 }
122136 (img.emoji) {
123- height: .9rem
137 + height: 1rem
124138 }
125139 }
126140 h1, h2, h3, h4, h5, h6, p {
127- font-size: .9rem
141 + font-size: 1rem
128142 font-weight: 300
129143 margin: 0
130144 }
131145 (img.emoji) {
132- height: .9rem
146 + height: 1rem
133147 }
134148 }
135149
136150 $markdownLarge {
@@ -161,8 +175,20 @@
161175 font-weight: bold
162176 }
163177 }
164178
179 +$markdownBlog {
180 + $fontSerif
181 + line-height: 1.58
182 +
183 + h1, h2, h3, h4, h5, h6 {
184 + $fontSansSerif
185 + letter-spacing: -.015rem
186 + }
187 +
188 + font-size: 1.25rem
189 +}
190 +
165191 $borderSubtle {
166192 border: 1px solid #b9b9b9
167193 }
168194
translations/en.jsView
@@ -37,8 +37,9 @@
3737 writeMessage: 'Write a message',
3838 writeComment: 'Write a comment',
3939 peopleNearby: 'People nearby',
4040 sendMessage: 'Send',
41 + publishBlog: 'Publish',
4142 showMore: 'Show More',
4243 directMessages: 'Direct Messages',
4344 home: 'Home',
4445 error: 'Error',

Built with git-ssb-web