@humandialog/forms.svelte 1.5.1 → 1.6.1

package/utils.js

@@ -1,6 +1,6 @@
 import { getContext, tick } from "svelte";
-import {get} from 'svelte/store'
-import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store } from "./stores";
+import {derived, get} from 'svelte/store'
+import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store, main_sidebar_visible_store, show_sidebar, hide_sidebar, previously_visible_sidebar, auto_hide_sidebar} from "./stores";
 import {location, push, pop} from 'svelte-spa-router' 
 
 export let icons = {symbols :null}
@@ -675,36 +675,196 @@ export const UI = {
     navigator: null
 }
 
-export const NAVIGATION_PAGE_PATH = '/'
-export function isOnNavigationPage()
+export function dec2hex (dec) 
+{
+    return dec.toString(16).padStart(2, "0")
+}
+  
+
+export function randomString(len) 
+{
+    var arr = new Uint8Array((len || 16) / 2)
+    window.crypto.getRandomValues(arr)
+    return Array.from(arr, dec2hex).join('')
+}
+
+
+export const NAVIGATION_PAGE_PATH = '/nav'
+let savedAppPage = ''
+let lastNavPage = ''
+
+export function isOnNavigationPage(navKind)
 {
     const loc = get(location)
-    if(loc == NAVIGATION_PAGE_PATH)
-        return true;
+    
+    if(!navKind)
+    {
+        if(loc.startsWith(NAVIGATION_PAGE_PATH))
+            return true;
+        else
+            return false;
+    }
     else
-        return false;
+    {
+        if(loc.startsWith(`${NAVIGATION_PAGE_PATH}/${navKind}`))
+            return true;
+        else
+            return false;
+    }
+    
 }
 
-export function pushNavigationPage()
+
+export function pushNavigationPage(navKind)
 {
-    push(NAVIGATION_PAGE_PATH)
+    if(!isOnNavigationPage())
+        savedAppPage = get(location)
+
+    if(!navKind)
+    {
+        navKind = navPrevVisibleKey()
+        if(!navKind)
+            lastNavPage = `${NAVIGATION_PAGE_PATH}/`
+        else
+            lastNavPage = `${NAVIGATION_PAGE_PATH}/${navKind}`
+    }
+    else
+        lastNavPage = `${NAVIGATION_PAGE_PATH}/${navKind}`
+
+    push(lastNavPage)
 }
 
 export function popNavigationPage()
 {
     if(isOnNavigationPage())
-        pop();
+    {
+        if(savedAppPage)
+            push(savedAppPage)
+        else
+            pop()
+
+        savedAppPage = ''
+    }
 }
 
-export function dec2hex (dec) 
+export const NAV_MODE_SIDEBAR = 0
+export const NAV_MODE_FULL_PAGE = 1
+
+let navMode = isDeviceSmallerThan("sm") ? NAV_MODE_FULL_PAGE : NAV_MODE_SIDEBAR
+
+export function navGetMode()
 {
-    return dec.toString(16).padStart(2, "0")
+    return navMode;
 }
-  
 
-export function randomString(len) 
+export function navIsVisible()
 {
-    var arr = new Uint8Array((len || 16) / 2)
-    window.crypto.getRandomValues(arr)
-    return Array.from(arr, dec2hex).join('')
-}
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        return get(main_sidebar_visible_store) != '*'
+
+    case NAV_MODE_FULL_PAGE:
+        return isOnNavigationPage();
+    }
+}
+
+export function navGetKey()
+{
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        return get(main_sidebar_visible_store)
+
+    case NAV_MODE_FULL_PAGE:
+        {
+            const segments = get(location).split('/')
+            if(segments.length > 1)
+                return segments[2]
+            else
+                return ""
+        }
+        return ""
+    }
+}
+
+export function navShow(key)
+{
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        show_sidebar(key)
+        break;
+
+    case NAV_MODE_FULL_PAGE:
+        pushNavigationPage(key)
+        break;
+    }
+}
+
+export function navHide()
+{
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        hide_sidebar()
+        break;
+
+    case NAV_MODE_FULL_PAGE:
+        popNavigationPage()
+        break;
+    }
+}
+
+
+export function navToggle(key)
+{
+    if(navIsVisible())
+    {
+        if(navGetKey() == key)
+            navHide()
+        else
+            navShow(key)
+    }
+    else
+        navShow(key)
+
+}
+
+export function navPrevVisibleKey()
+{
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        if(!previously_visible_sidebar)
+            return ''
+        else if(previously_visible_sidebar == '*')
+            return ''
+        else
+            return previously_visible_sidebar
+
+    case NAV_MODE_FULL_PAGE:
+        {
+            const segs = lastNavPage.split('/')
+            if(segs.length > 1)
+                return segs[2]
+            else
+                return ''
+        }
+    }
+}
+
+export function navAutoHide()
+{
+    switch(navMode)
+    {
+    case NAV_MODE_SIDEBAR:
+        auto_hide_sidebar()
+        break;
+
+    case NAV_MODE_FULL_PAGE:
+        break;
+    }
+}
+
+

