Merge pull request #796 from OpenGeoscience/widget-position

Improve setting widget position.
OpenGeoscience · Mar 21, 2018 · b40f845 · b40f845
2 parents 8e93b7e + 5fd619f
commit b40f845
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/ui/widget.js b/src/ui/widget.js
@@ -1,5 +1,6 @@
 var inherit = require('../inherit');
 var sceneObject = require('../sceneObject');
+var $ = require('jquery');
 
 /**
  * @typedef {object} geo.gui.widget.position
@@ -148,11 +149,17 @@ var widget = function (arg) {
   this.position = function (pos, actualValue) {
     if (pos !== undefined) {
       this.layer().geoOff(geo_event.pan, m_this.repositionEvent);
+      var clearPosition = {};
+      for (var attr in m_position) {
+        if (m_position.hasOwnProperty(attr)) {
+          clearPosition[attr] = null;
+        }
+      }
       m_position = pos;
       if (m_position.hasOwnProperty('x') && m_position.hasOwnProperty('y')) {
         this.layer().geoOn(geo_event.pan, m_this.repositionEvent);
       }
-      this.reposition();
+      this.reposition($.extend(clearPosition, m_this.position()));
       return this;
     }
     if (m_position.hasOwnProperty('x') && m_position.hasOwnProperty('y') && !actualValue) {

diff --git a/tests/cases/widget.js b/tests/cases/widget.js
@@ -124,6 +124,18 @@ describe('geo.gui.widget', function () {
       map.pan({x: -5, y: 20});
       expect(closeToEqual(widget.position(), {left: 280.87, top: 165.85, right: null, bottom: null})).toBe(true);
       expect(widget.position(undefined, true)).toEqual({x: -3, y: 3});
+      /* test that position updates the canvas as we expect */
+      var div = document.createElement('div');
+      widget = geo.gui.widget({layer: layer});
+      widget.canvas(div).reposition();
+      expect(div.style.left).toBe('0px');
+      expect(div.style.right).toBe('');
+      widget.position({right: 10, bottom: 20});
+      expect(div.style.left).toBe('');
+      expect(div.style.right).toBe('10px');
+      widget.position({right: '10%', bottom: 20});
+      expect(div.style.left).toBe('');
+      expect(div.style.right).toBe('10%');
     });
     it('reposition and repositionEvent', function () {
       map = createMap();