[fix] Allow negative %/vh/vw offsets (floating-ui#227)

imouze · Apr 23, 2017 · 27a22db · 27a22db
1 parent 4dbe035
commit 27a22db
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popper.js",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "A kickass library to manage your poppers",
   "main": "dist/umd/popper.js",
   "module": "dist/esm/popper.js",

diff --git a/src/popper/modifiers/offset.js b/src/popper/modifiers/offset.js
@@ -34,7 +34,7 @@ export default function offset(data, options) {
     // itherate through each offset to compute them in case they are percentages
     offsets = offsets.map((offset, index) => {
       // separate value from unit
-      const split = offset.match(/(\d*\.?\d*)(.*)/);
+      const split = offset.match(/(\-?\d*\.?\d*)(.*)/);
       const value = +split[1];
       const unit = split[2];
 

diff --git a/tests/functional/offset.js b/tests/functional/offset.js
@@ -20,7 +20,7 @@ describe('[offset]', () => {
           offset: offset,
         },
       },
-      onCreate: () => {
+      onCreate: (data) => {
         const refLeft = reference.getBoundingClientRect().left;
         const refWidth = reference.offsetWidth;
         const popperLeft = popper.getBoundingClientRect().left;
@@ -29,6 +29,7 @@ describe('[offset]', () => {
           refLeft + refWidth / 2 - popperWidth / 2 + offset;
 
         expect(popperLeft).toBeApprox(expectedPopperLeft);
+        data.instance.destroy();
         done();
       },
     });
@@ -49,7 +50,7 @@ describe('[offset]', () => {
           offset: offset,
         },
       },
-      onCreate: () => {
+      onCreate: (data) => {
         const refLeft = reference.getBoundingClientRect().left;
         const refBottom = reference.getBoundingClientRect().bottom;
         const refWidth = reference.offsetWidth;
@@ -63,6 +64,7 @@ describe('[offset]', () => {
         expect(popperTop - arrowHeight).toBeApprox(
           refBottom + +offset.split(' ')[1]
         );
+        data.instance.destroy();
         done();
       },
     });
@@ -82,7 +84,7 @@ describe('[offset]', () => {
           offset: offset,
         },
       },
-      onCreate: () => {
+      onCreate: (data) => {
         const refLeft = reference.getBoundingClientRect().left;
         const refWidth = reference.offsetWidth;
         const popperLeft = popper.getBoundingClientRect().left;
@@ -91,6 +93,36 @@ describe('[offset]', () => {
           refLeft + refWidth / 2 - popperWidth / 2 + refWidth / 4;
 
         expect(popperLeft).toBeApprox(expectedPopperLeft);
+        data.instance.destroy();
+        done();
+      },
+    });
+  });
+
+  it('creates a popper with single explicit negative % offset', done => {
+    const reference = appendNewRef(1);
+    reference.style.marginLeft = '100px';
+    const popper = appendNewPopper(2);
+
+    const offset = '-25%';
+
+    new Popper(reference, popper, {
+      placement: 'bottom',
+      modifiers: {
+        offset: {
+          offset: offset,
+        },
+      },
+      onCreate: (data) => {
+        const refLeft = reference.getBoundingClientRect().left;
+        const refWidth = reference.offsetWidth;
+        const popperLeft = popper.getBoundingClientRect().left;
+        const popperWidth = popper.offsetWidth;
+        const expectedPopperLeft =
+          refLeft + refWidth / 2 - popperWidth / 2 - refWidth / 4;
+
+        expect(popperLeft).toBeApprox(expectedPopperLeft);
+        data.instance.destroy();
         done();
       },
     });
@@ -111,7 +143,7 @@ describe('[offset]', () => {
           offset: offset,
         },
       },
-      onCreate: () => {
+      onCreate: (data) => {
         const refLeft = reference.getBoundingClientRect().left;
         const refBottom = reference.getBoundingClientRect().bottom;
         const refWidth = reference.offsetWidth;
@@ -124,6 +156,43 @@ describe('[offset]', () => {
 
         expect(popperLeft).toBeApprox(expectedPopperLeft);
         expect(popperTop - arrowHeight).toBeApprox(refBottom + refHeight / 4);
+        data.instance.destroy();
+        done();
+      },
+    });
+  });
+
+  it('creates a popper with double explicit negative % offset', done => {
+    const reference = appendNewRef(1);
+    reference.style.marginLeft = '100px';
+    reference.style.marginTop = '100px';
+    const popper = appendNewPopper(2);
+
+    const offset = '-25% -25%';
+    const arrowHeight = 5;
+
+    new Popper(reference, popper, {
+      placement: 'bottom',
+      modifiers: {
+        offset: {
+          offset: offset,
+        },
+        flip: { enabled: false },
+      },
+      onCreate: (data) => {
+        const refLeft = reference.getBoundingClientRect().left;
+        const refBottom = reference.getBoundingClientRect().bottom;
+        const refWidth = reference.offsetWidth;
+        const refHeight = reference.offsetHeight;
+        const popperLeft = popper.getBoundingClientRect().left;
+        const popperTop = popper.getBoundingClientRect().top;
+        const popperWidth = popper.offsetWidth;
+        const expectedPopperLeft =
+          refLeft + refWidth / 2 - popperWidth / 2 - refWidth / 4;
+
+        expect(popperLeft).toBeApprox(expectedPopperLeft);
+        expect(popperTop - arrowHeight).toBeApprox(refBottom - refHeight / 4);
+        data.instance.destroy();
         done();
       },
     });