Fix popover attachment position detection

AshesOfOwls · Aug 14, 2017 · 58e1829 · 58e1829
1 parent 81bb9fd
commit 58e1829
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -5,6 +5,7 @@
     <style>
       body {
         background: #EFEFEF;
+        margin: 0;
         padding: 30px;
       }
 

diff --git a/dist/popover.js b/dist/popover.js
@@ -1655,14 +1655,14 @@ var Positioner = function () {
   }, {
     key: 'cacheCssOffsets',
     value: function cacheCssOffsets() {
-      var sizerClasses = ['popoverjs--popover-primary-top', 'popoverjs--popover-secondary-left', 'popoverjs--attachment-primary-left', 'popoverjs--attachment-secondary-top'];
+      var sizerClasses = ['popoverjs--popover-primary-bottom', 'popoverjs--popover-secondary-left', 'popoverjs--attachment-primary-top', 'popoverjs--attachment-secondary-left'];
 
       this.togglePopoverClasses(sizerClasses, true);
 
       this.cssCache = {
         arrowSize: this.getArrowSize(),
         contentSize: this.getContentSize(),
-        attachmentOffset: Math.abs(this.popoverElement.offsetTop),
+        attachmentOffset: Math.abs(this.popoverElement.offsetTop) - 1,
         triggerOffset: Math.abs(this.popoverElement.offsetLeft),
         contentOffset: Math.abs(this.popoverContent.offsetLeft)
       };
@@ -1878,7 +1878,7 @@ var Positioner = function () {
   }, {
     key: 'isConstrainedByPrimary',
     value: function isConstrainedByPrimary(side) {
-      var originCoordinate = this.origins.attachment[side];
+      var originCoordinate = this.origins.attachment[side] + this.cssCache.attachmentOffset;
       var popoverSize = this.getPopoverSizeFromSideCheck(side);
 
       if (side === 'left' || side === 'top') {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popover.js",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "main": "dist/popover.js",
   "scripts": {

diff --git a/src/positioner.js b/src/positioner.js
@@ -90,18 +90,18 @@ class Positioner {
 
   cacheCssOffsets() {
     const sizerClasses = [
-      'popoverjs--popover-primary-top',
+      'popoverjs--popover-primary-bottom',
       'popoverjs--popover-secondary-left',
-      'popoverjs--attachment-primary-left',
-      'popoverjs--attachment-secondary-top',
+      'popoverjs--attachment-primary-top',
+      'popoverjs--attachment-secondary-left',
     ];
 
     this.togglePopoverClasses(sizerClasses, true);
 
     this.cssCache = {
       arrowSize: this.getArrowSize(),
       contentSize: this.getContentSize(),
-      attachmentOffset: Math.abs(this.popoverElement.offsetTop),
+      attachmentOffset: Math.abs(this.popoverElement.offsetTop) - 1,
       triggerOffset: Math.abs(this.popoverElement.offsetLeft),
       contentOffset: Math.abs(this.popoverContent.offsetLeft),
     };
@@ -281,7 +281,7 @@ class Positioner {
   }
 
   isConstrainedByPrimary(side) {
-    const originCoordinate = this.origins.attachment[side];
+    const originCoordinate = this.origins.attachment[side] + this.cssCache.attachmentOffset;
     const popoverSize = this.getPopoverSizeFromSideCheck(side);
 
     if (side === 'left' || side === 'top') {
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
         <style>
           body {
             background: #EFEFEF;
+            margin: 0;
             padding: 30px;
           }
@@ Expand Down @@