v.1.0.1 contd

* position popup to maximize visible area * popup.hide() method * other changes
foo123 · Mar 17, 2022 · 6dac8df · 6dac8df
1 parent cf94a8b
commit 6dac8df
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 A simple JavaScript class to show info popups easily for various combinations of items and events (Desktop and Mobile)
 
-**version 1.0.1** (5 kB minified)
+**version 1.0.1** (6 kB minified)
 
 
 [Live Example](https://foo123.github.io/examples/infopopup/)
@@ -16,7 +16,7 @@ A simple JavaScript class to show info popups easily for various combinations of
 ```
 
 ```javascript
-InfoPopup({
+let infoPopup = InfoPopup({
     // custom class for custom styling of popup
     infoClass: 'title-info',
     // custom class for custom styling of focused element
@@ -33,9 +33,13 @@ InfoPopup({
     // position popup differently on Y axis depending on item
     // options: 'bottom', 'center', 'top' (default)
     atItemY: (item) => item.href === '#bar' ? 'bottom' : 'top',
-    // close popup after 1 sec
-    closeDelay: 1000
+    // hide popup after 1 sec
+    hideDelay: 1000
 });
+
+// programmatically show/hide popup
+infoPopup.show(document.querySelector('[href="#foo"]'));
+infoPopup.hide();
 ```
 
 [![interactive map with InfoPopup](/screenshot.png)](https://foo123.github.io/examples/infopopup/)
diff --git a/src/InfoPopup.js b/src/InfoPopup.js
@@ -129,7 +129,7 @@ function InfoPopup(options)
     };
     removeInfoPopup = function() {
         clearTimer();
-        timer = setTimeout(removePopup, +(self.options.closeDelay || 0));
+        timer = setTimeout(removePopup, +(self.options.hideDelay || 0));
     };
     handler2 = function handler2(evt) {
         if ('mouseleave' === evt.type)
@@ -149,7 +149,7 @@ function InfoPopup(options)
     };
     handler = function(evt) {
         var item = evt.target && closest(evt.target, self.options.item || '.info-item');
-        if (item && ('function' === typeof self.options.content))
+        if (item && is_function(self.options.content))
         {
             self.show(item, evt);
             if ('click' !== self.options.trigger)
@@ -181,10 +181,46 @@ function InfoPopup(options)
             case 'left':
                 x = itemRect.left;
                 addClass(infoPopup, 'left');
+                if (0 > x)
+                {
+                    if (itemRect.right - infoRect.width > x)
+                    {
+                        x = itemRect.right - infoRect.width;
+                        removeClass(infoPopup, 'left');
+                        addClass(infoPopup, 'right');
+                    }
+                }
+                else if (x + infoRect.width > vw)
+                {
+                    if (itemRect.right < x + infoRect.width)
+                    {
+                        x = itemRect.right - infoRect.width;
+                        removeClass(infoPopup, 'left');
+                        addClass(infoPopup, 'right');
+                    }
+                }
                 break;
             case 'right':
                 x = itemRect.right - infoRect.width;
                 addClass(infoPopup, 'right');
+                if (0 > x)
+                {
+                    if (itemRect.left > x)
+                    {
+                        x = itemRect.left;
+                        removeClass(infoPopup, 'right');
+                        addClass(infoPopup, 'left');
+                    }
+                }
+                else if (itemRect.right > vw)
+                {
+                    if (itemRect.left + infoRect.width < itemRect.right)
+                    {
+                        x = itemRect.left;
+                        removeClass(infoPopup, 'right');
+                        addClass(infoPopup, 'left');
+                    }
+                }
                 break;
             case 'center':
             default:
@@ -231,13 +267,14 @@ function InfoPopup(options)
                 break;
             case 'bottom':
                 y = itemRect.bottom;
+                addClass(infoPopup, 'below');
                 if (y + infoRect.height > vh)
                 {
-                    y = itemRect.top - infoRect.height;
-                }
-                else
-                {
-                    addClass(infoPopup, 'below');
+                    if (infoRect.height - itemRect.top < y + infoRect.height - vh)
+                    {
+                        y = itemRect.top - infoRect.height;
+                        removeClass(infoPopup, 'below');
+                    }
                 }
                 break;
             case 'top':
@@ -251,7 +288,7 @@ function InfoPopup(options)
                         sy = document.body.scrollTop;
                         y = 0;
                     }
-                    else
+                    else if (vh - itemRect.bottom - infoRect.height > y)
                     {
                         y = itemRect.bottom;
                         addClass(infoPopup, 'below');
@@ -279,10 +316,15 @@ function InfoPopup(options)
             removeEvent(document.body, 'touchstart', handler, {capture:true, passive:false});
         }
     };
+    self.hide = function() {
+        clearTimer();
+        removePopup();
+    };
     self.show = function(item, evt) {
+        if (!item || !is_function(self.options.content)) return;
         var infoContent, imgs, loaded = 0;
 
-        infoContent = self.options.content(item);
+        infoContent = self.options.content(item, self);
         if (null == infoContent || false === infoContent)
         {
             return;
@@ -303,8 +345,8 @@ function InfoPopup(options)
 
         clearCurrent();
 
-        addClass(item, self.options.focusedClass || 'focused');
         current = item;
+        addClass(current, self.options.focusedClass || 'focused');
 
         document.body.appendChild(infoPopup);
 
@@ -318,7 +360,12 @@ function InfoPopup(options)
                        removeEvent(img, 'error', load);
                        removeEvent(img, 'load', load);
                        ++loaded;
-                       if ((imgs.length === loaded) && infoPopup.parentNode && (infoPopup === ancestor(img, infoPopup)))
+                       if (
+                        (imgs.length === loaded)
+                        && (item === current)
+                        && infoPopup.parentNode
+                        && (infoPopup === ancestor(img, infoPopup))
+                        )
                        {
                            // re-position popup
                            positionAt(item, self.options.atItemX, self.options.atItemY);
@@ -384,7 +431,8 @@ InfoPopup.prototype = {
     constructor: InfoPopup,
     options: null,
     dispose: null,
-    show: null
+    show: null,
+    hide: null
 };
 InfoPopup.VERSION = VERSION;
 return InfoPopup;

diff --git a/src/InfoPopup.min.js b/src/InfoPopup.min.js
diff --git a/test/demo.html b/test/demo.html
@@ -438,7 +438,7 @@ <h1 class="title">Interactive Map of Areas of Greece w/ InfoPopup v.<span id="ve
         // different Y position per item
         return -1 !== ['argosaronikos','egeo','dodekanisa','sporades','kyklades','ionio'].indexOf(g.id) ? 'center' : 'top';
     },
-    closeDelay: 1000
+    hideDelay: 1000
 });
 </script>
 </body>