@humandialog/forms.svelte 1.3.12 → 1.3.13

package/components/Fab.svelte

@@ -1,9 +1,9 @@
 <script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
 $:
-  update($pageToolbarOperations, $contextToolbarOperations);
+  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -12,11 +12,17 @@ let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
-function update(...args) {
+function setupCurrentContextOperations(...args) {
   isDirectPositioningMode = false;
-  if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0)
+  if ($toolsActionsOperations && Array.isArray($toolsActionsOperations) && toolsActionsOperations.length > 0) {
+    operations = $toolsActionsOperations;
+  } else if ($toolsActionsOperations && $toolsActionsOperations.operations && $toolsActionsOperations.operations.length > 0) {
+    operations = $toolsActionsOperations.operations;
+    if ($toolsActionsOperations.opver && $toolsActionsOperations.opver == 1)
+      isDirectPositioningMode = true;
+  } else if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
-  else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
+  } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
     if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
       isDirectPositioningMode = true;
@@ -189,7 +195,7 @@ function operationVisible(operation) {
                                         dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                                         flex items-center justify-center
                                         disable-dbl-tap-zoom
-                                        cursor-pointer z-10"
+                                        cursor-pointer z-40"
                                         style={position}
                                         on:click|stopPropagation={(e) => {on_click(e, operation)}} 
                                         on:mousedown={mousedown} >

package/components/Floating_container.svelte

@@ -1,4 +1,7 @@
 <script>import { tick, afterUpdate } from "svelte";
+import { isDeviceSmallerThan } from "../utils";
+import { toolsActionsOperations } from "../stores";
+import { FaTimes } from "svelte-icons/fa";
 let x;
 let y;
 let visible = false;
@@ -6,8 +9,6 @@ let toolbar;
 let props = {};
 let around_rect;
 let root_element;
-$:
-  display = visible ? "fixed" : "hidden";
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -22,20 +23,44 @@ export async function show(around, _toolbar, _props = {}) {
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
   props.onHide = () => {
     hide();
   };
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
   await tick();
   if (!was_visible)
     root_element.addEventListener("click", on_before_container_click, true);
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
   return visible;
 }
 export function hide() {
   visible = false;
+  cssPosition = calculatePosition(x, y, around_rect, false, false);
+  $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
   root_element.removeEventListener("click", on_before_container_click, true);
 }
@@ -52,28 +77,68 @@ function on_before_window_click() {
 function on_before_container_click() {
   hide_window_indicator--;
 }
-afterUpdate(() => {
-  if (!root_element)
-    return;
-  let rect = root_element.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  const m = 15;
-  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (rect.right > container_rect.right)
-    x = container_rect.right - rect.width;
-  if (rect.bottom > container_rect.bottom)
-    y = container_rect.bottom - rect.height - around_rect.height;
-  if (rect.left < container_rect.left)
-    x = container_rect.left;
-  if (rect.top < container_rect.top)
-    y = container_rect.top;
-});
+let cssPosition = "";
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = root_element.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    if (myRect) {
+      let maxHeight = screenRect.height / 2 - margin;
+      if (myRect.height < maxHeight)
+        maxHeight = myRect.height;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      const maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = root_element.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    const m = 15;
+    let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+    if (myRect) {
+      if (myRect.right > screenRect.right)
+        x2 = screenRect.right - myRect.width;
+      if (myRect.bottom > screenRect.bottom)
+        y2 = screenRect.bottom - myRect.height - around_rect.height;
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+  }
+  console.log(result);
+  return result;
+}
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow {display} z-30"
-        style="left:{x}px; top:{y}px; width: max-content; height:max-content"
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow  z-30 fixed"
+        style={cssPosition}
         bind:this={root_element}>
     <svelte:component this={toolbar} {...props} />
 </div>

package/components/combo/combo.svelte

@@ -1,9 +1,9 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
-import { parseWidthDirective, shouldBeComapact } from "../../utils.js";
+import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
-import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
+import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
@@ -198,17 +198,25 @@ export function show(event, hide_callback) {
     show_above = true;
   } else
     y = rect.y + rect.height;
-  if (show_fullscreen) {
+  if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    const maxHeight = screenRect.height / 2 - margin;
+    const width = screenRect.width - 2 * margin;
+    x = margin;
+    y = screenRect.bottom - margin;
+    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
+  } else if (show_fullscreen) {
     dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
   } else {
     dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
-  console.log("dropdown_position", dropdown_position, rect, client_rect);
-  console.log("preferred_palette_height", preferred_palette_height);
-  console.log("bottom_space", bottom_space);
-  console.log("top_space", top_space);
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -226,11 +234,34 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 export function hide() {
+  console.log("combo hide");
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
+  $toolsActionsOperations = [];
+  dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
     textbox.innerHtml = combo_text;

package/components/contextmenu.svelte

@@ -1,8 +1,9 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore } from "../stores";
+import { contextItemsStore, toolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
+import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -16,36 +17,78 @@ let focused_index = 0;
 let menu_items = [];
 let submenus = [];
 let around_rect;
+let css_position = "";
 $:
   display = visible ? "block" : "none";
-afterUpdate(() => {
-  let rect = menu_root.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  const m = 15;
-  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (isOnScreenKeyboardVisible()) {
-    container_rect.height -= 300;
-  }
-  let xShifted = false;
-  if (rect.right > container_rect.right) {
-    x = container_rect.right - rect.width + m;
-    xShifted = true;
-  }
-  let yShifted = false;
-  if (rect.bottom > container_rect.bottom) {
-    y = container_rect.bottom - rect.height - m;
-    if (xShifted)
-      x -= around_rect.width;
-    else
-      y -= around_rect.height - m;
-    yShifted = true;
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      let maxHeight = screenRect.height / 2 - margin;
+      if (myRect.height < maxHeight)
+        maxHeight = myRect.height;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      const maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      const m = 15;
+      let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+      let xShifted = false;
+      if (myRect.right > screenRect.right) {
+        x2 = screenRect.right - myRect.width + m;
+        xShifted = true;
+      }
+      let yShifted = false;
+      if (myRect.bottom > screenRect.bottom) {
+        y2 = screenRect.bottom - myRect.height - m;
+        if (around) {
+          if (xShifted)
+            x2 -= around.width;
+          else
+            y2 -= around.height - m;
+        }
+        yShifted = true;
+      }
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; display: block`;
   }
-  if (rect.left < container_rect.left)
-    x = container_rect.left;
-  if (rect.top < container_rect.top)
-    y = container_rect.top;
-});
+  return result;
+}
 export async function show(around, _operations) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -57,6 +100,7 @@ export async function show(around, _operations) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   visible = true;
+  css_position = calculatePosition(x, y, around_rect, true, true);
   operations = [..._operations];
   focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
@@ -64,7 +108,28 @@ export async function show(around, _operations) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
   await tick();
+  css_position = calculatePosition(x, y, around_rect, true, false);
   if (is_root_menu)
     menu_root.addEventListener("click", on_before_container_click, true);
   if (menu_items.length && !isDeviceSmallerThan("sm"))
@@ -74,7 +139,9 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
+  $toolsActionsOperations = [];
   visible = false;
+  css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   menu_root.removeEventListener("click", on_before_container_click, true);
 }
@@ -210,8 +277,8 @@ function mousedown(e) {
 
 <div id="__hd_svelte_contextmenu" 
     class=" bg-white dark:bg-stone-700 text-stone-600 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-900 shadow-md 
-            z-30 fixed min-w-[{min_width_px}px] w-max" 
-    style={`left:${x}px; top:${y}px; display:${display}`}
+            z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
+    style={css_position}
     bind:this={menu_root}>
 
     {#each operations as operation, index}

package/components/document/editor.svelte

@@ -26,7 +26,7 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -46,7 +46,8 @@ import {
   FaArrowLeft,
   FaGripLines,
   FaListUl,
-  FaTable
+  FaTable,
+  FaTimes
 } from "svelte-icons/fa";
 import IcH1 from "./internal/h1.icon.svelte";
 import IcH2 from "./internal/h2.icon.svelte";
@@ -574,9 +575,31 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Palette",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                palette.hide();
+                editor?.commands.focus();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 function on_palette_hidden() {
   is_command_palette_visible = false;
+  $toolsActionsOperations = [];
 }
 function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();
@@ -664,9 +687,7 @@ function handleImagesChanges(transaction) {
 }
 let commands = [
   //{    caption: 'Styles',       separator: true },
-  { caption: "Back to edit", description: "Escape", icon: FaArrowLeft, on_choice: () => {
-    editor?.commands.focus();
-  }, is_visible: () => isDeviceSmallerThan("sm") },
+  //  {    caption: 'Back to edit', description: 'Escape',                                         icon: FaArrowLeft,                  on_choice: () => { editor?.commands.focus()}, is_visible: () => isDeviceSmallerThan("sm") },
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();

package/components/document/internal/palette.row.svelte

@@ -38,7 +38,7 @@ export function scrollToView() {
      on:mousemove
      on:mousedown
      bind:this={element}>
-    <div class="flex items-center justify-center space-x-10 px-4 py-2" >
+    <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>
         {/if}

package/components/document/internal/palette.svelte

@@ -3,7 +3,7 @@
 import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
-import { isDeviceSmallerThan } from "../../../utils.js";
+import { isDeviceSmallerThan, UI } from "../../../utils.js";
 export let commands;
 export let width_px = 400;
 export let max_height_px = 500;
@@ -265,11 +265,12 @@ function isRowActive(cmd) {
         {/if}
     </menu>
 {:else}
-    <div    id="__hd_FormattingPalette"
-            class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto" 
+    <div    class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto z-20"
+            id="__hd_FormattingPalette"
+            bind:this={paletteElement}
             hidden={!visible}
-            style={css_style}
-            bind:this={paletteElement}>
+            style={css_style} >
+        
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
                 {#if cmd.separator}
@@ -295,5 +296,6 @@ function isRowActive(cmd) {
         {/if}
 
     </div>
+    
 {/if}
 

package/desk.svelte

@@ -95,7 +95,7 @@
             lg_content_area_horizontal_dim = ""
         }
           
-        console.log('main_side_panel_visibility', main_side_panel_visibility)
+        //console.log('main_side_panel_visibility', main_side_panel_visibility)
     }
     
     let tools_visibility = "hidden"
@@ -268,6 +268,7 @@
 
     function onSelectionChanged(e)
     {
+        console.log('onSelectionChanged')
         determineFABVisibilityAsync();
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.4",
+    "@humandialog/auth.svelte": "^1.8.5",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",

package/stores.d.ts

@@ -27,6 +27,7 @@ export const contextTypesStore: import("svelte/store").Writable<{
 }>;
 export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
 export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
+export const toolsActionsOperations: import("svelte/store").Writable<never[]>;
 export const page_title: import("svelte/store").Writable<string>;
 export const nav_titles: import("svelte/store").Writable<{}>;
 export const mainContentPageReloader: import("svelte/store").Writable<number>;

package/stores.js

@@ -8,6 +8,7 @@ export const context_info_store = writable({data: '', sel: ''})
 export const contextTypesStore = writable({focused:'', data: null, sel: null})
 export const contextToolbarOperations = writable([]);
 export const pageToolbarOperations = writable([]);
+export const toolsActionsOperations = writable([]);
 export const page_title = writable('');
 export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
@@ -122,7 +123,7 @@ export function toggle_sidebar(index)
 {
     previously_visible_sidebar = get(main_sidebar_visible_store);
 
-    console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
+    //console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
 
     if(get(main_sidebar_visible_store) == index)
         main_sidebar_visible_store.set('*')
@@ -132,7 +133,7 @@ export function toggle_sidebar(index)
 
 export function auto_hide_sidebar()
 {
-    console.log('auto_hide_sidebar')
+    //console.log('auto_hide_sidebar')
     //console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
     if(window.innerWidth < SCREEN_SIZES.lg)
         hide_sidebar()