Commit 40ad2f6bbef55f050717028457e776f6ce878ec9
add placeholder, and shrink option
Dominic Tarr committed on 9/17/2016, 2:32:23 AMParent: 18587bcb2aa7e5dd708e8a2dfef6e56ef56ca83e
Files changed
| modules/compose.js | changed |
| modules/private.js | changed |
| modules/public.js | changed |
| modules/thread.js | changed |
| modules/compose.js | ||
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| 1 … | +'use strict' | |
| 1 | 2 … | var h = require('hyperscript') |
| 2 | 3 … | var u = require('../util') |
| 3 | 4 … | var suggest = require('suggest-box') |
| 4 | 5 … | var cont = require('cont') |
| @@ -16,35 +17,54 @@ | ||
| 16 | 17 … | exports.suggest = [] |
| 17 | 18 … | |
| 18 | 19 … | function id (e) { return e } |
| 19 | 20 … | |
| 20 | -exports.message_compose = function (meta, prepublish, cb) { | |
| 21 | - if('function' !== typeof prepublish) | |
| 22 | - sbot = prepublish, prepublish = id | |
| 21 … | +/* | |
| 22 … | + opts can take | |
| 23 … | + | |
| 24 … | + placeholder: string. placeholder text, defaults to "Write a message" | |
| 25 … | + prepublish: function. called before publishing a message. | |
| 26 … | + shrink: boolean. set to false, to make composer not shrink (or hide controls) when unfocused. | |
| 27 … | +*/ | |
| 28 … | + | |
| 29 … | +exports.message_compose = function (meta, opts, cb) { | |
| 30 … | + if('function' === typeof cb) { | |
| 31 … | + if('function' === typeof opts) | |
| 32 … | + opts = {prepublish: opts} | |
| 33 … | + } | |
| 34 … | + | |
| 35 … | + if(!opts) opts = {} | |
| 36 … | + opts.prepublish = opts.prepublish || id | |
| 37 … | + | |
| 23 | 38 … | var accessories |
| 24 | 39 … | meta = meta || {} |
| 25 | 40 … | if(!meta.type) throw new Error('message must have type') |
| 26 | - var ta = h('textarea', {placeholder: 'Write a message'}) | |
| 27 | - | |
| 28 | - var blur | |
| 29 | - ta.addEventListener('focus', function () { | |
| 30 | - clearTimeout(blur) | |
| 31 | - if(!ta.value) { | |
| 32 | - ta.style.height = '200px' | |
| 33 | - } | |
| 34 | - accessories.style.display = 'block' | |
| 41 … | + var ta = h('textarea', { | |
| 42 … | + placeholder: opts.placeholder || 'Write a message', | |
| 43 … | + style: {height: opts.shrink === false ? '200px' : ''} | |
| 35 | 44 … | }) |
| 36 | - ta.addEventListener('blur', function () { | |
| 37 | - //don't shrink right away, so there is time | |
| 38 | - //to click the publish button. | |
| 39 | - clearTimeout(blur) | |
| 40 | - blur = setTimeout(function () { | |
| 41 | - if(ta.value) return | |
| 42 | - ta.style.height = '50px' | |
| 43 | - accessories.style.display = 'none' | |
| 44 | - }, 200) | |
| 45 | - }) | |
| 46 | 45 … | |
| 46 … | + if(opts.shrink !== false) { | |
| 47 … | + var blur | |
| 48 … | + ta.addEventListener('focus', function () { | |
| 49 … | + clearTimeout(blur) | |
| 50 … | + if(!ta.value) { | |
| 51 … | + ta.style.height = '200px' | |
| 52 … | + } | |
| 53 … | + accessories.style.display = 'block' | |
| 54 … | + }) | |
| 55 … | + ta.addEventListener('blur', function () { | |
| 56 … | + //don't shrink right away, so there is time | |
| 57 … | + //to click the publish button. | |
| 58 … | + clearTimeout(blur) | |
| 59 … | + blur = setTimeout(function () { | |
| 60 … | + if(ta.value) return | |
| 61 … | + ta.style.height = '50px' | |
| 62 … | + accessories.style.display = 'none' | |
| 63 … | + }, 200) | |
| 64 … | + }) | |
| 65 … | + } | |
| 66 … | + | |
| 47 | 67 … | ta.addEventListener('keydown', function (ev) { |
| 48 | 68 … | if(ev.keyCode === 13 && ev.ctrlKey) publish() |
| 49 | 69 … | }) |
| 50 | 70 … | |
| @@ -67,9 +87,9 @@ | ||
| 67 | 87 … | } |
| 68 | 88 … | return mention |
| 69 | 89 … | }) |
| 70 | 90 … | try { |
| 71 | - meta = prepublish(meta) | |
| 91 … | + meta = opts.prepublish(meta) | |
| 72 | 92 … | } catch (err) { |
| 73 | 93 … | publishBtn.disabled = false |
| 74 | 94 … | if (cb) cb(err) |
| 75 | 95 … | else alert(err.message) |
| @@ -92,9 +112,9 @@ | ||
| 92 | 112 … | var composer = |
| 93 | 113 … | h('div.compose', h('div.column', ta, |
| 94 | 114 … | accessories = h('div.row.compose__controls', |
| 95 | 115 … | //hidden until you focus the textarea |
| 96 | - {style: {display: 'none'}}, | |
| 116 … | + {style: {display: opts.shrink === false ? '' : 'none'}}, | |
| 97 | 117 … | file_input(function (file) { |
| 98 | 118 … | files.push(file) |
| 99 | 119 … | filesById[file.link] = file |
| 100 | 120 … | |
| @@ -125,4 +145,6 @@ | ||
| 125 | 145 … | return composer |
| 126 | 146 … | |
| 127 | 147 … | } |
| 128 | 148 … | |
| 149 … | + | |
| 150 … | + | |
| modules/private.js | ||
|---|---|---|
| @@ -33,17 +33,21 @@ | ||
| 33 | 33 … | |
| 34 | 34 … | |
| 35 | 35 … | var id = require('../keys').id |
| 36 | 36 … | var compose = message_compose( |
| 37 | - {type: 'post', recps: [], private: true}, | |
| 38 | - function (msg) { | |
| 39 | - msg.recps = [id].concat(msg.mentions).filter(function (e) { | |
| 40 | - return ref.isFeed('string' === typeof e ? e : e.link) | |
| 41 | - }) | |
| 42 | - if(!msg.recps.length) | |
| 43 | - throw new Error('cannot make private message without recipients - just mention the user in an at reply in the message you send') | |
| 44 | - return msg | |
| 45 | - }) | |
| 37 … | + {type: 'post', recps: [], private: true}, | |
| 38 … | + { | |
| 39 … | + prepublish: function (msg) { | |
| 40 … | + msg.recps = [id].concat(msg.mentions).filter(function (e) { | |
| 41 … | + return ref.isFeed('string' === typeof e ? e : e.link) | |
| 42 … | + }) | |
| 43 … | + if(!msg.recps.length) | |
| 44 … | + throw new Error('cannot make private message without recipients - just mention the user in an at reply in the message you send') | |
| 45 … | + return msg | |
| 46 … | + }, | |
| 47 … | + placeholder: 'Write a private message' | |
| 48 … | + } | |
| 49 … | + ) | |
| 46 | 50 … | |
| 47 | 51 … | var content = h('div.column.scroller__content') |
| 48 | 52 … | var div = h('div.column.scroller', |
| 49 | 53 … | {style: {'overflow':'auto'}}, |
| @@ -78,4 +82,6 @@ | ||
| 78 | 82 … | return avatar_image_link('string' == typeof id ? id : id.link, 'thumbnail') |
| 79 | 83 … | })) |
| 80 | 84 … | } |
| 81 | 85 … | |
| 86 … | + | |
| 87 … | + | |
| modules/public.js | ||
|---|---|---|
| @@ -15,9 +15,9 @@ | ||
| 15 | 15 … | var content = h('div.column.scroller__content') |
| 16 | 16 … | var div = h('div.column.scroller', |
| 17 | 17 … | {style: {'overflow':'auto'}}, |
| 18 | 18 … | h('div.scroller__wrapper', |
| 19 | - message_compose({type: 'post'}), //header | |
| 19 … | + message_compose({type: 'post'}, {placeholder: 'Write a public message'}), | |
| 20 | 20 … | content |
| 21 | 21 … | ) |
| 22 | 22 … | ) |
| 23 | 23 … | |
| modules/thread.js | ||
|---|---|---|
| @@ -49,9 +49,9 @@ | ||
| 49 | 49 … | }) |
| 50 | 50 … | |
| 51 | 51 … | } |
| 52 | 52 … | |
| 53 | -exports.screen_view = function (id, sbot) { | |
| 53 … | +exports.screen_view = function (id) { | |
| 54 | 54 … | if(ref.isMsg(id)) { |
| 55 | 55 … | var meta = { |
| 56 | 56 … | type: 'post', |
| 57 | 57 … | root: id, |
| @@ -62,9 +62,9 @@ | ||
| 62 | 62 … | var div = h('div.column.scroller', |
| 63 | 63 … | {style: {'overflow-y': 'auto'}}, |
| 64 | 64 … | h('div.scroller__wrapper', |
| 65 | 65 … | content, |
| 66 | - message_compose(meta) | |
| 66 … | + message_compose(meta, {shrink: false, placeholder: 'Write a reply'}) | |
| 67 | 67 … | ) |
| 68 | 68 … | ) |
| 69 | 69 … | |
| 70 | 70 … | pull( |
Built with git-ssb-web