@dpouris/gswap 0.0.1-alpha → 0.0.3

package/README.md

@@ -0,0 +1,160 @@
+# GSwap 🌠
+
+### Create a gallery of images with ease.
+
+---
+
+To get started, in your project folder, run:
+
+```
+npm i @dpouris/gswap
+```
+
+# Usage 🔨
+
+First, import the library and create a new gswap instance:
+
+```
+import { GSwap } from '@dpouris/gswap';
+
+...
+
+const = document.getElementById("gallery")
+
+const gswap = new GSwap({
+  containerElem: galleryContainer,
+
+  images: ["./1.jpg", "./2.jpg", "./3.webp"],
+
+  options : {
+    //animation: "fade", -> Todo
+    animationDuration: "300",
+    navigation: true,
+    // repeat: true, -> Todo
+    imgDimensions: { height: 300, width: 300 },
+  }
+});
+```
+
+This will create a new instance of gswap and will place the gallery absolutely inside the container you specified.
+
+- **containerElem** (_required_):
+  - The container (div) element where the gallery will be placed absolutely.
+- **images** (_required_):
+  - An array of image paths.
+- **options** (_optional_):
+  - An object of options.
+  - See the [options](#Options) section for more details.
+
+# Options ⚙️
+
+## **animation** (_fade_ | _slide_ | _none_) -> [wip]
+
+    Takes in an animation eg. fade or slide and applies it to the switching motion of the images.
+
+- **fade**:
+  Fades the images in and out.
+- **slide**:
+  Slides the images in and out.
+- **none**:
+  Does not apply any animation.
+
+- **Default**: fade
+
+---
+
+## **animationDuration** (_number_)
+
+    Takes in the duration of the animation that occurs upon switching the images and the speed at which the images move, in milliseconds. # 1000 = 1 second.
+
+- **Default**: 300
+
+---
+
+## **navigation** (_boolean_ | forwardOnly | backOnly)
+
+    If true, the navigation arrows will be displayed. # true | false | "forwardOnly" | "backOnly"
+
+- **forwardOnly**:
+  Only the forward arrow will be displayed.
+- **backOnly**:
+  Only the back arrow will be displayed.
+
+- **Default**: true
+
+---
+
+## **repeat** (_boolean_) -> [wip]
+
+    If true, the gallery will loop infinitely. # true || false
+
+    [wip]
+
+- **Default**: true
+
+## direction (_top_ | _bottom_ | _left_ | _right_)
+
+    The direction of the gallery. # top || bottom
+
+## imgDimensions (_object_ : {height : number, width: number})
+
+    Takes in an object that contains the keys of width and height that will be applied as the dimensions of the images. # { height: 300, width: 300 }
+
+    Default: { height: 300, width: 300 }
+
+# Methods 🧑‍💻
+
+- [**gswap.next()**](<#gswap.next()>)
+- [**gswap.prev()**](<#gswap.next()>)
+- [**gswap.goTo(index)**](<#gswap.goTo(index)>) -> [wip]
+- [**gswap.stackImages()**](<#gswap.stackImages()>)
+
+---
+
+## **gswap.next()**
+
+Displays the next image in the gallery.
+You can call the **next()** method by calling it from the gallery instance like so.
+
+```
+const gallery = new GSwap(...);
+
+...
+
+gallery.next();
+```
+
+OR
+
+You can bind the **next()** method to an onclick event like so.
+
+```
+const gallery = new GSwap(...);
+const nextBtn = document.getElementById('nextGalleryBtn')
+
+nextBtn.onclick = gallery.next;
+```
+
+**The same concept applies for the .prev() method the only difference being the it moves backwards through the images.**
+
+## **gswap.goTo(index)** -> wip
+
+Takes in an index and displays the image at that index.
+
+[wip]
+
+## **gswap.stackImages()**
+
+Stacks the images in the gallery in case their position was altered.
+
+Can be called from the gallery instance like so.
+
+```
+const gallery = new GSwap(...);
+
+...
+
+gallery.stackImages();
+```
+
+Thank you for trying out my first library and I hope you enjoy it. 🫡

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { GSwap as GSwap } from "./src/main";

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GSwap = void 0;
+var main_1 = require("./src/main");
+Object.defineProperty(exports, "GSwap", { enumerable: true, get: function () { return main_1.GSwap; } });

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/main.js

@@ -0,0 +1,166 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GSwap_instances, _GSwap_currentImg, _GSwap_createGSwapElement, _GSwap_createImageElements, _GSwap_createNavigation, _GSwap_appendElementsOnContainer, _GSwap_shiftImagesToTheRight, _GSwap_shiftImagesToTheLeft, _GSwap_findPrevActiveElem, _GSwap_findNextActiveElement;
+Object.defineProperty(exports, "__esModule", { value: true });
+class GSwap {
+    constructor(containerElem, images, options) {
+        _GSwap_instances.add(this);
+        _GSwap_currentImg.set(this, 0);
+        _GSwap_createNavigation.set(this, () => {
+            const nav = document.createElement("nav");
+            nav.classList.add("gallery-swap-nav");
+            const navLeft = document.createElement("button");
+            navLeft.onclick = this.prev;
+            navLeft.innerText = "Left";
+            navLeft.classList.add("gallery-swap-nav-left");
+            const navRight = document.createElement("button");
+            navRight.onclick = this.next;
+            navRight.innerText = "Right";
+            navRight.classList.add("gallery-swap-nav-right");
+            if (this.options.navigation === "forwardOnly") {
+                nav.appendChild(navRight);
+                return nav;
+            }
+            if (this.options.navigation === "backOnly") {
+                nav.appendChild(navLeft);
+                return nav;
+            }
+            nav.appendChild(navLeft);
+            nav.appendChild(navRight);
+            return nav;
+        });
+        _GSwap_shiftImagesToTheRight.set(this, () => {
+            const last = this.containerElem.children[0].lastElementChild;
+            this.containerElem.children[0].insertAdjacentHTML("afterbegin", last.outerHTML);
+            last.remove();
+        });
+        _GSwap_shiftImagesToTheLeft.set(this, () => {
+            const first = this.containerElem.children[0]
+                .firstElementChild;
+            this.containerElem.children[0].insertAdjacentHTML("beforeend", first.outerHTML);
+            first.style.opacity = "0";
+            first.remove();
+            // first.remove();
+        });
+        _GSwap_findPrevActiveElem.set(this, () => {
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                const imgElem = image;
+                if (imgElem.classList.contains("active")) {
+                    imgElem.classList.remove("active");
+                }
+            });
+            const activeElem = this.containerElem.children[0]
+                .lastElementChild;
+            activeElem.style.opacity = "0";
+            setTimeout(() => {
+                activeElem.style.opacity = "1";
+            }, parseInt(this.options.animationDuration));
+            activeElem.classList.add("active");
+        });
+        _GSwap_findNextActiveElement.set(this, () => {
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                const imgElem = image;
+                if (imgElem.classList.contains("active")) {
+                    imgElem.classList.remove("active");
+                    imgElem.style.opacity = "0";
+                    setTimeout(() => {
+                        imgElem.style.opacity = "1";
+                    }, parseInt(this.options.animationDuration));
+                }
+            });
+            const activeElem = this.containerElem.children[0].lastElementChild;
+            activeElem.classList.add("active");
+        });
+        this.stackImages = () => {
+            let directionLeft;
+            let directionTop;
+            switch (this.options.direction) {
+                case "left":
+                    directionLeft = 20;
+                    directionTop = 20;
+                    break;
+                case "right":
+                    directionLeft = -20;
+                    directionTop = 20;
+                    break;
+                case "top":
+                    directionLeft = 0;
+                    directionTop = 20;
+                    break;
+                case "bottom":
+                    directionLeft = 0;
+                    directionTop = -20;
+                    break;
+            }
+            let counter = 0;
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                image.style.position = "absolute";
+                image.style.opacity = "1";
+                image.style.top =
+                    (counter * directionTop).toString() + "px";
+                image.style.left =
+                    (counter * directionLeft).toString() + "px";
+                counter++;
+            });
+        };
+        this.next = () => {
+            __classPrivateFieldGet(this, _GSwap_shiftImagesToTheRight, "f").call(this);
+            this.stackImages();
+            __classPrivateFieldGet(this, _GSwap_findNextActiveElement, "f").call(this);
+        };
+        this.prev = () => {
+            __classPrivateFieldGet(this, _GSwap_shiftImagesToTheLeft, "f").call(this);
+            this.stackImages();
+            __classPrivateFieldGet(this, _GSwap_findPrevActiveElem, "f").call(this);
+        };
+        this.containerElem = containerElem;
+        this.images = images;
+        this.options = options;
+        this.options.direction = this.options.direction
+            ? this.options.direction
+            : "left";
+        this.options.navigation =
+            this.options.navigation === undefined ? true : this.options.navigation;
+        __classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_appendElementsOnContainer).call(this);
+        this.stackImages();
+    }
+}
+_GSwap_currentImg = new WeakMap(), _GSwap_createNavigation = new WeakMap(), _GSwap_shiftImagesToTheRight = new WeakMap(), _GSwap_shiftImagesToTheLeft = new WeakMap(), _GSwap_findPrevActiveElem = new WeakMap(), _GSwap_findNextActiveElement = new WeakMap(), _GSwap_instances = new WeakSet(), _GSwap_createGSwapElement = function _GSwap_createGSwapElement() {
+    const GSElement = document.createElement("div");
+    GSElement.classList.add("gallery-swap");
+    // GSElement.style.transition = `all ${this.options.animationDuration} ${this.options.animation}`;
+    GSElement.style.height = this.options.imgDimensions.height * 2 + "px";
+    GSElement.style.width = this.options.imgDimensions.width * 2 + "px";
+    GSElement.style.position = "relative";
+    // GSElement.style.animation = this.options.animation;
+    // GSElement.style.animationDuration = this.options.animationDuration;
+    // const imageContainer = document.createElement("div");
+    // Place images inside div container
+    const images = __classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_createImageElements).call(this);
+    images.forEach((image) => {
+        GSElement.appendChild(image);
+    });
+    return GSElement;
+}, _GSwap_createImageElements = function _GSwap_createImageElements() {
+    return this.images.map((image) => {
+        const imgElement = document.createElement("img");
+        if (image === this.images[this.images.length - 1]) {
+            imgElement.classList.add("active");
+        }
+        imgElement.src = image;
+        imgElement.width = this.options.imgDimensions.width;
+        imgElement.height = this.options.imgDimensions.height;
+        imgElement.style.transition = `all ${this.options.animationDuration}ms ease-out`;
+        return imgElement;
+    });
+}, _GSwap_appendElementsOnContainer = function _GSwap_appendElementsOnContainer() {
+    this.containerElem.innerHTML = "";
+    this.containerElem.appendChild(__classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_createGSwapElement).call(this));
+    if (this.options.navigation === true) {
+        this.containerElem.appendChild(__classPrivateFieldGet(this, _GSwap_createNavigation, "f").call(this));
+    }
+};

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { GSwap as GSwap } from "./main";

