主題.mdでそのまま追記
https://gyazo.com/1dae1badfee6fad3921ca54c80951e63
各種主題ノートを統合表示する主題ノート.md上でそのままカードを追加できるようにした。
これで、Twitterのまとめからの転記がやりやすくなった。
code:script.js
function addPulsButton(filename){
idhead = document.getElementById(filename)
parentDiv = idhead.parentElement
firstDiv = parentDiv.querySelector('.themecard')
console.log(filename)
let plusdiv = document.createElement('div')
plusdiv.classList.add('cardplusbtn')
plusdiv.innerText = "+"
plusdiv.addEventListener('click',function(){
e = document.getElementById('modalOkBtn')
e.dataset.filename = filename
e.onclick = function(){
parentDiv = document.getElementById(this.dataset.filename).parentElement
console.log(this.dataset.filename)
writeCard(this.dataset.filename,parentDiv)
}
modalToggle()
})
parentDiv.insertBefore(plusdiv, firstDiv)
}
function writeCard(filenama,parentDiv){//ファイルに見出し+本文(カード)を追記する
const cardbody = md.querySelector("textarea")
const body = cardbody.value
const s = body.split("\n")
var formData = new FormData();
formData.set("num",0);
formData.set("title",s0);
formData.set("body",s.slice(1).join("\n"));
formData.set("file",filenama);
addCardFile(formData)
prependCard(body,parentDiv);
modalToggle()
cardbody.value = ""
}
function prependCard(body,parentDiv){//ページに見出し+本文(カード)を追記する
let div = document.createElement('div')
convertTxt = replacLinkBtn(marked(body))
div.innerHTML = convertTxt
div.classList.add("themecard")
firstDiv = parentDiv.querySelector('.themecard')
parentDiv.insertBefore(div, firstDiv)
}
function addCardFile(form){
fetch("/cgi-bin/cgi-writetext.cgi",{
body: form,
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;
});
}
code:cgi-writetext.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', ''))
title = form.getvalue('title', '')
body = form.getvalue('body', '')
file = form.getvalue('file', '')
def cardparser(l):
temptitle = ""
tempbody = []
cards = []
for item in l:
header = re.match(r'^## (.*)',item)
if (header):
pagetitle = item
continue
block = re.match(r'^###(.*)',item)
if (block):
if (temptitle == ""):
temptitle = item
else:
cards.append(temptitle + "".join(tempbody))
temptitle = item
tempbody = []
continue
script = re.match(r'^(<style)|(<script)',item)
if(script):
cards.append(temptitle + "".join(tempbody))
temptitle = item
tempbody = []
continue
else:
if (temptitle != ""):
tempbody.append(item)
else:
pagetitle = pagetitle + item
else:
cards.append(temptitle + "".join(tempbody))
cards.insert(0, pagetitle.rstrip('\r\n') + "\n\n")
return cards
if (file == ""):
print("Please set the file name to write to.")
exit
else:
FilePath = "/Users/Tadanori/Dropbox/textbox/list/" + file + ".md"
print(FilePath)
with open(FilePath, mode='r') as f:
l = f.readlines()
cards = cardparser(l)
if (num + 1 >= len(cards)):
cards.append("\n" + title + "\n" + body + "\n")
else:
if(title == "" and body == ""):
cards.pop(num)
else:
cardsnum + 1 = title + "\n" + body + "\n\n"
with open(FilePath, mode='w') as f:
f.writelines("".join(cards))
ref.
Element.before() - Web API | MDN
Element.prepend() - Web API | MDN
Modal (モーダル) · Bootstrap v5.0
CSSで幅や高さ等の指定に計算式が書けるcalcの使い方 ホームページ作成 All About
【JavaScriptの実践】モーダルウィンドウの作り方 | ワードプレステーマTCD
JavaScript | 要素のスタイルを取得・設定(getComputedStyle)
JavaScript ボタン要素にonclick属性を追加する - Qiita
Array.prototype.forEach() - JavaScript | MDN
【JavaScript】data属性の値を指定して要素を取得する|Into the Program
HTML:textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する : HTML | iPentec
jQuery.on()は追加式なのでイベントの重複登録に注意しよう - Qiita
EventTarget.removeEventListener() - Web API | MDN
EventTarget.addEventListener() - Web API | MDN
Array.prototype.slice() - JavaScript | MDN
Array.prototype.join() - JavaScript | MDN
【JavaScript】文字列の中の改行文字を削除する方法 | CODE MARINE
Python3 文字列末尾の改行コードを取り除く
JavaScript :: 無名関数に引数を渡す Tipsというかメモ
JavaScriptでの無名関数の利用 : JavaScript | iPentec
【JavaScript】 htmlのonclick属性でイベント引数を取得する方法