From a14194d3ba820b1107352526a86f72af15963d8f Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 12 Jun 2023 13:06:14 +0200 Subject: [PATCH] replaced css aspect-ratio by custom js to size the boussole --- .../ouatminimal_theme/css/ouatminimal.css | 5 ++-- .../ouatminimal_theme/css/ouatminimal.css.map | 2 +- .../custom/ouatminimal_theme/js/boussole.js | 29 ++++++++++++++----- .../ouatminimal_theme/scss/ouatminimal.scss | 7 +++-- 4 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css index bfd2b5b..bcf4b6d 100644 --- a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css +++ b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css @@ -299,11 +299,10 @@ div[data-drupal-selector=edit-actions] > * { background-size: contain; background-repeat: no-repeat; background-position: center; - aspect-ratio: 1/1; - /* width:100%; */ - max-height: calc(100vh - 150px); position: relative; padding: 8%; + box-sizing: border-box; + /* width:100%; */ } #boussole-layout .boussole-wrapper .boussole .entity { position: absolute; diff --git a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css.map b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css.map index 9b69163..c0ba1fa 100644 --- a/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css.map +++ b/src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/ouatminimal.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAKI;EACE;;;AAKN;EACE;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACE;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;AACA;EACE;;;AAGF;AACA;EAIE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;AACE;IACA;IACA;IAEA;AACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;AACE;IACA;IACA;AACA;IACA;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE;IACA;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEE;IACE;;EAEF;AAAA;AAAA;IAGE;IACA;IACA;;;AAKJ;AAEE;EACE;EACA;EACA;EAAU;EACV;AAeA;AAAA;AAAA;;AAbA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAQJ;AACE;EACA;;AAEF;EACE;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKJ;EACE;;AAIA;EACE;;AAKF;EACE;;AACA;EACE;EACA;EACA;;AAMJ;EACE;;;AAQN;EACE;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKR;EACE;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAEF;EACE;;AAWN;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AACA;AAAA;EACE;;AAMN;EACE;;AAeJ;EACE;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAAY;EACZ;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGF;EACE;;;AAYV;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAMF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE","file":"ouatminimal.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/ouatminimal.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAKI;EACE;;;AAKN;EACE;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACE;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;AACA;EACE;;;AAGF;AACA;EAIE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;AACE;IACA;IACA;IAEA;AACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;AACE;IACA;IACA;AACA;IACA;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE;IACA;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEE;IACE;;EAEF;AAAA;AAAA;IAGE;IACA;IACA;;;AAKJ;AAEE;EACE;EACA;EACA;EAAU;EACV;AAeA;AAAA;AAAA;;AAbA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAQJ;AACE;EACA;;AAEF;EACE;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKJ;EACE;;AAIA;EACE;;AAKF;EACE;;AACA;EACE;EACA;EACA;;AAMJ;EACE;;;AAQN;EACE;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKR;EACE;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAEF;EACE;;AAWN;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AACA;AAAA;EACE;;AAMN;EACE;;AAeJ;EACE;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAGA;EACE;EACA;EAAY;EACZ;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGF;EACE;;;AAYV;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAMF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE","file":"ouatminimal.css"} \ No newline at end of file diff --git a/src/web/themes/custom/ouatminimal_theme/js/boussole.js b/src/web/themes/custom/ouatminimal_theme/js/boussole.js index 14c51e1..ab2c991 100644 --- a/src/web/themes/custom/ouatminimal_theme/js/boussole.js +++ b/src/web/themes/custom/ouatminimal_theme/js/boussole.js @@ -4,15 +4,15 @@ Drupal.behaviors.boussole = { attach: function (context, settings) { console.log("Drupal Boussole behavior", context); - let $boussole_wrapper = document.querySelector('#boussole-layout'); + let $boussole_layout = document.querySelector('#boussole-layout'); once('boussole-class-behaviour', '#boussole-layout', context).forEach(element => { // let tabs = // div.field-group-tabs-wrapper // input.horizontal-tabs-active-tab - _boussole = new Boussole($boussole_wrapper); + _boussole = new Boussole($boussole_layout); }); - let $form = $boussole_wrapper.querySelector(':scope>.form-item'); + let $form = $boussole_layout.querySelector(':scope>.form-item'); console.log($form); let $tabledrag = $form.querySelector('table.field-multiple-table'); console.log($tabledrag); @@ -74,18 +74,33 @@ }; class Boussole { - constructor($boussole_wrapper) { - this.$boussole_wrapper = $boussole_wrapper; + constructor($boussole_layout) { + this.$boussole_layout = $boussole_layout; + this.$boussole_wrapper = document.querySelector('#boussole-layout>.boussole-wrapper'); this.$boussole = document.querySelector('#boussole-layout>.boussole-wrapper>.boussole'); this.entities = {} + this.initBoussoleSize(); this.initTabChecking(); - this.enableDragArea() + this.enableDragArea(); + } + + initBoussoleSize(){ + this.setBoussoleSize(); + // todo window resize event + } + + setBoussoleSize(){ + let w = this.$boussole_wrapper.clientWidth; + let h = this.$boussole_wrapper.clientHeight; + console.log(`w=${w}, h=${h}`); + this.$boussole.style.width = `${w}px`; + this.$boussole.style.height = `${w}px`; } initTabChecking(){ // debugger - this.$field_group_tab = this.$boussole_wrapper.closest('details.field-group-tab'); + this.$field_group_tab = this.$boussole_layout.closest('details.field-group-tab'); // watch for tabs opening and closing // hidden input do not triggers events // so we have to use mutationObserver tomake it trigger the change event diff --git a/src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss b/src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss index 0ff2f3e..983555f 100644 --- a/src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss +++ b/src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss @@ -366,11 +366,12 @@ div[data-drupal-selector="edit-actions"]{ background-size: contain; background-repeat: no-repeat; background-position: center; - aspect-ratio: 1 / 1; - /* width:100%; */ - max-height: calc(100vh - 150px); position: relative; padding: 8%; + box-sizing: border-box; + // aspect-ratio: 1 / 1; + /* width:100%; */ + // max-height: calc(100vh - 150px); .entity{ position: absolute;