package/vertical.toolbar.svelte

@@ -1,33 +1,31 @@
 <script>
-    import {FaUsers, FaCog, FaToggleOn, FaToggleOff, FaSignInAlt, FaSignOutAlt, FaPlus} from 'svelte-icons/fa/'
+    import {FaUsers, FaCog, FaToggleOn, FaToggleOff, FaSignInAlt, FaSignOutAlt, FaPlus, FaLanguage} from 'svelte-icons/fa/'
     //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
-    import {showMenu} from './components/menu'
+    import {showMenu, SHOW_MENU_RIGHT} from './components/menu'
     import {reef} from '@humandialog/auth.svelte'
     import Modal from './modal.svelte'
     import Input from './components/inputbox.ltop.svelte'
     //import Menu from './components/contextmenu.svelte'
 
     import {dark_mode_store, 
-            toggle_sidebar, 
-            show_sidebar,
-            hide_sidebar,
             tools_visible_store,
             bottom_bar_visible_store, 
             right_sidebar_visible_store,
-            main_sidebar_visible_store,
             contextItemsStore,
             context_info_store,
             contextToolbarOperations,
             data_tick_store,
             reloadWholeApp,
             showFABAlways,
-            leftHandedFAB
+            leftHandedFAB,
+            navKey
         } from "./stores.js";     
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 	import { pop, push } from 'svelte-spa-router';
 	import { tick } from 'svelte';
-	import { isDeviceSmallerThan, popNavigationPage } from './utils';
+	import { isDeviceSmallerThan, navGetKey, navHide, navIsVisible, navShow, navToggle } from './utils';
+    import {setCurrentLanguage, getLanguages, i18n, getCurrentLanguage} from './i18n.js'
     
 
     export let appConfig = undefined;
@@ -40,7 +38,7 @@
     let tabs = new Array();
     let config = null;
     let has_selection_details = false;
-    let selection_detils_caption = 'Properties';
+    let selection_detils_caption =  i18n({en: 'Properties', es: 'Propiedades', pl: 'Właściwości'});
     
     let show_sign_in_out_icons = false;
     let is_logged_in = false;
@@ -54,8 +52,15 @@
         {
             config = appConfig.mainToolbar;
             has_selection_details = appConfig.selectionDetails;
+            
             if(has_selection_details)
-                selection_detils_caption = appConfig.selectionDetails.caption ?? 'Properties'
+            {
+                if(appConfig.selectionDetails.captionFunc)
+                    selection_detils_caption = appConfig.selectionDetails.captionFunc()
+                else if(appConfig.selectionDetails.caption)
+                    selection_detils_caption = appConfig.selectionDetails.caption
+
+            }
         }
         else
         {
@@ -93,17 +98,20 @@
                 });
 
             // there is no current visible sidebar
-            if($main_sidebar_visible_store != '*')
+            if(navIsVisible())
             {
-                if(tabs.every( (e) => e.key != $main_sidebar_visible_store))
+                const selectedNav = navGetKey()
+                if(tabs.every( (e) => e.key != selectedNav))
                 {
                     if(tabs.length)
-                        show_sidebar(tabs[0].key);
+                        navShow(tabs[0].key);
                     else
-                        hide_sidebar();
+                        navHide();
                 }
             }
         }
