Merge pull request #8 from RTa-scp/feat/add_debounce

Feat/add debounce

package.json

@@ -13,6 +13,8 @@
 		"esbuild": "^0.14.39",
 		"eslint": "^8.16.0",
 		"sass": "^1.52.1",
+		"throttle-typescript": "^1.1.0",
+		"ts-debounce": "^4.0.0",
 		"typescript": "^4.6.4",
 		"vite": "^2.9.9",
 		"yaml": "^2.1.0"

src/css/wikidot.css

@@ -2,16 +2,21 @@
     clear: both;
 }
 
-table.wiki-content-table, table.wj-table {
+table.wiki-content-table,
+table.wj-table {
     border-collapse: collapse;
     border-spacing: 0;
     margin: .5em auto;
 }
-table.wiki-content-table td, table.wj-table td {
+
+table.wiki-content-table td,
+table.wj-table td {
     border: 1px solid #666666;
     padding: .3em .7em;
 }
-table.wiki-content-table th, table.wj-table th {
+
+table.wiki-content-table th,
+table.wj-table th {
     border: 1px solid #666666;
     padding: .3em .7em;
     background-color: #eeeeee;
@@ -20,12 +25,15 @@ table.wiki-content-table th, table.wj-table th {
 .wj-align-center {
     text-align: center;
 }
+
 .wj-align-left {
     text-align: left;
 }
+
 .wj-align-right {
     text-align: right;
 }
+
 .wj-align-justify {
     text-align: justify;
 }
@@ -41,7 +49,7 @@ table.wiki-content-table th, table.wj-table th {
 
 #toc .title {
     font-weight: bold;
-    margin: .2em 0  ;
+    margin: .2em 0;
     padding: 0 2em;
     text-align: center;
 }
@@ -53,16 +61,19 @@ table.wiki-content-table th, table.wj-table th {
 #toc-list {
     margin: .5em 0;
 }
+
 #toc.floatright {
     float: right;
     margin: 1em;
 }
+
 #toc.floatleft {
     float: left;
     margin: 1em;
 }
 
-.code, code {
+.code,
+code {
     border: 1px dashed #999999;
     background-color: #333333;
     font-family: "Andale Mono", "Courier New", Courier, monospace;
@@ -72,13 +83,20 @@ table.wiki-content-table th, table.wj-table th {
 }
 
 
-.footnote .f-heading, .equation .e-heading, .reference .r-heading {
+.footnote .f-heading,
+.equation .e-heading,
+.reference .r-heading {
     font-weight: bold;
 }
-.footnote .f-content, .reference .r-content {
+
+.footnote .f-content,
+.reference .r-content {
     margin: .5em 0;
 }
-.footnote .f-footer, .equation .e-footer, .reference .r-footer {
+
+.footnote .f-footer,
+.equation .e-footer,
+.reference .r-footer {
     font-size: 90%;
 }
 
@@ -88,11 +106,18 @@ table.wiki-content-table th, table.wj-table th {
     /*border-top: 1px solid #CCC;*/
     height: 1%;
 }
+
 .footnotes-footer .title {
     margin: .5em 0;
     font-size: 130%;
     font-weight: bold;
 }
+
 a.footnoteref {
     display: inline-block;
 }
+
+a#account-topbutton:active + div#account-options,
+a#account-topbutton:focus + div#account-options {
+    display: block !important;
+}

src/index.html

@@ -44,15 +44,15 @@ <h2><span></span></h2>
                 </span>
                 <img class="wj-user-info-avatar small" src="/files--static/media/default-avatar.png" alt="Default">
               </a>Default</span>
-
             | <a id="my-account" href="javascript:;">My accounts</a> <a id="account-topbutton" href="javascript:;">▼</a>
-            <div id="account-options">
+            <div id="account-options" style="display: none;">
               <ul>
-                <li><a href="javascript:;">account</a></li>
-                <li><a href="javascript:;">Private Messages</a></li>
-                <li><a href="javascript:;">my contacts</a></li>
-                <li><a href="javascript:;">notifications</a></li>
-                <li><a href="javascript:;">logout</a></li>
+                <li><a href="https://www.wikidot.com/account/activity">Activity</a></li>
+                <li><a href="https://www.wikidot.com/account/messages">Messages</a></li>
+                <li><a href="https://www.wikidot.com/account/sites">Sites</a></li>
+                <li><a href="https://www.wikidot.com/account/settings">Settings</a></li>
+                <li><a href="https://www.wikidot.com/account/upgrade">Upgrade</a></li>
+                <li><a href="javascript:;">Sign out</a></li>
               </ul>
             </div>
           </div>

src/main.ts

@@ -2,6 +2,8 @@ import css from './css/wikidot.css';
 import init from './css/init.css';
 import collapsible from './css/collapsible.css';
 import YAML from 'yaml'
+import { debounce } from "ts-debounce";
+import { throttle } from 'throttle-typescript';
 import ftmlWorker from './ftml.web.worker.js?bundled-worker&dataurl';
 
 let ftml = new Worker(ftmlWorker, {
@@ -76,19 +78,19 @@ const editsideField: HTMLInputElement = <HTMLInputElement>document.getElementByI
 const editsaveButton: HTMLInputElement = <HTMLInputElement>document.getElementById('actionarea-save')!;
 const langSelect: HTMLInputElement = <HTMLInputElement>document.getElementById('lang-select')!;
 
-editpageField.addEventListener('input', (event) => {
-  const { target } = event;
-  if (!(target instanceof HTMLTextAreaElement)) {
-    return;
-  }
-  const value = target.value;
-  const type = "page"
-  const FtmlStorageItem = { title: edittitleField.value, page: editpageField.value, side: editsideField.value };
-  localStorage.setItem("FtmlStorage", JSON.stringify(FtmlStorageItem));
-  ftml.postMessage({ value: value, type: type });
-});
+editpageField.addEventListener('input', debounce((event) => {
+    const { target } = event;
+    if (!(target instanceof HTMLTextAreaElement)) {
+      return;
+    }
+    const value = target.value;
+    const type = "page"
+    const FtmlStorageItem = { title: edittitleField.value, page: editpageField.value, side: editsideField.value };
+    localStorage.setItem("FtmlStorage", JSON.stringify(FtmlStorageItem));
+    ftml.postMessage({ value: value, type: type });
+}, 1000));
 
-editsideField.addEventListener('input', (event) => {
+editsideField.addEventListener('input', debounce((event) => {
   const { target } = event;
   if (!(target instanceof HTMLTextAreaElement)) {
     return;
@@ -98,7 +100,7 @@ editsideField.addEventListener('input', (event) => {
   const FtmlStorageItem = { title: edittitleField.value, page: editpageField.value, side: editsideField.value };
   localStorage.setItem("FtmlStorage", JSON.stringify(FtmlStorageItem));
   ftml.postMessage({ value: value, type: type });
-});
+}, 1000));
 
 edittitleField.addEventListener('input', (event) => {
   const { target } = event;
@@ -110,6 +112,7 @@ edittitleField.addEventListener('input', (event) => {
   const FtmlStorageItem = { title: edittitleField.value, page: editpageField.value, side: editsideField.value };
   localStorage.setItem("FtmlStorage", JSON.stringify(FtmlStorageItem));
 });
+
 langSelect.addEventListener('change', function () {
   const lang = this.value;
   loadlocales(lang);