book/html/layout/detail.jsView |
---|
1 | 1 … | const nest = require('depnest') |
2 | 2 … | const { h, when, computed, Value } = require('mutant') |
3 | 3 … | var htmlEscape = require('html-escape') |
| 4 … | +const addSuggest = require('suggest-box') |
4 | 5 … | |
5 | 6 … | exports.needs = nest({ |
6 | 7 … | 'book.obs.book': 'first', |
7 | 8 … | 'about.html.image': 'first', |
8 | 9 … | 'about.obs.name': 'first', |
9 | 10 … | 'keys.sync.id': 'first', |
| 11 … | + 'emoji.async.suggest': 'first', |
10 | 12 … | 'emoji.sync.url': 'first', |
11 | 13 … | 'message.html': { |
12 | 14 … | 'markdown': 'first' |
13 | 15 … | }, |
42 | 44 … | else |
43 | 45 … | return text |
44 | 46 … | } |
45 | 47 … | |
46 | | - function valueEdit(isEditing, value) { |
| 48 … | + function ratingEdit(isEditing, value) { |
47 | 49 … | return when(isEditing, |
48 | | - h('input', {'ev-input': e => value.set(e.target.value), value: value }), |
49 | | - h('span', { innerHTML: computed(value, simpleMarkdown) })) |
| 50 … | + h('input', {'ev-input': e => value.set(e.target.value), value: value, |
| 51 … | + placeholder: 'your rating' }), |
| 52 … | + h('span.text', { innerHTML: computed(value, simpleMarkdown) })) |
| 53 … | + } |
50 | 54 … | |
| 55 … | + function ratingTypeEdit(isEditing, value) { |
| 56 … | + let getEmojiSuggestions = api.emoji.async.suggest() |
| 57 … | + |
| 58 … | + let ratingTypeInput = h('input', {'ev-input': e => value.set(e.target.value), |
| 59 … | + value: value, placeholder: 'rating type' }) |
| 60 … | + |
| 61 … | + let suggestWrapper = h('span.ratingType', ratingTypeInput) |
| 62 … | + |
| 63 … | + addSuggest(ratingTypeInput, (inputText, cb) => { |
| 64 … | + if (inputText[0] === ':') { |
| 65 … | + cb(null, getEmojiSuggestions(inputText.slice(1))) |
| 66 … | + } |
| 67 … | + }, {cls: 'PatchSuggest'}) |
| 68 … | + |
| 69 … | + return when(isEditing, suggestWrapper, |
| 70 … | + h('span.text', { innerHTML: computed(value, simpleMarkdown) })) |
51 | 71 … | } |
52 | 72 … | |
53 | 73 … | function simpleEdit(isEditing, name, value) { |
54 | 74 … | return h('div', { classList: when(computed([value, isEditing], (v, e) => { return v || e }), |
105 | 125 … | reviews.push([ |
106 | 126 … | h('section', [api.about.html.image(user), |
107 | 127 … | when(computed([subjective.rating, isEditingSubjective], |
108 | 128 … | (v, e) => { return v || e }), |
109 | | - h('span', [api.about.obs.name(user), ' rated '])), |
110 | | - valueEdit(isOwnEditingSubj, subjective.rating), |
111 | | - valueEdit(isOwnEditingSubj, subjective.ratingType)]), |
| 129 … | + h('span.text', [api.about.obs.name(user), ' rated '])), |
| 130 … | + ratingEdit(isOwnEditingSubj, subjective.rating), |
| 131 … | + ratingTypeEdit(isOwnEditingSubj, subjective.ratingType)]), |
112 | 132 … | simpleEdit(isOwnEditingSubj, 'Shelve', subjective.shelve), |
113 | 133 … | simpleEdit(isOwnEditingSubj, 'Genre', subjective.genre), |
114 | 134 … | textEdit(isOwnEditingSubj, 'Review', subjective.review) |
115 | 135 … | ]) |