* { /* RESET */
- font-size: 12pt;
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
+.modbookmark,
.modfolder {
display: block;
position: fixed;
background-color: #ACF;
word-spacing: -.5ex;
}
+.modbookmark:before,
.modfolder:before {
display: block;
content: '';
background-color: white;
z-index: -1;
}
+.modbookmark + *:after,
.modfolder + *:after {
content: ' ';
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background-color: rgba(0,0,0,.5);
}
+.modbookmark > *,
.modfolder > * { word-spacing: 0; }
+.modbookmark > h1,
.modfolder > h1 {
background-color: transparent;
text-align: left;
padding-left: .25em;
}
+.modbookmark > .tab,
.modfolder > .tab {
display: inline-block;
width: 33%;
border: 1px solid black;
border-radius: .5em .5em 0 0;
}
+.modbookmark > .tab {
+ width: 49.5%;
+}
+.modbookmark > label.tab,
.modfolder > label.tab { border-bottom: 0px; }
+.modbookmark > a.tab,
.modfolder > a.tab { background-color: #EEE; }
+.modbookmark > label:nth-of-type(2),
+.modbookmark > label:nth-of-type(3),
+.modbookmark > select,
.modfolder > label:nth-of-type(2),
.modfolder > select,
.modfolder > input {
text-align: left;
margin: 1em 0 0 1em;
}
-.modfolder > label:nth-of-type(2){
+.modbookmark > label:nth-of-type(2),
+.modbookmark > label:nth-of-type(3),
+.modfolder > label:nth-of-type(2) {
font-weight: bold;
}
+.modbookmark > select,
.modfolder > select {
width: 10em;
max-width: 95%;
}
+.modbookmark > input,
.modfolder > input {
width: 28em;
max-width: 95%;
}
+.modbookmark > button,
+.modbookmark > select,
.modfolder > button {
display: inline-block;
float: right;
}
.bookmark {
+ position: relative;
width: 16em;
display: inline-block;
margin: .5em 1em;
content: '\2699';
color: #333;
}
+.bookmark > a.bmove {
+ display: none;
+ color: transparent;
+ overflow: hidden;
+ vertical-align: top;
+ font-size: 0;
+}
+.bookmark:hover { left: -1em; padding-left: 1em; }
+.bookmark:hover > a.bmove { display: inline-block; }
+.bookmark > a.bmove:before { color: #888; font-size: medium; }
+.bookmark > a.bmove:nth-of-type(3) { position: absolute; left: 0; }
+.bookmark > a.bmove:nth-of-type(3):before { content: '\25c0'; }
+.bookmark > a.bmove:nth-of-type(4):before { content: '\25b6'; }
+.bookmark > a.link { margin-left: 0;}
.bookmark > a.link > img {
height: 1.25em;
vertical-align: text-bottom;
margin: 0 .5ex;
}
-form.newbookmark,
-form.modbookmark {
+form.newbookmark {
margin: .5em 1em;
break-inside: avoid;
}
bid="$(POST bid | checkid)"
name="$(POST name |head -n1)"
url="$(POST url |head -n1)"
- file="$(grep -lE "^${bid}" "${BDB}"/????????????.bm)"
- if [ -w "$file" -a -n "$name" -a -n "$url" ]; then
+ file="$(grep -lm1 "^${bid}" "${BDB}"/????????????.bm |head -n1)"
+ if [ -n "$name" -a -n "$url" -a "$(POST control)" = confirm -a -w "$file" ]; then
bm="$(printf '%s\t%s\t%s' "$bid" "$(HTML "$name")" "$(HTML "$url")" |sed -r 's;[\&\;];\\&;g;')"
sed -ri "s;^${bid}\t.*$;${bm};" "$file"
fi
getFavicon "$url" "$bid"
REDIRECT "${SCRIPT_NAME}#${fid}"
;;
+ movebookmark)
+ bid="$(POST bid | checkid)"
+ fid="$(POST target | checkid)"
+ sfile="$(grep -lm1 "^${bid}" "${BDB}"/????????????.bm |head -n1)"
+ tfile="${BDB}/${fid}.bm"
+
+ if [ "$(POST control)" = confirm -a -n "$bid" -a -w "$sfile" -a -w "$tfile" ]; then
+ grep -m1 "^${bid}" "$sfile" >>"$tfile" \
+ && sed -ri "0,/^${bid}/{/^${bid}/d;}" "$sfile"
+ fi
+ REDIRECT "${SCRIPT_NAME}#${fid}"
+ ;;
+ bmup)
+ fid="$(GET fid |checkid)"
+ bid="$(GET bid |checkid)"
+ file="${BDB}/${fid}.bm"
+
+ if [ -n "$bid" -a -n "$fid" ] && grep -q "^${bid}" "$file"; then
+ sed -ri ":X;\$bY;N;bX;:Y; s;(\n[^\n]+)(\n${bid}\t[^\n]+);\2\1;;" "$file"
+ fi
+ REDIRECT "${SCRIPT_NAME}#${fid}"
+ ;;
+ bmdn)
+ fid="$(GET fid |checkid)"
+ bid="$(GET bid |checkid)"
+ file="${BDB}/${fid}.bm"
+
+ if [ -n "$bid" -a -n "$fid" ] && grep -q "^${bid}" "$file"; then
+ sed -ri ":X;\$bY;N;bX;:Y; s;(\n${bid}\t[^\n]+)(\n[^\n]+);\2\1;;" "$file"
+ fi
+ REDIRECT "${SCRIPT_NAME}#${fid}"
+ ;;
esac
-list_bookmarks(){
- fid="$1"
- bmodify="$(GET bmodify |checkid)"
+bookmarkmod(){
+ bmod="$(GET bmodify |checkid)"
+ bmove="$(GET bmove |checkid)"
- tail -n+2 "${BDB}/${fid}.bm" \
- | while read bid name url; do
- if [ "${bid}" = "$bmodify" ]; then
- cat <<-EOF
+ if [ -n "$bmod" ]; then
+ file="$(grep -lm1 "^${bmod}" "${BDB}/"????????????.bm |head -n1)"
+ read bid name url <<-EOF
+ $(grep -m1 "^${bmod}" "$file")
+ EOF
+ cat <<-EOF
<form class="modbookmark" method="POST" action="${SCRIPT_NAME}?action=modbookmark">
<input type="hidden" name="bid" value="${bid}" />
+ <h1>Modify: ${name}</h1>
+ <label class="tab">Modify</label>
+ <a class="tab" href="${SCRIPT_NAME}?bmove=${bid}">Move</a>
+ <label>Name:</label>
<input type="text" name="name" value="${name}")" placeholder="Name" />
+ <label>URL:</label>
<input type="text" name="url" value="${url}")" placeholder="URL" />
- <button type="submit">Modify</button>
+ <button type="submit" name="control" value="confirm">OK</button>
+ <button type="submit" name="control" value="cancel">Cancel</button>
+ </form>
+ EOF
+ elif [ -n "$bmove" ]; then
+ file="$(grep -lm1 "^${bmove}" "${BDB}/"????????????.bm |head -n1)"
+ read bid name url <<-EOF
+ $(grep -m1 "^${bmove}" "$file")
+ EOF
+ cat <<-EOF
+ <form class="modbookmark" method="POST" action="${SCRIPT_NAME}?action=movebookmark">
+ <input type="hidden" name="bid" value="${bid}" />
+ <h1>Move: ${name}</h1>
+ <a class="tab" href="${SCRIPT_NAME}?bmodify=${bid}">Modify</a>
+ <label class="tab">Move</label>
+ <label>Move to Folder:</label>
+ <select name="target">
+ $(printf '<option value="%s">%s</option>' $(list_folders))
+ </select>
+ <button type="submit" name="control" value="confirm">OK</button>
+ <button type="submit" name="control" value="cancel">Cancel</button>
</form>
EOF
- else
- cat <<-EOF
+ fi
+}
+
+show_bookmarks(){
+ fid="$1"
+ bmodify="$(GET bmodify |checkid)"
+
+ tail -n+2 "${BDB}/${fid}.bm" \
+ | while read bid name url; do
+ cat <<-EOF
<div class="bookmark">
<a class="modify" href="${SCRIPT_NAME}?bmodify=${bid}">Modify</a>
<a class="link" href="${url}")"><img src="${BDB}/favicons/${bid}.ico"/>${name}</a>
+ <a class="bmove" href="${SCRIPT_NAME}?action=bmup&fid=${fid}&bid=${bid}">move left</a>
+ <a class="bmove" href="${SCRIPT_NAME}?action=bmdn&fid=${fid}&bid=${bid}">move right</a>
</div>
EOF
- fi
done
}
<section class="folder" id="${fid}">
<h1>${fname}</h1>
<a class="modify" href="${SCRIPT_NAME}?fmodify=${fid}">Modify</a>
- $(list_bookmarks "$fid")
+ $(show_bookmarks "$fid")
<form class="newbookmark" method="POST" action="${SCRIPT_NAME}?action=newbookmark">
<input type="hidden" name="fid" value="${fid}" />
<input type="text" name="name" value="" placeholder="Name" />
<link rel="stylesheet" type="text/css" href="bookmarks.css" />
</head><body id="collection">
$(foldermod)
+ $(bookmarkmod)
$(show_folders)
<form class="newfolder" method="POST" action="${SCRIPT_NAME}?action=newfolder">
<input type="text" name="name" value="" placeholder="New Folder" />