diff --git a/README.md b/README.md index e4e3fbe..a375688 100644 --- a/README.md +++ b/README.md @@ -92,11 +92,20 @@ If you make your own template and save it at `lightbox.html`, no further code is ```js angular.module('app').config(function (LightboxProvider) { - // set a custom template + // set a custom template path LightboxProvider.templateUrl = 'path/to/your-template.html'; }); ``` +Alternatively, you can set an inline template in the provider: + +```js +angular.module('app').config(function (LightboxProvider) { + // set a custom template + LightboxProvider.template = '

Customized

lightbox

'; +}); +``` + ### Disabling the keyboard navigation The keyboard navigation in the lightbox with the left/right arrow keys can be enabled/disabled at any time by changing the value of the boolean `Lightbox.keyboardNavEnabled`. diff --git a/api.md b/api.md index 9065c33..afea602 100644 --- a/api.md +++ b/api.md @@ -1,43 +1,47 @@ + ## bootstrapLightbox : object **Kind**: global namespace * [bootstrapLightbox](#bootstrapLightbox) : object - * [.ImageLoader](#bootstrapLightbox.ImageLoader) - * [.load](#bootstrapLightbox.ImageLoader.load) ⇒ Promise - * [.Lightbox](#bootstrapLightbox.Lightbox) - * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : String - * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : Boolean - * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ String - * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ String - * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ Object - * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ Object - * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ Boolean - * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ Boolean - * [.images](#bootstrapLightbox.Lightbox.images) : Array - * [.index](#bootstrapLightbox.Lightbox.index) : Number - * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : Boolean - * [.image](#bootstrapLightbox.Lightbox.image) : \* - * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : Object - * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : String - * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : String - * [.loading](#bootstrapLightbox.Lightbox.loading) : Boolean - * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ Object - * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : function - * [.setImage](#bootstrapLightbox.Lightbox.setImage) : function - * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : function - * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : function - * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : function - * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : function - * [.setImages](#bootstrapLightbox.Lightbox.setImages) : function - * [.lightboxSrc](#bootstrapLightbox.lightboxSrc) + * [.ImageLoader](#bootstrapLightbox.ImageLoader) + * [.load](#bootstrapLightbox.ImageLoader.load) ⇒ Promise + * [.Lightbox](#bootstrapLightbox.Lightbox) + * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : String + * [.template](#bootstrapLightbox.Lightbox.template) : String + * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : Boolean + * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ String + * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ String + * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ Object + * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ Object + * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ Boolean + * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ Boolean + * [.images](#bootstrapLightbox.Lightbox.images) : Array + * [.index](#bootstrapLightbox.Lightbox.index) : Number + * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : Boolean + * [.image](#bootstrapLightbox.Lightbox.image) : \* + * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : Object + * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : String + * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : String + * [.loading](#bootstrapLightbox.Lightbox.loading) : Boolean + * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ Object + * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : function + * [.setImage](#bootstrapLightbox.Lightbox.setImage) : function + * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : function + * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : function + * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : function + * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : function + * [.setImages](#bootstrapLightbox.Lightbox.setImages) : function + * [.lightboxSrc](#bootstrapLightbox.lightboxSrc) + ### bootstrapLightbox.ImageLoader Service for loading an image. **Kind**: static class of [bootstrapLightbox](#bootstrapLightbox) + #### ImageLoader.load ⇒ Promise Load the image at the given URL. @@ -50,48 +54,59 @@ Load the image at the given URL. | url | String | + ### bootstrapLightbox.Lightbox Lightbox service. **Kind**: static class of [bootstrapLightbox](#bootstrapLightbox) * [.Lightbox](#bootstrapLightbox.Lightbox) - * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : String - * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : Boolean - * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ String - * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ String - * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ Object - * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ Object - * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ Boolean - * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ Boolean - * [.images](#bootstrapLightbox.Lightbox.images) : Array - * [.index](#bootstrapLightbox.Lightbox.index) : Number - * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : Boolean - * [.image](#bootstrapLightbox.Lightbox.image) : \* - * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : Object - * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : String - * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : String - * [.loading](#bootstrapLightbox.Lightbox.loading) : Boolean - * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ Object - * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : function - * [.setImage](#bootstrapLightbox.Lightbox.setImage) : function - * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : function - * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : function - * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : function - * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : function - * [.setImages](#bootstrapLightbox.Lightbox.setImages) : function + * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : String + * [.template](#bootstrapLightbox.Lightbox.template) : String + * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : Boolean + * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ String + * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ String + * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ Object + * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ Object + * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ Boolean + * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ Boolean + * [.images](#bootstrapLightbox.Lightbox.images) : Array + * [.index](#bootstrapLightbox.Lightbox.index) : Number + * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : Boolean + * [.image](#bootstrapLightbox.Lightbox.image) : \* + * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : Object + * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : String + * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : String + * [.loading](#bootstrapLightbox.Lightbox.loading) : Boolean + * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ Object + * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : function + * [.setImage](#bootstrapLightbox.Lightbox.setImage) : function + * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : function + * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : function + * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : function + * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : function + * [.setImages](#bootstrapLightbox.Lightbox.setImages) : function + #### Lightbox.templateUrl : String Template URL passed into `$uibModal.open()`. +**Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + + +#### Lightbox.template : String +Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`. + **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.fullScreenMode : Boolean Whether images should be scaled to the maximum possible dimensions. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.getImageUrl ⇒ String **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) **Returns**: String - The URL of the given image. @@ -101,6 +116,7 @@ Whether images should be scaled to the maximum possible dimensions. | image | \* | An element in the array of images. | + #### Lightbox.getImageCaption ⇒ String **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) **Returns**: String - The caption of the given image. @@ -110,6 +126,7 @@ Whether images should be scaled to the maximum possible dimensions. | image | \* | An element in the array of images. | + #### Lightbox.calculateImageDimensionLimits ⇒ Object Calculate the max and min limits to the width and height of the displayed image (all are optional). The max dimensions override the min @@ -124,6 +141,7 @@ Calculate the max and min limits to the width and height of the displayed | dimensions | Object | Contains the properties `windowWidth`, `windowHeight`, `imageWidth`, and `imageHeight`. | + #### Lightbox.calculateModalDimensions ⇒ Object Calculate the width and height of the modal. This method gets called after the width and height of the image, as displayed inside the modal, @@ -137,6 +155,7 @@ Calculate the width and height of the modal. This method gets called | dimensions | Object | Contains the properties `windowWidth`, `windowHeight`, `imageDisplayWidth`, and `imageDisplayHeight`. | + #### Lightbox.isVideo ⇒ Boolean **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) **Returns**: Boolean - Whether the provided element is a video. @@ -146,6 +165,7 @@ Calculate the width and height of the modal. This method gets called | image | \* | An element in the array of images. | + #### Lightbox.isSharedVideo ⇒ Boolean **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) **Returns**: Boolean - Whether the provided element is a video that is to be @@ -157,34 +177,40 @@ Calculate the width and height of the modal. This method gets called | image | \* | An element in the array of images. | + #### Lightbox.images : Array Array of all images to be shown in the lightbox (not `Image` objects). **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.index : Number The index in the `Lightbox.images` aray of the image that is currently shown in the lightbox. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.keyboardNavEnabled : Boolean Whether keyboard navigation is currently enabled for navigating through images in the lightbox. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.image : \* The image currently shown in the lightbox. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.modalInstance : Object The UI Bootstrap modal instance. See {@link http://angular-ui.github.io/bootstrap/#/modal}. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.imageUrl : String The URL of the current image. This is a property of the service rather than of `Lightbox.image` because `Lightbox.image` need not be an @@ -193,16 +219,19 @@ The URL of the current image. This is a property of the service rather **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.imageCaption : String The optional caption of the current image. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.loading : Boolean Whether an image is currently being loaded. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.openModal ⇒ Object Open the lightbox modal. @@ -216,6 +245,7 @@ Open the lightbox modal. | modalParams | Object | Custom params for the angular UI bootstrap modal (in $uibModal.open()). | + #### Lightbox.closeModal : function Close the lightbox modal. @@ -226,6 +256,7 @@ Close the lightbox modal. | result | \* | This argument can be useful if the modal promise gets handler(s) attached to it. | + #### Lightbox.setImage : function This method can be used in all methods which navigate/change the current image. @@ -237,26 +268,31 @@ This method can be used in all methods which navigate/change the | newIndex | Number | The index in the array of images to set as the new current image. | + #### Lightbox.firstImage : function Navigate to the first image. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.prevImage : function Navigate to the previous image. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.nextImage : function Navigate to the next image. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.lastImage : function Navigate to the last image. **Kind**: static property of [Lightbox](#bootstrapLightbox.Lightbox) + #### Lightbox.setImages : function Call this method to set both the array of images and the current image (based on the current index). A use case is when the image collection @@ -270,6 +306,7 @@ Call this method to set both the array of images and the current image | newImages | Array | The new array of images. | + ### bootstrapLightbox.lightboxSrc This attribute directive is used in an `` element in the modal template in place of `src`. It handles resizing both the `` diff --git a/dist/angular-bootstrap-lightbox.js b/dist/angular-bootstrap-lightbox.js index 3739278..f8108cc 100644 --- a/dist/angular-bootstrap-lightbox.js +++ b/dist/angular-bootstrap-lightbox.js @@ -85,6 +85,14 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { */ this.templateUrl = 'lightbox.html'; + /** + * Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`. + * @type {String} + * @name template + * @memberOf bootstrapLightbox.Lightbox + */ + this.template = null; + /** * Whether images should be scaled to the maximum possible dimensions. * @type {Boolean} @@ -251,6 +259,7 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { // set the configurable properties and methods, the defaults of which are // defined above Lightbox.templateUrl = this.templateUrl; + Lightbox.template = this.template; Lightbox.fullScreenMode = this.fullScreenMode; Lightbox.getImageUrl = this.getImageUrl; Lightbox.getImageCaption = this.getImageCaption; @@ -327,17 +336,27 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { Lightbox.images = newImages; Lightbox.setImage(newIndex); + var templateConfig = {}; + if (Lightbox.template !== null){ + templateConfig.template = Lightbox.template; + } else { + templateConfig.templateUrl = Lightbox.templateUrl; + } + // store the modal instance so we can close it manually if we need to - Lightbox.modalInstance = $uibModal.open(angular.extend({ - 'templateUrl': Lightbox.templateUrl, - 'controller': ['$scope', function ($scope) { - // $scope is the modal scope, a child of $rootScope - $scope.Lightbox = Lightbox; - - Lightbox.keyboardNavEnabled = true; - }], - 'windowClass': 'lightbox-modal' - }, modalParams || {})); + Lightbox.modalInstance = $uibModal.open(angular.extend( + templateConfig, + { + 'controller': ['$scope', function ($scope) { + // $scope is the modal scope, a child of $rootScope + $scope.Lightbox = Lightbox; + + Lightbox.keyboardNavEnabled = true; + }], + 'windowClass': 'lightbox-modal' + }, + modalParams || {} + )); // modal close handler Lightbox.modalInstance.result['finally'](function () { diff --git a/dist/angular-bootstrap-lightbox.min.js b/dist/angular-bootstrap-lightbox.min.js index 398a4a2..929020d 100644 --- a/dist/angular-bootstrap-lightbox.min.js +++ b/dist/angular-bootstrap-lightbox.min.js @@ -1,2 +1,2 @@ /*! angular-bootstrap-lightbox */ -angular.module("bootstrapLightbox",["ui.bootstrap"]);try{angular.module("angular-loading-bar"),angular.module("bootstrapLightbox").requires.push("angular-loading-bar")}catch(e){}try{angular.module("ngTouch"),angular.module("bootstrapLightbox").requires.push("ngTouch")}catch(e){}try{angular.module("videosharing-embed"),angular.module("bootstrapLightbox").requires.push("videosharing-embed")}catch(e){}angular.module("bootstrapLightbox").run(["$templateCache",function(a){"use strict";a.put("lightbox.html",'
‹ Previous Open image in new tab Next ›
{{Lightbox.imageCaption}}
Watch video
')}]),angular.module("bootstrapLightbox").service("ImageLoader",["$q",function(a){this.load=function(b){var c=a.defer(),d=new Image;return d.onload=function(){("boolean"==typeof this.complete&&this.complete===!1||"number"==typeof this.naturalWidth&&0===this.naturalWidth)&&c.reject(),c.resolve(d)},d.onerror=function(){c.reject()},d.src=b,c.promise}}]),angular.module("bootstrapLightbox").provider("Lightbox",function(){this.templateUrl="lightbox.html",this.fullScreenMode=!1,this.getImageUrl=function(a){return"string"==typeof a?a:a.url},this.getImageCaption=function(a){return a.caption},this.calculateImageDimensionLimits=function(a){return a.windowWidth>=768?{maxWidth:a.windowWidth-92,maxHeight:a.windowHeight-126}:{maxWidth:a.windowWidth-52,maxHeight:a.windowHeight-86}},this.calculateModalDimensions=function(a){var b=Math.max(400,a.imageDisplayWidth+32),c=Math.max(200,a.imageDisplayHeight+66);return(b>=a.windowWidth-20||a.windowWidth<768)&&(b="auto"),c>=a.windowHeight&&(c="auto"),{width:b,height:c}},this.isVideo=function(a){return"object"==typeof a&&a&&a.type?"video"===a.type:!1},this.isSharedVideo=function(a){return this.isVideo(a)&&!this.getImageUrl(a).match(/\.(mp4|ogg|webm)$/)},this.$get=["$document","$injector","$uibModal","$timeout","ImageLoader",function(a,b,c,d,e){var f=b.has("cfpLoadingBar")?b.get("cfpLoadingBar"):null,g={};return g.images=[],g.index=-1,g.templateUrl=this.templateUrl,g.fullScreenMode=this.fullScreenMode,g.getImageUrl=this.getImageUrl,g.getImageCaption=this.getImageCaption,g.calculateImageDimensionLimits=this.calculateImageDimensionLimits,g.calculateModalDimensions=this.calculateModalDimensions,g.isVideo=this.isVideo,g.isSharedVideo=this.isSharedVideo,g.keyboardNavEnabled=!1,g.image={},g.modalInstance=null,g.loading=!1,g.openModal=function(a,b,d){return g.images=a,g.setImage(b),g.modalInstance=c.open(angular.extend({templateUrl:g.templateUrl,controller:["$scope",function(a){a.Lightbox=g,g.keyboardNavEnabled=!0}],windowClass:"lightbox-modal"},d||{})),g.modalInstance.result["finally"](function(){g.images=[],g.index=1,g.image={},g.imageUrl=null,g.imageCaption=null,g.keyboardNavEnabled=!1,f&&f.complete()}),g.modalInstance},g.closeModal=function(a){return g.modalInstance.close(a)},g.setImage=function(a){if(!(a in g.images))throw"Invalid image.";g.loading=!0,f&&f.start();var b=g.images[a],c=g.getImageUrl(b),d=function(d){d=d||{},g.index=d.index||a,g.image=d.image||b,g.imageUrl=d.imageUrl||c,g.imageCaption=d.imageCaption||g.getImageCaption(b),g.loading=!1,f&&f.complete()};g.isVideo(b)?d():e.load(c).then(function(){d()},function(){d({imageUrl:"#",imageCaption:"Failed to load image"})})},g.firstImage=function(){g.setImage(0)},g.prevImage=function(){g.setImage((g.index-1+g.images.length)%g.images.length)},g.nextImage=function(){g.setImage((g.index+1)%g.images.length)},g.lastImage=function(){g.setImage(g.images.length-1)},g.setImages=function(a){g.images=a,g.setImage(g.index)},a.bind("keydown",function(a){if(g.keyboardNavEnabled){var b=null;switch(a.which){case 39:b="nextImage";break;case 37:b="prevImage"}null!==b&&-1===["input","textarea"].indexOf(a.target.tagName.toLowerCase())&&(d(function(){g[b]()}),a.preventDefault())}}),g}]}),angular.module("bootstrapLightbox").directive("lightboxSrc",["$window","ImageLoader","Lightbox",function(a,b,c){var d=function(a,b){var c=a.width,d=a.height,e=a.minWidth,f=a.minHeight,g=a.maxWidth,h=a.maxHeight,i=c,j=d;if(b){var k=Math.min(g/c,h/d),l=Math.round(c*k),m=Math.round(d*k);i=Math.max(e,l),j=Math.max(f,m)}else e>c&&f>d?c/d>g/h?(j=f,i=Math.round(c*f/d)):(i=e,j=Math.round(d*e/c)):e>c?(i=e,j=Math.round(d*e/c)):f>d&&(j=f,i=Math.round(c*f/d)),c>g&&d>h?c/d>g/h?(i=g,j=Math.round(d*g/c)):(j=h,i=Math.round(c*h/d)):c>g?(i=g,j=Math.round(d*g/c)):d>h&&(j=h,i=Math.round(c*h/d));return{width:i||0,height:j||0}},e=function(a){return"number"==typeof a?a+"px":a},f=0,g=0;return{link:function(h,i,j){var k=function(){var b=a.innerWidth,h=a.innerHeight,j=c.calculateImageDimensionLimits({windowWidth:b,windowHeight:h,imageWidth:f,imageHeight:g}),k=d(angular.extend({width:f,height:g,minWidth:1,minHeight:1,maxWidth:3e3,maxHeight:3e3},j),c.fullScreenMode),l=c.calculateModalDimensions({windowWidth:b,windowHeight:h,imageDisplayWidth:k.width,imageDisplayHeight:k.height});i.css({width:k.width+"px",height:k.height+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-dialog")).css({width:e(l.width)}),angular.element(document.querySelector(".lightbox-modal .modal-content")).css({height:e(l.height)})};h.$watch(function(){return j.lightboxSrc},function(a){if(c.image)if(c.isVideo(c.image))f=1280,g=720,k(),i[0].src=a;else{i[0].src="#";var d=function(){f=0,g=0,k()};a?b.load(a).then(function(b){f=b.naturalWidth,g=b.naturalHeight,k(),i[0].src=a},d):d()}}),angular.element(a).on("resize",k)}}}]); \ No newline at end of file +angular.module("bootstrapLightbox",["ui.bootstrap"]);try{angular.module("angular-loading-bar"),angular.module("bootstrapLightbox").requires.push("angular-loading-bar")}catch(e){}try{angular.module("ngTouch"),angular.module("bootstrapLightbox").requires.push("ngTouch")}catch(e){}try{angular.module("videosharing-embed"),angular.module("bootstrapLightbox").requires.push("videosharing-embed")}catch(e){}angular.module("bootstrapLightbox").run(["$templateCache",function(a){"use strict";a.put("lightbox.html",'
‹ Previous Open image in new tab Next ›
{{Lightbox.imageCaption}}
Watch video
')}]),angular.module("bootstrapLightbox").service("ImageLoader",["$q",function(a){this.load=function(b){var c=a.defer(),d=new Image;return d.onload=function(){("boolean"==typeof this.complete&&this.complete===!1||"number"==typeof this.naturalWidth&&0===this.naturalWidth)&&c.reject(),c.resolve(d)},d.onerror=function(){c.reject()},d.src=b,c.promise}}]),angular.module("bootstrapLightbox").provider("Lightbox",function(){this.templateUrl="lightbox.html",this.template=null,this.fullScreenMode=!1,this.getImageUrl=function(a){return"string"==typeof a?a:a.url},this.getImageCaption=function(a){return a.caption},this.calculateImageDimensionLimits=function(a){return a.windowWidth>=768?{maxWidth:a.windowWidth-92,maxHeight:a.windowHeight-126}:{maxWidth:a.windowWidth-52,maxHeight:a.windowHeight-86}},this.calculateModalDimensions=function(a){var b=Math.max(400,a.imageDisplayWidth+32),c=Math.max(200,a.imageDisplayHeight+66);return(b>=a.windowWidth-20||a.windowWidth<768)&&(b="auto"),c>=a.windowHeight&&(c="auto"),{width:b,height:c}},this.isVideo=function(a){return"object"==typeof a&&a&&a.type?"video"===a.type:!1},this.isSharedVideo=function(a){return this.isVideo(a)&&!this.getImageUrl(a).match(/\.(mp4|ogg|webm)$/)},this.$get=["$document","$injector","$uibModal","$timeout","ImageLoader",function(a,b,c,d,e){var f=b.has("cfpLoadingBar")?b.get("cfpLoadingBar"):null,g={};return g.images=[],g.index=-1,g.templateUrl=this.templateUrl,g.template=this.template,g.fullScreenMode=this.fullScreenMode,g.getImageUrl=this.getImageUrl,g.getImageCaption=this.getImageCaption,g.calculateImageDimensionLimits=this.calculateImageDimensionLimits,g.calculateModalDimensions=this.calculateModalDimensions,g.isVideo=this.isVideo,g.isSharedVideo=this.isSharedVideo,g.keyboardNavEnabled=!1,g.image={},g.modalInstance=null,g.loading=!1,g.openModal=function(a,b,d){g.images=a,g.setImage(b);var e={};return null!==g.template?e.template=g.template:e.templateUrl=g.templateUrl,g.modalInstance=c.open(angular.extend(e,{controller:["$scope",function(a){a.Lightbox=g,g.keyboardNavEnabled=!0}],windowClass:"lightbox-modal"},d||{})),g.modalInstance.result["finally"](function(){g.images=[],g.index=1,g.image={},g.imageUrl=null,g.imageCaption=null,g.keyboardNavEnabled=!1,f&&f.complete()}),g.modalInstance},g.closeModal=function(a){return g.modalInstance.close(a)},g.setImage=function(a){if(!(a in g.images))throw"Invalid image.";g.loading=!0,f&&f.start();var b=g.images[a],c=g.getImageUrl(b),d=function(d){d=d||{},g.index=d.index||a,g.image=d.image||b,g.imageUrl=d.imageUrl||c,g.imageCaption=d.imageCaption||g.getImageCaption(b),g.loading=!1,f&&f.complete()};g.isVideo(b)?d():e.load(c).then(function(){d()},function(){d({imageUrl:"#",imageCaption:"Failed to load image"})})},g.firstImage=function(){g.setImage(0)},g.prevImage=function(){g.setImage((g.index-1+g.images.length)%g.images.length)},g.nextImage=function(){g.setImage((g.index+1)%g.images.length)},g.lastImage=function(){g.setImage(g.images.length-1)},g.setImages=function(a){g.images=a,g.setImage(g.index)},a.bind("keydown",function(a){if(g.keyboardNavEnabled){var b=null;switch(a.which){case 39:b="nextImage";break;case 37:b="prevImage"}null!==b&&-1===["input","textarea"].indexOf(a.target.tagName.toLowerCase())&&(d(function(){g[b]()}),a.preventDefault())}}),g}]}),angular.module("bootstrapLightbox").directive("lightboxSrc",["$window","ImageLoader","Lightbox",function(a,b,c){var d=function(a,b){var c=a.width,d=a.height,e=a.minWidth,f=a.minHeight,g=a.maxWidth,h=a.maxHeight,i=c,j=d;if(b){var k=Math.min(g/c,h/d),l=Math.round(c*k),m=Math.round(d*k);i=Math.max(e,l),j=Math.max(f,m)}else e>c&&f>d?c/d>g/h?(j=f,i=Math.round(c*f/d)):(i=e,j=Math.round(d*e/c)):e>c?(i=e,j=Math.round(d*e/c)):f>d&&(j=f,i=Math.round(c*f/d)),c>g&&d>h?c/d>g/h?(i=g,j=Math.round(d*g/c)):(j=h,i=Math.round(c*h/d)):c>g?(i=g,j=Math.round(d*g/c)):d>h&&(j=h,i=Math.round(c*h/d));return{width:i||0,height:j||0}},e=function(a){return"number"==typeof a?a+"px":a},f=0,g=0;return{link:function(h,i,j){var k=function(){var b=a.innerWidth,h=a.innerHeight,j=c.calculateImageDimensionLimits({windowWidth:b,windowHeight:h,imageWidth:f,imageHeight:g}),k=d(angular.extend({width:f,height:g,minWidth:1,minHeight:1,maxWidth:3e3,maxHeight:3e3},j),c.fullScreenMode),l=c.calculateModalDimensions({windowWidth:b,windowHeight:h,imageDisplayWidth:k.width,imageDisplayHeight:k.height});i.css({width:k.width+"px",height:k.height+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-dialog")).css({width:e(l.width)}),angular.element(document.querySelector(".lightbox-modal .modal-content")).css({height:e(l.height)})};h.$watch(function(){return j.lightboxSrc},function(a){if(c.image)if(c.isVideo(c.image))f=1280,g=720,k(),i[0].src=a;else{i[0].src="#";var d=function(){f=0,g=0,k()};a?b.load(a).then(function(b){f=b.naturalWidth,g=b.naturalHeight,k(),i[0].src=a},d):d()}}),angular.element(a).on("resize",k)}}}]); \ No newline at end of file diff --git a/src/lightbox-service.js b/src/lightbox-service.js index 1771537..01934f1 100644 --- a/src/lightbox-service.js +++ b/src/lightbox-service.js @@ -12,6 +12,14 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { */ this.templateUrl = 'lightbox.html'; + /** + * Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`. + * @type {String} + * @name template + * @memberOf bootstrapLightbox.Lightbox + */ + this.template = null; + /** * Whether images should be scaled to the maximum possible dimensions. * @type {Boolean} @@ -178,6 +186,7 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { // set the configurable properties and methods, the defaults of which are // defined above Lightbox.templateUrl = this.templateUrl; + Lightbox.template = this.template; Lightbox.fullScreenMode = this.fullScreenMode; Lightbox.getImageUrl = this.getImageUrl; Lightbox.getImageCaption = this.getImageCaption; @@ -254,17 +263,27 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () { Lightbox.images = newImages; Lightbox.setImage(newIndex); + var templateConfig = {}; + if (Lightbox.template !== null){ + templateConfig.template = Lightbox.template; + } else { + templateConfig.templateUrl = Lightbox.templateUrl; + } + // store the modal instance so we can close it manually if we need to - Lightbox.modalInstance = $uibModal.open(angular.extend({ - 'templateUrl': Lightbox.templateUrl, - 'controller': ['$scope', function ($scope) { - // $scope is the modal scope, a child of $rootScope - $scope.Lightbox = Lightbox; - - Lightbox.keyboardNavEnabled = true; - }], - 'windowClass': 'lightbox-modal' - }, modalParams || {})); + Lightbox.modalInstance = $uibModal.open(angular.extend( + templateConfig, + { + 'controller': ['$scope', function ($scope) { + // $scope is the modal scope, a child of $rootScope + $scope.Lightbox = Lightbox; + + Lightbox.keyboardNavEnabled = true; + }], + 'windowClass': 'lightbox-modal' + }, + modalParams || {} + )); // modal close handler Lightbox.modalInstance.result['finally'](function () {