diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000..a21f3d2
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,3 @@
+vscode:
+ extensions:
+ - octref.vetur@0.32.0:03mwRhlVpWDul4qBChcVUA==
diff --git a/demo/.eslintrc.js b/demo/.eslintrc.js
index 8cc5d3a..2e2cfa5 100644
--- a/demo/.eslintrc.js
+++ b/demo/.eslintrc.js
@@ -1,18 +1,13 @@
module.exports = {
- root: true,
- env: {
- browser: true,
- node: true
- },
- parserOptions: {
- parser: 'babel-eslint'
- },
- extends: [
- '@nuxtjs',
- 'plugin:nuxt/recommended'
- ],
- plugins: [
- ],
- // add your custom rules here
- rules: {}
-}
+ root: true,
+ env: {
+ browser: true,
+ node: true,
+ },
+ parserOptions: {
+ parser: "babel-eslint",
+ },
+ extends: [
+ "jonathantreffler",
+ ],
+};
diff --git a/demo/layouts/default.vue b/demo/layouts/default.vue
index 104237f..241bb6c 100644
--- a/demo/layouts/default.vue
+++ b/demo/layouts/default.vue
@@ -1,7 +1,7 @@
-
-
-
+
+
+
diff --git a/src/src/GalleryImage.vue b/src/src/GalleryImage.vue
deleted file mode 100644
index a3e13d2..0000000
--- a/src/src/GalleryImage.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
-
- ![]()
-
-
-
-
diff --git a/src/src/mixins/zoom.js b/src/src/mixins/zoom.js
new file mode 100644
index 0000000..27307a6
--- /dev/null
+++ b/src/src/mixins/zoom.js
@@ -0,0 +1,23 @@
+export default {
+ methods: {
+ getAnimationClass() {
+ if(typeof this.zoomAnimation === "string") {
+ return import("../zoom-animations/" + this.zoomAnimation);
+ } else {
+ return this.zoomAnimation;
+ }
+ },
+ zoom(id) {
+ let self = this;
+ this.getAnimationClass().then(function(animation) {
+ animation.default.zoom(id, self);
+ });
+ },
+ closeZoom() {
+ let self = this;
+ this.getAnimationClass().then(function(animation) {
+ animation.default.closeZoom(self);
+ });
+ },
+ },
+};
\ No newline at end of file
diff --git a/src/src/zoom-animations/default.js b/src/src/zoom-animations/default.js
new file mode 100644
index 0000000..f4f8376
--- /dev/null
+++ b/src/src/zoom-animations/default.js
@@ -0,0 +1,138 @@
+export default {
+ zoom(id, self) {
+ self.zoomedId = id;
+
+ self.$nextTick(function() {
+ let picture = self.getPictureElementById(id);
+
+ self.$el.classList.add("zoom");
+
+ const pos = picture.getBoundingClientRect();
+ const height = pos.height;
+ const width = pos.width;
+
+ self.zoomedImage.style.display = "";
+
+ setToOrgiginalPos(pos, width, height)
+ .then(activateBlurBackground)
+ .then(centerImagePX)
+ .then(centerImagePC)
+ .then(extendPX)
+ .then(extendPC)
+ .then(activateClosing);
+ });
+
+ function setToOrgiginalPos(pos, width, height) {
+ console.log("setToOrgiginalPos");
+ return new Promise(function(resolve) {
+ self.zoomedImage.style.top = pos.top + "px";
+ self.zoomedImage.style.left = pos.left + "px";
+ self.zoomedImage.style.width = width + "px";
+ self.zoomedImage.style.height = height + "px";
+ self.zoomedImage.style.maxWidth = width + "px";
+ self.zoomedImage.style.maxHeight = height + "px";
+
+ resolve();
+ });
+ }
+
+ function activateBlurBackground() {
+ console.log("activateBlurBackground");
+ return new Promise(function(resolve) {
+ self.zoomBlurBackground.style.display = "";
+ self.zoomBlurBackground.style.opacity = 0.8;
+ self.zoomBlurBackground.style.zIndex = "2001";
+
+ resolve();
+ });
+ }
+
+ function centerImagePX() {
+ console.log("centerImagePX");
+ return new Promise(function(resolve) {
+ const htmlBounds = document.getElementsByTagName("html")[0].getBoundingClientRect();
+ const zoomedImageBounds = self.$refs.zoomed_image.getBoundingClientRect();
+ console.log(self.zoomedImage);
+ self.zoomedImage.classList.add("topLeftTransition");
+ self.zoomedImage.style.top = (htmlBounds.height - zoomedImageBounds.height) / 2 + "px";
+ self.zoomedImage.style.left = (htmlBounds.width - zoomedImageBounds.width) / 2 + "px";
+
+ setTimeout(function() {
+ self.zoomedImage.classList.remove("topLeftTransition");
+ resolve();
+ }, 500);
+ });
+ }
+
+ function centerImagePC() {
+ console.log("centerImagePC");
+ return new Promise(function(resolve) {
+ self.zoomedImage.style.top = "50%";
+ self.zoomedImage.style.left = "50%";
+ self.zoomedImage.style.transform = "translate(-50%, -50%)";
+
+ resolve();
+ });
+ }
+
+ function extendPX() {
+ console.log("extendPX");
+ return new Promise(function(resolve) {
+ self.zoomedImage.style.width = "";
+ self.zoomedImage.style.height = "";
+
+ const htmlBounds = document.getElementsByTagName("html")[0].getBoundingClientRect();
+
+ self.zoomedImage.classList.add("maxWidthHeightTransition");
+ self.zoomedImage.style.maxWidth = htmlBounds.width + "px";
+ self.zoomedImage.style.maxHeight = htmlBounds.height + "px";
+
+ setTimeout(function() {
+ self.zoomedImage.classList.remove("maxWidthHeightTransition");
+ resolve();
+ }, 500);
+ });
+ }
+
+ function extendPC() {
+ console.log("extendPC");
+ return new Promise(function(resolve) {
+ self.zoomedImage.style.maxWidth = "";
+ self.zoomedImage.style.maxWidth = "100%";
+ self.zoomedImage.style.maxHeight = "";
+ self.zoomedImage.style.maxHeight = "100%";
+
+ resolve();
+ });
+ }
+
+ function activateClosing() {
+ console.log("activateClosing");
+ return new Promise(function(resolve) {
+ self.zoomBlurBackground.classList.add("closeable");
+ resolve();
+ });
+ }
+ },
+ closeZoom(self) {
+ console.log("close");
+
+ if (self.zoomBlurBackground.classList.contains("closeable")) {
+ self.zoomBlurBackground.style.opacity = 0;
+
+ setTimeout(function() {
+ self.$el.classList.remove("zoom");
+ self.zoomBlurBackground.style.display = "none";
+ }, 400);
+
+ console.log(self.zoomedImage.style);
+
+ self.zoomedImage.removeAttribute("style");
+ self.zoomedImage.style.display = "none";
+
+ self.zoomBlurBackground.classList.remove("closeable");
+
+ self.zoomedId = false;
+ }
+ },
+};
diff --git a/start.sh b/start.sh
new file mode 100644
index 0000000..2c10afe
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,9 @@
+#bin/#!/bin/sh
+
+cd src/
+npm ci
+#npm link
+cd ../demo
+npm ci
+#npm link nuxt-gallery
+npm run dev
\ No newline at end of file