| modules_basic/compose.jsView |
|---|
| 1 | 1 … | 'use strict' |
| 2 | | -var h = require('hyperscript') |
| 3 | | -var u = require('../util') |
| 4 | | -var suggest = require('suggest-box') |
| 5 | | -var mentions = require('ssb-mentions') |
| 6 | | -var lightbox = require('hyperlightbox') |
| 7 | | -var cont = require('cont') |
| 2 … | +const fs = require('fs') |
| 3 … | +const h = require('../h') |
| 4 … | +const u = require('../util') |
| 5 … | +const suggest = require('suggest-box') |
| 6 … | +const mentions = require('ssb-mentions') |
| 7 … | +const lightbox = require('hyperlightbox') |
| 8 … | +const cont = require('cont') |
| 8 | 9 … | |
| 9 | 10 … | |
| 10 | 11 … | |
| 11 | 12 … | |
| 20 | 21 … | message_confirm: 'first', |
| 21 | 22 … | file_input: 'first' |
| 22 | 23 … | } |
| 23 | 24 … | |
| 24 | | -exports.gives = 'message_compose' |
| 25 … | +exports.gives = { |
| 26 … | + 'message_compose': true, |
| 27 … | + 'mcss': true |
| 28 … | +} |
| 25 | 29 … | |
| 26 | | -function id (e) { return e } |
| 27 | | - |
| 28 | 30 … | |
| 29 | 31 … | opts can take |
| 30 | 32 … | |
| 31 | 33 … | placeholder: string. placeholder text, defaults to "Write a message" |
| 33 | 35 … | shrink: boolean. set to false, to make composer not shrink (or hide controls) when unfocused. |
| 34 | 36 … | */ |
| 35 | 37 … | |
| 36 | 38 … | exports.create = function (api) { |
| 39 … | + return { |
| 40 … | + message_compose, |
| 41 … | + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') |
| 42 … | + } |
| 37 | 43 … | |
| 38 | | - return function (meta, opts, cb) { |
| 44 … | + function message_compose (meta, opts, cb) { |
| 39 | 45 … | if('function' === typeof cb) { |
| 40 | | - if('function' === typeof opts) |
| 46 … | + if('function' === typeof opts) { |
| 41 | 47 … | opts = {prepublish: opts} |
| 42 | 48 … | } |
| 49 … | + } |
| 43 | 50 … | |
| 44 | 51 … | if(!opts) opts = {} |
| 45 | 52 … | opts.prepublish = opts.prepublish || id |
| 46 | 53 … | |
| 47 | | - var accessories |
| 54 … | + var actions |
| 48 | 55 … | meta = meta || {} |
| 49 | 56 … | if(!meta.type) throw new Error('message must have type') |
| 50 | | - var ta = h('textarea', { |
| 57 … | + |
| 58 … | + var textArea = h('textarea', { |
| 51 | 59 … | placeholder: opts.placeholder || 'Write a message', |
| 52 | 60 … | style: {height: opts.shrink === false ? '200px' : ''} |
| 53 | 61 … | }) |
| 54 | 62 … | |
| 55 | 63 … | if(opts.shrink !== false) { |
| 56 | 64 … | var blur |
| 57 | | - ta.addEventListener('focus', function () { |
| 65 … | + textArea.addEventListener('focus', () => { |
| 58 | 66 … | clearTimeout(blur) |
| 59 | | - if(!ta.value) { |
| 60 | | - ta.style.height = '200px' |
| 67 … | + if(!textArea.value) { |
| 68 … | + textArea.style.height = '200px' |
| 61 | 69 … | } |
| 62 | | - accessories.style.display = 'block' |
| 70 … | + actions.style.display = 'flex' |
| 63 | 71 … | }) |
| 64 | | - ta.addEventListener('blur', function () { |
| 72 … | + textArea.addEventListener('blur', () => { |
| 65 | 73 … | |
| 66 | 74 … | |
| 67 | 75 … | clearTimeout(blur) |
| 68 | | - blur = setTimeout(function () { |
| 69 | | - if(ta.value) return |
| 70 | | - ta.style.height = '50px' |
| 71 | | - accessories.style.display = 'none' |
| 76 … | + blur = setTimeout(() => { |
| 77 … | + if(textArea.value) return |
| 78 … | + textArea.style.height = '50px' |
| 79 … | + actions.style.display = 'none' |
| 72 | 80 … | }, 200) |
| 73 | 81 … | }) |
| 74 | 82 … | } |
| 75 | 83 … | |
| 76 | | - ta.addEventListener('keydown', function (ev) { |
| 84 … | + textArea.addEventListener('keydown', ev => { |
| 77 | 85 … | if(ev.keyCode === 13 && ev.ctrlKey) publish() |
| 78 | 86 … | }) |
| 79 | 87 … | |
| 80 | 88 … | var files = [] |
| 83 | 91 … | function publish() { |
| 84 | 92 … | publishBtn.disabled = true |
| 85 | 93 … | var content |
| 86 | 94 … | try { |
| 87 | | - content = JSON.parse(ta.value) |
| 95 … | + content = JSON.parse(textArea.value) |
| 88 | 96 … | } catch (err) { |
| 89 | | - meta.text = ta.value |
| 90 | | - meta.mentions = mentions(ta.value).map(function (mention) { |
| 97 … | + meta.text = textArea.value |
| 98 … | + meta.mentions = mentions(textArea.value).map(mention => { |
| 91 | 99 … | |
| 92 | 100 … | var file = filesById[mention.link] |
| 93 | 101 … | if (file) { |
| 94 | 102 … | if (file.type) mention.type = file.type |
| 110 | 118 … | |
| 111 | 119 … | function done (err, msg) { |
| 112 | 120 … | publishBtn.disabled = false |
| 113 | 121 … | if(err) return alert(err.stack) |
| 114 | | - else if (msg) ta.value = '' |
| 122 … | + else if (msg) textArea.value = '' |
| 115 | 123 … | |
| 116 | 124 … | if (cb) cb(err, msg) |
| 117 | 125 … | } |
| 118 | 126 … | } |
| 119 | 127 … | |
| 128 … | + var fileInput = api.file_input(file => { |
| 129 … | + files.push(file) |
| 130 … | + filesById[file.link] = file |
| 120 | 131 … | |
| 121 | | - var publishBtn = h('button', 'Publish', {onclick: publish}) |
| 122 | | - var composer = |
| 123 | | - h('div.compose', h('div.column', ta, |
| 124 | | - accessories = h('div.row.compose__controls', |
| 125 | | - |
| 126 | | - {style: {display: opts.shrink === false ? '' : 'none'}}, |
| 127 | | - api.file_input(function (file) { |
| 128 | | - files.push(file) |
| 129 | | - filesById[file.link] = file |
| 132 … | + var embed = file.type.indexOf('image/') === 0 ? '!' : '' |
| 133 … | + textArea.value += embed + '['+file.name+']('+file.link+')' |
| 134 … | + console.log('added:', file) |
| 135 … | + }) |
| 136 … | + var publishBtn = h('button', {'ev-click': publish}, 'Publish' ) |
| 137 … | + var actions = h('section.actions', |
| 138 … | + |
| 139 … | + { style: {display: opts.shrink === false ? '' : ''} }, |
| 140 … | + |
| 141 … | + |
| 142 … | + [ fileInput, publishBtn ] |
| 143 … | + ) |
| 130 | 144 … | |
| 131 | | - var embed = file.type.indexOf('image/') === 0 ? '!' : '' |
| 132 | | - ta.value += embed + '['+file.name+']('+file.link+')' |
| 133 | | - console.log('added:', file) |
| 134 | | - }), |
| 135 | | - publishBtn) |
| 136 | | - ) |
| 137 | | - ) |
| 145 … | + var composer = h('Compose', [ |
| 146 … | + textArea, |
| 147 … | + actions |
| 148 … | + ]) |
| 138 | 149 … | |
| 139 | | - suggest(ta, function (name, cb) { |
| 150 … | + suggest(textArea, (name, cb) => { |
| 140 | 151 … | cont.para(api.suggest_mentions(name)) |
| 141 | | - (function (err, ary) { |
| 142 | | - cb(null, ary.reduce(function (a, b) { |
| 152 … | + ((err, ary) => { |
| 153 … | + cb(null, ary.reduce((a, b) => { |
| 143 | 154 … | if(!b) return a |
| 144 | 155 … | return a.concat(b) |
| 145 | 156 … | }, [])) |
| 146 | 157 … | }) |
| 147 | 158 … | }, {}) |
| 148 | 159 … | |
| 149 | 160 … | return composer |
| 150 | | - |
| 151 | 161 … | } |
| 152 | 162 … | |
| 153 | 163 … | } |
| 154 | 164 … | |
| 165 … | +function id (e) { return e } |
| 155 | 166 … | |