port to bitty 7.0.0
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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('');
|
||||||
}
|
}
|
||||||
|
|||||||
1
data/static/js/vnd/bitty-7.0.0-rc1.min.js
vendored
1
data/static/js/vnd/bitty-7.0.0-rc1.min.js
vendored
File diff suppressed because one or more lines are too long
1
data/static/js/vnd/bitty-7.0.0.js
Normal file
1
data/static/js/vnd/bitty-7.0.0.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user