+
+        
        
         /*show_groups_switch_menu = $session.tenants.length > 1
 
@@ -124,17 +132,8 @@
 
     function on_navigator_tab_clicked(e, key)
     {
-        e.stopPropagation();
-       
-         if(!mobile)
-            toggle_sidebar(key);
-        else
-        {
-            if($main_sidebar_visible_store == key)
-                popNavigationPage();
-            else
-                show_sidebar(key);
-        }
+        e.stopPropagation();    
+        navToggle(key);
     }
 
     function show_options(e)
@@ -159,8 +158,14 @@
 
                 if(add)
                 {
+                    let caption = ''
+                    if(o.captionFunc)
+                        caption = o.captionFunc()
+                    else if(o.caption)
+                        caption = o.caption
+
                     options.push({
-                                    caption: o.caption,
+                                    caption: caption,
                                     icon: o.icon,
                                     action: o.action
                                 })
@@ -173,7 +178,7 @@
                 if(!is_logged_in)
                 {
                     options.push({
-                        caption: 'Sign in',
+                        caption: i18n( { en: 'Sign in', es: 'Iniciar sesión', pl: 'Zaloguj'}),
                         icon: FaSignInAlt,
                         action: (focused) => { push(sign_in_href) }
                     });
@@ -181,7 +186,7 @@
                 else
                 {
                     options.push({
-                        caption: 'Sign out',
+                        caption: i18n({en: 'Sign out', es: 'Cerrar sesión', pl: 'Wyloguj' }) ,
                         icon: FaSignOutAlt,
                         action: (focused) => { push(sign_out_href) }
                     });
@@ -193,10 +198,11 @@
 
         if(!config || config.darkMode)
         {
+            const capt = i18n({en: 'Dark mode', es: 'Modo oscuro', pl: 'Tryb ciemny'})
             if($dark_mode_store == '')
             {
                 options.push( {
-                        caption: 'Dark mode',
+                        caption: capt,
                         icon: FaToggleOff,
                         action: (focused) => { $dark_mode_store = 'dark'; }
                     });
@@ -204,17 +210,34 @@
             else
             {
                 options.push( {
-                        caption: 'Dark mode',
+                        caption: capt,
                         icon: FaToggleOn,
                         action: (focused) => { $dark_mode_store = ''; }
                     });
             }
         }
 
+        const langs = getLanguages()
+        if(langs && langs.length > 1)
+        {
+            const langMenu = langs.map( l => ({
+                caption: l.name,
+                img: l.flag,
+                action: (b) => {setCurrentLanguage(l); reloadWholeApp()},
+                disabled: getCurrentLanguage() == l
+            }))
+
+            options.push( {
+                caption: i18n({en: 'Language', es:'Idioma', pl:'Język'}),
+                menu: langMenu,
+                icon: FaLanguage
+            })
+        }
+
         if(config && config.operations)
         {
             options.push( {
-                    caption: 'Toolbar',
+                    caption: i18n({en:'Toolbar', es:'Barra de herramientas', pl:'Pasek narzędzi'}),
                     icon: $tools_visible_store ? FaToggleOn : FaToggleOff,
                     action: (focused) => { $tools_visible_store = !$tools_visible_store; }
                 });
@@ -223,13 +246,13 @@
         if(!isDeviceSmallerThan("sm"))
         {
             options.push({
-                caption: 'Floating actions',
+                caption: i18n({en: 'Floating buttons', es: 'Botones flotantes', pl: 'Pływające przyciski'}),
                 icon: $showFABAlways ? FaToggleOn : FaToggleOff,
                 action: (f) => { $showFABAlways = !$showFABAlways; }
             })
 
             options.push({
-                caption: 'Left-handed floating actions',
+                caption: i18n({en: 'Left-handed mode', es: 'Modo para zurdos', pl: 'Tryb dla leworęcznych'}),
                 icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
                 disabled: !$showFABAlways,
                 action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
@@ -245,8 +268,8 @@
                     });
         }
         
-        let pt = new DOMPoint(rect.right, rect.top)
-        showMenu(pt, options);    
+        //let anchor = new DOMPoint(rect.right, rect.top)
+        showMenu(rect, options, SHOW_MENU_RIGHT);    
     }
 
     function show_groups(e)
@@ -281,15 +304,15 @@
                 separator: true
             })
             options.push({
-                caption: 'Add group',
+                caption: i18n({en:'Add group', es: 'Añadir grupo', pl: 'Dodaj grupę' }),
                 icon: FaPlus,
                 action: (f) => launchNewGroupWizzard()
             })
         }
 
         
-        let pt = new DOMPoint(rect.right, rect.top)
-        showMenu(pt, options);    
+        //const anchor = new DOMPoint(rect.right, rect.top)
+        showMenu(rect, options, SHOW_MENU_RIGHT);    
     }
 
     function clearSelection()
@@ -373,7 +396,7 @@
 <section class="no-print flex flex-col w-full h-full" on:click={clearSelection}>
     <div class="px-0 w-12 sm:w-10">
         {#each tabs as tab}
-            {@const isSelected = $main_sidebar_visible_store == tab.key}
+            {@const isSelected = $navKey == tab.key}
             <button
                 class="h-16 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 class:bg-orange-500={isSelected}
@@ -409,13 +432,13 @@
     <!--Menu bind:this={menu}/-->
 
 <Modal  bind:open={newGroupModalVisible}
-        title='Create group'
-        okCaption='Create'
+        title={ i18n({en:'Create group', es:'Crear grupo', pl:'Utwórz grupę'})}
+        okCaption={ i18n({en:'Create', es:'Crear', pl:'Utwórz'})}
         onOkCallback={onNewGroupOK}
         onCancelCallback={onNewGroupCancel}
         icon={FaUsers}
 >
-    <Input  label='Group name' 
+    <Input  label={i18n({en:'Group name', es:'Nombre del grupo', pl:'Nazwa grupy'})} 
             placeholder='' 
             self={newGroupParams} 
             a="name"