New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

natural-gallery-js

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

natural-gallery-js - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

app/app.ts

143

app/js/Gallery.ts

@@ -1,9 +0,8 @@

import {Item} from './Item';
import {IItemFields} from './Item';
import {Header} from './filter/Header';
import {Category} from './filter/Category';
import {SearchFilter} from './filter/SearchFilter';
import {CategoryFilter} from './filter/CategoryFilter';
import {Utility} from './Utility';
import {Organizer} from './Organizer';
import { IItemFields, Item } from './Item';
import { Header } from './filter/Header';
import { Category } from './filter/Category';
import { SearchFilter } from './filter/SearchFilter';
import { CategoryFilter } from './filter/CategoryFilter';
import { Utility } from './Utility';
import { Organizer } from './Organizer';

@@ -30,2 +29,3 @@ export interface IGalleryOptions {

labelImages: string;
selectable: boolean;
}

@@ -57,4 +57,14 @@

labelImages: 'Images',
selectable: false,
};
private _events: any = {};
/**
* Used to test the scroll direction
* Avoid to load more images when scrolling up in the detection zone
* @type {number}
*/
private old_scroll_top = 0;
private _id: string;

@@ -104,24 +114,33 @@

private _selected: Item[] = [];
/**
* Initiate gallery
* @param position
* @param options
* @param categories
* @param rootElement
* @param pswp
* @param scrollElement
* @param data
*/
public constructor(gallery, pswp: HTMLElement) {
public constructor(rootElement: HTMLElement, pswp: HTMLElement, data, scrollElement: HTMLElement = null) {
this.pswpElement = pswp;
// Complete options with default values
for (var key in this.options) {
if (typeof gallery.options[key] === 'undefined') {
gallery.options[key] = this.options[key];
for (const key in this.options) {
if (typeof data.options[key] === 'undefined') {
data.options[key] = this.options[key];
}
}
this.options = gallery.options;
this.categories = gallery.categories ? <Category[]> gallery.categories : [];
this.rootElement = gallery.element ? gallery.element : <HTMLElement> document.getElementById(gallery.id);
this.options = data.options;
this.categories = data.categories ? <Category[]> data.categories : [];
this.rootElement = rootElement;
Utility.addClass(this.rootElement, 'natural-gallery');
// Events
this._events = data.events ? data.events : {};
if (this._events.select) {
this.options.selectable = true;
}
// header

@@ -144,6 +163,10 @@ if (this.options.searchFilter || this.options.categoriesFilter || this.options.showCount) {

if (gallery.images) {
this.collection = gallery.images;
if (data.images) {
this.collection = data.images;
}
if (this.options.limit === 0) {
this.bindScroll(scrollElement !== null ? scrollElement : document);
}
}

@@ -174,7 +197,5 @@

clearTimeout(timer);
timer = setTimeout(
function() {
self.resize();
},
100);
timer = setTimeout(function() {
self.resize();
}, 100);
});

@@ -211,8 +232,6 @@ });

// Complete collection
items.forEach(
function(item) {
item.id = this._collection.length;
this._collection.push(new Item(<IItemFields> item, this));
},
this);
items.forEach(function(item) {
item.id = this._collection.length;
this._collection.push(new Item(<IItemFields> item, this));
}, this);

@@ -322,6 +341,6 @@ // Compute sizes

let winHeight = window.outerHeight;
let winHeight = window.innerHeight;
let galleryVisibleHeight = winHeight - gallery.bodyElement.offsetTop;
// ratio to be more close from reality average row height
let nbRows = Math.floor(galleryVisibleHeight / (this.options.rowHeight * 0.7 ));
let nbRows = Math.floor(galleryVisibleHeight / (this.options.rowHeight * 0.7));

@@ -332,3 +351,3 @@ return nbRows < this.options.minRowsAtStart ? this.options.minRowsAtStart : nbRows;

/**
* Check whetever we need to resize a gallery (only if parent container width changes)
* Check if we need to resize a gallery (only if parent container width changes)
* The keep full rows, it recomputes sizes with new dimension, and reset everything, then add the same number of row.

@@ -374,2 +393,53 @@ * It results in not partial row.

private bindScroll(element: HTMLElement | Document) {
const scrollable = element;
let wrapper = null;
if (element instanceof Document) {
wrapper = element.documentElement;
} else {
wrapper = element;
}
scrollable.addEventListener('scroll', () => {
let endOfGalleryAt = this.rootElement.offsetTop + this.rootElement.offsetHeight;
// Avoid to expand gallery if we are scrolling up
let current_scroll_top = wrapper.scrollTop - (wrapper.clientTop || 0);
let wrapperHeight = wrapper.clientHeight;
let scroll_delta = current_scroll_top - this.old_scroll_top;
this.old_scroll_top = current_scroll_top;
// "enableMoreLoading" is a setting coming from the BE bloking / enabling dynamic loading of thumbnail
if (scroll_delta > 0 && current_scroll_top + wrapperHeight >= endOfGalleryAt) {
// When scrolling only add a row at once
this.addElements(1);
}
});
}
public select(item: Item) {
const index = this._selected.indexOf(item);
if (index === -1) {
this._selected.push(item);
this._events.select(this._selected.map(i => i.fields));
}
}
public unselect(item: Item) {
const index = this._selected.indexOf(item);
if (index > -1) {
this._selected.splice(index, 1);
this._events.select(this._selected.map(i => i.fields));
}
}
public unselectAll() {
for (let i = this._selected.length - 1; i >= 0; i--) {
this._selected[i].toggleSelect();
}
this._selected = [];
}
/**

@@ -387,2 +457,6 @@ * Pseudo attribute, works like a "post-add-images".

get events(): any {
return this._events;
}
get id(): string {

@@ -481,2 +555,1 @@ return this._id;

}

@@ -1,6 +0,7 @@

import {Gallery} from './Gallery';
import {Utility} from './Utility';
import { Gallery } from './Gallery';
import { Utility } from './Utility';
import * as PhotoSwipe from 'photoswipe';
import * as PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
// import * as PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
export interface IItemFields {

@@ -54,2 +55,4 @@ id?: number;

private selected = false;
/**

@@ -60,2 +63,4 @@ * Dom elements

private image: HTMLElement;
private selectBtn: HTMLElement;
private _fields: IItemFields;

@@ -66,4 +71,5 @@ /**

*/
public constructor(private fields: IItemFields, private gallery: Gallery) {
public constructor(fields: IItemFields, private gallery: Gallery) {
this._fields = fields;
this.id = fields.id;

@@ -121,3 +127,3 @@ this.thumbnail = fields.thumbnail;

link: null,
linkTarget: null
linkTarget: null,
};

@@ -145,3 +151,7 @@

let label = null;
if (this.title && ['true', 'hover'].indexOf(options.showLabels) > -1) {
const showLabelValues = [
'true',
'hover',
];
if (this.title && showLabelValues.indexOf(options.showLabels) > -1) {
label = true;

@@ -170,2 +180,3 @@ }

label = document.createElement('div');
label.classList.add('button');

@@ -178,3 +189,2 @@ } else if (!options.lightbox && label && !link) {

// Pointer cursor is shown, but additionnal effect could be even better.
}

@@ -206,4 +216,26 @@

if (this.gallery.options.selectable) {
this.selectBtn = document.createElement('div');
this.selectBtn.appendChild(Utility.getIcon('icon-select'));
this.selectBtn.classList.add('selectBtn');
this.selectBtn.addEventListener('click', () => {
this.toggleSelect();
});
this.element.appendChild(this.selectBtn);
}
}
public toggleSelect() {
this.selected = !this.selected;
if (this.selected) {
this.element.classList.add('selected');
this.gallery.select(this);
} else {
this.element.classList.remove('selected');
this.gallery.unselect(this);
}
}
private getLinkElement() {

@@ -214,6 +246,15 @@ let link = null;

link = document.createElement('a');
link.setAttribute('href', this.link);
Utility.addClass(link, 'link');
if (this.linkTarget) {
link.setAttribute('target', this.linkTarget);
if (this.gallery.events.link) {
link.addEventListener('click', (ev) => {
if (this.gallery.events.link.preventDefault) {
ev.preventDefault();
}
this.gallery.events.link.callback(this._fields);
});
} else {
link.setAttribute('href', this.link);
Utility.addClass(link, 'link');
if (this.linkTarget) {
link.setAttribute('target', this.linkTarget);
}
}

@@ -244,11 +285,6 @@ }

this.image.style.width = String(this.width + 'px');
this.image.style.height = String(this.height + 'px');
const self = this;
window.setTimeout(
function() {
Utility.addClass(self.element, 'visible');
},
0);
window.setTimeout(function() {
Utility.addClass(self.element, 'visible');
}, 0);
}

@@ -259,7 +295,5 @@

Utility.removeClass(this.element, 'visible');
window.setTimeout(
function() {
Utility.addClass(self.element, 'visible');
},
0);
window.setTimeout(function() {
Utility.addClass(self.element, 'visible');
}, 0);
}

