bachir
/
ouatterrir-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

replaced css aspect-ratio by custom js to size the boussole

This commit is contained in:
Bachir Soussi Chiadmi 2023-06-12 13:06:14 +02:00
parent c65b54aa0e
commit a14194d3ba
4 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css
View File

@ -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;

2
src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css.map
View File

@ -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"}
{"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"}

29
src/web/themes/custom/ouatminimal_theme/js/boussole.js
View File

@ -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

7
src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss
View File

@ -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;