port to bitty 7.0.0

This commit is contained in:
2025-12-14 08:16:04 +03:00
parent 791911b416
commit d82f25471d
4 changed files with 45 additions and 54 deletions

View File

@@ -80,8 +80,8 @@ Repo: https://github.com/emcconville/wand
## Bitty ## Bitty
Affected files: [`data/static/js/vnd/bitty-6.0.0-rc3.min.js`](./data/static/js/vnd/bitty-6.0.0-rc3.min.js) Affected files: [`data/static/js/vnd/bitty-7.0.0.js`](./data/static/js/vnd/bitty-7.0.0.js)
URL: https://bitty.alanwsmith.com/ URL: https://bitty-js.com/
License: CC0 1.0 License: CC0 1.0
Author: alan w smith https://www.alanwsmith.com/ Author: alan w smith https://www.alanwsmith.com/
Repo: https://github.com/alanwsmith/bitty Repo: https://github.com/alanwsmith/bitty

View File

@@ -7,12 +7,12 @@ const delay = ms => {return new Promise(resolve => setTimeout(resolve, ms))}
export default class { export default class {
async showBookmarkMenu(ev, el) { async showBookmarkMenu(ev, el) {
if ((el.sender.dataset.bookmarkId === el.ds('bookmarkId')) && el.childElementCount === 0) { if ((ev.sender.dataset.bookmarkId === el.prop('bookmarkId')) && el.childElementCount === 0) {
const searchParams = new URLSearchParams({ const searchParams = new URLSearchParams({
'id': el.sender.dataset.conceptId, 'id': ev.sender.dataset.conceptId,
'require_reload': el.dataset.requireReload, 'require_reload': el.dataset.requireReload,
}); });
const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${el.sender.dataset.bookmarkType}?${searchParams}`; const bookmarkMenuHref = `${bookmarkMenuHrefTemplate}/${ev.sender.dataset.bookmarkType}?${searchParams}`;
const res = await this.api.getHTML(bookmarkMenuHref); const res = await this.api.getHTML(bookmarkMenuHref);
if (res.error) { if (res.error) {
return; return;
@@ -50,9 +50,9 @@ export default class {
} }
selectBookmarkCollection(ev, el) { selectBookmarkCollection(ev, el) {
const clicked = el.sender; const clicked = ev.sender;
if (el.sender === el) { if (ev.sender === el) {
if (clicked.classList.contains('selected')) { if (clicked.classList.contains('selected')) {
clicked.classList.remove('selected'); clicked.classList.remove('selected');
} else { } else {
@@ -64,7 +64,7 @@ export default class {
} }
async saveBookmarks(ev, el) { async saveBookmarks(ev, el) {
const bookmarkHref = el.ds('bookmarkEndpoint'); const bookmarkHref = el.prop('bookmarkEndpoint');
const collection = el.querySelector('.bookmark-dropdown-item.selected'); const collection = el.querySelector('.bookmark-dropdown-item.selected');
let data = {}; let data = {};
if (collection) { if (collection) {
@@ -73,7 +73,7 @@ export default class {
data['memo'] = el.querySelector('.bookmark-memo-input').value; data['memo'] = el.querySelector('.bookmark-memo-input').value;
} else { } else {
data['operation'] = 'remove'; data['operation'] = 'remove';
data['collection_id'] = el.ds('originallyContainedIn'); data['collection_id'] = el.prop('originallyContainedIn');
} }
const options = { const options = {
@@ -83,7 +83,7 @@ export default class {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
} }
const requireReload = el.dsInt('requireReload') !== 0; const requireReload = el.propToInt('requireReload') !== 0;
el.remove(); el.remove();
await fetch(bookmarkHref, options); await fetch(bookmarkHref, options);
if (requireReload) { if (requireReload) {
@@ -104,10 +104,10 @@ export default class {
toggleAccordion(ev, el) { toggleAccordion(ev, el) {
const accordion = el; const accordion = el;
const header = accordion.querySelector('.accordion-header'); const header = accordion.querySelector('.accordion-header');
if (!header.contains(el.sender)){ if (!header.contains(ev.sender)){
return; return;
} }
const btn = el.sender; const btn = ev.sender;
const content = el.querySelector('.accordion-content'); const content = el.querySelector('.accordion-content');
// these are all meant to be in sync // these are all meant to be in sync
accordion.classList.toggle('hidden'); accordion.classList.toggle('hidden');
@@ -117,15 +117,15 @@ export default class {
toggleTab(ev, el) { toggleTab(ev, el) {
const tabButtonsContainer = el.querySelector('.tab-buttons'); const tabButtonsContainer = el.querySelector('.tab-buttons');
if (!el.contains(el.sender)) { if (!el.contains(ev.sender)) {
return; return;
} }
if (el.sender.classList.contains('active')) { if (ev.sender.classList.contains('active')) {
return; return;
} }
const targetId = el.senderDs('targetId'); const targetId = ev.sender.prop('targetId');
const contents = el.querySelectorAll('.tab-content'); const contents = el.querySelectorAll('.tab-content');
for (let content of contents) { for (let content of contents) {
if (content.id === targetId) { if (content.id === targetId) {
@@ -145,7 +145,7 @@ export default class {
#previousMarkup = null; #previousMarkup = null;
async babycodePreview(ev, el) { async babycodePreview(ev, el) {
if (el.sender.classList.contains('active')) { if (ev.sender.classList.contains('active')) {
return; return;
} }
@@ -200,9 +200,9 @@ export default class {
} }
insertBabycodeTag(ev, el) { insertBabycodeTag(ev, el) {
const tagStart = el.senderDs('tag'); const tagStart = ev.sender.prop('tag');
const breakLine = 'breakLine' in el.sender.dataset; const breakLine = 'breakLine' in ev.sender.dataset;
const prefill = 'prefill' in el.sender.dataset ? el.sender.dataset.prefill : ''; const prefill = 'prefill' in ev.sender.dataset ? ev.sender.dataset.prefill : '';
const hasAttr = tagStart[tagStart.length - 1] === '='; const hasAttr = tagStart[tagStart.length - 1] === '=';
let tagEnd = tagStart; let tagEnd = tagStart;
@@ -250,13 +250,13 @@ export default class {
} }
addQuote(ev, el) { addQuote(ev, el) {
el.value += el.sender.value; el.value += ev.sender.value;
el.scrollIntoView(); el.scrollIntoView();
el.focus(); el.focus();
} }
convertTimestamps(ev, el) { convertTimestamps(ev, el) {
const timestamp = el.dsInt('utc'); const timestamp = el.propToInt('utc');
if (!isNaN(timestamp)) { if (!isNaN(timestamp)) {
const date = new Date(timestamp * 1000); const date = new Date(timestamp * 1000);
el.textContent = date.toLocaleString(); el.textContent = date.toLocaleString();
@@ -273,7 +273,7 @@ export default class {
this.#currentUsername = userInfo.value.user.username; this.#currentUsername = userInfo.value.user.username;
} }
if (el.ds('username') === this.#currentUsername) { if (el.prop('username') === this.#currentUsername) {
el.classList.add('me'); el.classList.add('me');
} }
} }
@@ -316,18 +316,18 @@ export class BadgeEditorForm {
} }
deleteBadge(ev, el) { deleteBadge(ev, el) {
if (!el.contains(el.sender)) { if (!el.contains(ev.sender)) {
return; return;
} }
el.remove(); el.remove();
this.api.localTrigger('updateBadgeCount'); this.api.localTrigger('updateBadgeCount');
} }
updateBadgeCount(_ev, el) { updateBadgeCount(ev, el) {
const badgeCount = el.parentNode.parentNode.querySelectorAll('.settings-badge-container').length; const badgeCount = el.parentNode.parentNode.querySelectorAll('.settings-badge-container').length;
if (el.dsInt('disableIfMax') === 1) { if (el.propToInt('disableIfMax') === 1) {
el.disabled = badgeCount === 10; el.disabled = badgeCount === 10;
} else if (el.dsInt('count') === 1) { } else if (el.propToInt('count') === 1) {
el.textContent = `${badgeCount}/10`; el.textContent = `${badgeCount}/10`;
} }
} }
@@ -364,13 +364,13 @@ export class BadgeEditorBadge {
if (ev.type !== 'change') { if (ev.type !== 'change') {
return; return;
} }
// TODO: el.sender doesn't have a bittyParentBittyId // TODO: ev.sender doesn't have a bittyParent
const selectBittyParent = el.sender.closest('bitty-7-0'); const selectBittyParent = ev.sender.closest('bitty-7-0');
if (el.bittyParentBittyId !== selectBittyParent.dataset.bittyid) { if (el.bittyParent !== selectBittyParent) {
return; return;
} }
if (ev.val === 'custom') { if (ev.value === 'custom') {
if (this.#badgeCustomImageData) { if (this.#badgeCustomImageData) {
el.src = this.#badgeCustomImageData; el.src = this.#badgeCustomImageData;
} else { } else {
@@ -378,7 +378,7 @@ export class BadgeEditorBadge {
} }
return; return;
} }
const option = el.sender.selectedOptions[0]; const option = ev.sender.selectedOptions[0];
el.src = option.dataset.filePath; el.src = option.dataset.filePath;
} }
@@ -386,13 +386,13 @@ export class BadgeEditorBadge {
if (ev.type !== 'change') { if (ev.type !== 'change') {
return; return;
} }
if (el.bittyParentBittyId !== el.sender.bittyParentBittyId) { if (el.bittyParent !== ev.sender.bittyParent) {
return; return;
} }
const file = ev.target.files[0]; const file = ev.target.files[0];
if (file.size >= 1000 * 500) { if (file.size >= 1000 * 500) {
this.api.trigger('badgeErrorSize'); this.api.localTrigger('badgeErrorSize');
this.#badgeCustomImageData = null; this.#badgeCustomImageData = null;
el.removeAttribute('src'); el.removeAttribute('src');
return; return;
@@ -403,14 +403,14 @@ export class BadgeEditorBadge {
reader.onload = async e => { reader.onload = async e => {
const dimsValid = await validateBase64Img(e.target.result); const dimsValid = await validateBase64Img(e.target.result);
if (!dimsValid) { if (!dimsValid) {
this.api.trigger('badgeErrorDim'); this.api.localTrigger('badgeErrorDim');
this.#badgeCustomImageData = null; this.#badgeCustomImageData = null;
el.removeAttribute('src'); el.removeAttribute('src');
return; return;
} }
this.#badgeCustomImageData = e.target.result; this.#badgeCustomImageData = e.target.result;
el.src = this.#badgeCustomImageData; el.src = this.#badgeCustomImageData;
this.api.trigger('badgeHideErrors'); this.api.localTrigger('badgeHideErrors');
} }
reader.readAsDataURL(file); reader.readAsDataURL(file);
@@ -420,13 +420,13 @@ export class BadgeEditorBadge {
if (ev.type !== 'change') { if (ev.type !== 'change') {
return; return;
} }
// TODO: el.sender doesn't have a bittyParentBittyId // TODO: ev.sender doesn't have a bittyParent
const selectBittyParent = el.sender.closest('bitty-7-0'); const selectBittyParent = ev.sender.closest('bitty-7-0');
if (el.bittyParentBittyId !== selectBittyParent.dataset.bittyid) { if (el.bittyParent !== selectBittyParent) {
return; return;
} }
const filePicker = el.querySelector('input[type=file]'); const filePicker = el.querySelector('input[type=file]');
if (ev.val === 'custom') { if (ev.value === 'custom') {
el.classList.remove('hidden'); el.classList.remove('hidden');
if (filePicker.dataset.validity) { if (filePicker.dataset.validity) {
filePicker.setCustomValidity(filePicker.dataset.validity); filePicker.setCustomValidity(filePicker.dataset.validity);
@@ -440,37 +440,28 @@ export class BadgeEditorBadge {
} }
openBadgeFilePicker(ev, el) { openBadgeFilePicker(ev, el) {
// TODO: el.sender doesn't have a bittyParentBittyId // TODO: ev.sender doesn't have a bittyParent
if (el.sender.parentNode !== el.parentNode) { if (ev.sender.parentNode !== el.parentNode) {
return; return;
} }
el.click(); el.click();
} }
badgeErrorSize(_ev, el) { badgeErrorSize(ev, el) {
if (el.sender !== el.bittyParent) {
return;
}
const validity = "Image can't be over 500KB." const validity = "Image can't be over 500KB."
el.dataset.validity = validity; el.dataset.validity = validity;
el.setCustomValidity(validity); el.setCustomValidity(validity);
el.reportValidity(); el.reportValidity();
} }
badgeErrorDim(_ev, el) { badgeErrorDim(ev, el) {
if (el.sender !== el.bittyParent) {
return;
}
const validity = "Image must be exactly 88x31 pixels." const validity = "Image must be exactly 88x31 pixels."
el.dataset.validity = validity; el.dataset.validity = validity;
el.setCustomValidity(validity); el.setCustomValidity(validity);
el.reportValidity(); el.reportValidity();
} }
badgeHideErrors(_ev, el) { badgeHideErrors(ev, el) {
if (el.sender !== el.bittyParent) {
return;
}
delete el.dataset.validity; delete el.dataset.validity;
el.setCustomValidity(''); el.setCustomValidity('');
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long