Many changes. See further for more details.

- Notification API
- New Modal API
- Vault JSON import and export
- Improved Page Cache
- Adding Context Menu API
- Adding Vault Deletion
- Fixing Sync Issues
- Implementing Share Target API
- Implementing Share To API

src/components/modals/InputModal.tsx

@@ -1,40 +1,87 @@
 import { h, Component } from 'preact';
 import "./modal.scss"
-import { Modal } from './Modal';
+import Modal from './Modal';
 
-
-export class InputModal extends Component<{ title: string, fieldname: string, type: "text" | "password", onResult: (result) => void }, {}> {
-   input: HTMLInputElement;
-   rand: string;
-   constructor(props) {
-      super(props);
-      this.rand = Math.random().toString();
+export class InputModal extends Modal<string> {
+   constructor(protected title: string, private fieldname: string, private type: "text" | "password") {
+      super();
    }
 
-   componentWillUnmount() {
-      if (this.input)
-         this.input.value = "";
+   private static IMD = class extends Component<{ modal: InputModal }, {}> {
+      rand: string;
+      input: HTMLInputElement;
+
+      constructor(props) {
+         super(props);
+         this.rand = Math.random().toString();
+      }
+
+      componentWillUnmount() {
+         if (this.input)
+            this.input.value = "";
+      }
+
+      render() {
+         return <Modal.BaseModal modal={this.props.modal}>
+            <fieldset style="border:none;">
+               <label for={this.rand}>{this.props.modal.fieldname}</label>
+               <input style="min-width: 85%" autofocus ref={elm => {
+                  this.input = elm
+                  if (this.input)
+                     setTimeout(() => this.input.focus(), 0)
+               }} type={this.props.modal.type} id={this.rand} placeholder={this.props.modal.fieldname} onKeyDown={evt => {
+                  if (evt.keyCode === 13) {
+                     this.props.modal.result(this.input.value)
+                  }
+               }} />
+               <div style="text-align: right;">
+                  <button class="primary" style="display: inline-block;" onClick={() => {
+                     this.props.modal.result(this.input.value);
+                  }}>Enter</button>
+               </div>
+            </fieldset>
+         </Modal.BaseModal>
+      }
    }
 
-   render() {
-      return <Modal title={this.props.title} onClose={() => this.props.onResult(null)}>
-         <fieldset style="border:none;">
-            <label for={this.rand}>{this.props.fieldname}</label>
-            <input style="min-width: 85%" autofocus ref={elm => {
-               this.input = elm
-               if (this.input)
-                  setTimeout(() => this.input.focus(), 0)
-            }} type={this.props.type} id={this.rand} placeholder={this.props.fieldname} onKeyDown={evt => {
-               if (evt.keyCode === 13) {
-                  this.props.onResult(this.input.value)
-               }
-            }} />
-            <div style="text-align: right;">
-               <button class="primary" style="display: inline-block;" onClick={() => {
-                  this.props.onResult(this.input.value);
-               }}>Enter</button>
-            </div>
-         </fieldset>
-      </Modal>
+   getComponent() {
+      return <InputModal.IMD modal={this} />
    }
-}
+}
+
+
+// export class InputModal extends Component<{ title: string, fieldname: string, type: "text" | "password", onResult: (result) => void }, {}> {
+//    input: HTMLInputElement;
+//    rand: string;
+//    constructor(props) {
+//       super(props);
+//       this.rand = Math.random().toString();
+//    }
+
+//    componentWillUnmount() {
+//       if (this.input)
+//          this.input.value = "";
+//    }
+
+//    render() {
+//       return <Modal title={this.props.title} onClose={() => this.props.onResult(null)}>
+//          <fieldset style="border:none;">
+//             <label for={this.rand}>{this.props.fieldname}</label>
+//             <input style="min-width: 85%" autofocus ref={elm => {
+//                this.input = elm
+//                if (this.input)
+//                   setTimeout(() => this.input.focus(), 0)
+//             }} type={this.props.type} id={this.rand} placeholder={this.props.fieldname} onKeyDown={evt => {
+//                if (evt.keyCode === 13) {
+//                   this.props.onResult(this.input.value)
+//                }
+//             }} />
+//             <div style="text-align: right;">
+//                <button class="primary" style="display: inline-block;" onClick={() => {
+//                   this.props.onResult(this.input.value);
+//                }}>Enter</button>
+//             </div>
+//          </fieldset>
+//       </Modal>
+//    }
+// }

src/components/modals/LoadingModal.tsx

@@ -1,9 +1,17 @@
 import { h, Component } from 'preact';
 import "./modal.scss"
-import { Modal } from './Modal';
+import Modal from './Modal';
 
-export default function LoadingModal() {
-   return <Modal title="Loading" noClose>
-      <div class="spinner primary" style="height: 80px; width: 80px; margin: 3rem auto;"></div>
-   </Modal>
+
+export default class LoadingModal extends Modal<undefined> {
+   title = "";
+   constructor() {
+      super();
+   }
+
+   getComponent() {
+      return <Modal.BaseModal modal={this}>
+         <div class="spinner primary" style="height: 80px; width: 80px; margin: 3rem auto;"></div>
+      </Modal.BaseModal>
+   }
 }

src/components/modals/Modal.tsx

@@ -1,31 +1,144 @@
-import { h, Component } from 'preact';
-import "./modal.scss"
-
-
-export class Modal extends Component<{ title: string, onClose?: () => void, noClose?: boolean }, {}> {
-   constructor(props) {
-      super(props);
-   }
-
-   render() {
-      return <div class="modal_container" onClick={(evt) => {
-         let path = evt.composedPath();
-         if (!path.find(e => {
-            let res = false;
-            let s = (e as Element);
-            if (s) {
-               if (s.classList) {
-                  res = s.classList.contains("card")
-               }
-            }
-            return res;
-         }))
-            if (this.props.onClose) this.props.onClose();
-      }}>
-         <div class="card" >
-            <h3 class="section">{this.props.title}</h3>
-            {this.props.children}
-         </div>
-      </div>
-   }
+import Observable from "../../helper/observable";
+import { h, Component } from "preact";
+
+export default abstract class Modal<T> {
+   // Static
+   private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>(false);
+   public static modalObservable = Modal.modalObservableServer.getPublicApi();
+
+
+   protected abstract title: string;
+
+   // Private
+   private onResult: (result: T | null) => void;
+
+   // Protected
+   protected result(value: T | null) {
+      if (this.onResult)
+         this.onResult(value);
+   }
+
+   //Public
+   /**
+    * This function shows the modal
+    * Do not cell when using getResult()
+    */
+   public async show() {
+      Modal.modalObservableServer.send({ modal: this, close: false });
+   }
+
+   /**
+    * Shows the modal and waits for result.
+    * 
+    * Call close when successful
+    */
+   public async getResult() {
+      this.show();
+      return new Promise<T | null>((yes) => this.onResult = yes);
+   }
+
+   public close() {
+      Modal.modalObservableServer.send({ modal: this, close: true });
+   }
+
+   public abstract getComponent(): JSX.Element;
+
+   public static BaseModal = class BaseModal<T> extends Component<{ modal: Modal<T> }, {}> {
+      render() {
+         return <div class="modal_container" onClick={(evt) => {
+            let path = evt.composedPath();
+            if (!path.find(e => {
+               let res = false;
+               let s = (e as Element);
+               if (s) {
+                  if (s.classList) {
+                     res = s.classList.contains("card")
+                  }
+               }
+               return res;
+            })) {
+               this.props.modal.result(null)
+            }
+         }} onKeyDown={evt => {
+            if (evt.keyCode === 27) {
+               this.props.modal.result(null)
+            }
+         }}>
+            <div class="card" >
+               <h3 class="section">{this.props.modal.title}</h3>
+               {this.props.children}
+            </div>
+         </div>
+      }
+   }
+
+}
+
+
+// export default abstract class Modal<T, S> extends Component<{}, S> {
+
+
+//    // Abstract
+//    protected abstract renderChilds(): JSX.Element;
+//    protected abstract title: string;
+
+
+
+//    render() {
+//       return <div class="modal_container" onClick={(evt) => {
+//          let path = evt.composedPath();
+//          if (!path.find(e => {
+//             let res = false;
+//             let s = (e as Element);
+//             if (s) {
+//                if (s.classList) {
+//                   res = s.classList.contains("card")
+//                }
+//             }
+//             return res;
+//          })) {
+//             this.result(null)
+//          }
+//       }} onKeyDown={evt => {
+//          if (evt.keyCode === 27) {
+//             this.result(null)
+//          }
+//       }}>
+//          <div class="card" >
+//             <h3 class="section">{this.title}</h3>
+//             {this.renderChilds()}
+//          </div>
+//       </div>
+//    }
+// }
+
+export class ModalComponent extends Component<{}, { modal: Modal<any> | undefined, component: JSX.Element | undefined }>{
+   constructor(props) {
+      super(props);
+      this.onModal = this.onModal.bind(this);
+   }
+
+   onModal([{ modal, close }]: { modal: Modal<any>, close: boolean }[]) {
+      if (!close && this.state.modal !== modal) {
+         this.setState({ modal: modal, component: modal.getComponent() })
+      }
+      else {
+         if (this.state.modal === modal) // Only close if the same
+            this.setState({ modal: undefined, component: undefined })
+      }
+   }
+
+   componentWillMount() {
+      Modal.modalObservable.subscribe(this.onModal, true);
+   }
+
+   componentWillUnmount() {
+      Modal.modalObservable.unsubscribe(this.onModal);
+   }
+
+   render() {
+      return <div>
+         {this.state.component}
+      </div>
+   }
 }

src/components/modals/YesNoModal.tsx

@@ -1,39 +1,48 @@
 import { h, Component } from 'preact';
 import "./modal.scss"
-import { Modal } from './Modal';
+import Modal from './Modal';
 
 
-export class YesNoModal extends Component<{ title: string, onResult: (result: boolean | undefined) => void }, {}> {
-   constructor(props) {
-      super(props);
-      this.onKeyDown = this.onKeyDown.bind(this);
+export class YesNoModal extends Modal<boolean> {
+   constructor(protected title: string) {
+      super();
    }
 
-   componentWillMount() {
-      window.addEventListener("keydown", this.onKeyDown);
+   private static IMD = class extends Component<{ modal: YesNoModal }, {}> {
+      constructor(props) {
+         super(props);
+         this.onKeyDown = this.onKeyDown.bind(this);
+      }
+      componentWillMount() {
+         window.addEventListener("keydown", this.onKeyDown);
+      }
+
+      componentWillUnmount() {
+         window.removeEventListener("keydown", this.onKeyDown);
+      }
+
+      onKeyDown(evt: KeyboardEvent) {
+         if (evt.keyCode === 74 || evt.keyCode === 89) this.props.modal.result(true)
+         else if (evt.keyCode === 78) this.props.modal.result(false)
+      }
+
+      render() {
+         return <Modal.BaseModal modal={this.props.modal}>
+            <fieldset style="border:none;">
+               <div style="text-align: right;">
+                  <button class="primary" style="display: inline-block;" onClick={() => {
+                     this.props.modal.result(false);
+                  }}>No</button>
+                  <button class="primary" style="display: inline-block;" onClick={() => {
+                     this.props.modal.result(true);
+                  }}>Yes</button>
+               </div>
+            </fieldset>
+         </Modal.BaseModal>
+      }
    }
 
-   componentWillUnmount() {
-      window.removeEventListener("keydown", this.onKeyDown);
-   }
-
-   onKeyDown(evt: KeyboardEvent) {
-      if (evt.keyCode === 74 || evt.keyCode === 89) this.props.onResult(true)
-      else if (evt.keyCode === 78) this.props.onResult(false)
-   }
-
-   render() {
-      return <Modal title={this.props.title} onClose={() => this.props.onResult(undefined)}>
-         <fieldset style="border:none;">
-            <div style="text-align: right;">
-               <button class="primary" style="display: inline-block;" onClick={() => {
-                  this.props.onResult(false);
-               }}>No</button>
-               <button class="primary" style="display: inline-block;" onClick={() => {
-                  this.props.onResult(true);
-               }}>Yes</button>
-            </div>
-         </fieldset>
-      </Modal>
+   getComponent() {
+      return <YesNoModal.IMD modal={this} />
    }
 }

src/components/modals/context.scss

@@ -0,0 +1,6 @@
+.context_menu {
+    button {
+        margin: 0;
+        display: block;
+    }
+}

src/components/modals/context.tsx

@@ -0,0 +1,8 @@
+import { h } from "preact";
+import "./context.scss";
+
+export default function ContextMenu({ children, event }: { children: JSX.Element | JSX.Element[], event: MouseEvent }) {
+    return <div style={{ position: "fixed", left: event.pageX, top: event.pageY, zIndex: 10 }} class="context_menu">
+        {children}
+    </div>
+}