port to bitty 7.0.0

data/static/js/bitties/pyrom-bitty.js

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