Files: 8b00b03fbc1dd761dc8c12d57b9a66b7b68d7fd3 / modules / sheet / profiles.js
2878 bytesRaw
1 | var {h, map, computed, Value, lookup} = require('mutant') |
2 | var nest = require('depnest') |
3 | var catchLinks = require('../../lib/catch-links') |
4 | |
5 | exports.needs = nest({ |
6 | 'sheet.display': 'first', |
7 | 'keys.sync.id': 'first', |
8 | 'contact.obs.following': 'first', |
9 | 'contact.html.followToggle': 'first', |
10 | 'profile.obs.rank': 'first', |
11 | 'about.html.image': 'first', |
12 | 'about.obs.name': 'first', |
13 | 'app.navigate': 'first', |
14 | 'intl.sync.i18n': 'first' |
15 | }) |
16 | |
17 | exports.gives = nest('sheet.profiles') |
18 | |
19 | exports.create = function (api) { |
20 | const i18n = api.intl.sync.i18n |
21 | return nest('sheet.profiles', function (ids, title) { |
22 | api.sheet.display(close => { |
23 | var currentFilter = Value() |
24 | var nameLookup = lookup(ids, (id) => { |
25 | return [id, api.about.obs.name(id)] |
26 | }) |
27 | var filteredIds = computed([ids, nameLookup, currentFilter], (ids, nameLookup, filter) => { |
28 | if (filter) { |
29 | var result = [] |
30 | for (var k in nameLookup) { |
31 | if ((nameLookup[k] && nameLookup[k].toLowerCase().includes(filter.toLowerCase())) || k === filter) { |
32 | result.push(k) |
33 | } |
34 | } |
35 | return result |
36 | } else { |
37 | return ids |
38 | } |
39 | }) |
40 | var content = h('div', { |
41 | style: { padding: '20px' } |
42 | }, [ |
43 | h('h2', { |
44 | style: { 'font-weight': 'normal' } |
45 | }, [ |
46 | title, |
47 | h('input', { |
48 | type: 'search', |
49 | placeholder: 'filter names', |
50 | 'ev-input': function (ev) { |
51 | currentFilter.set(ev.target.value) |
52 | }, |
53 | hooks: [FocusHook()], |
54 | style: { |
55 | 'float': 'right', |
56 | 'font-size': '100%' |
57 | } |
58 | }) |
59 | ]), |
60 | renderContactBlock(filteredIds) |
61 | ]) |
62 | |
63 | catchLinks(content, (href, external, anchor) => { |
64 | if (!external) { |
65 | api.app.navigate(href, anchor) |
66 | close() |
67 | } |
68 | }) |
69 | |
70 | return { |
71 | content, |
72 | footer: [ |
73 | h('button -close', { |
74 | 'ev-click': close |
75 | }, i18n('Close')) |
76 | ] |
77 | } |
78 | }) |
79 | }) |
80 | |
81 | function renderContactBlock (profiles) { |
82 | profiles = api.profile.obs.rank(profiles) |
83 | return [ |
84 | h('div', { |
85 | classList: 'ProfileList' |
86 | }, [ |
87 | map(profiles, (id) => { |
88 | return h('a.profile', { |
89 | href: id, |
90 | title: id |
91 | }, [ |
92 | h('div.avatar', [api.about.html.image(id)]), |
93 | h('div.main', [ |
94 | h('div.name', [ api.about.obs.name(id) ]) |
95 | ]), |
96 | h('div.buttons', [ |
97 | api.contact.html.followToggle(id, {block: false}) |
98 | ]) |
99 | ]) |
100 | }, { idle: true, maxTime: 2 }) |
101 | ]) |
102 | ] |
103 | } |
104 | } |
105 | |
106 | function FocusHook () { |
107 | return function (element) { |
108 | setTimeout(() => { |
109 | element.focus() |
110 | element.select() |
111 | }, 5) |
112 | } |
113 | } |
114 |
Built with git-ssb-web