Merge branch 'add-bookstack-integration' into 'master'

Add bookstack integration

See merge request fronk/thetool!1294

Layout/default/header.php

@@ -56,6 +56,7 @@
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-autocomplete.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>datatables/datatables.min.js?<?=$git_merge_ts?>"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/notification/notify.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/bookstack/bookstackIntegration.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/libs/switchery/switchery.min.js"></script>
 
     <script type="text/javascript">

Layout/default/topbar.php

@@ -14,6 +14,13 @@
         </a>
         <!-- End mobile menu toggle-->
       </li>
+
+        <li id="bookstackLink" class="dropdown notification-list" style="display: none">
+            <a class="nav-link dropdown-toggle" href="" target="_blank">
+                <i class="fas fa-book"></i>
+                <span class="d-none d-sm-inline-block">Hilfe zu dieser Seite</span>
+            </a>
+        </li>
       
       <li class="dropdown notification-list">
         <a class="nav-link dropdown-toggle" data-toggle="adropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">

Layout/default/vueHeader.php

@@ -43,6 +43,7 @@
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/bootstrap-select.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/notification/notify.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/bookstack/bookstackIntegration.js"></script>
 
     <?php if(isset($additionalJS) && is_array($additionalJS) && count($additionalJS)): ?>
         <?php foreach($additionalJS as $js): ?>

public/assets/css/thetool.css

@@ -783,10 +783,45 @@ td.controls {
   max-width: 100% !important;
 }
 
-.chevron-icon::before {
-  content: "\f077";
+.bookstack-integration-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
 }
 
-.collapsed .chevron-icon::before {
-  content: "\f078";
-}
+.bookstack-integration-modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 80%;
+  height: 80%;
+  position: relative;
+  transition: opacity 0.3s ease;
+}
+
+.bookstack-integration-close-btn {
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  background: red;
+  border: none;
+  color: white;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.bookstack-integration-iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}

public/plugins/bookstack/bookstackIntegration.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const articleTag = (() => {
+        const path = window.location.pathname;
+        const segments = path.split('/').filter(Boolean);
+        return segments.length > 0 ? segments[0] : 'DefaultTag';
+    })();
+
+
+    const apiUrl = `https://bookstack.xinon.at/api/search?query=%5Bshowurl%3D${encodeURIComponent(articleTag)}%5D%7Btype%3Apage%7D`;
+    const linkElement = document.getElementById('bookstackLink');
+
+    try {
+        const response = await fetch(apiUrl, {
+            headers: {
+                'Authorization': 'Token XmGSDWlg3bZhHKXFchNXQ9LpXvCaBuM1:k6XNe6RUU1BIxkv5pxpZ9PSErqZbHJ4i'
+            }
+        });
+        const data = await response.json();
+
+        if (data.data && data.data.length > 0) {
+            const article = data.data[0];
+            linkElement.style.display = 'block';
+            linkElement.querySelector('a').addEventListener('click', (e) => {
+                e.preventDefault();
+                showArticleModal(article.url);
+            });
+        }
+    } catch (error) {
+        console.error('BookStack API error:', error);
+        linkElement.style.display = 'none';
+    }
+
+    function showArticleModal(url) {
+        const modal = document.createElement('div');
+        modal.className = 'bookstack-integration-modal';
+        modal.innerHTML = `
+            <div class="bookstack-integration-modal-content">
+                <button class="bookstack-integration-close-btn">×</button>
+                <iframe src="${url}?iframe=true" class="bookstack-integration-iframe"></iframe>
+            </div>
+        `;
+
+        modal.querySelector('.bookstack-integration-close-btn').addEventListener('click', () => modal.remove());
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) modal.remove();
+        });
+
+        document.body.appendChild(modal);
+    }
+});