| modules_basic/compose.jsView |
|---|
| 1 | 1 … | 'use strict' |
| 2 | 2 … | const fs = require('fs') |
| 3 | 3 … | const h = require('../h') |
| 4 … | +const { Value, when } = require('@mmckegg/mutant') |
| 4 | 5 … | const mentions = require('ssb-mentions') |
| 5 | 6 … | |
| 6 | 7 … | exports.needs = { |
| 7 | 8 … | suggest_mentions: 'map', |
| 41 | 42 … | } |
| 42 | 43 … | } |
| 43 | 44 … | opts.prepublish = opts.prepublish || id |
| 44 | 45 … | |
| 45 | | - var actions |
| 46 … | + const isExpanded = Value(opts.shrink === false) |
| 46 | 47 … | |
| 47 | 48 … | var textArea = h('textarea', { |
| 48 | 49 … | placeholder: opts.placeholder || 'Write a message' |
| 49 | 50 … | }) |
| 50 | 51 … | |
| 51 | 52 … | var channelInput = h('input.channel', { |
| 52 | | - placeholder: '#channel', |
| 53 … | + placeholder: '#channel (optional)', |
| 53 | 54 … | value: meta.channel ? `#${meta.channel}` : '', |
| 54 | | - disabled: meta.channel ? true : false |
| 55 … | + disabled: meta.channel ? true : false, |
| 56 … | + title: meta.channel ? 'Reply is in same channel as original message' : '', |
| 55 | 57 … | }) |
| 56 | 58 … | |
| 57 | | - channelInput.addEventListener('keydown', function (e) { |
| 58 | | - console.log(e) |
| 59 | | - if (this.value.startsWith('#') && this.value.length === 1) { |
| 60 | | - this.value = '' |
| 61 | | - return |
| 62 | | - } |
| 63 | | - if (this.value.startsWith('#')) return |
| 64 | | - this.value = `#${this.value}` |
| 59 … | + channelInput.addEventListener('keyup', (e) => { |
| 60 … | + e.target.value = e.target.value |
| 61 … | + .replace(/^#*([\w@%&])/, '#$1') |
| 65 | 62 … | }) |
| 66 | 63 … | |
| 67 | 64 … | if(opts.shrink !== false) { |
| 65 … | + isExpanded.set(false) |
| 68 | 66 … | var blur |
| 67 … | + |
| 69 | 68 … | textArea.addEventListener('focus', () => { |
| 70 | 69 … | clearTimeout(blur) |
| 71 | 70 … | if(!textArea.value) { |
| 72 | | - composer.className = 'Compose -expanded' |
| 71 … | + isExpanded.set(true) |
| 73 | 72 … | } |
| 74 | 73 … | }) |
| 75 | 74 … | textArea.addEventListener('blur', () => { |
| 76 | 75 … | |
| 77 | 76 … | |
| 78 | 77 … | clearTimeout(blur) |
| 79 | 78 … | blur = setTimeout(() => { |
| 80 | 79 … | if(textArea.value) return |
| 81 | | - composer.className = 'Compose -contracted' |
| 80 … | + isExpanded.set(false) |
| 82 | 81 … | }, 300) |
| 83 | 82 … | }) |
| 84 | 83 … | channelInput.addEventListener('focus', () => { |
| 85 | 84 … | clearTimeout(blur) |
| 86 | 85 … | if (!textArea.value) { |
| 87 | | - composer.className = 'Compose -expanded' |
| 86 … | + isExpanded.set(true) |
| 88 | 87 … | } |
| 89 | 88 … | }) |
| 90 | 89 … | channelInput.addEventListener('blur', () => { |
| 91 | 90 … | clearTimeout(blur) |
| 92 | 91 … | blur = setTimeout(() => { |
| 93 | 92 … | if (textArea.value || channelInput.value) return |
| 94 | | - composer.className = 'Compose -contracted' |
| 93 … | + isExpanded.set(false) |
| 95 | 94 … | }, 300) |
| 96 | 95 … | }) |
| 97 | 96 … | } |
| 98 | 97 … | |
| 148 | 147 … | |
| 149 | 148 … | var embed = file.type.indexOf('image/') === 0 ? '!' : '' |
| 150 | 149 … | |
| 151 | 150 … | textArea.value += embed + '['+file.name+']('+file.link+')' |
| 152 | | - composer.className = 'Compose -expanded' |
| 151 … | + isExpanded.set(true) |
| 153 | 152 … | console.log('added:', file) |
| 154 | 153 … | }) |
| 155 | 154 … | var publishBtn = h('button', {'ev-click': publish}, 'Publish' ) |
| 156 | | - var actions = h('section.actions', [ |
| 157 | | - fileInput, publishBtn |
| 158 | | - ]) |
| 155 … | + var actions = h('section.actions', [ fileInput, publishBtn ]) |
| 159 | 156 … | |
| 160 | 157 … | api.build_suggest_box(textArea, api.suggest_mentions) |
| 161 | 158 … | api.build_suggest_box(channelInput, api.suggest_channel) |
| 162 | 159 … | |
| 163 | 160 … | var composer = h('Compose', { |
| 164 | | - className: opts.shrink === false ? '-expanded' : '-contracted' |
| 161 … | + classList: [ when(isExpanded, '-expanded', '-contracted') ] |
| 165 | 162 … | }, [ |
| 163 … | + channelInput, |
| 166 | 164 … | textArea, |
| 167 | | - channelInput, |
| 168 | 165 … | actions |
| 169 | 166 … | ]) |
| 170 | 167 … | |
| 171 | | - |
| 172 | 168 … | return composer |
| 173 | 169 … | } |
| 174 | 170 … | |
| 175 | 171 … | } |