Adjust widget dimensions on small screens

LiveHelperChat · Feb 25, 2022 · bacf383 · bacf383
1 parent 10928cc
commit bacf383
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 8 deletions.
diff --git a/lhc_web/design/defaulttheme/js/widgetv2/index.js b/lhc_web/design/defaulttheme/js/widgetv2/index.js
diff --git a/lhc_web/design/defaulttheme/js/widgetv2/index.js.map b/lhc_web/design/defaulttheme/js/widgetv2/index.js.map
diff --git a/lhc_web/design/defaulttheme/widget/wrapper/dist/index.js b/lhc_web/design/defaulttheme/widget/wrapper/dist/index.js
diff --git a/lhc_web/design/defaulttheme/widget/wrapper/dist/index.js.map b/lhc_web/design/defaulttheme/widget/wrapper/dist/index.js.map
diff --git a/lhc_web/design/defaulttheme/widget/wrapper/src/index.js b/lhc_web/design/defaulttheme/widget/wrapper/src/index.js
@@ -55,7 +55,7 @@
             lhc.loaded = false;
             lhc.connected = false;
             lhc.ready = false;
-            lhc.version = 194;
+            lhc.version = 195;
 
             var init = () => {
 

diff --git a/lhc_web/design/defaulttheme/widget/wrapper/src/lib/widgets/mainWidget.js b/lhc_web/design/defaulttheme/widget/wrapper/src/lib/widgets/mainWidget.js
@@ -126,6 +126,30 @@ export class mainWidget{
             this.monitorDimensions(data);
         };
 
+        if (attributes.widgetDimesions.valueInternal['units'] == 'px' && this.attributes.isMobile == false && this.attributes.mode != 'embed' && this.attributes.position_placement != 'full_height_right' && this.attributes.position_placement != 'full_height_left')
+        {
+            this.screenAttributesUpdate = () => {
+
+                if (window.innerHeight < attributes.widgetDimesions.valueInternal['height'] + 60) {
+                    attributes.widgetDimesions.nextPropertySilent('height_soverride', window.innerHeight - 60);
+                } else {
+                    attributes.widgetDimesions.nextPropertySilent('height_soverride', null);
+                }
+
+                if (window.innerWidth < attributes.widgetDimesions.valueInternal['width'] + 60) {
+                    attributes.widgetDimesions.nextPropertySilent('width_soverride', window.innerWidth - 60);
+                } else {
+                    attributes.widgetDimesions.nextPropertySilent('width_soverride', null);
+                }
+
+                attributes.widgetDimesions.callListeners();
+            };
+
+            this.screenAttributesUpdate();
+
+            window.addEventListener('resize', this.screenAttributesUpdate);
+        }
+
         attributes.widgetDimesions.subscribe(this.monitorDimensionsWrap);
 
         attributes.eventEmitter.addListener('reloadWidget',() => {
@@ -189,11 +213,12 @@ export class mainWidget{
     }
 
     monitorDimensions(data) {
-        this.width = data.width_override || data.width;
-        this.height = data.height_override || data.height;
+        this.width = data.width_override || data.width_soverride || data.width;
+        this.height = data.height_override || data.height_soverride || data.height;
         this.bottom = data.bottom_override ? (data.bottom_override + (data.wbottom ? data.wbottom : 0)) : (30 + (this.attributes.clinst === true ? 70 : 0) + (data.wbottom ? data.wbottom : 0));
         this.right = data.right_override ? (data.right_override + (data.wright_inv ? data.wright_inv : 0)) : (30 + (data.wright ? data.wright : 0));
         this.units = (data.width_override || data.height_override || data.bottom_override || data.right_override) ? 'px' : data.units;
+
         this.resize();
 
         this.bottom_override = !!data.bottom_override;

diff --git a/lhc_web/design/defaulttheme/widget/wrapper/src/util/monitoredVariable.js b/lhc_web/design/defaulttheme/widget/wrapper/src/util/monitoredVariable.js
@@ -19,6 +19,10 @@ export class monitoredVariable {
         this.callListeners();
     }
 
+    nextPropertySilent(key, val) {
+        this.valueInternal[key] = val;
+    }
+
     nextProperty(key, val) {
         this.valueInternal[key] = val;
         this.callListeners();

diff --git a/lhc_web/modules/lhwidgetrestapi/settings.php b/lhc_web/modules/lhwidgetrestapi/settings.php
@@ -408,7 +408,7 @@
 $ts = time();
 
 // Wrapper version
-$outputResponse['wv'] = 194;
+$outputResponse['wv'] = 195;
 
 // React APP versions
 $outputResponse['v'] = 236;