From 7eeeeea54905d81d38f0735840417b27dd485721 Mon Sep 17 00:00:00 2001
From: Jack Lukic <jacklukic@gmail.com>
Date: Mon, 13 Jun 2016 15:26:08 -0700
Subject: [PATCH] Adds new visibility callbacks, and fixes hidden image

---
 RELEASE-NOTES.md                        |  2 ++
 src/definitions/behaviors/visibility.js | 23 ++++++++++++++++++-----
 src/definitions/elements/image.less     |  6 ++++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index c68eb583a..3f7a07992 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -32,6 +32,7 @@
 - **Form Validation** - Added `depends` validation rule setting which will only validate a field if another specified field is not empty
 - **Popup** - Added new settings `observeChanges`, which is enabled by default. This will add special mutation observers to trigger `destroy` when the element is removed from the document, preventing memory leaks.
 - **Visibility** - Added `onFixed` and `onUnfixed` callbacks for visibility `type: 'fixed'` **Documentation forthcoming**
+- **Visibility** - Added `onLoad` and `onAllLoaded` callback for `type: 'image'` visibility
 - **Tab** - Added new setting `cacheType`, can either be `html` or `response` (default). HTML will cache resulting html after callbacks, `response` will cache the original response so that it can be played back identically on future loads #2534
 - **Search** - Search now includes a `showNoResults` setting for determining whether no results messages should be shown **Documentation forthcoming**
 - **Search** - Added a new option `selectFirstResult`, which defaults to `false`. Will automatically highlight first result on search **Documentation forthcoming**
@@ -44,6 +45,7 @@
 **New Behaviors**
 - **Dropdown** - Added new convenience method `restore placeholder text`
 - **Progress** - Added progress `is complete` for returning whether success, warning, or error conditions are met
+- **Image** - `transition hidden image` now shows correctly as `visibility: hidden;` and not `display: none`. This will allow `offset` with `visibility` and `sticky` to work more seamlessly. `hidden image` will still remain `display: none;`
 
 **CSS Enhancements**
 - **All UI** Extended variables which return exact pixel values in em (`@relativePX` and @px) up to 40px to allow for simple theming with exact values
diff --git a/src/definitions/behaviors/visibility.js b/src/definitions/behaviors/visibility.js
index 4bdf64bc9..0a5d27722 100644
--- a/src/definitions/behaviors/visibility.js
+++ b/src/definitions/behaviors/visibility.js
@@ -31,7 +31,10 @@ $.fn.visibility = function(parameters) {
     query          = arguments[0],
     methodInvoked  = (typeof query == 'string'),
     queryArguments = [].slice.call(arguments, 1),
-    returnedValue
+    returnedValue,
+
+    moduleCount    = $allModules.length,
+    loadedCount    = 0
   ;
 
   $allModules
@@ -295,7 +298,13 @@ $.fn.visibility = function(parameters) {
               settings.onOnScreen = function() {
                 module.debug('Image on screen', element);
                 module.precache(src, function() {
-                  module.set.image(src);
+                  module.set.image(src, function() {
+                    loadedCount++;
+                    if(loadedCount == moduleCount) {
+                      settings.onAllLoaded.call(this);
+                    }
+                    settings.onLoad.call(this);
+                  });
                 });
               };
             }
@@ -374,16 +383,16 @@ $.fn.visibility = function(parameters) {
             ;
             settings.onFixed.call(element);
           },
-          image: function(src) {
+          image: function(src, callback) {
             $module
               .attr('src', src)
             ;
             if(settings.transition) {
               if( $.fn.transition !== undefined ) {
-                $module.transition(settings.transition, settings.duration);
+                $module.transition(settings.transition, settings.duration, callback);
               }
               else {
-                $module.fadeIn(settings.duration);
+                $module.fadeIn(settings.duration, callback);
               }
             }
             else {
@@ -1244,6 +1253,10 @@ $.fn.visibility.settings = {
   onTopPassedReverse     : false,
   onBottomPassedReverse  : false,
 
+  // special callbacks for image
+  onLoad                 : function() {},
+  onAllLoaded            : function() {},
+
   // special callbacks for fixed position
   onFixed                : function() {},
   onUnfixed              : function() {},
diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less
index d8d526079..b2fdd0cbe 100755
--- a/src/definitions/elements/image.less
+++ b/src/definitions/elements/image.less
@@ -19,6 +19,7 @@
 
 @import (multiple) '../../theme.config';
 
+
 /*******************************
              Image
 *******************************/
@@ -51,6 +52,11 @@ img.ui.image {
 .ui.hidden.image {
   display: none;
 }
+.ui.hidden.transition.images,
+.ui.hidden.transition.image {
+  display: block;
+  visibility: hidden;
+}
 
 
 .ui.disabled.images,