Commit 302ee34806865960fcbafa16cb1419c070150269
Add support for a channel input box
Bradley Donahue committed on 2/3/2017, 7:26:16 PMParent: e50286f70acfd2b61a42f560edfdfc1083b1e0fc
Files changed
| modules_basic/compose.js | changed |
| modules_basic/compose.mcss | changed |
| modules_extra/channel.js | changed |
| modules_basic/compose.js | ||
|---|---|---|
| @@ -4,8 +4,9 @@ | ||
| 4 | 4 … | const mentions = require('ssb-mentions') |
| 5 | 5 … | |
| 6 | 6 … | exports.needs = { |
| 7 | 7 … | suggest_mentions: 'map', //<-- THIS MUST BE REWRITTEN |
| 8 … | + suggest_channel: 'map', | |
| 8 | 9 … | build_suggest_box: 'first', |
| 9 | 10 … | publish: 'first', |
| 10 | 11 … | message_content: 'first', |
| 11 | 12 … | message_confirm: 'first', |
| @@ -46,8 +47,13 @@ | ||
| 46 | 47 … | var textArea = h('textarea', { |
| 47 | 48 … | placeholder: opts.placeholder || 'Write a message' |
| 48 | 49 … | }) |
| 49 | 50 … | |
| 51 … | + var channelInput = h('input.channel', { | |
| 52 … | + placeholder: '#channel', | |
| 53 … | + value: meta.channel || '' | |
| 54 … | + }) | |
| 55 … | + | |
| 50 | 56 … | if(opts.shrink !== false) { |
| 51 | 57 … | var blur |
| 52 | 58 … | textArea.addEventListener('focus', () => { |
| 53 | 59 … | clearTimeout(blur) |
| @@ -79,8 +85,10 @@ | ||
| 79 | 85 … | try { |
| 80 | 86 … | content = JSON.parse(textArea.value) |
| 81 | 87 … | } catch (err) { |
| 82 | 88 … | meta.text = textArea.value |
| 89 … | + meta.channel = (channelInput.value.startsWith('#') ? | |
| 90 … | + channelInput.value.substr(1).trim() : channelInput.value.trim()) || null | |
| 83 | 91 … | meta.mentions = mentions(textArea.value).map(mention => { |
| 84 | 92 … | // merge markdown-detected mention with file info |
| 85 | 93 … | var file = filesById[mention.link] |
| 86 | 94 … | if (file) { |
| @@ -125,13 +133,15 @@ | ||
| 125 | 133 … | fileInput, publishBtn |
| 126 | 134 … | ]) |
| 127 | 135 … | |
| 128 | 136 … | api.build_suggest_box(textArea, api.suggest_mentions) |
| 137 … | + api.build_suggest_box(channelInput, api.suggest_channel) | |
| 129 | 138 … | |
| 130 | 139 … | var composer = h('Compose', { |
| 131 | 140 … | className: opts.shrink === false ? '-expanded' : '-contracted' |
| 132 | 141 … | }, [ |
| 133 | 142 … | textArea, |
| 143 … | + channelInput, | |
| 134 | 144 … | actions |
| 135 | 145 … | ]) |
| 136 | 146 … | |
| 137 | 147 … | |
| modules_basic/compose.mcss | ||
|---|---|---|
| @@ -7,8 +7,13 @@ | ||
| 7 | 7 … | textarea { |
| 8 | 8 … | border: 1px solid gainsboro |
| 9 | 9 … | } |
| 10 | 10 … | |
| 11 … | + input.channel { | |
| 12 … | + border: 1px solid gainsboro | |
| 13 … | + padding: .5rem | |
| 14 … | + } | |
| 15 … | + | |
| 11 | 16 … | section.actions { |
| 12 | 17 … | display: flex |
| 13 | 18 … | flex-direction: row |
| 14 | 19 … | align-items: baseline |
| @@ -25,9 +30,9 @@ | ||
| 25 | 30 … | |
| 26 | 31 … | ::-webkit-file-upload-button { |
| 27 | 32 … | visibility: hidden |
| 28 | 33 … | } |
| 29 | - | |
| 34 … | + | |
| 30 | 35 … | ::before { |
| 31 | 36 … | $composeButton |
| 32 | 37 … | padding-top: .3rem |
| 33 | 38 … | |
| @@ -37,12 +42,12 @@ | ||
| 37 | 42 … | outline: none |
| 38 | 43 … | white-space: nowrap |
| 39 | 44 … | -webkit-user-select: none |
| 40 | 45 … | } |
| 41 | - | |
| 46 … | + | |
| 42 | 47 … | :active, :focus { |
| 43 | 48 … | outline: none |
| 44 | - box-shadow: none | |
| 49 … | + box-shadow: none | |
| 45 | 50 … | } |
| 46 | 51 … | } |
| 47 | 52 … | |
| 48 | 53 … | button { |
| @@ -59,19 +64,27 @@ | ||
| 59 | 64 … | height: 200px |
| 60 | 65 … | transition: height .15s ease-out |
| 61 | 66 … | } |
| 62 | 67 … | |
| 68 … | + input.channel { | |
| 69 … | + display: flex | |
| 70 … | + } | |
| 71 … | + | |
| 63 | 72 … | section.actions { |
| 64 | 73 … | display: flex |
| 65 | 74 … | } |
| 66 | 75 … | } |
| 67 | 76 … | |
| 68 | - -contracted { | |
| 77 … | + -contracted { | |
| 69 | 78 … | textarea { |
| 70 | 79 … | height: 50px |
| 71 | 80 … | transition: height .15s ease-in |
| 72 | 81 … | } |
| 73 | 82 … | |
| 83 … | + input.channel { | |
| 84 … | + display: none | |
| 85 … | + } | |
| 86 … | + | |
| 74 | 87 … | section.actions { |
| 75 | 88 … | display: none |
| 76 | 89 … | } |
| 77 | 90 … | } |
| @@ -86,5 +99,4 @@ | ||
| 86 | 99 … | padding: .5rem |
| 87 | 100 … | margin: 0 |
| 88 | 101 … | cursor: pointer |
| 89 | 102 … | } |
| 90 | - | |
| modules_extra/channel.js | ||
|---|---|---|
| @@ -15,9 +15,10 @@ | ||
| 15 | 15 … | message_meta: true, |
| 16 | 16 … | screen_view: true, |
| 17 | 17 … | connection_status: true, |
| 18 | 18 … | suggest_search: true, |
| 19 | - suggest_mentions: true | |
| 19 … | + suggest_mentions: true, | |
| 20 … | + suggest_channel: true | |
| 20 | 21 … | } |
| 21 | 22 … | |
| 22 | 23 … | exports.create = function (api) { |
| 23 | 24 … | |
| @@ -34,9 +35,10 @@ | ||
| 34 | 35 … | message_meta, |
| 35 | 36 … | screen_view, |
| 36 | 37 … | connection_status, |
| 37 | 38 … | suggest_search, |
| 38 | - suggest_mentions | |
| 39 … | + suggest_mentions, | |
| 40 … | + suggest_channel | |
| 39 | 41 … | } |
| 40 | 42 … | |
| 41 | 43 … | function message_meta (msg) { |
| 42 | 44 … | var chan = msg.value.content.channel |
| @@ -135,6 +137,23 @@ | ||
| 135 | 137 … | } |
| 136 | 138 … | })) |
| 137 | 139 … | } |
| 138 | 140 … | } |
| 141 … | + | |
| 142 … | + function suggest_channel (query) { | |
| 143 … | + return function (cb) { | |
| 144 … | + if (!/^#\w/.test(query)) return cb() | |
| 145 … | + | |
| 146 … | + cb(null, channels.filter(function (chan) { | |
| 147 … | + return (`#${chan.name}`).substring(0, query.length) === query | |
| 148 … | + }) | |
| 149 … | + .map(function (chan) { | |
| 150 … | + var name = `#${chan.name}` | |
| 151 … | + return { | |
| 152 … | + title: name, | |
| 153 … | + subtitle: `(${chan.rank})`, | |
| 154 … | + value: name.substr(1) | |
| 155 … | + } | |
| 156 … | + })) | |
| 157 … | + } | |
| 158 … | + } | |
| 139 | 159 … | } |
| 140 | - | |
Built with git-ssb-web