TextboxのBooklogでダブルクリックで読了をトグルする

https://gyazo.com/d30dee26f5a4d3460f8f8a29bc291c90

読了した本は、末尾に（読了）を書き加える

（読了）がついている行は、Textbox上で赤字になる（そういうspanがつく）

現状の問題点

いちいち編集モードに入って（読了）を書き加えるのがダルい

閲覧モードでスクロールしていって、過去に読了した本を見つけたときに編集モードに入ると、もう一度スクロールして探す必要がある（スクロールが同期していないため）

書名で検索すれば簡単だが、それでもダルい

解決策

その行をダブルクリックすることでCSSと表記を切り替える

さらに、その編集結果をcgi経由で実際のファイルに反映させる

code:script.js

booklist = document.querySelectorAll("#xhr-result1 li")

booklist.forEach((elm,index)=> {

elm.dataset.index = index;

elm.addEventListener("dblclick",function(e){

txt = this.textContent

const regex = new RegExp(/(.*)?（読了）/);

s = txt.match(regex)

if(s){

this.innerHTML = s1

}else{

this.innerHTML = '<span style="color:red;">' + this.textContent + "（読了）" + '</span>'

}

txt = this.textContent;//リストの中身

backindex = this.dataset.index;//リスト要素の番号

var formData = new FormData();

formData.set("num",backindex);

formData.set("title","");

formData.set("body",txt);

console.log(backindex)

fetch("/cgi-bin/cgi-chengelist.cgi",{

body: formData,

cache: "no-store",

method: "post"

}).then(response => {

if (response.ok) {

response.text().then(function (text) {

console.log(text);})

}

else {

alert("not OK")

throw response;

}

}).catch(err => {

alert(err);

throw err;

});

})

データを受け取るCGI

code:cgi.py

#!/usr/bin/env python

# -*- coding: utf-8 -*-

import cgi

import cgitb

cgitb.enable()

import sys

import io

import re

sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

print('Content-type: text/html; charset=UTF-8\n')

form = cgi.FieldStorage()

num = int(form.getvalue('num', ''))

body = form.getvalue('body', '')

FilePath = "/Users/Tadanori/Dropbox/textbox/list/Booklog.md"

with open(FilePath, mode='r') as f:

l = f.readlines()

lines = []

linecount = 0

for item in l:

isline = re.match(r'\* (.*)',item)

if (isline):

if (linecount == num):

item = "* " + body + "\n"

linecount = linecount + 1

lines.append(item)

with open(FilePath, mode='w') as f:

f.writelines(lines)

Booklog.mdを編集するためだけのスクリプト

富豪的API

特定行の書き換え、という用途で汎用化してもいいかもしれない。

対象ファイルと、編集行の情報だけを受け取って処理する

Textbox側でどういうことをしているのかは見えないようにしておく

#Textboxの動作