@ecodev/natural-gallery-js - npm Package Compare versions

Comparing version 8.0.2 to 9.0.0

js/galleries/AbstractGallery.d.ts

@@ -1,2 +0,4 @@
-import PhotoSwipe, { Options } from 'photoswipe';
+import { PhotoSwipeOptions } from 'photoswipe';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import 'photoswipe/dist/photoswipe.css';
 import { Item, ItemOptions } from '../Item';
@@ -18,6 +20,2 @@ /**
     'select': T[];
-    'zoom': {
-        item: T;
-        photoswipe: PhotoSwipe<Options>;
-    };
 }
@@ -35,3 +33,2 @@ /**
         select: CustomEvent;
-        zoom: CustomEvent;
     }
@@ -95,3 +92,4 @@ }
     infiniteScrollOffset?: number;
-    photoSwipeOptions?: PhotoSwipeOptions | null;
+    photoSwipeOptions?: PhotoSwipeOptions;
+    photoSwipePluginsInitFn?: ((lighbox: PhotoSwipeLightbox) => void) | null;
     ssr?: {
@@ -104,16 +102,4 @@ /**
 }
-declare type PhotoSwipeOptions = Options;
-export interface InnerPhotoSwipeOptions extends PhotoSwipeOptions {
-    index: number;
-    loop: boolean;
-}
-export interface PhotoswipeItem {
-    src?: string;
-    w: number;
-    h: number;
-    title?: string;
-}
 export declare abstract class AbstractGallery<Model extends ModelAttributes> {
     protected elementRef: HTMLElement;
-    protected photoswipeElementRef?: HTMLElement | null | undefined;
     protected scrollElementRef?: HTMLElement | null | undefined;
@@ -124,3 +110,2 @@ /**
     protected options: Required<GalleryOptions>;
-    protected photoswipeDefaultOptions: PhotoSwipeOptions;
     /**
@@ -152,7 +137,2 @@ * Images wrapper container
     /**
-     * Photoswipe images container
-     * @type {Array}
-     */
-    private photoswipeCollection;
-    /**
      * Reference to next button element
@@ -163,9 +143,20 @@ */
     /**
+     * PhotoSwipe Lightbox object
+     */
+    protected psLightbox: PhotoSwipeLightbox | null;
+    /**
+     * Get PhotoSwipe Lightbox
+     */
+    get photoSwipe(): PhotoSwipeLightbox | null;
+    /**
+     * Get currently selected PhotoSwipe image
+     */
+    get photoSwipeCurrentItem(): Model | null;
+    /**
      *
      * @param elementRef
      * @param options
-     * @param photoswipeElementRef
      * @param scrollElementRef
      */
-    constructor(elementRef: HTMLElement, options: GalleryOptions, photoswipeElementRef?: HTMLElement | null | undefined, scrollElementRef?: HTMLElement | null | undefined);
+    constructor(elementRef: HTMLElement, options: GalleryOptions, scrollElementRef?: HTMLElement | null | undefined);
     /**
@@ -182,8 +173,8 @@ * Complete collection of images
      */
-    protected _visibleCollection: Item<Model>[];
-    get visibleCollection(): Item<Model>[];
+    protected _domCollection: Item<Model>[];
+    get domCollection(): Item<Model>[];
     get selectedItems(): Model[];
     get width(): number;
     get collectionLength(): number;
-    get visibleCollectionLength(): number;
+    get domCollectionLength(): number;
     /**
@@ -194,2 +185,7 @@ * Initializes DOM manipulations
     /**
+     * Initializes PhotoSwipe
+     */
+    protected photoSwipeInit(): void;
+    addItemToPhotoSwipeCollection(item: Item<Model>): void;
+    /**
      * Add items to collection
@@ -218,4 +214,6 @@ * Transform given list of models into inner Items
      * @param callback
+     * @param options An object that specifies characteristics about the event listener. The available options are, see
+     *     addEventListener official documentation
      */
-    addEventListener<K extends keyof CustomEventDetailMap<Model>>(name: K, callback: (evt: CustomEvent<CustomEventDetailMap<Model>[K]>) => void): void;
+    addEventListener<K extends keyof CustomEventDetailMap<Model>>(name: K, callback: (evt: CustomEvent<CustomEventDetailMap<Model>[K]>) => void, options?: boolean | AddEventListenerOptions): void;
     /**
@@ -279,3 +277,3 @@ * Public api for empty function
     /**
-     * Add given item to DOM and to visibleCollection
+     * Add given item to DOM and to domCollection
      * @param {Item} item
@@ -298,9 +296,2 @@ * @param destination
     protected endResize(): void;
-    protected openPhotoSwipe(item: Item<Model>): void;
-    /**
-     * Format an Item into a PhotoswipeItem that has different attributes
-     * @param item
-     * @returns {PhotoswipeItem}
-     */
-    protected getPhotoswipeItem(item: Item<Model>): PhotoswipeItem;
     protected dispatchEvent<K extends keyof CustomEventDetailMap<Model>>(name: K, data: CustomEventDetailMap<Model>[K]): void;
