51 lines
2.1 KiB
JavaScript
51 lines
2.1 KiB
JavaScript
"use strict";
|
|
/**
|
|
* Created by andey on 29-07-2016.
|
|
* @ngdoc directive
|
|
* @name imageToggle
|
|
*
|
|
* @description
|
|
* imageToggle is a common UI Component that can be used to add show/hide link to any image.
|
|
*
|
|
* Example:
|
|
* <img src="/imagePath/abc.jpg" image-toggle></img>
|
|
*
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
angular.module('myitsmApp')
|
|
.directive('imageToggle', ['$compile', '$filter', function ($compile, $filter) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: {},
|
|
link: function (scope, element) {
|
|
var toggleImage = function (event) {
|
|
event.preventDefault();
|
|
var anchorTag = event.target;
|
|
if (anchorTag.nextSibling.style.display !== 'none') {
|
|
anchorTag.nextSibling.style.display = 'none';
|
|
anchorTag.innerText = $filter('i18n')('knowledge.decisionTree.showImage.label');
|
|
}
|
|
else {
|
|
anchorTag.nextSibling.style.display = '';
|
|
anchorTag.innerText = $filter('i18n')('knowledge.decisionTree.hideImage.label');
|
|
}
|
|
};
|
|
var src = element.attr('src');
|
|
var msg = $filter('i18n')('knowledge.decisionTree.hideImage.label');
|
|
var newHtml = "<div><a href='#'>" + msg + "</a><img src='" + src + "' class='rx-image-toggle__image'/></div>";
|
|
newHtml = angular.element(newHtml);
|
|
element = element.replaceWith(newHtml);
|
|
var imageSpan = newHtml.find('a');
|
|
imageSpan.bind('click', toggleImage);
|
|
imageSpan = $compile(imageSpan)(scope);
|
|
scope.$on('$destroy', function () {
|
|
imageSpan.off('click', toggleImage);
|
|
newHtml = null;
|
|
imageSpan = null;
|
|
});
|
|
}
|
|
};
|
|
}]);
|
|
})();
|