Commit 3a95cc47 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Issue #3371767: Update Drupal.displace when vertical toolbar changes

parent f6d2e8fc

dist/css/theme/variables.css

+2 −0
Original line number Diff line number Diff line
@@ -94,6 +94,8 @@ 
  --gin-switch: #26a769;

  --gin-shadow-button: #00000033;

  --gin-color-button-text: #fff;

  --gin-offset-x: var(--gin-toolbar-x-offset);

  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky));

}



@media (min-width: 61em) {

dist/js/toolbar.js

+8 −2
Original line number Diff line number Diff line
@@ -19,11 +19,15 @@ 
        toolbarTrigger.classList.add("is-active")) : (document.body.setAttribute("data-toolbar-menu", ""), 

        toolbarTrigger.classList.remove("is-active")), document.addEventListener("keydown", (e => {

          !0 === e.altKey && "KeyT" === e.code && this.toggleToolbar();

        }));

        })), this.initDisplace();

      })), once("ginToolbarToggle", ".toolbar-menu__trigger", context).forEach((el => el.addEventListener("click", (e => {

        e.preventDefault(), this.toggleToolbar();

      }))));

    },

    initDisplace: () => {

      const toolbar = document.querySelector("#gin-toolbar-bar .toolbar-menu-administration"), toolbarVariant = drupalSettings.gin.toolbar_variant;

      toolbar && ("vertical" === toolbarVariant ? toolbar.setAttribute("data-offset-left", "") : toolbar.setAttribute("data-offset-top", ""));

    },

    toggleToolbar: () => {

      const toolbarTrigger = document.querySelector(".toolbar-menu__trigger");

      toolbarTrigger.classList.toggle("is-active");
@@ -37,7 +41,9 @@ 
      const event = new CustomEvent("toolbar-toggle", {

        detail: "true" === active

      });

      document.dispatchEvent(event);

      document.dispatchEvent(event), ontransitionend = () => {

        Drupal.displace(!0);

      };

    }

  };

})(Drupal, drupalSettings, once);
 
 No newline at end of file

gin.libraries.yml

+1 −0
Original line number Diff line number Diff line
@@ -46,6 +46,7 @@ gin_toolbar: 
    - gin/settings_tray_edit

    - core/drupalSettings

    - core/once

    - core/drupal.displace



gin_horizontal_toolbar:

  css:

js/toolbar.js

+21 −0
Original line number Diff line number Diff line
@@ -53,6 +53,8 @@ 
            this.toggleToolbar();

          }

        });



        this.initDisplace();

      });



      // Toolbar toggle
@@ -62,6 +64,19 @@ 
      }));

    },



    initDisplace: () => {

      const toolbar = document.querySelector('#gin-toolbar-bar .toolbar-menu-administration');

      const toolbarVariant = drupalSettings.gin.toolbar_variant;



      if (toolbar) {

        if (toolbarVariant === 'vertical') {

          toolbar.setAttribute('data-offset-left', '');

        } else {

          toolbar.setAttribute('data-offset-top', '');

        }

      }

    },



    toggleToolbar: () => {

      const toolbarTrigger = document.querySelector('.toolbar-menu__trigger');
@@ -75,6 +90,7 @@ 
      }

      else {

        document.body.setAttribute('data-toolbar-menu', '');



        active = 'false';

        const elementToRemove = document.querySelector('.gin-toolbar-inline-styles');

        if (elementToRemove) {
@@ -88,6 +104,11 @@ 
      // Dispatch event.

      const event = new CustomEvent('toolbar-toggle', { detail: active === 'true'})

      document.dispatchEvent(event);



      // Displace.

      ontransitionend = () => {

        Drupal.displace(true);

      };

    },



  };

styles/theme/variables.scss

+4 −0
Original line number Diff line number Diff line
@@ -146,6 +146,10 @@ 
  // Buttons

  --gin-shadow-button: #00000033;

  --gin-color-button-text: #fff;



  // Drupal

  --gin-offset-x: var(--gin-toolbar-x-offset);

  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky));

}



// Density spacings