@@ -319,6 +353,7 @@

showHideOpacity: true,
loop: false
loop: false,
};
let pswp = new PhotoSwipe(this.gallery.pswpElement, PhotoSwipeUI_Default, this.gallery.pswpContainer, options);
// PhotoSwipeUI_Default
let pswp = new PhotoSwipe(this.gallery.pswpElement, null, this.gallery.pswpContainer, options);
this.gallery.pswpApi = pswp;

@@ -332,3 +367,4 @@ pswp.init();

// Positive delta indicates 'go to next' action, we don't load more objects on looping back the gallery (same logic when scrolling)
// Positive delta indicates 'go to next' action, we don't load more objects on looping back the gallery (same logic when
// scrolling)
if (delta > 0 && pswp.getCurrentIndex() === pswp.items.length - 1) {

@@ -356,3 +392,3 @@ self.gallery.addElements();

h: this._eHeight,
title: this._title
title: this._title,
};

@@ -381,7 +417,5 @@ }

// Detect errored images and hide them smartly
img.addEventListener(
'error',
function() {
Utility.addClass(self.element, 'errored');
});
img.addEventListener('error', function() {
Utility.addClass(self.element, 'errored');
});

@@ -533,3 +567,5 @@ return this.element;

get fields(): IItemFields {
return this._fields;
}
}
{
"name": "natural-gallery-js",
"version": "2.5.0",
"version": "2.6.0",
"description": "A lazy load, infinite scroll and natural layout list gallery",

@@ -15,7 +15,14 @@ "author": "Samuel Baptista <samuel.baptista@ecodev.ch>",

"homepage": "https://github.com/Ecodev/natural-gallery-js#readme",
"main": "dist/natural-gallery.full.js",
"module": "app/app.light.ts",
"main": "dist/natural-gallery.js",
"module": "dist/natural-gallery.js",
"jsnext:main": "dist/natural-gallery.js",
"types": "dist/index.d.ts",
"typings": "dist/index.d.ts",
"scripts": {
"dev": "webpack --progress --colors --watch",
"prod": "NODE_ENV='production' webpack; NODE_ENV='production' webpack --env.nodependencies"
"watch": "webpack --progress --colors --watch --env.nodependencies",
"dev": "webpack-dev-server --open",
"light": "NODE_ENV='production' webpack --env.nodependencies",
"light:watch": "NODE_ENV='production' webpack --env.nodependencies --watch",
"full": "NODE_ENV='production' webpack",
"build": "NODE_ENV='production' webpack; NODE_ENV='production' webpack --env.nodependencies"
},

@@ -37,65 +44,68 @@ "keywords": [

"dependencies": {
"photoswipe": "^4.1.1"
"photoswipe": "^4.1.2"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"awesome-typescript-loader": "^3.1.3",
"autoprefixer": "^7.1.6",
"awesome-typescript-loader": "^3.4.0",
"babili-webpack-plugin": "^0.1.2",
"bootstrap": "^3.3.6",
"browser-sync": "^2.11.1",
"browserify": "^13.0.0",
"browserify": "^14.5.0",
"browserify-typescript": "0.0.1",
"css-loader": "^0.28.4",
"del": "^2.0.2",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"del": "^3.0.0",
"dts-bundle": "^0.7.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-changed": "^1.3.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-changed": "^3.1.1",
"gulp-concat": "^2.6.0",
"gulp-extend": "^0.2.0",
"gulp-file": "^0.2.0",
"gulp-file": "^0.3.0",
"gulp-if": "^2.0.0",
"gulp-jshint": "^1.12.0",
"gulp-notify": "^2.2.0",
"gulp-protractor": "^1.0.0",
"gulp-jshint": "^2.0.4",
"gulp-notify": "^3.0.0",
"gulp-protractor": "^4.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.1",
"gulp-streamify": "^1.0.2",
"gulp-tslint": "^3.5.0",
"gulp-tslint": "^8.1.2",
"gulp-typescript": "^3.1.4",
"gulp-uglify": "^1.5.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"gulp-wrap": "^0.11.0",
"gulp-wrap": "^0.13.0",
"image-webpack-loader": "^3.3.1",
"isparta": "^3.5.1",
"isparta": "^4.0.0",
"jasmine-core": "^2.3.4",
"jshint": "^2.9.5",
"jshint-stylish": "^2.0.1",
"karma": "^0.13.14",
"karma-chrome-launcher": "^0.2.1",
"karma-coverage": "^0.5.3",
"karma-firefox-launcher": "^0.1.6",
"karma-jasmine": "^0.3.6",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.0",
"ms": "^0.7.1",
"node-sass": "^4.5.3",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"phantomjs-prebuilt": "^2.1.7",
"ms": "^2.0.0",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"phantomjs-prebuilt": "^2.1.16",
"postcss-loader": "^2.0.6",
"pretty-hrtime": "^1.0.1",
"protractor": "^2.5.1",
"run-sequence": "^1.1.4",
"protractor": "^5.2.0",
"run-sequence": "^2.2.0",
"sass-loader": "^6.0.6",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"tiny-lr": "^0.2.1",
"tslint": "^2.5.1",
"typescript": "^2.3.4",
"uglifyify": "^3.0.1",
"style-loader": "^0.19.0",
"tiny-lr": "^1.0.5",
"tslint": "^5.8.0",
"typescript": "^2.6.1",
"uglifyify": "^4.0.5",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.0.0"
}
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"peerDependencies": {}
}
{
"compilerOptions": {
"target": "es2015",
"lib": ["es2016", "dom"],
"declaration": true,
"target": "es5",
"lib": ["es2017", "dom"],
"noImplicitAny": false,

@@ -6,0 +7,0 @@ "sourceMap": true,

{
"rules": {
"align": [true,
"parameters",
"arguments",
"statements"],
"class-name": true,
"comment-format": [true, "check-space"],
"curly": true,
"eofline": true,
"forin": true,
"indent": [true, "spaces"],
"interface-name": true,
"jsdoc-format": true,
"label-position": true,
"member-access": true,
"member-ordering": [true,
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-parameter-properties": false,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-internal-module": false,
"no-require-imports": false,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": false,
"one-line": [true,
"check-catch",
"check-else",
"check-open-brace",
"check-whitespace"
],
"quotemark": [true, "single"],
"radix": true,
"semicolon": true,
"object-literal-sort-keys": false,
"switch-default": true,
"triple-equals": [true, "allow-null-check"],
"typedef": [false,
"call-signature",
"parameter",
"property-declaration",
"variable-declaration",
"member-variable-declaration"
],
"typedef-whitespace": [true, {
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}],
"variable-name": false,
"whitespace": [true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type",
"check-typecast"
]
}
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": true,
"forin": true,
"indent": [
true,
"spaces"
],
"interface-name": true,
"jsdoc-format": true,
"label-position": true,
"member-access": true,
"member-ordering": [
true,
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-parameter-properties": false,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-internal-module": false,
"no-require-imports": false,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": false,
"one-line": [
true,
"check-catch",
"check-else",
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": true,
"object-literal-sort-keys": false,
"switch-default": true,
"triple-equals": [
true,
"allow-null-check"
],
"typedef": [
false,
"call-signature",
"parameter",
"property-declaration",
"variable-declaration",
"member-variable-declaration"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type",
"check-typecast"
]
}
}

@@ -7,2 +7,4 @@ const webpack = require('webpack');

const name = 'natural-gallery';
module.exports = function(env) {

@@ -12,15 +14,13 @@

const dependencies = !(env && env.nodependencies === true);
const name = 'natural-gallery';
let entry = {'app': './app/app.ts'};
let outName = name;
if (dependencies) {
entry = {'full': './app/full.ts'};
outName = name + '.full';
}
const extractCSS = new ExtractTextPlugin("themes/natural.css");
const extractSASS = new ExtractTextPlugin(name + ".[name].css");
const extractSASS = new ExtractTextPlugin(outName + ".css");
let externals = {};
if (!dependencies) {
externals = {
'photoswipe': 'PhotoSwipe',
'photoswipe/dist/photoswipe-ui-default': 'PhotoSwipeUI_Default'
}
}
let plugins = [

@@ -40,2 +40,14 @@ extractCSS,

let externals = {};
if (!dependencies) {
plugins.push(new DtsBundlePlugin());
plugins.push(new webpack.WatchIgnorePlugin([
/\.d\.ts$/
]));
externals = {
'photoswipe': 'PhotoSwipe',
'photoswipe/dist/photoswipe-ui-default': 'PhotoSwipeUI_Default'
}
}
if (prod) {

@@ -45,9 +57,2 @@ plugins.push(new BabiliPlugin());

const entry = {};
let entryName = 'light';
if (dependencies) {
entryName = 'full';
}
entry[entryName] = './app/app.' + entryName + '.ts';
return {

@@ -57,3 +62,3 @@ entry: entry,

path: __dirname + '/dist',
filename: name + '.[name].js',
filename: outName + '.js',
library: "NaturalGallery",

@@ -63,11 +68,11 @@ libraryTarget: 'umd',

},
devtool: prod ? false : "source-map",
devServer: {
contentBase: './demo'
},
devtool: prod ? false : "source-map", // 'inline-source-map'
resolve: {
extensions: [".ts", ".js"],
},
plugins: plugins,
externals: externals,
module: {

@@ -113,3 +118,3 @@ rules: [

{
loader : 'file-loader',
loader: 'file-loader',
options: {

@@ -122,3 +127,5 @@ name: 'images/[name].[ext]'

query: {
progressive: true,
mozjpeg: {
progressive: true,
},
pngquant: {

@@ -129,3 +136,2 @@ quality: '65-90',

interlaced: false,
},

@@ -142,10 +148,20 @@ gifsicle: {

},
}
};
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: externals
function DtsBundlePlugin(name, main) {
}
}
DtsBundlePlugin.prototype.apply = function(compiler) {
compiler.plugin('done', function() {
var dts = require('dts-bundle');
dts.bundle({
name: name,
main: 'app/app.d.ts',
out: '../dist/index.d.ts',
removeSource: false,
outputAsModuleFolder: true // to use npm in-package typings
});
});
};

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc