angular-bootstrap-lightbox - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

bower.json

 {
   "name": "angular-bootstrap-lightbox",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": [
@@ -15,8 +15,10 @@ "dist/angular-bootstrap-lightbox.js",
   "dependencies": {
-    "angular": "^1.3.14",
+    "angular": "^1.3.15",
     "angular-bootstrap": "^0.12.1",
+    "bootstrap": "^3.3.4"
+  },
+  "devDependencies": {
     "angular-loading-bar": "^0.7.1",
-    "angular-touch": "^1.3.14",
-    "bootstrap": "^3.3.2"
+    "angular-touch": "^1.3.14"
   }
 }

dist/angular-bootstrap-lightbox.js

@@ -5,6 +5,15 @@ /**
 angular.module('bootstrapLightbox', [
-  'ngTouch',
-  'ui.bootstrap',
-  'chieffancypants.loadingBar',
+  'ui.bootstrap'
 ]);
+
+// optional dependencies
+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) {}
 angular.module('bootstrapLightbox').run(['$templateCache', function($templateCache) {
@@ -176,5 +185,8 @@ 'use strict';
 
-  this.$get = ['$document', '$modal', '$timeout', 'cfpLoadingBar',
-      'ImageLoader', function ($document, $modal, $timeout, cfpLoadingBar,
-      ImageLoader) {
+  this.$get = ['$document', '$injector', '$modal', '$timeout', 'ImageLoader',
+      function ($document, $injector, $modal, $timeout, ImageLoader) {
+    // optional dependency
+    var cfpLoadingBar = $injector.has('cfpLoadingBar') ?
+      $injector.get('cfpLoadingBar'): null;
+
     var Lightbox = {};
@@ -290,3 +302,5 @@
         // complete any lingering loading bar progress
-        cfpLoadingBar.complete();
+        if (cfpLoadingBar) {
+          cfpLoadingBar.complete();
+        }
       });
@@ -323,3 +337,6 @@
 
-      cfpLoadingBar.start();
+      // start the loading bar
+      if (cfpLoadingBar) {
+        cfpLoadingBar.start();
+      }
 
@@ -330,3 +347,6 @@ var success = function () {
 
-        cfpLoadingBar.complete();
+        // complete the loading bar
+        if (cfpLoadingBar) {
+          cfpLoadingBar.complete();
+        }
       };
@@ -333,0 +353,0 @@

dist/angular-bootstrap-lightbox.min.js

 /*! angular-bootstrap-lightbox */
-angular.module("bootstrapLightbox",["ngTouch","ui.bootstrap","chieffancypants.loadingBar"]),angular.module("bootstrapLightbox").run(["$templateCache",function(a){"use strict";a.put("lightbox.html",'<div class=modal-body ng-swipe-left=Lightbox.nextImage() ng-swipe-right=Lightbox.prevImage()><div class=lightbox-nav><button class=close aria-hidden=true ng-click=$dismiss()>×</button><div class=btn-group><a class="btn btn-xs btn-default" ng-click=Lightbox.prevImage()>‹ Previous</a> <a ng-href={{Lightbox.imageUrl}} target=_blank class="btn btn-xs btn-default" title="Open in new tab">Open image in new tab</a> <a class="btn btn-xs btn-default" ng-click=Lightbox.nextImage()>Next ›</a></div></div><div class=lightbox-image-container><div class=lightbox-image-caption><span>{{Lightbox.imageCaption}}</span></div><img lightbox-src={{Lightbox.imageUrl}} alt=""></div></div>')}]),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.getImageUrl=function(a){return 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.$get=["$document","$modal","$timeout","cfpLoadingBar","ImageLoader",function(a,b,c,d,e){var f={};return f.images=[],f.index=-1,f.templateUrl=this.templateUrl,f.getImageUrl=this.getImageUrl,f.getImageCaption=this.getImageCaption,f.calculateImageDimensionLimits=this.calculateImageDimensionLimits,f.calculateModalDimensions=this.calculateModalDimensions,f.keyboardNavEnabled=!1,f.image={},f.modalInstance=null,f.openModal=function(a,c){return f.images=a,f.setImage(c),f.modalInstance=b.open({templateUrl:f.templateUrl,controller:["$scope",function(a){a.Lightbox=f,f.keyboardNavEnabled=!0}],windowClass:"lightbox-modal"}),f.modalInstance.result["finally"](function(){f.images=[],f.index=1,f.image={},f.imageUrl=null,f.imageCaption=null,f.keyboardNavEnabled=!1,d.complete()}),f.modalInstance},f.closeModal=function(a){return f.modalInstance.close(a)},f.setImage=function(a){if(!(a in f.images))throw"Invalid image.";d.start();var b=function(){f.index=a,f.image=f.images[f.index],d.complete()},c=f.getImageUrl(f.images[a]);e.load(c).then(function(){b(),f.imageUrl=c,f.imageCaption=f.getImageCaption(f.image)},function(){b(),f.imageUrl="//:0",f.imageCaption="Failed to load image"})},f.firstImage=function(){f.setImage(0)},f.prevImage=function(){f.setImage((f.index-1+f.images.length)%f.images.length)},f.nextImage=function(){f.setImage((f.index+1)%f.images.length)},f.lastImage=function(){f.setImage(f.images.length-1)},f.setImages=function(a){f.images=a,f.setImage(f.index)},a.bind("keydown",function(a){if(f.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())&&(c(function(){f[b]()}),a.preventDefault())}}),f}]}),angular.module("bootstrapLightbox").directive("lightboxSrc",["$window","ImageLoader","Lightbox",function(a,b,c){var d=function(a){var b=a.width,c=a.height,d=a.minWidth,e=a.minHeight,f=a.maxWidth,g=a.maxHeight,h=b,i=c;return d>b&&e>c?b/c>f/g?(i=e,h=Math.round(b*e/c)):(h=d,i=Math.round(c*d/b)):d>b?(h=d,i=Math.round(c*d/b)):e>c&&(i=e,h=Math.round(b*e/c)),b>f&&c>g?b/c>f/g?(h=f,i=Math.round(c*f/b)):(i=g,h=Math.round(b*g/c)):b>f?(h=f,i=Math.round(c*f/b)):c>g&&(i=g,h=Math.round(b*g/c)),{width:h||0,height:i||0}},e=0,f=0;return{link:function(g,h,i){var j=function(){var b=a.innerWidth,g=a.innerHeight,i=c.calculateImageDimensionLimits({windowWidth:b,windowHeight:g,imageWidth:e,imageHeight:f}),j=d(angular.extend({width:e,height:f,minWidth:1,minHeight:1,maxWidth:3e3,maxHeight:3e3},i)),k=c.calculateModalDimensions({windowWidth:b,windowHeight:g,imageDisplayWidth:j.width,imageDisplayHeight:j.height});h.css({width:j.width+"px",height:j.height+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-dialog")).css({width:k.width+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-content")).css({height:k.height+"px"})};g.$watch(function(){return i.lightboxSrc},function(a){h[0].src="//:0",b.load(a).then(function(b){e=b.naturalWidth,f=b.naturalHeight,j(),h[0].src=a})}),angular.element(a).on("resize",j)}}}]);
+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){}angular.module("bootstrapLightbox").run(["$templateCache",function(a){"use strict";a.put("lightbox.html",'<div class=modal-body ng-swipe-left=Lightbox.nextImage() ng-swipe-right=Lightbox.prevImage()><div class=lightbox-nav><button class=close aria-hidden=true ng-click=$dismiss()>×</button><div class=btn-group><a class="btn btn-xs btn-default" ng-click=Lightbox.prevImage()>‹ Previous</a> <a ng-href={{Lightbox.imageUrl}} target=_blank class="btn btn-xs btn-default" title="Open in new tab">Open image in new tab</a> <a class="btn btn-xs btn-default" ng-click=Lightbox.nextImage()>Next ›</a></div></div><div class=lightbox-image-container><div class=lightbox-image-caption><span>{{Lightbox.imageCaption}}</span></div><img lightbox-src={{Lightbox.imageUrl}} alt=""></div></div>')}]),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.getImageUrl=function(a){return 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.$get=["$document","$injector","$modal","$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.getImageUrl=this.getImageUrl,g.getImageCaption=this.getImageCaption,g.calculateImageDimensionLimits=this.calculateImageDimensionLimits,g.calculateModalDimensions=this.calculateModalDimensions,g.keyboardNavEnabled=!1,g.image={},g.modalInstance=null,g.openModal=function(a,b){return g.images=a,g.setImage(b),g.modalInstance=c.open({templateUrl:g.templateUrl,controller:["$scope",function(a){a.Lightbox=g,g.keyboardNavEnabled=!0}],windowClass:"lightbox-modal"}),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.";f&&f.start();var b=function(){g.index=a,g.image=g.images[g.index],f&&f.complete()},c=g.getImageUrl(g.images[a]);e.load(c).then(function(){b(),g.imageUrl=c,g.imageCaption=g.getImageCaption(g.image)},function(){b(),g.imageUrl="//:0",g.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){var b=a.width,c=a.height,d=a.minWidth,e=a.minHeight,f=a.maxWidth,g=a.maxHeight,h=b,i=c;return d>b&&e>c?b/c>f/g?(i=e,h=Math.round(b*e/c)):(h=d,i=Math.round(c*d/b)):d>b?(h=d,i=Math.round(c*d/b)):e>c&&(i=e,h=Math.round(b*e/c)),b>f&&c>g?b/c>f/g?(h=f,i=Math.round(c*f/b)):(i=g,h=Math.round(b*g/c)):b>f?(h=f,i=Math.round(c*f/b)):c>g&&(i=g,h=Math.round(b*g/c)),{width:h||0,height:i||0}},e=0,f=0;return{link:function(g,h,i){var j=function(){var b=a.innerWidth,g=a.innerHeight,i=c.calculateImageDimensionLimits({windowWidth:b,windowHeight:g,imageWidth:e,imageHeight:f}),j=d(angular.extend({width:e,height:f,minWidth:1,minHeight:1,maxWidth:3e3,maxHeight:3e3},i)),k=c.calculateModalDimensions({windowWidth:b,windowHeight:g,imageDisplayWidth:j.width,imageDisplayHeight:j.height});h.css({width:j.width+"px",height:j.height+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-dialog")).css({width:k.width+"px"}),angular.element(document.querySelector(".lightbox-modal .modal-content")).css({height:k.height+"px"})};g.$watch(function(){return i.lightboxSrc},function(a){h[0].src="//:0",b.load(a).then(function(b){e=b.naturalWidth,f=b.naturalHeight,j(),h[0].src=a})}),angular.element(a).on("resize",j)}}}]);

package.json

 {
   "name": "angular-bootstrap-lightbox",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "An AngularJS lightbox built using UI Bootstrap Modal.",
@@ -24,9 +24,9 @@ "keywords": [
     "grunt-contrib-htmlmin": "^0.4.0",
-    "grunt-contrib-jshint": "^0.11.0",
-    "grunt-contrib-uglify": "^0.8.0",
-    "grunt-jsdoc-to-markdown": "^0.4.2",
+    "grunt-contrib-jshint": "^0.11.2",
+    "grunt-contrib-uglify": "^0.9.1",
+    "grunt-jsdoc-to-markdown": "^1.0.0",
     "grunt-ng-annotate": "^0.10.0",
     "jit-grunt": "^0.9.1",
-    "time-grunt": "^1.1.0"
+    "time-grunt": "^1.1.1"
   }
 }

README.md

 # angular-bootstrap-lightbox
 
-This lightbox displays images using an [AngularUI Bootstrap](http://angular-ui.github.io/bootstrap/) Modal.
+This lightbox displays images using an [AngularUI Bootstrap Modal](http://angular-ui.github.io/bootstrap/#/modal).
 
-When the lightbox is opened, navigating to the previous/next image can be achieved by clicking buttons above the image, clicking the left/right arrow keys, or swiping to the left/right (using [ngTouch directives](http://docs.angularjs.org/api/ngTouch/directive)). The escape key for closing the modal is automatically binded by AngularUI Bootstrap.
+When the lightbox is opened, navigating to the previous/next image can be achieved by clicking buttons above the image, clicking the left/right arrow keys, or swiping to the left/right (optional with ngTouch). The escape key for closing the modal is automatically binded by AngularUI Bootstrap.
 
-Large images are scaled to fit inside the window. An optional image caption overlays the top left corner of the image. [angular-loading-bar](https://github.com/chieffancypants/angular-loading-bar) is used to show the progress of the image being loaded.
+Large images are scaled to fit inside the window. An optional image caption overlays the top left corner of the image.
 
@@ -19,32 +19,31 @@ ## Demos
 
-Different ways to install:
+1. Install in one of the following ways:
 
-1. Install with Bower: `bower install angular-bootstrap-lightbox --save`
-2. Install with npm: `npm install angular-bootstrap-lightbox --save`
-3. Manually save the script and stylesheet from [`dist`](dist).
+  * Install with Bower: `bower install angular-bootstrap-lightbox --save`
+  * Install with npm: `npm install angular-bootstrap-lightbox --save`
+  * Manually save the script and stylesheet from [`dist`](dist).
 
-Include the stylesheet in your app (default Bower paths given with dependencies):
+2. Include the stylesheet in your app:
 
-```html
-<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
-<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
-<link rel="stylesheet" href="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.css">
-```
+  ```html
+  <link rel="stylesheet" href="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.css">
+  ```
 
-Include the script in your app (default Bower paths given with dependencies):
+3. Include the script in your app:
 
-```html
-<script src="bower_components/angular/angular.js"></script>
-<script src="bower_components/angular-touch/angular-touch.js"></script>
-<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
-<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
-<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
-```
+  ```html
+  <script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
+  ```
 
-The Angular module is named `bootstrapLightbox`. Add it as a dependency to your module:
+4. The Angular module is named `bootstrapLightbox`. Add it as a dependency to your module:
 
-```js
-angular.module('app', ['bootstrapLightbox']);
-```
+  ```js
+  angular.module('app', ['bootstrapLightbox']);
+  ```
 
+5. Optional dependencies:
+
+  * To enable swipe navigation in the lightbox, include the [ngTouch](https://docs.angularjs.org/api/ngTouch) script before `angular-bootstrap-lightbox.js`.
+  * To show a loading bar while an image is loading, include the [angular-loading-bar](https://github.com/chieffancypants/angular-loading-bar) script before `angular-bootstrap-lightbox.js`.
+
 ## Basic example
@@ -58,3 +57,3 @@
     <a ng-click="openLightboxModal($index)">
-      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail" alt="">
+      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
     </a>
@@ -95,3 +94,3 @@ </li>
 
-The default view template for the lightbox is [lightbox.html](src/lightbox.html) and it does not look particularly pretty. Its look can be changed by making your own custom template and/or adding CSS rules (for example, use the selector `.lightbox-image-caption` to style the caption).
+The default view template for the lightbox is [lightbox.html](src/lightbox.html). Its look can be changed by making your own custom template and/or adding CSS rules; for example, use the selector `.lightbox-image-caption` to style the caption.
 
@@ -98,0 +97,0 @@ If you make your own template and save it at `lightbox.html`, no further code is necessary. If you save it at a different path, set it in the provider:

src/lightbox-service.js

@@ -116,5 +116,8 @@ /**
 
-  this.$get = ['$document', '$modal', '$timeout', 'cfpLoadingBar',
-      'ImageLoader', function ($document, $modal, $timeout, cfpLoadingBar,
-      ImageLoader) {
+  this.$get = ['$document', '$injector', '$modal', '$timeout', 'ImageLoader',
+      function ($document, $injector, $modal, $timeout, ImageLoader) {
+    // optional dependency
+    var cfpLoadingBar = $injector.has('cfpLoadingBar') ?
+      $injector.get('cfpLoadingBar'): null;
+
     var Lightbox = {};
@@ -230,3 +233,5 @@
         // complete any lingering loading bar progress
-        cfpLoadingBar.complete();
+        if (cfpLoadingBar) {
+          cfpLoadingBar.complete();
+        }
       });
@@ -263,3 +268,6 @@
 
-      cfpLoadingBar.start();
+      // start the loading bar
+      if (cfpLoadingBar) {
+        cfpLoadingBar.start();
+      }
 
@@ -270,3 +278,6 @@ var success = function () {
 
-        cfpLoadingBar.complete();
+        // complete the loading bar
+        if (cfpLoadingBar) {
+          cfpLoadingBar.complete();
+        }
       };
@@ -273,0 +284,0 @@

src/module.js

@@ -5,5 +5,14 @@ /**
 angular.module('bootstrapLightbox', [
-  'ngTouch',
-  'ui.bootstrap',
-  'chieffancypants.loadingBar',
+  'ui.bootstrap'
 ]);
+
+// optional dependencies
+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) {}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67923

increased by1.45%

Lines of code

1294

increased by2.86%

Worsened metrics

Number of lines in readme file

147

decreased by-0.68%

No dependency changes