feat: configure to show either of the panel toggles

README.md

@@ -165,22 +165,26 @@ import '@subugoe/tido/dist/tido'
       {
         "connector": [1],
         "panel_label": "Contents",
-        "show": true
+        "show": true,
+        "toggle": true
       },
       {
         "connector": [3],
         "panel_label": "Image",
-        "show": true
+        "show": true,
+        "toggle": true
       },
       {
         "connector": [4],
         "panel_label": "Text",
-        "show": true
+        "show": true,
+        "toggle": false
       },
       {
         "connector": [2],
         "panel_label": "Metadata",
-        "show": true
+        "show": true,
+        "toggle": true
       }
     ],
     "rtl": false,
@@ -306,7 +310,7 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
 ```html
   <script id="tido-config" type="application/json">
   {
-    "entrypoint": "https://{server}{/prefix}/{collection}/collection.json",
+    "entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
     "colors": {
       "primary": "",
       "secondary": "",
@@ -348,22 +352,26 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
       {
         "connector": [1],
         "panel_label": "Contents",
-        "show": true
+        "show": true,
+        "toggle": true
       },
       {
         "connector": [3],
         "panel_label": "Image",
-        "show": true
+        "show": true,
+        "toggle": true
       },
       {
         "connector": [4],
         "panel_label": "Text",
-        "show": true
+        "show": true,
+        "toggle": false
       },
       {
         "connector": [2],
         "panel_label": "Metadata",
-        "show": true
+        "show": true,
+        "toggle": true
       }
     ],
     "rtl": false,
@@ -479,22 +487,26 @@ As a rule of thumb, each key with a boolean value (e.g. *true* or *false*) defau
   {
     "connector": [1],
     "panel_label": "Contents",
-    "show": true
+    "show": true,
+    "toggle": true
   },
   {
     "connector": [3],
     "panel_label": "Image",
-    "show": true
+    "show": true,
+    "toggle": true
   },
   {
     "connector": [4],
     "panel_label": "Text",
-    "show": true
+    "show": true,
+    "toggle": false
   },
   {
     "connector": [2],
     "panel_label": "Metadata",
-    "show": true
+    "show": true,
+    "toggle": true
   }
 ],
 
@@ -540,6 +552,12 @@ Each object inside that constant consists of similar keys: `connector`, `pane_la
 
   toggles (`show` or rather `hide`) the appropriate panel respectively
 
+- **toggle**
+
+  whether to show the related panel toggle or not
+
+  Defaults to `true`.
+
 **Note**:
 
 ## Viewer Components

src/components/togglebar/toggleFilter.vue

@@ -2,7 +2,7 @@
   <div>
     <q-btn-dropdown
       v-if="$q.screen.width < 1100"
-      :dropdown-icon="dropicon"
+      :dropdown-icon="fasCaretDown"
       outline
       flat
       :class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
@@ -24,10 +24,9 @@
 import { fasCaretDown } from '@quasar/extras/fontawesome-v5';
 
 export default {
-  computed: {
-    dropicon() {
-      return fasCaretDown;
-    },
+  // keep icon from reactivity
+  created() {
+    this.fasCaretDown = fasCaretDown;
   },
 };
 </script>

src/components/togglebar/toggleIndex.vue

@@ -7,6 +7,7 @@
           :key="`toggle${i}`"
         >
           <q-item
+            v-if="p.toggle"
             v-close-popup
             clickable
             flat

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-      "entrypoint": "",
+      "entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "colors": {
         "primary": "",
         "secondary": "",
@@ -63,22 +63,26 @@
         {
           "connector": [1],
           "panel_label": "Contents",
-          "show": true
+          "show": true,
+          "toggle": true
         },
         {
           "connector": [3],
           "panel_label": "Image",
-          "show": true
+          "show": true,
+          "toggle": true
         },
         {
           "connector": [4],
           "panel_label": "Text",
-          "show": true
+          "show": true,
+          "toggle": false
         },
         {
           "connector": [2],
           "panel_label": "Metadata",
-          "show": true
+          "show": true,
+          "toggle": true
         }
       ],
       "rtl": false,