(function(){
|
'use strict';
|
|
// Key codes
|
var keys = {
|
enter : 13,
|
esc : 27,
|
left : 37,
|
right : 39
|
};
|
|
angular
|
.module('thatisuday.ng-image-gallery', ['ngAnimate'])
|
.provider('ngImageGalleryOpts', function(){
|
var defOpts = {
|
thumbnails : true,
|
thumbSize : 80,
|
inline : false,
|
bubbles : true,
|
bubbleSize : 20,
|
imgBubbles : false,
|
bgClose : false,
|
piracy : false,
|
imgAnim : 'fadeup',
|
errorPlaceHolder: 'Error when loading the image!'
|
};
|
|
return{
|
setOpts : function(newOpts){
|
angular.extend(defOpts, newOpts);
|
},
|
$get : function(){
|
return defOpts;
|
}
|
}
|
})
|
.filter('ngImageGalleryTrust', ['$sce', function($sce) {
|
return function(value, type) {
|
// Defaults to treating trusted value as `html`
|
return $sce.trustAs(type || 'html', value);
|
}
|
}])
|
.directive('ngRightClick', ['$parse', function($parse){
|
return {
|
restrict: "A",
|
scope : false,
|
link : function(scope, element, attrs){
|
element.bind('contextmenu', function(event){
|
if(scope.piracy == false){
|
event.preventDefault();
|
return scope.piracy;
|
}
|
});
|
}
|
};
|
}])
|
.directive("showImageAsync", [function(){
|
return {
|
restrict: "A",
|
scope: false,
|
link: function (scope, element, attributes){
|
var image = new Image();
|
image.src = attributes.showImageAsync;
|
image.onload = function(){
|
scope.$apply(function(){
|
if(attributes.asyncKind == 'thumb'){
|
element.css({ backgroundImage: 'url("' + attributes.showImageAsync + '")' });
|
element.empty(); // remove loading animation element
|
}
|
else if(attributes.asyncKind == 'bubble'){
|
element.css({ backgroundImage: 'url("' + attributes.showImageAsync + '")' });
|
}
|
});
|
};
|
image.onerror = function(){
|
element.empty(); // remove loading animation element
|
}
|
}
|
};
|
}])
|
.directive("bubbleAutoFit", ['$window', '$timeout', function($window, $timeout){
|
return {
|
restrict: "A",
|
scope: false,
|
link: {
|
pre : function (scope, element, attributes){
|
var autoFitBubbles = function(){
|
var scrollerWidth = element[0].getBoundingClientRect().width;
|
if(scrollerWidth == 0) return;
|
|
var bubbleSize = scope.bubbleSize;
|
var minMargin = 4 + 4; // left+right
|
var bubbleSpace = (bubbleSize + minMargin);
|
var rawQuotient = scrollerWidth / bubbleSpace;
|
var bubblesInView = Math.floor(rawQuotient);
|
var extraSpace = scrollerWidth - (bubblesInView * bubbleSpace);
|
var extraMargin = extraSpace / bubblesInView;
|
var bubbleMargin = minMargin + extraMargin;
|
var finalBubbleSpace = bubbleMargin + bubbleSize;
|
|
scope._bubblesInView = bubblesInView;
|
scope._finalBubbleSpace = finalBubbleSpace;
|
scope._bubbleMargin = '0 ' + (bubbleMargin/2) + 'px';
|
|
scope._safeApply(angular.noop);
|
};
|
|
$timeout(autoFitBubbles);
|
|
angular.element($window).bind('resize', function(){
|
$timeout(autoFitBubbles);
|
});
|
scope.$watch('inline', function(){
|
$timeout(autoFitBubbles);
|
});
|
scope.$watch('bubbleSize', function(){
|
$timeout(autoFitBubbles);
|
});
|
scope.$watchCollection('images', function(){
|
$timeout(autoFitBubbles);
|
});
|
}
|
}
|
};
|
}])
|
.directive("bubbleAutoScroll", ['$window', '$timeout', function($window, $timeout){
|
return {
|
restrict: "A",
|
scope: false,
|
link: function (scope, element, attributes){
|
|
var indexCalc = function(){
|
var relativeIndexToBubbleWrapper = scope._bubblesInView - (scope._bubblesInView - scope._activeImageIndex);
|
|
$timeout(function(){
|
if(relativeIndexToBubbleWrapper > scope._bubblesInView - 2){
|
var outBubbles = ((scope._activeImageIndex+1) - scope._bubblesInView) + 1;
|
|
if(scope._activeImageIndex != (scope.images.length - 1)){
|
scope._bubblesContainerMarginLeft = '-' + (scope._finalBubbleSpace * outBubbles) + 'px';
|
}
|
else{
|
scope._bubblesContainerMarginLeft = '-' + (scope._finalBubbleSpace * (outBubbles - 1)) + 'px';
|
}
|
}
|
else{
|
scope._bubblesContainerMarginLeft = '0px';
|
}
|
});
|
}
|
|
angular.element($window).bind('resize', function(){
|
$timeout(indexCalc);
|
});
|
scope.$watch('_bubblesInView', function(){
|
$timeout(indexCalc);
|
});
|
scope.$watch('_activeImageIndex', function(){
|
$timeout(indexCalc);
|
});
|
scope.$watchCollection('images', function(){
|
$timeout(indexCalc);
|
});
|
}
|
};
|
}])
|
.directive('ngImageGallery', ['$rootScope', '$timeout', '$q', 'ngImageGalleryOpts',
|
function($rootScope, $timeout, $q, ngImageGalleryOpts){
|
return {
|
replace : true,
|
transclude : false,
|
restrict : 'AE',
|
scope : {
|
images : '=', // []
|
methods : '=?', // {}
|
conf : '=?', // {}
|
|
thumbnails : '=?', // true|false
|
thumbSize : '=?', // px
|
inline : '=?', // true|false
|
bubbles : '=?', // true|false
|
bubbleSize : '=?', // px
|
imgBubbles : '=?', // true|false
|
bgClose : '=?', // true|false
|
piracy : '=?', // true|false
|
imgAnim : '@?', // {name}
|
errorPlaceHolder: '@?', // {name}
|
|
onOpen : '&?', // function
|
onClose : '&?', // function,
|
onDelete : '&?'
|
},
|
template : '<div class="ng-image-gallery img-move-dir-{{_imgMoveDirection}}" ng-class="{inline:inline}" ng-hide="images.length == 0">'+
|
|
// Thumbnails container
|
// Hide for inline gallery
|
'<div ng-if="thumbnails && !inline" class="ng-image-gallery-thumbnails">' +
|
'<div class="thumb" ng-repeat="image in images track by image.id" ng-click="methods.open($index);" show-image-async="{{image.thumbUrl || image.url}}" async-kind="thumb" ng-style="{\'width\' : thumbSize+\'px\', \'height\' : thumbSize+\'px\'}">'+
|
'<div class="loader"></div>'+
|
'</div>' +
|
'</div>' +
|
|
// Modal container
|
// (inline container for inline modal)
|
'<div class="ng-image-gallery-modal" ng-if="opened" ng-cloak>' +
|
|
// Gallery backdrop container
|
// (hide for inline gallery)
|
'<div class="ng-image-gallery-backdrop" ng-if="!inline"></div>'+
|
|
// Gallery contents container
|
// (hide when image is loading)
|
'<div class="ng-image-gallery-content" ng-show="!imgLoading" ng-click="backgroundClose($event);">'+
|
|
// actions icons container
|
'<div class="actions-icons-container">'+
|
// Delete image icon
|
'<div class="delete-img" ng-repeat="image in images track by image.id" ng-if="_activeImg == image && image.deletable" title="Delete this image..." ng-click="_deleteImg(image)"></div>'+
|
'</div>'+
|
|
// control icons container
|
'<div class="control-icons-container">'+
|
// External link icon
|
'<a class="ext-url" ng-repeat="image in images track by image.id" ng-if="_activeImg == image && image.extUrl" href="{{image.extUrl}}" target="_blank" title="Open image in new tab..."></a>'+
|
|
// Close Icon (hidden in inline gallery)
|
'<div class="close" ng-click="methods.close();" ng-if="!inline"></div>'+
|
'</div>'+
|
|
// Prev-Next Icons
|
// Add `bubbles-on` class when bubbles are enabled (for offset)
|
'<div class="prev" ng-click="methods.prev();" ng-class="{\'bubbles-on\':bubbles}" ng-hide="images.length == 1"></div>'+
|
'<div class="next" ng-click="methods.next();" ng-class="{\'bubbles-on\':bubbles}" ng-hide="images.length == 1"></div>'+
|
|
// Galleria container
|
'<div class="galleria">'+
|
|
// Images container
|
'<div class="galleria-images img-anim-{{imgAnim}} img-move-dir-{{_imgMoveDirection}}">'+
|
'<img class="galleria-image" ng-right-click ng-repeat="image in images track by image.id" ng-if="_activeImg == image" ng-src="{{image.url}}" ondragstart="return false;" ng-attr-alt="{{image.alt || undefined}}"/>'+
|
'</div>'+
|
|
// Image description container
|
'<div class="galleria-title-description-wrapper">'+
|
'<div ng-repeat="image in images track by image.id" ng-if="(image.title || image.desc) && (_activeImg == image)">'+
|
'<div class="title" ng-if="image.title" ng-bind-html="image.title | ngImageGalleryTrust"></div>'+
|
'<div class="desc" ng-if="image.desc" ng-bind-html="image.desc | ngImageGalleryTrust"></div>'+
|
'</div>'+
|
'</div>'+
|
|
// Bubble navigation container
|
'<div class="galleria-bubbles-wrapper" ng-if="bubbles && !imgBubbles" ng-hide="images.length == 1" ng-style="{\'height\' : bubbleSize+\'px\'}" bubble-auto-fit>'+
|
'<div class="galleria-bubbles" bubble-auto-scroll ng-style="{\'margin-left\': _bubblesContainerMarginLeft}">'+
|
'<span class="galleria-bubble" ng-click="_setActiveImg(image);" ng-repeat="image in images track by image.id" ng-class="{active : (_activeImg == image)}" ng-style="{\'width\' : bubbleSize+\'px\', \'height\' : bubbleSize+\'px\', margin: _bubbleMargin}"></span>'+
|
'</div>'+
|
'</div>'+
|
|
// Image bubble navigation container
|
'<div class="galleria-bubbles-wrapper" ng-if="bubbles && imgBubbles" ng-hide="images.length == 1" ng-style="{\'height\' : bubbleSize+\'px\'}" bubble-auto-fit>'+
|
'<div class="galleria-bubbles" bubble-auto-scroll ng-style="{\'margin-left\': _bubblesContainerMarginLeft}">'+
|
'<span class="galleria-bubble img-bubble" ng-click="_setActiveImg(image);" ng-repeat="image in images track by image.id" ng-class="{active : (_activeImg == image)}" show-image-async="{{image.bubbleUrl || image.thumbUrl || image.url}}" async-kind="bubble" ng-style="{\'width\' : bubbleSize+\'px\', \'height\' : bubbleSize+\'px\', \'border-width\' : bubbleSize/10+\'px\', margin: _bubbleMargin}"></span>'+
|
'</div>'+
|
'</div>'+
|
|
'</div>'+
|
|
'</div>'+
|
|
// Loading animation overlay container
|
// (show when image is loading)
|
'<div class="ng-image-gallery-loader" ng-show="imgLoading">'+
|
'<div class="spinner">'+
|
'<div class="rect1"></div>'+
|
'<div class="rect2"></div>'+
|
'<div class="rect3"></div>'+
|
'<div class="rect4"></div>'+
|
'<div class="rect5"></div>'+
|
'</div>'+
|
'</div>'+
|
|
// (show when image cannot be loaded)
|
'<div class="ng-image-gallery-errorplaceholder" ng-show="imgError">'+
|
'<div class="ng-image-gallery-error-placeholder" ng-bind-html="errorPlaceHolder | ngImageGalleryTrust"></div>'+
|
'</div>'+
|
'</div>'+
|
'</div>',
|
|
link : {
|
pre : function(scope, elem, attr){
|
|
/*
|
* Operational functions
|
**/
|
|
// Show gallery loader
|
scope._showLoader = function(){
|
scope.imgLoading = true;
|
}
|
|
// Hide gallery loader
|
scope._hideLoader = function(){
|
scope.imgLoading = false;
|
}
|
|
// Image load complete promise
|
scope._loadImg = function(imgObj){
|
|
// Return rejected promise
|
// if not image object received
|
if(!imgObj) return $q.reject();
|
|
var deferred = $q.defer();
|
|
// Show loder
|
if(!imgObj.hasOwnProperty('cached')) scope._showLoader();
|
|
// Process image
|
var img = new Image();
|
img.src = imgObj.url;
|
img.onload = function(){
|
// Hide loder
|
if(!imgObj.hasOwnProperty('cached')) scope._hideLoader();
|
|
// Cache image
|
if(!imgObj.hasOwnProperty('cached')) imgObj.cached = true;
|
|
deferred.resolve(imgObj);
|
}
|
img.onerror = function(){
|
if(!imgObj.hasOwnProperty('cached')) scope._hideLoader();
|
|
deferred.reject('Error when loading img');
|
}
|
|
return deferred.promise;
|
}
|
|
scope._setActiveImg = function(imgObj){
|
// Get images move direction
|
if(
|
scope.images.indexOf(scope._activeImg) - scope.images.indexOf(imgObj) == (scope.images.length - 1) ||
|
(
|
scope.images.indexOf(scope._activeImg) - scope.images.indexOf(imgObj) <= 0 &&
|
scope.images.indexOf(scope._activeImg) - scope.images.indexOf(imgObj) != -(scope.images.length - 1)
|
)
|
|
){
|
scope._imgMoveDirection = 'forward';
|
}
|
else{
|
scope._imgMoveDirection = 'backward';
|
}
|
|
// Load image
|
scope._loadImg(imgObj).then(function(imgObj){
|
scope._activeImg = imgObj;
|
scope._activeImageIndex = scope.images.indexOf(imgObj);
|
scope.imgError = false;
|
}, function(){
|
scope._activeImg = null;
|
scope._activeImageIndex = scope.images.indexOf(imgObj);
|
scope.imgError = true;
|
})
|
;
|
}
|
|
scope._safeApply = function(fn){
|
var phase = this.$root.$$phase;
|
if(phase == '$apply' || phase == '$digest'){
|
if(fn && (typeof(fn) === 'function')){
|
fn();
|
}
|
}else{
|
this.$apply(fn);
|
}
|
};
|
|
scope._deleteImg = function(img){
|
var _deleteImgCallback = function(){
|
var index = scope.images.indexOf(img);
|
console.log(index);
|
scope.images.splice(index, 1);
|
scope._activeImageIndex = 0;
|
|
/**/
|
}
|
|
scope.onDelete({img: img, cb: _deleteImgCallback});
|
}
|
|
|
/***************************************************/
|
|
|
/*
|
* Gallery settings
|
**/
|
|
// Modify scope models
|
scope.images = (scope.images != undefined) ? scope.images : [];
|
scope.methods = (scope.methods != undefined) ? scope.methods : {};
|
scope.conf = (scope.conf != undefined) ? scope.conf : {};
|
|
// setting options
|
scope.$watchCollection('conf', function(conf){
|
scope.thumbnails = (conf.thumbnails != undefined) ? conf.thumbnails : (scope.thumbnails != undefined) ? scope.thumbnails : ngImageGalleryOpts.thumbnails;
|
scope.thumbSize = (conf.thumbSize != undefined) ? conf.thumbSize : (scope.thumbSize != undefined) ? scope.thumbSize : ngImageGalleryOpts.thumbSize;
|
scope.inline = (conf.inline != undefined) ? conf.inline : (scope.inline != undefined) ? scope.inline : ngImageGalleryOpts.inline;
|
scope.bubbles = (conf.bubbles != undefined) ? conf.bubbles : (scope.bubbles != undefined) ? scope.bubbles : ngImageGalleryOpts.bubbles;
|
scope.bubbleSize = (conf.bubbleSize != undefined) ? conf.bubbleSize : (scope.bubbleSize != undefined) ? scope.bubbleSize : ngImageGalleryOpts.bubbleSize;
|
scope.imgBubbles = (conf.imgBubbles != undefined) ? conf.imgBubbles : (scope.imgBubbles != undefined) ? scope.imgBubbles : ngImageGalleryOpts.imgBubbles;
|
scope.bgClose = (conf.bgClose != undefined) ? conf.bgClose : (scope.bgClose != undefined) ? scope.bgClose : ngImageGalleryOpts.bgClose;
|
scope.piracy = (conf.piracy != undefined) ? conf.piracy : (scope.piracy != undefined) ? scope.piracy : ngImageGalleryOpts.piracy;
|
scope.imgAnim = (conf.imgAnim != undefined) ? conf.imgAnim : (scope.imgAnim != undefined) ? scope.imgAnim : ngImageGalleryOpts.imgAnim;
|
scope.errorPlaceHolder = (conf.errorPlaceHolder != undefined) ? conf.errorPlaceHolder : (scope.errorPlaceHolder != undefined) ? scope.errorPlaceHolder : ngImageGalleryOpts.errorPlaceHolder;
|
});
|
|
scope.onOpen = (scope.onOpen != undefined) ? scope.onOpen : angular.noop;
|
scope.onClose = (scope.onClose != undefined) ? scope.onClose : angular.noop;
|
scope.onDelete = (scope.onDelete != undefined) ? scope.onDelete : angular.noop;
|
|
// If images populate dynamically, reset gallery
|
var imagesFirstWatch = true;
|
scope.$watchCollection('images', function(){
|
if(imagesFirstWatch){
|
imagesFirstWatch = false;
|
}
|
else if(scope.images.length){
|
scope._setActiveImg(scope.images[scope._activeImageIndex || 0]);
|
}
|
});
|
|
// Watch index of visible/active image
|
// If index changes, make sure to load/change image
|
var activeImageIndexFirstWatch = true;
|
scope.$watch('_activeImageIndex', function(newImgIndex){
|
if(activeImageIndexFirstWatch){
|
activeImageIndexFirstWatch = false;
|
}
|
else if(scope.images.length){
|
scope._setActiveImg(
|
scope.images[newImgIndex]
|
);
|
}
|
});
|
|
// Open modal automatically if inline
|
scope.$watch('inline', function(){
|
$timeout(function(){
|
if(scope.inline) scope.methods.open();
|
});
|
});
|
|
|
/***************************************************/
|
|
|
/*
|
* Methods
|
**/
|
|
// Open gallery modal
|
scope.methods.open = function(imgIndex){
|
// Open modal from an index if one passed
|
scope._activeImageIndex = (imgIndex) ? imgIndex : 0;
|
|
scope.opened = true;
|
|
// set overflow hidden to body
|
if(!scope.inline) angular.element(document.body).addClass('body-overflow-hidden');
|
|
// call open event after transition
|
$timeout(function(){
|
scope.onOpen();
|
}, 300);
|
}
|
|
// Close gallery modal
|
scope.methods.close = function(){
|
scope.opened = false; // Model closed
|
|
// set overflow hidden to body
|
angular.element(document.body).removeClass('body-overflow-hidden');
|
|
// call close event after transition
|
$timeout(function(){
|
scope.onClose();
|
scope._activeImageIndex = 0; // Reset index
|
}, 300);
|
}
|
|
// Change image to next
|
scope.methods.next = function(){
|
if(scope._activeImageIndex == (scope.images.length - 1)){
|
scope._activeImageIndex = 0;
|
}
|
else{
|
scope._activeImageIndex = scope._activeImageIndex + 1;
|
}
|
}
|
|
// Change image to prev
|
scope.methods.prev = function(){
|
if(scope._activeImageIndex == 0){
|
scope._activeImageIndex = scope.images.length - 1;
|
}
|
else{
|
scope._activeImageIndex--;
|
}
|
}
|
|
// Close gallery on background click
|
scope.backgroundClose = function(e){
|
if(!scope.bgClose || scope.inline) return;
|
|
var noCloseClasses = [
|
'galleria-image',
|
'destroy-icons-container',
|
'ext-url',
|
'close',
|
'next',
|
'prev',
|
'galleria-bubble'
|
];
|
|
// check if clicked element has a class that
|
// belongs to `noCloseClasses`
|
for(var i = 0; i < e.target.classList.length; i++){
|
if(noCloseClasses.indexOf(e.target.classList[i]) != -1){
|
break;
|
}
|
else{
|
scope.methods.close();
|
}
|
}
|
}
|
|
|
/***************************************************/
|
|
|
/*
|
* User interactions
|
**/
|
|
// Key events
|
angular.element(document).bind('keyup', function(event){
|
// If inline modal, do not interact
|
if(scope.inline) return;
|
|
if(event.which == keys.right || event.which == keys.enter){
|
$timeout(function(){
|
scope.methods.next();
|
});
|
}
|
else if(event.which == keys.left){
|
$timeout(function(){
|
scope.methods.prev();
|
});
|
}
|
else if(event.which == keys.esc){
|
$timeout(function(){
|
scope.methods.close();
|
});
|
}
|
});
|
|
// Swipe events
|
if(window.Hammer){
|
var hammerElem = new Hammer(elem[0]);
|
hammerElem.on('swiperight', function(ev){
|
$timeout(function(){
|
scope.methods.prev();
|
});
|
});
|
hammerElem.on('swipeleft', function(ev){
|
$timeout(function(){
|
scope.methods.next();
|
});
|
});
|
hammerElem.on('doubletap', function(ev){
|
if(scope.inline) return;
|
|
$timeout(function(){
|
scope.methods.close();
|
});
|
});
|
};
|
|
|
/***********************************************************/
|
|
|
/*
|
* Actions on angular events
|
**/
|
|
var removeClassFromDocumentBody = function(){
|
angular.element(document.body).removeClass('body-overflow-hidden');
|
};
|
|
$rootScope.$on('$stateChangeSuccess', removeClassFromDocumentBody);
|
$rootScope.$on('$routeChangeSuccess', removeClassFromDocumentBody);
|
|
}
|
}
|
}
|
}]);
|
})();
|
