git ssb

0+

mixmix / patch-suggest



Commit b80d488274b40b56a3d6fc8eba453a3c1fa0ac29

Browse Files

readme + improved channels

mix irving committed on 9/20/2017, 7:02:42 AM
Parent: 43f3765c702a25773717997c0eb377f228deca32

Files changed

channel/async/suggest.jschanged
emoji/async/suggest.jschanged
styles/mcss.jschanged
README.mdadded
channel/async/suggest.jsView
@@ -20,14 +20,20 @@
2020 … function suggestedChannels () {
2121 … loadSuggestions()
2222 … return function (word) {
2323 … if (!word) {
24- return suggestions().slice(0, 100)
24 …+ return suggestions()
25 …+ .sort(() => Math.random() > 0.5 ? +1 : -1) //shuffle
26 …+ .slice(0, 100)
2527 … }
2628 …
2729 … word = word.toLowerCase()
2830 … return suggestions()
2931 … .filter(item => ~item.title.toLowerCase().indexOf(word))
32 …+ .sort((a, b) => {
33 …+ // if word fragment occurs earlier in name, bump up
34 …+ return a.title.indexOf(word) < b.title.indexOf(word) ? -1 : +1
35 …+ })
3036 … }
3137 … }
3238 …
3339 … function loadSuggestions () {
emoji/async/suggest.jsView
@@ -12,13 +12,13 @@
1212 … var suggestions = null
1313 … var subscribed = null
1414 …
1515 … return nest('emoji.async.suggest', suggestedEmoji)
16-
17- function suggestedEmoji (word) {
16 …+
17 …+ function suggestedEmoji () {
1818 … return function (word) {
1919 … // when no emoji typed, list some default ones
20- if (word.length === 0) {
20 …+ if (!word) {
2121 … return api.emoji.sync.names()
2222 … .sort(() => Math.random() > 0.5 ? +1 : -1) //shuffle
2323 … .slice(0, 10)
2424 … .map(toSuggestion)
styles/mcss.jsView
@@ -2,115 +2,113 @@
22 …
33 … exports.gives = nest('styles.mcss')
44 …
55 … const suggestBox = `
6-body {
7- div.suggest-box {
8- overflow-y: auto
9- background-color: #fff
6 …+PatchSuggest {
7 …+ overflow-y: auto
8 …+ background-color: #fff
109 …
11- width: max-content
12- min-width: 20rem
13- max-width: 35rem
10 …+ width: max-content
11 …+ min-width: 20rem
12 …+ max-width: 35rem
1413 …
15- max-height: 70vh
14 …+ max-height: 70vh
1615 …
17- padding: .2rem .5rem
18- border: 1px gainsboro solid
19- margin-top: .35rem
16 …+ padding: .2rem .5rem
17 …+ border: 1px gainsboro solid
18 …+ margin-top: .35rem
2019 …
21- ul {
22- list-style-type: none
23- padding: 0
20 …+ ul {
21 …+ list-style-type: none
22 …+ padding: 0
2423 …
25- li {
26- display: flex
27- align-items: center
24 …+ li {
25 …+ display: flex
26 …+ align-items: center
2827 …
29- padding-right: .2rem
30- margin-bottom: .2rem
28 …+ padding-right: .2rem
29 …+ margin-bottom: .2rem
3130 …
32- img {
33- height: 36px
34- width: 36px
35- min-width: 36px
36- padding: .2rem
37- }
31 …+ img {
32 …+ height: 36px
33 …+ width: 36px
34 …+ min-width: 36px
35 …+ padding: .2rem
36 …+ }
3837 …
39- strong {
40- font-weight: 300
41- min-width: 7rem
42- margin-left: .5rem
43- margin-right: .5rem
38 …+ strong {
39 …+ font-weight: 300
40 …+ min-width: 7rem
41 …+ margin-left: .5rem
42 …+ margin-right: .5rem
4443 …
45- span.subtle {
46- color: #aaa
47- }
44 …+ span.subtle {
45 …+ color: #aaa
4846 … }
47 …+ }
4948 …
50- small {
51- flex-grow: 1
49 …+ small {
50 …+ flex-grow: 1
5251 …
53- margin-left: .5rem
54- padding-right: .2rem
55- font-size: 1rem
52 …+ margin-left: .5rem
53 …+ padding-right: .2rem
54 …+ font-size: 1rem
5655 …
57- display: flex
58- justify-content: flex-end
56 …+ display: flex
57 …+ justify-content: flex-end
5958 …
60- // profile only
61- div.aliases {
62- flex-grow: 1
59 …+ // profile only
60 …+ div.aliases {
61 …+ flex-grow: 1
6362 …
64- font-size: .8rem
65- color: #666
66- margin-right: .5rem
63 …+ font-size: .8rem
64 …+ color: #666
65 …+ margin-right: .5rem
6766 …
68- display: flex
69- flex-wrap: wrap
67 …+ display: flex
68 …+ flex-wrap: wrap
7069 …
71- div.alias {
72- margin-right: .4rem
73- -bold {
74- font-weight: 600
75- }
70 …+ div.alias {
71 …+ margin-right: .4rem
72 …+ -bold {
73 …+ font-weight: 600
7674 … }
7775 … }
76 …+ }
7877 …
79- // profile only
80- div.key {
81- align-self: flex-end
78 …+ // profile only
79 …+ div.key {
80 …+ align-self: flex-end
8281 …
83- margin: auto 0
82 …+ margin: auto 0
8483 …
85- font-family: monospace
86- font-size: .8rem
87- min-width: 5rem
88- }
84 …+ font-family: monospace
85 …+ font-size: .8rem
86 …+ min-width: 5rem
87 …+ }
8988 …
90- // emoji only
91- div.emoji {
92- flex-grow: 1
93- }
89 …+ // emoji only
90 …+ div.emoji {
91 …+ flex-grow: 1
92 …+ }
9493 …
95- }
9694 … }
95 …+ }
9796 …
98- li.selected {
99- color: #fff
100- background: #0caaf9
97 …+ li.selected {
98 …+ color: #fff
99 …+ background: #0caaf9
101100 …
102- img {}
103- strong {}
104- small {
105- div.aliases {
106- color: #eee
107- }
101 …+ img {}
102 …+ strong {}
103 …+ small {
104 …+ div.aliases {
105 …+ color: #eee
108106 … }
109107 … }
110108 … }
111- }
112-}
109 …+ }
110 …+}
113111 … `
114112 …
115113 … exports.create = (api) => {
116114 … return nest('styles.mcss', mcss)
README.mdView
@@ -1,0 +1,58 @@
1 …+# Patch-suggest
2 …+
3 …+A module for easy suggest-mentions of people / channels / emoji in patch-* family apps.
4 …+
5 …+Provides suggestions and styles in a format consumed by [`suggest-box`](https://github.com/pfrazee/suggest-box)
6 …+
7 …+You'll need to understand [depject](https://github.com/depject/depject) (a module for a different way of managing dependency injection), and for the example below, [depnest](https://github.com/depject/depnest) - a lazy way to write nested objects quickly.
8 …+
9 …+
10 …+## Example
11 …+
12 …+
13 …+```js
14 …+const nest = require('depnest')
15 …+const { h } = require('mutant')
16 …+const suggestBox = require('suggest-box')
17 …+
18 …+exports.gives = nest('app.page.somePage')
19 …+
20 …+exports.needs = nest({
21 …+ 'about.async.suggest': 'first',
22 …+ 'channel.async.suggest': 'first',
23 …+ 'emoji.async.suggest': 'first', // NOTE emoji suggestion is synchronous
24 …+})
25 …+
26 …+exports.create = (api) => {
27 …+ return nest('app.page.somePage', page)
28 …+
29 …+ function page (location) {
30 …+
31 …+ var textArea = h('textarea')
32 …+
33 …+ var getProfileSuggestions = api.about.async.suggest()
34 …+ var getChannelSuggestions = api.channel.async.suggest()
35 …+ var getEmojiSuggestions = api.emoji.async.suggest()
36 …+
37 …+ suggestBox(
38 …+ textArea,
39 …+ (inputText, cb) => {
40 …+ const char = inputText[0]
41 …+ const wordFragment = inputText.slice(1)
42 …+
43 …+ if (char === '@') cb(null, getProfileSuggestions(wordFragment))
44 …+ if (char === '#') cb(null, getChannelSuggestions(wordFragment))
45 …+ if (char === ':') cb(null, getEmojiSuggestions(wordFragment))
46 …+ },
47 …+ {cls: 'PatchSuggest'}
48 …+ )
49 …+
50 …+ //...
51 …+ }
52 …+}
53 …+```
54 …+
55 …+## Styling
56 …+
57 …+To use the styles provided by patch-suggest (recommended), supply the options argument to suggest-box `{cls: 'PatchSuggest}` (see example above)
58 …+

Built with git-ssb-web