grasp/extension/src/js/popup.js
Dima Gerasimov ddb5fe5c31 extension: update webpack/babel/eslint/flow
mostly borrowed version from promnesia for now
2022-12-23 21:34:16 +00:00

121 lines
2.9 KiB
JavaScript

/* @flow */
import {METHOD_CAPTURE_WITH_EXTRAS} from './common';
import {get_options} from './options';
// TODO template it in html too?
const BUTTON_ID = 'button_id';
const COMMENT_ID = 'comment_id';
const TAGS_ID = 'tags_id';
type State = {|
comment: string,
tag_str: string,
|};
function save_state(state: ?State) {
window.localStorage.setItem('state', JSON.stringify(state));
}
function load_state(): ?State {
const sts = window.localStorage.getItem('state') || null;
return JSON.parse(sts);
}
function getComment(): HTMLInputElement {
const comment = ((document.getElementById(COMMENT_ID): any): HTMLInputElement);
return comment;
}
function getTags(): HTMLInputElement {
const tags = ((document.getElementById(TAGS_ID): any): HTMLInputElement);
return tags;
}
function getButton(): HTMLElement {
const button = ((document.getElementById(BUTTON_ID): any): HTMLElement);
return button;
}
function getState(): State {
const comment_text = getComment().value;
const tag_str = getTags().value;
return {
'comment': comment_text,
'tag_str': tag_str,
};
}
function restoreState(state: ?State) {
if (state == null) {
// comment just relies on default
get_options(opts => {getTags().value = opts.default_tags;});
} else {
getComment().value = state.comment;
getTags().value = state.tag_str;
}
}
function submitComment () {
// TODO focus
const state = getState();
chrome.runtime.sendMessage({
'method': METHOD_CAPTURE_WITH_EXTRAS,
...state,
}, () => {
console.log("[popup] captured!");
});
window.submitted = true;
window.close();
}
// todo not sure if can define const here??
var ctrlEnterSubmit: KeyboardEventListener = (e) => {
if (e.ctrlKey && e.key === 'Enter') {
submitComment();
}
}
// https://stackoverflow.com/a/6003829/706389
function moveCaretToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
function setupPage () {
const comment = getComment();
comment.focus();
comment.addEventListener('keydown', ctrlEnterSubmit);
const tags = getTags();
tags.addEventListener('keydown', ctrlEnterSubmit);
tags.addEventListener('focus', () => moveCaretToEnd(tags)); // to put cursor to the end of tags when tabbed
getButton().addEventListener('click', submitComment);
window.submitted = false;
const state = load_state();
restoreState(state);
save_state(null); // clean
}
document.addEventListener('DOMContentLoaded', setupPage);
window.addEventListener('unload', () => {
if (!window.submitted) {
save_state(getState());
}
}, true);