Fix some popup examples

RELEASE NOTES.md

@@ -31,6 +31,7 @@
 - **List** - List spacing defaults have been adjusted to be more consistent
 - **Popup** - Popup can now allow itself not to be closed when hovered over
 - **Popup** - Popup content can now be specified on initialization.
+- **Popup** - Positioned popups will now extend in the opposite direction to fit better with floated content
 - **Rating** - Rating now uses an embedded icon font to maximize compatibility
 - **Sidebar** - Sidebar now has tall / very tall variations for resizing top/bottom sidebars
 - **Steps** - Steps can now have icons, descriptions and titles. Step default theme has been modified significantly to be more flexible.

server/documents/modules/popup.html.eco

@@ -41,7 +41,7 @@ themes      : ['Default']
     <div class="example">
       <h3 class="ui header">Title</h3>
       <p>A popup can be formatted with a title</p>
-      <img src="/images/demo/photo.jpg" data-title="PonyDog22" data-content="Ponydog has been a member for 22 days" class="ui avatar image"> PonyDog22
+      <img src="/images/demo/avatar.jpg" data-title="PonyDog22" data-content="Ponydog has been a member for 22 days" class="ui avatar image"> PonyDog22
     </div>
 
     <div class="example">
@@ -54,9 +54,10 @@ themes      : ['Default']
 
     <div class="example">
       <h3 class="ui header">Size</h3>
-      <p>A popup can be large or small</p>
+      <p>A popup can vary in size</p>
       <i class="circular heart icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
       <i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
+      <i class="circular heart icon link" data-content="Hello. This is a huge popup" data-variation="huge"></i>
     </div>
 
     <div class="example">
@@ -202,7 +203,7 @@ themes      : ['Default']
       <div class="evaluated code">
     $('.test.button')
       .popup({
-        position : 'top right',
+        position : 'right center',
         target   : '.test.image',
         title    : 'My favorite dog',
         content  : 'My favorite dog would like other dogs as much as themselves'

src/definitions/modules/popup.js

@@ -125,9 +125,6 @@ $.fn.popup = function(parameters) {
 
         destroy: function() {
           module.debug('Destroying previous module');
-          $window
-            .off(eventNamespace)
-          ;
           $popup
             .remove()
           ;
@@ -192,6 +189,11 @@ $.fn.popup = function(parameters) {
               .addClass(variation)
               .html(html)
             ;
+            if(variation) {
+              $popup
+                .addClass(variation)
+              ;
+            }
             if(settings.inline) {
               module.verbose('Inserting popup element inline', $popup);
               $popup
@@ -838,7 +840,7 @@ $.fn.popup.settings = {
   onShow         : function(){},
   onHide         : function(){},
 
-  variation      : '',
+  variation      : false,
   content        : false,
   html           : false,
   title          : false,

src/definitions/modules/popup.less

@@ -231,8 +231,12 @@
 .ui.popup {
   font-size: @medium;
 }
-.ui.large.poup {
+.ui.large.popup {
   font-size: @large;
 }
+.ui.huge.popup {
+  font-size: @huge;
+}
+
 
 .loadUIOverrides();

src/themes/packages/default/modules/popup.variables

@@ -80,4 +80,5 @@
 /* Sizes */
 @small: 0.8rem;
 @medium: 0.875rem;
-@large: 1rem;
+@large: 1rem;
+@huge: 1.1rem;