move dropdown if outside of viewport (#228)

Co-authored-by: Timo Huber <[email protected]>

resources/admin.js

@@ -1,16 +1,18 @@
-import { initRoleSearchForm } from "./admin/role-search.js"
-import { initFilterForm } from "./admin/filter.js"
-import { initRichTextEditor } from "./admin/richTextEditor.js"
-import { initCopyClipboard } from "./admin/copyClipboard.js";
+import { initButtonList } from "./admin/buttonList.js"
 import { initCalendar } from './admin/calendar'
+import { initCopyClipboard } from "./admin/copyClipboard.js";
+import { initFilterForm } from "./admin/filter.js"
 import { initPrint } from "./admin/print"
+import { initRichTextEditor } from "./admin/richTextEditor.js"
+import { initRoleSearchForm } from "./admin/role-search.js"
 
-initRoleSearchForm();
-initFilterForm();
-initRichTextEditor();
-initCopyClipboard();
+initButtonList()
 initCalendar();
+initCopyClipboard();
+initFilterForm();
 initPrint();
+initRichTextEditor();
+initRoleSearchForm();
 
 window['pool-tool'] = {
     initRichTextEditor

resources/admin/buttonList.js

@@ -0,0 +1,19 @@
+
+const dropdownWidth = 200;
+
+export const initButtonList = () => {
+    const els = document.querySelectorAll(".button-list");
+
+    els.forEach(el => {
+        const dropdown = el.querySelector(".dropdown")
+        if (!dropdown) {
+            return
+        }
+
+        var rect = el.getBoundingClientRect();
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        if (rect.right + dropdownWidth >= windowWidth) {
+            el.classList.add("left")
+        }
+    })
+}

resources/index.scss

@@ -293,3 +293,10 @@ table.simple {
 .cursor-default {
     cursor: default;
 }
+
+// Button dropdown
+.button-list.left .dropdown {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%);
+}