UI - Allow editors in full screen mode

ui/main.scss

@@ -175,10 +175,14 @@ hr {
 }
 
 .editForgroundBig {
-    position: absolute;
-    right: 24px;
-    width: 90%;
-    height: 80%;
+    z-index: 1200;
+    position: fixed;
+    background-color: white;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: auto;
 }
 
 .dropdown-menu {

ui/modules/connections/connections.html

@@ -43,7 +43,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#connectionsEdit">
         </div>
         <div class="col-md-8 resizable_flex_column">
             <h6>CRUD Connection</h6>
-            <crud-toolbar label="Connection Id" id="crudConnection" style="flex-grow: 1;" extraeditclass="editForgroundBig">
+            <crud-toolbar label="Connection Id" id="crudConnection" style="flex-grow: 1;">
                 <div class="input-group input-group-sm mb-1">
                     <label class="input-group-text">Template</label>
                     <div class="btn-group dropend">

ui/modules/things/features.html

@@ -34,7 +34,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseFeatures">
             </ul>
             <div class="tab-content" style="flex-grow: 1;" id="tabContentFeatures">
                 <div class="tab-pane container active no-margin" id="tabCrudFeature">
-                    <crud-toolbar id="crudFeature" label="Feature ID" extraeditclass="editForgroundBig">
+                    <crud-toolbar id="crudFeature" label="Feature ID">
                         <div class="input-group input-group-sm mb-1">
                             <label class="input-group-text">Definition</label>
                             <input type="text" class="form-control" id="inputFeatureDefinition" disabled></input>

ui/modules/things/things.html

@@ -67,7 +67,7 @@
                             </div>
                     </div>
                     <div class="tab-pane fade container no-margin" style="height:100%;" id="tabModifyThing">
-                        <crud-toolbar id="crudThings" label="Thing ID" extraeditclass="editForgroundBig">
+                        <crud-toolbar id="crudThings" label="Thing ID">
                             <div class="input-group input-group-sm mb-1">
                                 <label class="input-group-text" id="labelX">Definition</label>
                                 <div class="btn-group dropend">

ui/modules/utils/crudToolbar.html

@@ -23,6 +23,9 @@
     <button class="btn btn-outline-secondary btn-sm" hidden id="buttonCancel" data-bs-toggle="tooltip" title="Cancel">
       Cancel
     </button>
+    <button type="button" id="buttonFullscreen" hidden class="btn btn-outline-secondary btn-sm button_round_both ms-1" title="Toggle fullscreen">
+        <i class="bi bi-arrows-fullscreen"></i>
+    </button>
     <div class="invalid-feedback"></div>
   </div>
   <slot></slot>

ui/modules/utils/crudToolbar.ts

@@ -14,6 +14,15 @@
 import * as Utils from '../utils.js';
 import crudToolbarHTML from './crudToolbar.html';
 
+const CLASS_BG = 'editBackground'
+const CLASS_FG = 'editForground';
+const CLASS_FG_FULLSCREEN = 'editForgroundBig';
+
+let ICON_CLASS_FS = 'bi-arrows-fullscreen';
+let ICON_CLASS_FS_EXIT = 'bi-fullscreen-exit';
+
+const ATTR_FULLSCREEN = 'fullscreen';
+
 class CrudToolbar extends HTMLElement {
   isEditing = false;
   isEditDisabled = false;
@@ -27,38 +36,14 @@ class CrudToolbar extends HTMLElement {
     buttonUpdate: null,
     buttonDelete: null,
     buttonCancel: null,
+    buttonFullscreen: null,
     divRoot: null,
   };
 
-  static get observedAttributes() {
-    return [`extraeditclass`];
-  }
-
-  private _extraEditClass: string;
-
-  get extraeditclass() {
-    return this._extraEditClass;
-  }
-
-  set extraeditclass(val: string) {
-    if (val == null) { // check for null and undefined
-      this.removeAttribute('extraeditclass');
-    }
-    else {
-      this.setAttribute('extraeditclass', val);
-    }
-  }
-
   get idValue() {
     return this.dom.inputIdValue.value;
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === `extraeditclass`) {
-      this._extraEditClass = newValue;
-    }
-  }
-
   set idValue(newValue) {
     (this.shadowRoot.getElementById('inputIdValue') as HTMLInputElement).value = newValue;
     const buttonDelete = this.shadowRoot.getElementById('buttonDelete');
@@ -75,23 +60,32 @@ class CrudToolbar extends HTMLElement {
 
   set createDisabled(newValue) {
     this.isCreateDisabled = newValue;
-    this.setButtonState('buttonCreate', newValue);
+    this.lazyInit(this.dom.buttonCreate);
+    this.setButtonState(this.dom.buttonCreate, newValue);
   }
 
   set deleteDisabled(newValue) {
     this.isDeleteDisabled = newValue;
-    this.setButtonState('buttonDelete', newValue);
+    this.lazyInit(this.dom.buttonDelete);
+    this.setButtonState(this.dom.buttonDelete, newValue);
   }
 
   set editDisabled(newValue) {
     this.isEditDisabled = newValue;
     if (!this.isEditing) {
-      this.setButtonState('buttonEdit', newValue);
+      this.lazyInit(this.dom.buttonEdit);
+      this.setButtonState(this.dom.buttonEdit, newValue);
     }
   }
 
-  setButtonState(buttonId, isDisabled) {
-    const button = this.shadowRoot.getElementById(buttonId);
+  lazyInit(element: HTMLElement) {
+    if (!element) {
+      Utils.getAllElementsById(this.dom, this.shadowRoot);
+    }
+  }
+
+  setButtonState(button: HTMLButtonElement, isDisabled: boolean) {
+    // const button = this.shadowRoot.getElementById(buttonId);
 
     if (isDisabled) {
       button.setAttribute('hidden', '');
@@ -120,6 +114,7 @@ class CrudToolbar extends HTMLElement {
       this.dom.buttonCreate.onclick = this.eventDispatcher('onCreateClick');
       this.dom.buttonUpdate.onclick = this.eventDispatcher('onUpdateClick');
       this.dom.buttonDelete.onclick = this.eventDispatcher('onDeleteClick');
+      this.dom.buttonFullscreen.onclick = () => this.toggleFullscreen();
     });
   };
 
@@ -133,17 +128,16 @@ class CrudToolbar extends HTMLElement {
 
   toggleEdit(isCancel) {
     this.isEditing = !this.isEditing;
-    document.getElementById('modalCrudEdit').classList.toggle('editBackground');
-    this.dom.divRoot.classList.toggle('editForground');
-    if (this._extraEditClass) {
-      this.dom.divRoot.classList.toggle(this._extraEditClass);
-    }
-
-    if (this.isEditing || this.isEditDisabled) {
-      this.dom.buttonEdit.setAttribute('hidden', '');
-    } else {
-      this.dom.buttonEdit.removeAttribute('hidden');
-    }
+
+    // toggle modal mode;
+    document.getElementById('modalCrudEdit').classList.toggle(CLASS_BG);
+    document.body.classList.toggle('modal-open');
+    document.body.style.overflow = this.isEditing && this.hasAttribute(ATTR_FULLSCREEN) ? 'hidden' : '';
+    this.dom.divRoot.classList.toggle(this.hasAttribute(ATTR_FULLSCREEN) ? CLASS_FG_FULLSCREEN : CLASS_FG);
+
+    // toggle button states;
+    this.setButtonState(this.dom.buttonEdit, this.isEditing || this.isEditDisabled);
+    this.setButtonState(this.dom.buttonFullscreen, !this.isEditing);
     this.dom.buttonCancel.toggleAttribute('hidden');
 
     if (this.isEditing) {
@@ -159,8 +153,11 @@ class CrudToolbar extends HTMLElement {
     if (this.isEditing || !this.dom.inputIdValue.value) {
       this.dom.buttonDelete.setAttribute('hidden', '');
     }
+
+
     const allowIdChange = this.isEditing && (!this.dom.inputIdValue.value || this.hasAttribute('allowIdChange'));
     this.dom.inputIdValue.disabled = !allowIdChange;
+
     this.dispatchEvent(new CustomEvent('onEditToggle', {
       composed: true,
       detail: {
@@ -169,6 +166,18 @@ class CrudToolbar extends HTMLElement {
       },
     }));
   }
+
+  toggleFullscreen() {
+    this.toggleAttribute(ATTR_FULLSCREEN);
+    this.dom.buttonFullscreen.querySelector('.bi').classList.toggle(ICON_CLASS_FS);
+    this.dom.buttonFullscreen.querySelector('.bi').classList.toggle(ICON_CLASS_FS_EXIT);
+    document.body.style.overflow = this.isEditing && this.hasAttribute(ATTR_FULLSCREEN) ? 'hidden' : '';
+    if (this.dom.divRoot.classList.contains(CLASS_FG)) {
+      this.dom.divRoot.classList.replace(CLASS_FG, CLASS_FG_FULLSCREEN);
+    } else {
+      this.dom.divRoot.classList.replace(CLASS_FG_FULLSCREEN, CLASS_FG);
+    }
+  }
 }
 
 customElements.define('crud-toolbar', CrudToolbar);