implement createDialog to replace dialogs

Signed-off-by: cbh778899 <[email protected]>

components/account-page/index.js

@@ -2,8 +2,9 @@ import useUser from '../../global/useUser.js'
 import capitalizeFirstLetter from "../../tools/capitalizeFirstLetter.js";
 import getSVG from "../../tools/svgs.js";
 import showMessage from "../../tools/message.js";
+import createDialog from '../../tools/dialog.js';
 
-let account_container = null, input_details_main = null, init = false, open_status = false;
+let input_details_main = null, init = false, toggleDialog;
 let current_user = {}, isRegister = false, user_info_saved = localStorage.getItem('saved-user-login-info');
 if(user_info_saved) user_info_saved = JSON.parse(user_info_saved);
 
@@ -15,19 +16,6 @@ const {
     createInputDetailsPage();
 });
 
-function toggleDialog(force = null) {
-    if(!init) return false;
-
-    open_status = force === null ? !open_status : force;
-    if(open_status) {
-        account_container.style.display = 'block';
-    } else {
-        account_container.style.display = 'none';
-    }
-
-    return true;
-}
-
 function saveUserInfo(save_info = null) {
     if(!save_info) {
         user_info_saved && localStorage.removeItem('saved-user-login-info');
@@ -189,10 +177,13 @@ function submitDetails(evt) {
 }
 
 export default function createAccountPage() {
-    if(toggleDialog()) return;
+    if(init && toggleDialog) {
+        toggleDialog();
+        return;
+    }
 
-    account_container = document.getElementById('user-popup-container');
-    account_container.onclick = () => toggleDialog(false);
+    const [account_container, controller] = createDialog();
+    toggleDialog = controller.toggleModal;
 
     const account_main_page = document.createElement('form');
     account_main_page.className = 'account-main';
@@ -207,11 +198,12 @@ export default function createAccountPage() {
 
     account_main_page.appendChild(input_details_main);
     account_container.appendChild(account_main_page)
+    document.body.appendChild(account_container)
 
     createInputDetailsPage();
 
     init = true;
-    toggleDialog();
+    controller.showModal();
 }
 
 function createAccountInputFields({

components/chat-page/index.js

@@ -1,7 +1,11 @@
+import createDialog from "../../tools/dialog.js";
 import createChatMain from "./chatMain.js";
 import createChatHistory from "./history.js";
 import createModelSettings from "./modelSettings.js";
 
+const [settings_main, { toggleModal }] = createDialog();
+document.body.appendChild(settings_main)
+
 export default function createChatPage() {
     const chatPage = document.createElement('div');
     chatPage.id = 'chat-page';
@@ -12,16 +16,11 @@ export default function createChatPage() {
         chatPage.classList.toggle('sidebar-expanded');
     }
 
-    let model_setting_elem;
-    function openModelSetting() {
-        model_setting_elem && model_setting_elem.showModal();
-    }
-
     const dismount_components = []
 
     dismount_components.push(createChatHistory(chatPage));
-    dismount_components.push(createChatMain(chatPage, toggleExpand, openModelSetting));
-    dismount_components.push(createModelSettings(chatPage, elem=>model_setting_elem = elem));
+    dismount_components.push(createChatMain(chatPage, toggleExpand, toggleModal));
+    dismount_components.push(createModelSettings(settings_main));
 
     return () => {
         dismount_components.forEach(e=>e());

components/chat-page/modelSettings.js

@@ -1,7 +1,7 @@
 import useModelSettings from "../../global/useModelSettings.js";
 import settingSection from "./settingSection.js";
 
-let settings = {};
+let settings = {}, init = false;
 
 const { 
     componentReMount, componetDismount, 
@@ -15,37 +15,35 @@ const fields = {
     n_predict: { title: 'N-Predict', valueRange: { min: 128, max: 512 } }
 }
 
-export default function createModelSettings(main, passDialogElem) {
+export default function createModelSettings(main) {
     componentReMount();
 
-    const popup = document.createElement('dialog');
-    popup.onclick = () => popup.close();
-    main.insertAdjacentElement("beforeend", popup)
-    passDialogElem(popup)
-
-    const model_settings = document.createElement('div');
-    model_settings.className = 'model-settings';
-    model_settings.onclick = event => event.stopPropagation();
-
-    model_settings.insertAdjacentHTML('afterbegin', `
-        <div class='title'>Adjust Model Settings</div>
-        <div class='sub-title'>Settings will be saved automatically</div>
-    `)
-
-    for(const key in fields) {
-        const { title, valueRange } = fields[key];
-        const [component, setter] = settingSection(
-            title, valueRange,
-            () => { setToDefault(key) && loadSettings() },
-            value=>updateModelSettings(key, value)
-        )
-        model_settings.appendChild(component);
-        fields[key].setValue = setter;
+    if(!init) {
+        const model_settings = document.createElement('div');
+        model_settings.className = 'model-settings';
+        model_settings.onclick = event => event.stopPropagation();
+
+        model_settings.insertAdjacentHTML('afterbegin', `
+            <div class='title'>Adjust Model Settings</div>
+            <div class='sub-title'>Settings will be saved automatically</div>
+        `)
+
+        for(const key in fields) {
+            const { title, valueRange } = fields[key];
+            const [component, setter] = settingSection(
+                title, valueRange,
+                () => { setToDefault(key) && loadSettings() },
+                value=>updateModelSettings(key, value)
+            )
+            model_settings.appendChild(component);
+            fields[key].setValue = setter;
+        }
+
+        main.appendChild(model_settings);
+        loadSettings();
+        init = true;
     }
 
-    popup.appendChild(model_settings);
-
-    loadSettings();
     return componetDismount;
 }