Fixes #172 popup side being inverted, also fixes bug with offstage position not being calculated correctly on multiple refreshes of a popup, showing an offstage popup. Also removes inline styles after popup hide

src/modules/popup.js

@@ -14,6 +14,7 @@
 $.fn.popup = function(parameters) {
   var
     $allModules     = $(this),
+    $document       = $(document),
 
     settings        = ( $.isPlainObject(parameters) )
       ? $.extend(true, {}, $.fn.popup.settings, parameters)
@@ -204,6 +205,7 @@ $.fn.popup = function(parameters) {
                 left   : (popup.position.left < boundary.left)
               };
             }
+            module.verbose('Checking if outside viewable area', popup.position);
             // return only boundaries that have been surpassed
             $.each(offstage, function(direction, isOffstage) {
               if(isOffstage) {
@@ -259,7 +261,7 @@ $.fn.popup = function(parameters) {
             module.show();
           }
           else {
-            module.hide();
+            // module.hide();
           }
         },
 
@@ -291,9 +293,10 @@ $.fn.popup = function(parameters) {
           switch(position) {
             case 'top left':
               positioning = {
-                top    : 'auto',
                 bottom :  parentHeight - offset.top + settings.distanceAway,
-                left   : offset.left + arrowOffset
+                right  :  parentWidth - offset.left - width - arrowOffset,
+                top    : 'auto',
+                left   : 'auto'
               };
             break;
             case 'top center':
@@ -306,10 +309,9 @@ $.fn.popup = function(parameters) {
             break;
             case 'top right':
               positioning = {
-                bottom :  parentHeight - offset.top + settings.distanceAway,
-                right  :  parentWidth - offset.left - width - arrowOffset,
                 top    : 'auto',
-                left   : 'auto'
+                bottom :  parentHeight - offset.top + settings.distanceAway,
+                left   : offset.left + arrowOffset
               };
             break;
             case 'left center':
@@ -331,9 +333,9 @@ $.fn.popup = function(parameters) {
             case 'bottom left':
               positioning = {
                 top    :  offset.top + height + settings.distanceAway,
-                left   : offset.left + arrowOffset,
-                bottom : 'auto',
-                right  : 'auto'
+                right  : parentWidth - offset.left - width - arrowOffset,
+                left   : 'auto',
+                bottom : 'auto'
               };
             break;
             case 'bottom center':
@@ -347,9 +349,9 @@ $.fn.popup = function(parameters) {
             case 'bottom right':
               positioning = {
                 top    :  offset.top + height + settings.distanceAway,
-                right  : parentWidth - offset.left - width - arrowOffset,
-                left   : 'auto',
-                bottom : 'auto'
+                left   : offset.left + arrowOffset,
+                bottom : 'auto',
+                right  : 'auto'
               };
             break;
           }
@@ -359,11 +361,8 @@ $.fn.popup = function(parameters) {
           });
           // tentatively place on stage
           $popup
-            .removeAttr('style')
-            .removeClass('top right bottom left center')
+            .attr('class', position + ' ' + className.popup + ' ' + className.loading)
             .css(positioning)
-            .addClass(position)
-            .addClass(className.loading)
           ;
           // check if is offstage
           offstagePosition = module.get.offstagePosition();
@@ -414,7 +413,7 @@ $.fn.popup = function(parameters) {
           }
           if(settings.on == 'click' && settings.clicktoClose) {
             module.debug('Binding popup close event');
-            $(document)
+            $document
               .on('click.' + namespace, module.gracefully.hide)
             ;
           }
@@ -436,18 +435,18 @@ $.fn.popup = function(parameters) {
             module.debug('Hiding pop-up');
             if(settings.transition && $.fn.transition !== undefined) {
               $popup
-                .transition(settings.transition + ' out', settings.duration)
+                .transition(settings.transition + ' out', settings.duration, module.reset)
               ;
             }
             else {
               $popup
                 .stop()
-                .fadeOut(settings.duration, settings.easing)
+                .fadeOut(settings.duration, settings.easing, module.reset)
               ;
             }
           }
           if(settings.on == 'click' && settings.clicktoClose) {
-            $(document)
+            $document
               .off('click.' + namespace)
             ;
           }
@@ -457,6 +456,14 @@ $.fn.popup = function(parameters) {
           }
         },
 
+        reset: function() {
+          module.verbose('Resetting inline styles');
+          $popup
+            .attr('style', '')
+            .removeAttr('style')
+          ;
+        },
+
         gracefully: {
           hide: function(event) {
             // don't close on clicks inside popup

src/modules/popup.less

@@ -82,6 +82,7 @@
 /*--------------
      Spacing
 ---------------*/
+
 .ui.popup {
   margin: 0em;
 }
@@ -116,26 +117,35 @@
   -moz-box-shadow: -1px -1px 1px #dcddde;
   box-shadow: -1px -1px 1px #dcddde;
 }
+
+.ui.bottom.left.popup {
+  margin-right: -0.8em;
+}
 .ui.bottom.left.popup:before {
   top: -0.4em;
-  left: 1em;
-  right: auto;
+  right: 1em;
   bottom: auto;
+  left: auto;
   margin-left: 0em;
   -webkit-box-shadow: -1px -1px 1px #dcddde;
   -moz-box-shadow: -1px -1px 1px #dcddde;
   box-shadow: -1px -1px 1px #dcddde;
 }
+
+.ui.bottom.right.popup {
+  margin-left: -0.8em;
+}
 .ui.bottom.right.popup:before {
   top: -0.4em;
-  right: 1em;
+  left: 1em;
+  right: auto;
   bottom: auto;
-  left: auto;
   margin-left: 0em;
   -webkit-box-shadow: -1px -1px 1px #dcddde;
   -moz-box-shadow: -1px -1px 1px #dcddde;
   box-shadow: -1px -1px 1px #dcddde;
 }
+
 /*--- Above ---*/
 .ui.top.center.popup:before {
   top: auto;
@@ -144,21 +154,28 @@
   left: 50%;
   margin-left: -0.4em;
 }
+.ui.top.left.popup {
+  margin-right: -0.8em;
+}
 .ui.top.left.popup:before {
   bottom: -0.4em;
-  left: 1em;
+  right: 1em;
   top: auto;
-  right: auto;
+  left: auto;
   margin-left: 0em;
 }
+.ui.top.right.popup {
+  margin-left: -0.8em;
+}
 .ui.top.right.popup:before {
   bottom: -0.4em;
-  right: 1em;
+  left: 1em;
   top: auto;
-  left: auto;
+  right: auto;
   margin-left: 0em;
 }
-/*--- Left ---*/
+
+/*--- Left Center ---*/
 .ui.left.center.popup:before {
   top: 50%;
   right: -0.35em;
@@ -169,7 +186,8 @@
   -webkit-box-shadow: 1px -1px 1px #dcddde;
   box-shadow: 1px -1px 1px #dcddde;
 }
-/*--- Right ---*/
+
+/*--- Right Center  ---*/
 .ui.right.center.popup:before {
   top: 50%;
   left: -0.35em;