:IBX-6843: Focus mode

src/bundle/Resources/encore/ibexa.js.config.js

@@ -55,6 +55,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.form.autosubmit.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.anchor.navigation'),
     path.resolve(__dirname, '../public/js/scripts/admin.context.menu'),
+    path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),

src/bundle/Resources/public/js/scripts/admin.focus.mode.js

@@ -0,0 +1,61 @@
+(function (global, doc) {
+    let activeFieldEdit = null;
+    const ENABLE_FOCUS_MODE_EVENT_NAME = 'ibexa-focus-mode:on';
+    const DISABLE_FOCUS_MODE_EVENT_NAME = 'ibexa-focus-mode:off';
+    const focusModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--enable');
+    const focusModeDisbaleBtns = doc.querySelectorAll('.ibexa-field-edit__focus-mode-control-btn--disable');
+    const changeFocusModeState = (active) => {
+        if (!activeFieldEdit) {
+            return;
+        }
+
+        const dispatchEventName = active ? ENABLE_FOCUS_MODE_EVENT_NAME : DISABLE_FOCUS_MODE_EVENT_NAME;
+        const editorSourceElement = activeFieldEdit.querySelector('.ibexa-data-source__richtext');
+        const editorInstance = editorSourceElement.ckeditorInstance;
+
+        activeFieldEdit.classList.toggle('ibexa-field-edit--focus-mode-active', active);
+        editorInstance.set('focusModeActive', active);
+
+        doc.body.dispatchEvent(
+            new CustomEvent(dispatchEventName, {
+                detail: {
+                    activeFieldEdit,
+                },
+            }),
+        );
+
+        if (!active) {
+            activeFieldEdit = null;
+        }
+    };
+    const watchDisableFocusModeByKeyboard = (event) => {
+        if (event.key === 'Escape' || event.keyCode === 27) {
+            changeFocusModeState(false);
+        }
+    };
+
+    focusModeEnableBtns.forEach((btn) => {
+        btn.addEventListener(
+            'click',
+            ({ currentTarget }) => {
+                activeFieldEdit = currentTarget.closest('.ibexa-field-edit');
+                changeFocusModeState(true);
+            },
+            false,
+        );
+    });
+    focusModeDisbaleBtns.forEach((btn) => {
+        btn.addEventListener('click', () => changeFocusModeState(false), false);
+    });
+
+    doc.body.addEventListener(
+        ENABLE_FOCUS_MODE_EVENT_NAME,
+        () => doc.body.addEventListener('keydown', watchDisableFocusModeByKeyboard),
+        false,
+    );
+    doc.body.addEventListener(
+        DISABLE_FOCUS_MODE_EVENT_NAME,
+        () => doc.body.removeEventListener('keydown', watchDisableFocusModeByKeyboard),
+        false,
+    );
+})(window, window.document);

src/bundle/Resources/public/scss/_alerts.scss

@@ -199,4 +199,14 @@
             }
         }
     }
+
+    &--complementary {
+        color: $ibexa-color-complementary-700;
+        background-color: $ibexa-color-complementary-100;
+        border-color: $ibexa-color-complementary;
+
+        .ibexa-icon {
+            fill: $ibexa-color-complementary-700;
+        }
+    }
 }

src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss

@@ -15,6 +15,35 @@
         color: $ibexa-color-danger;
     }
 
+    &__focus-mode {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+        background: $ibexa-color-white;
+        border-radius: $ibexa-border-radius $ibexa-border-radius 0 0;
+    }
+
+    &__focus-mode-notice-container {
+        display: none;
+    }
+
+    &__focus-mode-control-container {
+        display: flex;
+        align-self: flex-end;
+    }
+
+    &__focus-mode-control-btn {
+        align-self: flex-end;
+
+        &--enable {
+            display: inline-flex;
+        }
+
+        &--disable {
+            display: none;
+        }
+    }
+
     .ibexa-input-text-wrapper {
         width: auto;
     }
@@ -59,6 +88,108 @@
             }
         }
     }
+
+    &--has-focus-mode {
+        display: flex;
+        flex-wrap: wrap;
+
+        .ibexa-field-edit {
+            &__focus-mode {
+                margin: auto 0 0 0;
+                align-self: baseline;
+            }
+
+            &__label-wrapper {
+                width: 80%;
+            }
+
+            &__focus-mode {
+                width: 20%;
+            }
+
+            &__data {
+                width: 100%;
+            }
+        }
+    }
+
+    &--focus-mode-active {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1080;
+        flex-direction: column;
+        width: 100vw;
+        height: 100vh;
+        padding: calculateRem(16px);
+        background: $ibexa-color-black;
+
+        .ibexa-field-edit {
+            &__label-wrapper {
+                display: none;
+            }
+
+            &__focus-mode {
+                width: 100%;
+                height: fit-content;
+                padding: calculateRem(32px) calculateRem(32px) 0 calculateRem(32px);
+            }
+
+            &__focus-mode-notice-container {
+                display: block;
+                width: 100%;
+            }
+
+            &__focus-mode-control-container {
+                height: calculateRem(40px);
+            }
+
+            &__focus-mode-control-btn {
+                margin: 0;
+
+                &--enable {
+                    display: none;
+                }
+
+                &--disable {
+                    display: inline-flex;
+                }
+            }
+
+            &__data {
+                width: 100%;
+                overflow-y: auto;
+                align-self: stretch;
+                flex-grow: 1;
+                padding: calculateRem(8px) calculateRem(32px) calculateRem(32px) calculateRem(32px);
+                background: $ibexa-color-white;
+                border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
+
+                .ibexa-data-source {
+                    height: 100%;
+                }
+            }
+        }
+
+        .ibexa-alert {
+            margin-bottom: calculateRem(4px);
+        }
+    }
+
+    &--focus-mode-active.is-invalid {
+        .ibexa-field-edit {
+            &__data {
+                border-radius: 0;
+                padding-bottom: 0;
+            }
+        }
+
+        .ibexa-form-error {
+            padding: calculateRem(16px) calculateRem(32px);
+            background: $ibexa-color-white;
+            border-radius: 0 0 $ibexa-border-radius $ibexa-border-radius;
+        }
+    }
 }
 
 .ibexa-content-edit {