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