@@ -317,2 +308,1 @@ /**
 }
-export {};

js/galleries/Masonry.d.ts

@@ -18,3 +18,3 @@ import { Column } from '../Column';
     protected columns: Column<Model>[];
-    constructor(elementRef: HTMLElement, options: MasonryGalleryOptions, photoswipeElementRef?: HTMLElement | null, scrollElementRef?: HTMLElement | null);
+    constructor(elementRef: HTMLElement, options: MasonryGalleryOptions, scrollElementRef?: HTMLElement | null);
     /**
@@ -21,0 +21,0 @@ * Compute sides with 1:1 ratio

js/galleries/Natural.d.ts

@@ -14,3 +14,3 @@ import { Item } from '../Item';
     protected options: NaturalGalleryOptions & Required<GalleryOptions>;
-    constructor(elementRef: HTMLElement, options: NaturalGalleryOptions, photoswipeElementRef?: HTMLElement | null, scrollElementRef?: HTMLElement | null);
+    constructor(elementRef: HTMLElement, options: NaturalGalleryOptions, scrollElementRef?: HTMLElement | null);
     static organizeItems<T extends ModelAttributes>(gallery: Natural<T>, items: Item<T>[], fromRow?: number, toRow?: number | null, currentRow?: number | null): void;
@@ -17,0 +17,0 @@ /**

js/galleries/Square.d.ts

@@ -12,3 +12,3 @@ import { Item } from '../Item';
     protected options: SquareGalleryOptions & Required<GalleryOptions>;
-    constructor(elementRef: HTMLElement, options: SquareGalleryOptions, photoswipeElementRef?: HTMLElement | null, scrollElementRef?: HTMLElement | null);
+    constructor(elementRef: HTMLElement, options: SquareGalleryOptions, scrollElementRef?: HTMLElement | null);
     /**
@@ -15,0 +15,0 @@ * Compute sides with 1:1 ratio

js/Item.d.ts

@@ -39,2 +39,3 @@ import { ModelAttributes } from './galleries/AbstractGallery';
     private _height;
+    private _cropped;
     /**
@@ -98,2 +99,4 @@ * Wherever item is selected or not
     set width(value: number);
+    get cropped(): boolean;
+    set cropped(value: boolean);
     get enlargedWidth(): number;
@@ -100,0 +103,0 @@ get enlargedHeight(): number;

js/Utility.d.ts

 import { SizedModel } from './galleries/AbstractGallery';
+interface ImageRatioInfo {
+    ratio: number;
+    cropped: boolean;
+}
 export interface RatioLimits {
@@ -8,1 +12,3 @@ min?: number;
 export declare function getImageRatio(model: SizedModel, ratioLimits?: RatioLimits): number;
+export declare function getImageRatioAndIfCropped(model: SizedModel, ratioLimits?: RatioLimits): ImageRatioInfo;
+export {};

natural-gallery-esm.js.LICENSE.txt

@@ -1,7 +0,9 @@
-/*! PhotoSwipe - v4.1.3 - 2019-01-08
-* http://photoswipe.com
-* Copyright (c) 2019 Dmitry Semenov; */
+/*!
+  * PhotoSwipe 5.3.2 - https://photoswipe.com
+  * (c) 2022 Dmytro Semenov
+  */
 
-/*! PhotoSwipe Default UI - 4.1.3 - 2019-01-08
-* http://photoswipe.com
-* Copyright (c) 2019 Dmitry Semenov; */
+/*!
+  * PhotoSwipe Lightbox 5.3.2 - https://photoswipe.com
+  * (c) 2022 Dmytro Semenov
+  */

package.json

 {
     "name": "@ecodev/natural-gallery-js",
-    "version": "8.0.2",
+    "version": "9.0.0",
     "description": "A lazy load, infinite scroll, natural and masonry layout gallery",
@@ -26,2 +26,3 @@ "author": "Samuel Baptista <[e-mail]>",
         "dev-docs": "cd docs; bundle install; bundle exec jekyll serve --livereload",
+        "build": "webpack",
         "build-lib": "webpack; DOCS=1 webpack",
@@ -32,2 +33,3 @@ "release": "yarn build-lib; cd dist; yarn publish --access public",
         "serve": "node testing/server.js",
+        "lint-fix": "eslint . --fix",
         "lint": "eslint ."
@@ -52,7 +54,4 @@ },
     },
-    "peerDependencies": {
-        "@types/photoswipe": "^4.1.2",
-        "photoswipe": "^4.1.3"
-    },
     "devDependencies": {
+        "@babel/preset-env": "^7.18.6",
         "@types/expect-puppeteer": "^4.4.7",
@@ -62,3 +61,2 @@ "@types/jest": "^27.4.1",
         "@types/lodash-es": "^4.17.6",
-        "@types/photoswipe": "^4.1.2",
         "@types/puppeteer": "^5.4.5",
@@ -83,3 +81,3 @@ "@typescript-eslint/eslint-plugin": "^5.16.0",
         "node-sass": "^7.0.1",
-        "photoswipe": "^4.1.3",
+        "photoswipe": "^5.3.2",
         "postcss": "^8.4.12",
@@ -90,2 +88,3 @@ "postcss-loader": "^6.2.1",
         "source-map-loader": "^3.0.1",
+        "style-loader": "^3.3.1",
         "terser-webpack-plugin": "^5.3.1",
@@ -92,0 +91,0 @@ "ts-jest": "^27.1.4",

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1371545

increased by99.1%

Dependency count

1

decreased by-66.67%

Number of package files

19

increased by5.56%

Lines of code

1565

increased by58.56%

Number of low quality alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

38

increased by2.7%

No dependency changes