add char count to babycode editor
This commit is contained in:
@@ -109,10 +109,10 @@
|
||||
<button type="button" title="insert spoiler" class="minimal" data-babycode-tag="spoiler=" data-break-line data-prefill="spoiler content" data-s="insertBabycode">s</button>
|
||||
<button type="button" title="insert emoji…" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
|
||||
</span>
|
||||
<span class="flex-last js-only" data-r="enhance">stub: char count</span>
|
||||
<span class="flex-last js-only" data-r="enhance babycodeEditorCharCount">stub: char count</span>
|
||||
</span>
|
||||
<input type="hidden" name="babycode_banned_tags" id="{{id}}-banned-tags" value="{{banned_tags | unique | list | tojson | forceescape}}">
|
||||
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
|
||||
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit babycodeEditorCharCountInit" data-listeners="input" data-s="babycodeEditorCharCount" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
|
||||
{%- if banned_tags -%}
|
||||
<div>
|
||||
<span>Forbidden tags:</span>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export const b = {
|
||||
babycodePreviewEndpoint: '/api/babycode-preview/',
|
||||
init: 'babycodeEditorCharCountInit',
|
||||
}
|
||||
|
||||
export function setTab(_, sender, el) {
|
||||
@@ -79,6 +80,26 @@ export function insertBabycode(_, sender, el) {
|
||||
el.setSelectionRange(newCursor, newCursor);
|
||||
}
|
||||
el.focus();
|
||||
b.send({ sender: el }, 'babycodeEditorCharCount');
|
||||
}
|
||||
|
||||
export function babycodeEditorCharCount(evOrPayload, sender, el) {
|
||||
if (!sender) { // sent from bitty, not input
|
||||
sender = evOrPayload.sender;
|
||||
}
|
||||
|
||||
if (!sender.parentNode.contains(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxLength = sender.maxLength;
|
||||
const currentLength = sender.value.length;
|
||||
|
||||
el.innerText = `${currentLength}/${maxLength}`
|
||||
}
|
||||
|
||||
export function babycodeEditorCharCountInit(_, __, el) {
|
||||
b.send({ sender: el }, 'babycodeEditorCharCount');
|
||||
}
|
||||
|
||||
export function babycodePreviewInit(ev, sender, el) {
|
||||
|
||||
Reference in New Issue
Block a user