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