package/dist/src/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GSwap = void 0;
+var main_1 = require("./main");
+Object.defineProperty(exports, "GSwap", { enumerable: true, get: function () { return main_1.GSwap; } });

package/dist/src/main.d.ts

@@ -0,0 +1,11 @@
+import type { Options } from "../types/GallerySwapTypes";
+export declare class GSwap {
+    #private;
+    containerElem: HTMLDivElement;
+    images: string[];
+    options: Options;
+    constructor(containerElem: HTMLDivElement, images: string[], options: Options);
+    stackImages: () => void;
+    next: () => void;
+    prev: () => void;
+}

package/dist/src/main.js

@@ -0,0 +1,177 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GSwap_instances, _GSwap_currentImg, _GSwap_createGSwapElement, _GSwap_createImageElements, _GSwap_createNavigation, _GSwap_appendElementsOnContainer, _GSwap_shiftImagesToTheRight, _GSwap_shiftImagesToTheLeft, _GSwap_findPrevActiveElem, _GSwap_findNextActiveElement;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GSwap = void 0;
+class GSwap {
+    constructor(containerElem, images, options) {
+        _GSwap_instances.add(this);
+        _GSwap_currentImg.set(this, 0);
+        _GSwap_createNavigation.set(this, () => {
+            const nav = document.createElement("nav");
+            nav.classList.add("gallery-swap-nav");
+            const navLeft = document.createElement("button");
+            navLeft.onclick = this.prev;
+            navLeft.innerHTML = "→";
+            navLeft.classList.add("gallery-swap-nav-left");
+            const navRight = document.createElement("button");
+            navRight.onclick = this.next;
+            navRight.innerHTML = "←";
+            navRight.classList.add("gallery-swap-nav-right");
+            if (this.options.navigation === "forwardOnly") {
+                nav.appendChild(navRight);
+                return nav;
+            }
+            if (this.options.navigation === "backOnly") {
+                nav.appendChild(navLeft);
+                return nav;
+            }
+            nav.appendChild(navLeft);
+            nav.appendChild(navRight);
+            return nav;
+        });
+        _GSwap_shiftImagesToTheRight.set(this, () => {
+            const last = this.containerElem.children[0].lastElementChild;
+            this.containerElem.children[0].insertAdjacentHTML("afterbegin", last.outerHTML);
+            last.remove();
+        });
+        _GSwap_shiftImagesToTheLeft.set(this, () => {
+            const first = this.containerElem.children[0]
+                .firstElementChild;
+            this.containerElem.children[0].insertAdjacentHTML("beforeend", first.outerHTML);
+            first.style.opacity = "0";
+            first.remove();
+            // first.remove();
+        });
+        _GSwap_findPrevActiveElem.set(this, () => {
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                const imgElem = image;
+                if (imgElem.classList.contains("active")) {
+                    imgElem.classList.remove("active");
+                }
+            });
+            const activeElem = this.containerElem.children[0]
+                .lastElementChild;
+            activeElem.style.opacity = "0";
+            setTimeout(() => {
+                activeElem.style.opacity = "1";
+            }, this.options.animationDuration);
+            activeElem.classList.add("active");
+        });
+        _GSwap_findNextActiveElement.set(this, () => {
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                const imgElem = image;
+                if (imgElem.classList.contains("active")) {
+                    imgElem.classList.remove("active");
+                    imgElem.style.opacity = "0";
+                    setTimeout(() => {
+                        imgElem.style.opacity = "1";
+                    }, this.options.animationDuration);
+                }
+            });
+            const activeElem = this.containerElem.children[0].lastElementChild;
+            activeElem.classList.add("active");
+        });
+        this.stackImages = () => {
+            let directionLeft;
+            let directionTop;
+            switch (this.options.direction) {
+                case "left":
+                    directionLeft = 20;
+                    directionTop = 20;
+                    break;
+                case "right":
+                    directionLeft = -20;
+                    directionTop = 20;
+                    break;
+                case "top":
+                    directionLeft = 0;
+                    directionTop = 20;
+                    break;
+                case "bottom":
+                    directionLeft = 0;
+                    directionTop = -20;
+                    break;
+            }
+            let counter = 0;
+            this.containerElem.children[0].childNodes.forEach((image) => {
+                image.style.position = "absolute";
+                image.style.opacity = "1";
+                image.style.top =
+                    (counter * directionTop).toString() + "px";
+                image.style.left =
+                    (counter * directionLeft).toString() + "px";
+                counter++;
+            });
+        };
+        this.next = () => {
+            __classPrivateFieldGet(this, _GSwap_shiftImagesToTheRight, "f").call(this);
+            this.stackImages();
+            __classPrivateFieldGet(this, _GSwap_findNextActiveElement, "f").call(this);
+        };
+        this.prev = () => {
+            __classPrivateFieldGet(this, _GSwap_shiftImagesToTheLeft, "f").call(this);
+            this.stackImages();
+            __classPrivateFieldGet(this, _GSwap_findPrevActiveElem, "f").call(this);
+        };
+        this.containerElem = containerElem;
+        this.images = images;
+        this.options = options;
+        this.options.imgDimensions = this.options
+            .imgDimensions.hasOwnProperty("height")
+            .hasOwnProperty("width")
+            ? this.options.imgDimensions
+            : { width: 300, height: 300 };
+        this.options.direction = this.options.direction;
+        this.options.animationDuration =
+            this.options.animationDuration === undefined
+                ? 300
+                : this.options.animationDuration;
+        this.options.direction =
+            this.options.direction === undefined ? "left" : this.options.direction;
+        this.options.navigation =
+            this.options.navigation === undefined ? true : this.options.navigation;
+        __classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_appendElementsOnContainer).call(this);
+        this.stackImages();
+    }
+}
+exports.GSwap = GSwap;
+_GSwap_currentImg = new WeakMap(), _GSwap_createNavigation = new WeakMap(), _GSwap_shiftImagesToTheRight = new WeakMap(), _GSwap_shiftImagesToTheLeft = new WeakMap(), _GSwap_findPrevActiveElem = new WeakMap(), _GSwap_findNextActiveElement = new WeakMap(), _GSwap_instances = new WeakSet(), _GSwap_createGSwapElement = function _GSwap_createGSwapElement() {
+    const GSElement = document.createElement("div");
+    GSElement.classList.add("gallery-swap");
+    // GSElement.style.transition = `all ${this.options.animationDuration} ${this.options.animation}`;
+    GSElement.style.height = this.options.imgDimensions.height * 2 + "px";
+    GSElement.style.width = this.options.imgDimensions.width * 2 + "px";
+    GSElement.style.position = "relative";
+    // GSElement.style.animation = this.options.animation;
+    // GSElement.style.animationDuration = this.options.animationDuration;
+    // const imageContainer = document.createElement("div");
+    // Place images inside div container
+    const images = __classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_createImageElements).call(this);
+    images.forEach((image) => {
+        GSElement.appendChild(image);
+    });
+    return GSElement;
+}, _GSwap_createImageElements = function _GSwap_createImageElements() {
+    return this.images.map((image) => {
+        const imgElement = document.createElement("img");
+        if (image === this.images[this.images.length - 1]) {
+            imgElement.classList.add("active");
+        }
+        imgElement.src = image;
+        imgElement.width = this.options.imgDimensions.width;
+        imgElement.height = this.options.imgDimensions.height;
+        imgElement.style.transition = `all ${this.options.animationDuration}ms ease-in-out`;
+        return imgElement;
+    });
+}, _GSwap_appendElementsOnContainer = function _GSwap_appendElementsOnContainer() {
+    this.containerElem.innerHTML = "";
+    this.containerElem.appendChild(__classPrivateFieldGet(this, _GSwap_instances, "m", _GSwap_createGSwapElement).call(this));
+    if (this.options.navigation === true) {
+        this.containerElem.appendChild(__classPrivateFieldGet(this, _GSwap_createNavigation, "f").call(this));
+    }
+};

