74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
|
|
(function() {
|
|
/* jshint validthis: true */
|
|
'use strict';
|
|
|
|
/*
|
|
* sgZoomableImage - Show the image fullscreen when clicking on the image inside the container.
|
|
* @memberof SOGo.MailerUI
|
|
* @restrict attribute
|
|
* @ngInject
|
|
* @example:
|
|
|
|
<div sg-zoomable-image="$index">
|
|
<md-card>
|
|
<img src="foo.png">
|
|
</md-card>
|
|
</div>
|
|
*/
|
|
function sgZoomableImage() {
|
|
return {
|
|
restrict: 'A',
|
|
bindToController: {
|
|
partIndex: '=sgZoomableImage'
|
|
},
|
|
controller: sgZoomableImageController
|
|
};
|
|
|
|
function link(scope, iElement, attrs, ctrl) {
|
|
var parentNode = iElement.parent(),
|
|
imgElement, showImage, toggleClass;
|
|
|
|
imgElement = iElement.find('img');
|
|
|
|
toggleClass = function(event) {
|
|
if (event.target.tagName == 'IMG')
|
|
parentNode.toggleClass('sg-zoom');
|
|
};
|
|
|
|
showImage = function(event) {
|
|
if (event.target.tagName == 'IMG')
|
|
ctrl.showGallery(event, imgElement[0].src);
|
|
};
|
|
|
|
if (imgElement.length)
|
|
ctrl.addImage(imgElement[0].src);
|
|
|
|
iElement.on('click', showImage);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @ngInject
|
|
*/
|
|
sgZoomableImageController.$inject = ['$element', 'ImageGallery'];
|
|
function sgZoomableImageController($element, ImageGallery) {
|
|
var $ctrl = this;
|
|
|
|
this.$postLink = function() {
|
|
ImageGallery.registerImage($element);
|
|
$element.on('click', this.showImage);
|
|
};
|
|
|
|
this.showImage = function($event) {
|
|
if ($event.target.tagName == 'IMG')
|
|
ImageGallery.showGallery($event, $ctrl.partIndex);
|
|
};
|
|
}
|
|
|
|
angular
|
|
.module('SOGo.MailerUI')
|
|
.directive('sgZoomableImage', sgZoomableImage);
|
|
})();
|