Version bump.

Fix for zoom container bug. Destroy zoom container if $destroy was too late.
igorlino · Jun 7, 2016 · e6fd7da · e6fd7da
1 parent 58cd80e
commit e6fd7da
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 <a name="1.0.0"></a>
 
+# 1.1.18c (2016-07-06)
+- Fix for zoom container bug. Destroy zoom container if $destroy was too late.
+
 # 1.1.18b (2016-17-05)
 - Fix for zoom container bug. Destroy old plugin before updating the the plugin when using dynamic options
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "angular-ez-plus",
-    "version": "1.1.18b",
+    "version": "1.1.18c",
     "author": {
         "name": "Igor Lino",
         "url": "http://igorlino.github.io/angular-elevatezoom-plus/"

diff --git a/js/angular-ezplus.js b/js/angular-ezplus.js
@@ -4,7 +4,7 @@
     angular.module('ezplus', [])
         .directive('ezPlus', ezPlus);
 
-    function ezPlus() {
+    function ezPlus($document) {
         var service = {
             restrict: 'A',
             scope: {
@@ -27,6 +27,8 @@
         link.$inject = ['$scope', '$element', '$attributes'];
         function link($scope, $element, $attributes) {
             var bootstrapped = false;
+            var lastPlugin = null;
+            var zoomIds = {};
             var options = {
                 onComplete: function () {
                     if ($scope.onComplete && $scope.onComplete()) {
@@ -86,13 +88,13 @@
                 showZoom();
             });
             $scope.$on('ezp-disableZoom', function (e, msg) {
-                var plugin = angular.element($element).data('ezPlus');
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     plugin.changeState('disable');
                 }
             });
             $scope.$on('ezp-enableZoom', function (e, msg) {
-                var plugin = angular.element($element).data('ezPlus');
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     plugin.changeState('enable');
                 }
@@ -102,11 +104,11 @@
                 if (!bootstrapped) {
                     bootstrapped = true;
                 } else {
-                    var plugin = angular.element($element).data('ezPlus');
+                    var plugin = getZoomPlugin();
                     plugin.destroy();
                     angular.extend(options, $scope.ezpOptions);
                     if (plugin) {
-                        angular.element($element).ezPlus(options);
+                        preparePlugin($element, options);
                     }
                 }
             }, true);
@@ -116,15 +118,16 @@
                 var smallUrl = (image && image.small) || '';
                 var largeUrl = (image && image.large) || '';
 
-                var plugin = angular.element($element).data('ezPlus');
+                var initialUrl = null;
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     if (image) {
                         hideZoom();
                         if (loader) {
                             plugin.swaptheimage(loader, loader);
                         }
 
-                        var initialUrl = getInitialUrl(smallUrl);
+                        initialUrl = getInitialUrl(options, smallUrl);
                         plugin.swaptheimage(initialUrl, largeUrl);
                         showZoom();
                     } else {
@@ -133,18 +136,18 @@
                 } else {
                     if (image) {
 
-                        var initialUrl = getInitialUrl();
+                        initialUrl = getInitialUrl(options);
                         if (initialUrl) {
                             $element.attr('src', initialUrl);
                         }
 
                         $element.attr('data-zoom-image', largeUrl);
 
-                        angular.element($element).ezPlus(options);
+                        preparePlugin($element, options);
                     }
                 }
 
-                function getInitialUrl(defaultUrl) {
+                function getInitialUrl(options, defaultUrl) {
                     var initialUrl = defaultUrl;
                     if (options.initial === 'thumb') {
                         initialUrl = thumbUrl;
@@ -157,16 +160,46 @@
                 }
             });
 
-            $scope.$on('$destroy', function () {
-                var plugin = angular.element($element).data('ezPlus');
+            $scope.$on('$destroy', destroyPlugin);
+
+            function destroyPlugin() {
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     plugin.destroy();
                 }
-            });
+
+                //in case the $destroy is called after the actual plugin element was removed, otherwise zoom containers
+                //will be visible.
+                for (var zoomId in zoomIds) {
+                    if (zoomIds.hasOwnProperty(zoomId)) {
+                        var zoomContainer = findZoomContainer(zoomId);
+                        zoomContainer.remove();
+                    }
+                }
+                zoomIds = {};
+            }
+
+            function findZoomContainer(uuid) {
+                return angular.element($document).find('[uuid=' + uuid + ']');
+            }
+
+            function preparePlugin(element, options) {
+                var plugin = angular.element(element).ezPlus(options);
+                lastPlugin = plugin && plugin.length > 0 ? getZoomPlugin(plugin[0]) : null;
+                if (lastPlugin) {
+                    zoomIds[lastPlugin.options.zoomId] = true;
+                }
+                return lastPlugin;
+            }
+
+            function getZoomPlugin(element) {
+                var plugin = angular.element(element ? element : $element).data('ezPlus');
+                return plugin;
+            }
 
             function hideZoom() {
                 var action = 'hide';
-                var plugin = angular.element($element).data('ezPlus');
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     plugin.showHideZoomContainer(action);
                     /*plugin.showHideWindow(action);
@@ -177,7 +210,7 @@
 
             function showZoom() {
                 var action = 'show';
-                var plugin = angular.element($element).data('ezPlus');
+                var plugin = getZoomPlugin();
                 if (plugin) {
                     /*plugin.showHideLens(action);
                      plugin.showHideTint(action);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "angular-ez-plus",
-    "version": "1.1.18b",
+    "version": "1.1.18c",
     "title": "Angular EZ Plus",
     "description": "Angular directive for ElevateZoom Plus.",
     "keywords": [