add ability to bookmark posts and threads, courtesy of bitty
This commit is contained in:
@@ -1005,7 +1005,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.colorful-table tr th {
|
||||
@@ -1183,7 +1182,6 @@ ul, ol {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
margin: 10px 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion.hidden {
|
||||
@@ -1303,3 +1301,58 @@ footer {
|
||||
.babycode-guide-list {
|
||||
border-bottom: 1px dashed;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bookmarks-dropdown {
|
||||
background-color: #c1ceb1;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 400px;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
color: black;
|
||||
background-color: rgb(177, 206, 204.5);
|
||||
}
|
||||
.bookmark-dropdown-item:hover {
|
||||
background-color: rgb(192.6, 215.8, 214.6);
|
||||
}
|
||||
.bookmark-dropdown-item::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.bookmark-dropdown-item.selected {
|
||||
background-color: #beb1ce;
|
||||
}
|
||||
.bookmark-dropdown-item.selected:hover {
|
||||
background-color: rgb(203, 192.6, 215.8);
|
||||
}
|
||||
.bookmark-dropdown-item.selected::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.bookmarks-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-items-container {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@@ -1005,7 +1005,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.colorful-table tr th {
|
||||
@@ -1183,7 +1182,6 @@ ul, ol {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
margin: 10px 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion.hidden {
|
||||
@@ -1304,6 +1302,61 @@ footer {
|
||||
border-bottom: 1px dashed;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bookmarks-dropdown {
|
||||
background-color: #9b649b;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 400px;
|
||||
padding: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-item {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
color: #e6e6e6;
|
||||
background-color: #3c283c;
|
||||
}
|
||||
.bookmark-dropdown-item:hover {
|
||||
background-color: rgb(109.2, 72.8, 109.2);
|
||||
}
|
||||
.bookmark-dropdown-item::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.bookmark-dropdown-item.selected {
|
||||
background-color: #8a5584;
|
||||
}
|
||||
.bookmark-dropdown-item.selected:hover {
|
||||
background-color: rgb(167.4843049327, 112.9156950673, 161.3067264574);
|
||||
}
|
||||
.bookmark-dropdown-item.selected::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.bookmarks-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-items-container {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#topnav {
|
||||
margin-bottom: 10px;
|
||||
border: 10px solid rgb(40, 40, 40);
|
||||
|
||||
@@ -1005,7 +1005,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 6px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.colorful-table tr th {
|
||||
@@ -1183,7 +1182,6 @@ ul, ol {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
margin: 6px 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion.hidden {
|
||||
@@ -1304,6 +1302,61 @@ footer {
|
||||
border-bottom: 1px dashed;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bookmarks-dropdown {
|
||||
background-color: #f27a5a;
|
||||
border: 1px solid black;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-width: 400px;
|
||||
padding: 6px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-item {
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
margin: 6px 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
border-radius: 16px;
|
||||
color: black;
|
||||
background-color: #f27a5a;
|
||||
}
|
||||
.bookmark-dropdown-item:hover {
|
||||
background-color: rgb(244.6, 148.6, 123);
|
||||
}
|
||||
.bookmark-dropdown-item::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.bookmark-dropdown-item.selected {
|
||||
background-color: #b54444;
|
||||
}
|
||||
.bookmark-dropdown-item.selected:hover {
|
||||
background-color: rgb(197.978313253, 103.221686747, 103.221686747);
|
||||
}
|
||||
.bookmark-dropdown-item.selected::before {
|
||||
content: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2221%22%20height%3D%2221%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22none%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
|
||||
.bookmarks-dropdown-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bookmark-dropdown-items-container {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#topnav {
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
|
||||
64
data/static/js/bitties/pyrom-bitty.js
Normal file
64
data/static/js/bitties/pyrom-bitty.js
Normal file
@@ -0,0 +1,64 @@
|
||||
const bookmarkMenuHrefTemplate = '/hyperapi/bookmarks-dropdown'
|
||||
|
||||
export default class {
|
||||
async showBookmarkMenu(ev, el) {
|
||||
if ((ev.target.dataset.bookmarkId === el.dataset.bookmarkId) && el.childElementCount === 0) {
|
||||
const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${ev.target.dataset.bookmarkType}?id=${ev.target.dataset.conceptId}&require_reload=${el.dataset.requireReload}`;
|
||||
const res = await this.api.getHTML(bookmarkMenuHref);
|
||||
if (res.error) {
|
||||
return;
|
||||
}
|
||||
const frag = res.value;
|
||||
el.appendChild(frag);
|
||||
const menu = el.childNodes[0];
|
||||
const bRect = el.getBoundingClientRect()
|
||||
if (bRect.left < window.innerWidth - bRect.right) {
|
||||
menu.style.right = 'unset';
|
||||
}
|
||||
} else if (el.childElementCount > 0) {
|
||||
el.removeChild(el.childNodes[0]);
|
||||
}
|
||||
}
|
||||
|
||||
selectBookmarkCollection(ev, el) {
|
||||
const clicked = ev.target;
|
||||
|
||||
if (clicked === el) {
|
||||
if (clicked.classList.contains('selected')) {
|
||||
clicked.classList.remove('selected');
|
||||
} else {
|
||||
clicked.classList.add('selected');
|
||||
}
|
||||
} else {
|
||||
el.classList.remove('selected');
|
||||
}
|
||||
}
|
||||
|
||||
async saveBookmarks(ev, el) {
|
||||
const bookmarkHref = el.dataset.bookmarkEndpoint;
|
||||
const collection = el.querySelector('.bookmark-dropdown-item.selected');
|
||||
let data = {};
|
||||
if (collection) {
|
||||
data['operation'] = 'move';
|
||||
data['collection_id'] = collection.dataset.collectionId;
|
||||
data['memo'] = el.querySelector('.bookmark-memo-input').value;
|
||||
} else {
|
||||
data['operation'] = 'remove';
|
||||
data['collection_id'] = el.dataset.originallyContainedIn;
|
||||
}
|
||||
|
||||
const options = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
const requireReload = parseInt(el.dataset.requireReload) !== 0;
|
||||
el.remove();
|
||||
await fetch(bookmarkHref, options);
|
||||
if (requireReload) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user