loading and much more fix

manifest.json

@@ -4,6 +4,11 @@
   "version": "1.0",
   "description": "GitHub interface supporter for dumb and lazy developers",
   "permissions": ["storage", "history"],
+  "icons": {
+    "16": "images/icon16.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  },
   "action": {
     "default_popup": "src/popup/popup.html",
     "default_icon": {
@@ -16,6 +21,8 @@
     {
       "matches": ["https://*.github.com/*"],
       "js": [
+        "src/utils/svg.js",
+        "src/utils/cache.js",
         "src/utils/base.js",
         "src/utils/collect.js",
 
@@ -26,6 +33,10 @@
         "src/components/remainingTokens.js",
         "src/components/widgetContainer.js",
         "src/components/createModal.js",
+        "src/components/loadMore.js",
+        "src/components/widgetContainerManager.js",
+        "src/components/settings/settingsCard.js",
+        "src/components/loading.js",
 
         "src/widgets/profile.js",
         "src/widgets/recentActivity.js",

src/app.js

@@ -1,16 +1,11 @@
 const aad_site_url = window.location.href;
 
-async function main() {
-  const _feed = document.querySelector('.application-main > div > div');
-  _feed.setAttribute('style', '');
-
-  const widgetContainer = getWidgetContainer();
-  const remainingTokens = getRemainingTokens();
-
-  _feed.aadAppendChild(remainingTokens);
-  _feed.aadAppendChild(widgetContainer);
-
+function loadWidgets() {
   chrome.storage.local.get(['containers'], (items) => {
+    // for (let i = 0; i < items.containers.length; i++) {
+    //   document.getElementById('container-' + id).innerHTML = '';
+    // }
+
     for (let i = 0; i < items.containers.length; i++) {
       const container = items.containers[i];
       const widgets = container.widgets || [];
@@ -24,6 +19,19 @@ async function main() {
       }
     }
   });
+}
+
+async function main() {
+  const _feed = document.querySelector('.application-main > div > div');
+  _feed.setAttribute('style', '');
+
+  const widgetContainer = getWidgetContainer();
+  const remainingTokens = getRemainingTokens();
+
+  _feed.aadAppendChild(remainingTokens);
+  _feed.aadAppendChild(widgetContainer);
+
+  loadWidgets();
   printContainers();
 }
 

src/components/createModal.js

@@ -1,6 +1,14 @@
 function createModal(title, config, modalFactory) {
   const body = document.querySelector('body');
 
+  if (typeof config.close === 'undefined') {
+    config.close = true;
+  }
+
+  if (typeof config.ms === 'undefined') {
+    config.ms = 300;
+  }
+
   const refs = {};
   const modalContainer = render(
     refs,
@@ -9,9 +17,14 @@ function createModal(title, config, modalFactory) {
         <div class="aad-custom-component-create-modal-divider">
             <div class="aad-custom-component-create-modal-title-container">
                 <h4>${title}</h4>
-                <div ref="close" class="aad-custom-component-create-modal-close-button">
-                    ${SVG.close}
-                </div>
+                ${
+                  config?.close
+                    ? `
+                  <div ref="close" class="aad-custom-component-create-modal-close-button">
+                    ${SVG.close('16px', '16px')}
+                  </div>`
+                    : ''
+                }
             </div>
             <div class="aad-custom-component-create-modal-inner" ref="inner"></div>
         </div>
@@ -32,10 +45,10 @@ function createModal(title, config, modalFactory) {
         $_?.remove();
       });
       modalContainer.remove();
-    }, 300);
+    }, config.ms);
   };
 
-  refs.close.addEventListener('click', closeModal);
+  refs.close?.addEventListener('click', closeModal);
 
   const modal = modalFactory({
     closeModal: closeModal,
@@ -56,7 +69,7 @@ function createModal(title, config, modalFactory) {
         justify-content: center;
         align-items: center;
         z-index: 1000;
-        animation: fadeIn 0.3s ease-in-out forwards;
+        animation: fadeIn ${config.ms}ms ease-in-out forwards;
     }
 
     .aad-custom-component-create-modal-divider {
@@ -82,7 +95,7 @@ function createModal(title, config, modalFactory) {
     }
 
     .aad-custom-component-create-modal-container-close {
-        animation: fadeOut 0.3s ease-in-out forwards;
+        animation: fadeOut ${config.ms}ms ease-in-out forwards;
     }
 
     @keyframes fadeIn {
@@ -114,7 +127,7 @@ function createModal(title, config, modalFactory) {
 
   refs.inner.appendChild(modal);
   refs.container.addEventListener('click', (e) => {
-    if (e.target === refs.container) {
+    if (e.target === refs.container && config?.close) {
       closeModal();
     }
   });

src/components/loadMore.js

@@ -0,0 +1,15 @@
+function getLoadMoreButton() {
+  const refs = {};
+  const loadMore = render(
+    refs,
+    `
+    <button ref="button" type="submit" class="ajax-pagination-btn btn color-border-default f6 mt-0 width-full" data-disable-with="Loading more…">
+      Load more…
+    </button>
+    `
+  );
+  return {
+    refs,
+    node: loadMore,
+  }
+}

src/components/loading.js

@@ -0,0 +1,63 @@
+function aad_loading(uuid) {
+  let _closeModal = null;
+  createModal('Loading', { close: false, ms: 50 }, ({ closeModal }) => {
+    const prefix = prefixer('loading', uuid, 'loading');
+    _closeModal = closeModal;
+
+    addCustomCSS(`
+    .${prefix('container')} {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 8px;
+    }
+    .${prefix('loader')} {
+      width: 70px;
+      height: 50px;
+      box-sizing: border-box;
+      background:
+        conic-gradient(from 135deg at top,#0000, #fff 1deg 90deg,#0000 91deg) right -20px bottom 8px/18px 9px,
+        linear-gradient(#fff 0 0) bottom/100% 8px,
+        #000;
+      background-repeat: no-repeat;
+      border-bottom: 8px solid #000;
+      position: relative;
+      animation: l7-0 2s infinite linear;
+    }
+    .${prefix('loader')}::before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 14px;
+      background: lightblue;
+      left: 10px;
+      animation: l7-1 2s infinite cubic-bezier(0,200,1,200);
+    }
+    @keyframes l7-0{
+      100% { background-position: left -20px bottom 8px,bottom}
+    }
+    @keyframes l7-1{
+      0%,50%   {bottom: 8px}
+      90%,100% {bottom: 8.1px}
+    }
+      `);
+
+    const _refs = {};
+    const modal = render(
+      _refs,
+      `
+      <div class="${prefix('container')}">
+        <div class="${prefix('loader')}"></div>
+      </div>
+      `
+    );
+    return modal;
+  });
+  return {
+    close: () => {
+      _closeModal();
+    },
+  };
+}

src/components/settings/settingsCard.js

@@ -0,0 +1,32 @@
+/**
+ * AAD Component Memory
+ * @returns {function} - A function that returns a component with a unique memory id
+ */
+function acm() {
+  const m = generateUUID();
+
+  return (component) => {
+    const c = generateUUID();
+    Cache.set(m + c, component);
+
+    return {
+      anchor: `<div anchor="true" anchor-data="${m + c}"></div>`,
+      node: component.node,
+      refs: component.refs,
+    };
+  };
+}
+
+function settingsCard() {
+  const m = acm();
+
+  const html = /*html*/ `
+  <div class="container">
+  
+    <h1>Settings</h1>
+    ${m(getLoadMoreButton()).anchor}
+  </div>
+  `;
+
+  const card = aadRender(html);
+}