package/dist/types/GallerySwapType.d.ts

@@ -0,0 +1,14 @@
+export interface GallerySwap {
+    container: HTMLDivElement;
+}
+export declare type Options = {
+    animation: string;
+    animationDuration: string;
+    navigation: boolean | "forwardOnly" | "backOnly";
+    repeat?: boolean;
+    direction?: "left" | "right" | "top" | "bottom";
+    imgDimensions: {
+        height: number;
+        width: number;
+    };
+};

package/dist/types/GallerySwapType.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/GallerySwapTypes.d.ts

@@ -0,0 +1,14 @@
+export interface GallerySwap {
+    container: HTMLDivElement;
+}
+export declare type Options = {
+    animation?: string;
+    animationDuration?: number;
+    navigation?: boolean | "forwardOnly" | "backOnly";
+    repeat?: boolean;
+    direction?: "left" | "right" | "top" | "bottom";
+    imgDimensions?: {
+        height: number;
+        width: number;
+    };
+};

package/dist/types/GallerySwapTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dpouris/gswap",
-  "version": "0.0.1-alpha",
+  "version": "0.0.3",
   "description": "A library for swapping between images in a gallery",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",
   "files": [
-    "./dist"
+    "/dist",
+    "./README.md"
   ],
   "directories": {
     "example": "examples"
@@ -15,5 +16,8 @@
   },
   "keywords": [],
   "author": "dpouris",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "@dpouris/gswap": "^0.0.1"
+  }
 }