229 lines
7.4 KiB
JavaScript
229 lines
7.4 KiB
JavaScript
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
/**
|
|
* @name ImageGallery
|
|
* @constructor
|
|
*/
|
|
function ImageGallery() {
|
|
this.show = false;
|
|
this.message = null;
|
|
this.elements = [];
|
|
}
|
|
|
|
/**
|
|
* @memberof ImageGallery
|
|
* @desc The factory we'll use to register with Angular
|
|
* @returns an ImageGallery instance
|
|
*/
|
|
ImageGallery.$factory = ['$document', '$timeout', '$mdPanel', 'sgHotkeys', function($document, $timeout, $mdPanel, sgHotkeys) {
|
|
angular.extend(ImageGallery, {
|
|
$document: $document,
|
|
$timeout: $timeout,
|
|
$mdPanel: $mdPanel,
|
|
sgHotkeys: sgHotkeys
|
|
});
|
|
|
|
return new ImageGallery(); // return unique instance
|
|
}];
|
|
|
|
/**
|
|
* @function setMessage
|
|
* @memberof ImageGallery.prototype
|
|
* @desc Set current message object of gallery
|
|
*/
|
|
ImageGallery.prototype.setMessage = function(message) {
|
|
this.message = message;
|
|
};
|
|
|
|
/**
|
|
* @function registerImage
|
|
* @memberof ImageGallery.prototype
|
|
* @desc Add an image to the gallery. Called from sgZoomableImage directive.
|
|
*/
|
|
ImageGallery.prototype.registerImage = function(element) {
|
|
this.elements.push(element);
|
|
};
|
|
|
|
/**
|
|
* @function registerHotkeys
|
|
* @memberof ImageGallery.prototype
|
|
* @desc Allow keyboard navigation
|
|
*/
|
|
ImageGallery.prototype.registerHotkeys = function($ctrl) {
|
|
this.keys = [
|
|
ImageGallery.sgHotkeys.createHotkey({
|
|
key: 'left',
|
|
description: l('View previous item'),
|
|
callback: angular.bind($ctrl, $ctrl.previousImage)
|
|
}),
|
|
ImageGallery.sgHotkeys.createHotkey({
|
|
key: 'right',
|
|
description: l('View next item'),
|
|
callback: angular.bind($ctrl, $ctrl.nextImage)
|
|
})
|
|
];
|
|
_.forEach(this.keys, function(key) {
|
|
ImageGallery.sgHotkeys.registerHotkey(key);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* @function showGallery
|
|
* @memberof ImageGallery.prototype
|
|
* @desc Build and show the md-panel
|
|
*/
|
|
ImageGallery.prototype.showGallery = function($event, partIndex) {
|
|
var _this = this,
|
|
$mdPanel = ImageGallery.$mdPanel,
|
|
partSrc = angular.element(this.message.$content()[partIndex].content).find('img')[0].src;
|
|
|
|
var _findImages = function (parts, images) {
|
|
_.forEach(parts, function (part) {
|
|
if (part.type == 'UIxMailPartImageViewer') {
|
|
images.push(part);
|
|
}
|
|
else if (typeof part.content != 'string') {
|
|
_findImages(part.content, images);
|
|
}
|
|
});
|
|
};
|
|
var images = [];
|
|
_findImages(this.message.$content(), images);
|
|
|
|
var selectedIndex = _.findIndex(images, function(image) {
|
|
return partSrc.indexOf(image.viewURL) >= 0;
|
|
});
|
|
|
|
// Add a class to the body in order to modify the panel backdrop opacity
|
|
angular.element(ImageGallery.$document[0].body).addClass('sg-image-gallery-backdrop');
|
|
|
|
// Fullscreen panel
|
|
var panelPosition = $mdPanel.newPanelPosition()
|
|
.absolute();
|
|
|
|
var panelAnimation = $mdPanel.newPanelAnimation()
|
|
.openFrom($event.target)
|
|
.duration(100)
|
|
.withAnimation($mdPanel.animation.FADE);
|
|
|
|
var config = {
|
|
attachTo: angular.element(document.body),
|
|
locals: {
|
|
lastIndex: images.length -1,
|
|
images: images,
|
|
selectedIndex: selectedIndex,
|
|
selectedImage: images[selectedIndex]
|
|
},
|
|
bindToController: true,
|
|
controller: PanelController,
|
|
controllerAs: '$panelCtrl',
|
|
position: panelPosition,
|
|
animation: panelAnimation,
|
|
targetEvent: $event,
|
|
fullscreen: true,
|
|
hasBackdrop: true,
|
|
template: [
|
|
'<sg-image-gallery layout="column">',
|
|
' <div class="md-toolbar-tools" layout="row" layout-align="space-between center">',
|
|
' <md-button class="md-icon-button"',
|
|
' aria-label="' + l('Close') + '"',
|
|
' ng-click="$panelCtrl.close()">',
|
|
' <md-icon>arrow_back</md-icon>',
|
|
' </md-button>',
|
|
' <md-icon class="md-primary">image</md-icon>',
|
|
' <div md-truncate class="md-flex" ng-bind="$panelCtrl.selectedImage.filename"></div>',
|
|
' <md-button class="md-icon-button"',
|
|
' aria-label="' + l('Save Attachment') + '"',
|
|
' ng-href="{{$panelCtrl.selectedImage.downloadURL}}">',
|
|
' <md-icon>file_download</md-icon>',
|
|
' </md-button>',
|
|
' </div>',
|
|
' <div class="md-flex" layout="row" layout-align="space-between center">',
|
|
' <md-button class="md-icon-button" ng-click="$panelCtrl.previousImage()"',
|
|
' ng-disabled="$panelCtrl.selectedIndex == 0">',
|
|
' <md-icon>navigate_before</md-icon>',
|
|
' </md-button>',
|
|
' <img class="sg-image" ng-src="{{$panelCtrl.selectedImage.viewURL}}">',
|
|
' <md-button class="md-icon-button" ng-click="$panelCtrl.nextImage()"',
|
|
' ng-disabled="$panelCtrl.selectedIndex == $panelCtrl.lastIndex">',
|
|
' <md-icon>navigate_next</md-icon>',
|
|
' </md-button>',
|
|
' </div>',
|
|
' <div class="sg-image-thumbnails">',
|
|
' <div class="sg-image-thumbnail" ng-repeat="image in ::$panelCtrl.images">',
|
|
' <img class="sg-hide" ng-src="{{::image.viewURL}}" ng-click="$panelCtrl.selectImage($index)">',
|
|
' </div>',
|
|
' </div>',
|
|
'</sg-image-gallery>'
|
|
].join(''),
|
|
trapFocus: true,
|
|
clickOutsideToClose: true,
|
|
escapeToClose: true,
|
|
focusOnOpen: true,
|
|
onOpenComplete: function() {
|
|
_this.show = true;
|
|
_.forEach(ImageGallery.$document.find('sg-image-gallery')[0].getElementsByClassName('sg-image-thumbnail'),
|
|
function(imgContainer) {
|
|
var imgEl = imgContainer.children[0];
|
|
angular.element(imgEl).one('load', function() {
|
|
if (imgEl.naturalWidth < imgEl.naturalHeight)
|
|
imgEl.classList.add('portrait');
|
|
});
|
|
// Display thumbnail
|
|
ImageGallery.$timeout(function() {
|
|
imgEl.classList.remove('sg-hide');
|
|
}, 1000);
|
|
});
|
|
},
|
|
onDomRemoved: function() {
|
|
angular.element(ImageGallery.$document[0].body).removeClass('sg-image-gallery-backdrop');
|
|
_this.show = false;
|
|
// Deregister hotkeys
|
|
_.forEach(_this.hotkeys, function(key) {
|
|
ImageGallery.sgHotkeys.deregisterHotkey(key);
|
|
});
|
|
}
|
|
};
|
|
|
|
$mdPanel.open(config).then(function(mdPanelRef) {
|
|
_this.registerHotkeys(mdPanelRef.$ctrl);
|
|
});
|
|
|
|
PanelController.$inject = ['mdPanelRef'];
|
|
function PanelController(mdPanelRef) {
|
|
var $menuCtrl = this;
|
|
|
|
mdPanelRef.$ctrl = this;
|
|
|
|
this.close = function() {
|
|
mdPanelRef.close();
|
|
};
|
|
|
|
this.selectImage = function(index) {
|
|
this.selectedIndex = index;
|
|
this.selectedImage = this.images[index];
|
|
};
|
|
|
|
this.nextImage = function() {
|
|
if (this.selectedIndex != this.lastIndex)
|
|
this.selectImage(this.selectedIndex + 1);
|
|
};
|
|
|
|
this.previousImage = function() {
|
|
if (this.selectedIndex > 0)
|
|
this.selectImage(this.selectedIndex - 1);
|
|
};
|
|
|
|
} // PanelController
|
|
|
|
};
|
|
|
|
/* Factory registration in Angular module */
|
|
angular.module('SOGo.MailerUI')
|
|
.factory('ImageGallery', ImageGallery.$factory);
|
|
|
|
})();
|