Initial commmit

.gitignore

@@ -0,0 +1 @@
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Jonah Böther
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,27 @@
+# ThreeSixtyJS — New 360° Views
+
+[![@jbtcdDE on Twitter](http://img.shields.io/badge/twitter-%40jbtcdDE-blue.svg?style=flat)](https://twitter.com/jbtcdDE)
+[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
+
+## How to use it
+
+
+After installation you can create an image container in html:
+
+```html
+<div class="YOUR_IDENTIFIER" data-src="/PATH/TO/YOUR/IMAGES/{}.jpg" data-amount="48"></div>
+```
+Replace `YOUR_IDENTIFIER` with a custom class name to identify a ThreeSixtyJS container.
+
+Replace `data-src` with the path to your ThreeSixtyJS images and use `{}` as placeholder for your image id`s (starts with 0).
+
+Replace `data-amount` with the number of images your ThreeSixtyJS view contains.
+
+```javascript
+new ThreeSixtyJS('.YOUR_IDENTIFIER', OPTIONAL_SETTINGS);
+```
+Replace `YOUR_IDENTIFIER` with a custom class name to identify a ThreeSixtyJS container.
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE) for more information.

dist/ThreeSixtyJS.js

@@ -0,0 +1,177 @@
+class ThreeSixtyJS {
+    constructor(identifier, settings = null, listener = null) {
+        this.mouseEnabled = false;
+        this.wheelData = 0;
+        this.currentWheelData = 0;
+        this.nextImage = () => {
+            let id = this.getCurrentImageId();
+            id++;
+            if (id >= this.getAmount()) {
+                id = 0;
+            }
+            this.makeContainerVisibleById(id);
+        };
+        this.prevImage = () => {
+            let id = this.getCurrentImageId();
+            id--;
+            if (id < 0) {
+                id = this.getAmount() - 1;
+            }
+            this.makeContainerVisibleById(id);
+        };
+        this.initEventListener = () => {
+            for (let i = 0; i < this.listener.next.length; i++) {
+                let elements = document.querySelectorAll(this.listener.next[i]);
+                for (let j = 0; j < elements.length; j++) {
+                    elements[j].addEventListener('click', this.nextImage, {
+                        passive: true
+                    });
+                }
+            }
+            for (let i = 0; i < this.listener.prev.length; i++) {
+                let elements = document.querySelectorAll(this.listener.prev[i]);
+                for (let j = 0; j < elements.length; j++) {
+                    elements[j].addEventListener('click', this.prevImage, {
+                        passive: true
+                    });
+                }
+            }
+        };
+        this.touch = () => {
+            this.getView().addEventListener('touchstart', this.enableTouch, {
+                passive: true
+            });
+            this.getView().addEventListener('touchmove', this.moveTouch, {
+                passive: true
+            });
+        };
+        this.wheel = () => {
+            this.getView().addEventListener('wheel', this.moveWheel, {
+                passive: true
+            });
+        };
+        this.mouse = () => {
+            this.getView().addEventListener('mousedown', this.enableMouse);
+            this.getView().addEventListener('mouseup', this.disableMouse);
+            this.getView().addEventListener('mouseleave', this.disableMouse);
+            this.getView().addEventListener('mousemove', this.moveMouse);
+        };
+        this.moveWheel = (event) => {
+            if (this.wheelData === 0) {
+                this.wheelData = event.deltaX;
+            }
+            this.currentWheelData = this.currentWheelData + event.deltaX;
+            if (this.wheelData + this.settings.intensity < this.currentWheelData) {
+                this.wheelData = this.currentWheelData;
+                this.nextImage();
+            }
+            else if (this.wheelData - this.settings.intensity > this.currentWheelData) {
+                this.wheelData = this.currentWheelData;
+                this.prevImage();
+            }
+        };
+        this.enableTouch = (event) => {
+            this.touchPosition = event.touches[0].clientX;
+        };
+        this.moveTouch = (event) => {
+            let currentTouchPosition = event.touches[0].clientX;
+            if (this.touchPosition + this.settings.intensity < currentTouchPosition) {
+                this.touchPosition = currentTouchPosition;
+                this.prevImage();
+            }
+            else if (this.touchPosition - this.settings.intensity > currentTouchPosition) {
+                this.touchPosition = currentTouchPosition;
+                this.nextImage();
+            }
+        };
+        this.enableMouse = (event) => {
+            event.preventDefault();
+            this.mouseEnabled = true;
+            this.mousePosition = event.clientX;
+        };
+        this.disableMouse = (event) => {
+            this.mouseEnabled = false;
+        };
+        this.moveMouse = (event) => {
+            if (this.mouseEnabled === false) {
+                return;
+            }
+            let currentMousePosition = event.clientX;
+            if (this.mousePosition + this.settings.intensity < currentMousePosition) {
+                this.mousePosition = currentMousePosition;
+                this.prevImage();
+            }
+            else if (this.mousePosition - this.settings.intensity > currentMousePosition) {
+                this.mousePosition = currentMousePosition;
+                this.nextImage();
+            }
+        };
+        this.updateFunction = () => {
+            for (let i = 0; i < this.listener.update.length; i++) {
+                this.listener.update[i](this.getCurrentImageId(), this.getAmount());
+            }
+        };
+        this.makeContainerVisibleById = (id) => {
+            let childes = this.getView().querySelectorAll('*');
+            for (let i = 0; i < this.getAmount(); i++) {
+                childes[i].style.display = 'none';
+            }
+            childes[id].style.display = '';
+            this.getView().setAttribute(this.settings.parameters.current, String(id));
+            this.updateFunction();
+        };
+        this.createImageContainers = () => {
+            for (let i = 0; i < this.getAmount(); i++) {
+                let element = document.createElement('img');
+                element.setAttribute('style', this.settings.style);
+                element.setAttribute('src', this.buildUrl(i));
+                this.getView().appendChild(element);
+            }
+        };
+        this.createVariables = () => {
+            this.view = document.querySelector(this.identifier);
+            this.amount = Number(this.getView().getAttribute(this.settings.parameters.amount));
+            this.srcSchema = String(this.getView().getAttribute(this.settings.parameters.src));
+        };
+        this.buildUrl = (id) => {
+            return this.getSrcSchema().replace(this.settings.placeholder, String(id));
+        };
+        this.getCurrentImageId = () => {
+            return Number(this.getView().getAttribute(this.settings.parameters.current));
+        };
+        this.getSrcSchema = () => {
+            return this.srcSchema;
+        };
+        this.getAmount = () => {
+            return this.amount;
+        };
+        this.getView = () => {
+            return this.view;
+        };
+        this.identifier = identifier;
+        this.settings = {
+            intensity: 25,
+            parameters: {
+                amount: 'data-amount',
+                src: 'data-src',
+                current: 'data-current'
+            },
+            placeholder: '{}',
+            style: 'display: none; width: 100%; height: 100%;'
+        };
+        Object.assign(this.settings, settings);
+        this.listener = {
+            prev: null,
+            next: null,
+            update: null
+        };
+        Object.assign(this.listener, listener);
+        this.initEventListener();
+        this.createVariables();
+        this.createImageContainers();
+        this.makeContainerVisibleById(0);
+        this.mouse();
+        this.touch();
+        this.wheel();
+    }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@jbtcd/threesixtyjs",
+  "version": "1.0.0",
+  "description": "See products with a new 360° view",
+  "keywords": [
+    "ThreeSixty",
+    "360°"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jbtcd/threesixtyjs"
+  },
+  "scripts": {
+    "watch": "tsc -w --outDir ./dist",
+    "uglify": "uglifyjs --compress --mangle -- dist/ThreeSixtyJS.js > dist/ThreeSixtyJS.min.js",
+    "build": "tsc --outDir ./dist && npm run uglify"
+  },
+  "author": {
+    "name": "Jonah Böther",
+    "email": "[email protected]",
+    "url": "https://jbtcd.me"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^3.4.5",
+    "uglify-es": "^3.3.9"
+  }
+}