Merge pull request ctrl-freaks#48 from ctrl-freaks/feature/event_list…

…eners Fixed event listeners
helloraee · Jul 2, 2019 · b03a7a7 · b03a7a7
2 parents a886405 + 30a4c42
commit b03a7a7
Show file tree

Hide file tree

Showing 26 changed files with 93 additions and 38 deletions.
diff --git a/docs/css/app.753ee7d5.css b/docs/css/app.753ee7d5.css
diff --git a/docs/css/app.ad2ac0c2.css b/docs/css/app.ad2ac0c2.css
diff --git a/docs/freezeframe.min.js b/docs/freezeframe.min.js
diff --git a/docs/js/app.6e095d7d.js b/docs/js/app.6e095d7d.js
diff --git a/docs/js/app.6e095d7d.js.map b/docs/js/app.6e095d7d.js.map
diff --git a/docs/js/app.7d0d9b77.js b/docs/js/app.7d0d9b77.js
diff --git a/docs/js/app.7d0d9b77.js.map b/docs/js/app.7d0d9b77.js.map
diff --git a/docs/js/chunk-vendors.96dc7471.js b/docs/js/chunk-vendors.96dc7471.js
diff --git a/docs/js/chunk-vendors.96dc7471.js.map b/docs/js/chunk-vendors.96dc7471.js.map
diff --git a/docs/js/chunk-vendors.c0b3e944.js b/docs/js/chunk-vendors.c0b3e944.js
diff --git a/docs/js/chunk-vendors.c0b3e944.js.map b/docs/js/chunk-vendors.c0b3e944.js.map
diff --git a/docs/vue.html b/docs/vue.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/freezeframe.js/favicon.ico><title>vue-freezeframe</title><link href=/freezeframe.js/css/app.ad2ac0c2.css rel=preload as=style><link href=/freezeframe.js/js/app.7d0d9b77.js rel=preload as=script><link href=/freezeframe.js/js/chunk-vendors.96dc7471.js rel=preload as=script><link href=/freezeframe.js/css/app.ad2ac0c2.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-freezeframe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/freezeframe.js/js/chunk-vendors.96dc7471.js></script><script src=/freezeframe.js/js/app.7d0d9b77.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/freezeframe.js/favicon.ico><title>vue-freezeframe</title><link href=/freezeframe.js/css/app.753ee7d5.css rel=preload as=style><link href=/freezeframe.js/js/app.6e095d7d.js rel=preload as=script><link href=/freezeframe.js/js/chunk-vendors.c0b3e944.js rel=preload as=script><link href=/freezeframe.js/css/app.753ee7d5.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-freezeframe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/freezeframe.js/js/chunk-vendors.c0b3e944.js></script><script src=/freezeframe.js/js/app.6e095d7d.js></script></body></html>
diff --git a/packages/freezeframe/README.md b/packages/freezeframe/README.md
@@ -239,7 +239,7 @@ logo.stop(); // stop animation
 
 ## Contributing
 
-Assuming you have already read the [instructions](../../) in the project root:
+Assuming you have already read the [instructions](../../README.md) in the project root:
 
 - First, `cd` into the appropriate package directory
 

diff --git a/packages/freezeframe/dist/freezeframe.min.js b/packages/freezeframe/dist/freezeframe.min.js
diff --git a/packages/freezeframe/src/index.js b/packages/freezeframe/src/index.js
@@ -121,10 +121,14 @@ class Freezeframe {
     if (!this.isTouch && this.options.trigger === 'hover') {
       $image.addEventListener('mouseenter', () => {
         this.toggleOn(freeze);
+        this.emit(events.START, freeze, true);
+        this.emit(events.TOGGLE, freeze, true);
       });
 
       $image.addEventListener('mouseleave', () => {
         this.toggleOff(freeze);
+        this.emit(events.START, freeze, false);
+        this.emit(events.TOGGLE, freeze, false);
       });
     }
 

diff --git a/packages/vue-freezeframe/README.md b/packages/vue-freezeframe/README.md
@@ -92,9 +92,28 @@ Using the default slot, you can freeze any .gifs inside, while safely including
 </template>
 ```
 
+## Events
+
+All freezeframe events are emitted from the freezeframe component:
+
+- start
+- stop
+- toggle
+
+```html
+<template>
+  <vue-freezeframe
+    src="./something.gif"
+    @start="onStart"
+    @stop="onStop"
+    @toggle="onToggle"
+  />
+</template>
+```
+
 ## Contributing
 
-Assuming you have already read the [instructions](../../#contributing) in the project root:
+Assuming you have already read the [instructions](../../README.md) in the project root:
 
 - First, `cd` into the appropriate package directory
 

diff --git a/packages/vue-freezeframe/dist/freezeframe.common.js b/packages/vue-freezeframe/dist/freezeframe.common.js
diff --git a/packages/vue-freezeframe/dist/freezeframe.common.js.map b/packages/vue-freezeframe/dist/freezeframe.common.js.map
diff --git a/packages/vue-freezeframe/dist/freezeframe.umd.js b/packages/vue-freezeframe/dist/freezeframe.umd.js
diff --git a/packages/vue-freezeframe/dist/freezeframe.umd.js.map b/packages/vue-freezeframe/dist/freezeframe.umd.js.map
diff --git a/packages/vue-freezeframe/dist/freezeframe.umd.min.js b/packages/vue-freezeframe/dist/freezeframe.umd.min.js
diff --git a/packages/vue-freezeframe/dist/freezeframe.umd.min.js.map b/packages/vue-freezeframe/dist/freezeframe.umd.min.js.map
diff --git a/packages/vue-freezeframe/package-lock.json b/packages/vue-freezeframe/package-lock.json
diff --git a/packages/vue-freezeframe/package.json b/packages/vue-freezeframe/package.json
@@ -12,7 +12,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "peerDependencies": {
-    "freezeframe": "latest",
+    "freezeframe": "^4.0.0-alpha.4",
     "vue": "^2.6.10"
   },
   "devDependencies": {
@@ -28,7 +28,7 @@
     "core-js": "^2.6.5",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "freezeframe": "^4.0.0-alpha.3",
+    "freezeframe": "^4.0.0-alpha.4",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "vue": "^2.6.10",

diff --git a/packages/vue-freezeframe/src/App.vue b/packages/vue-freezeframe/src/App.vue
@@ -22,7 +22,9 @@
           trigger: false,
           overlay: true
         }"
-        @toggle="logEvent"
+        @toggle="(e, items, isPlaying) => logEvent('toggle', e, items, isPlaying)"
+        @start="(e, items, isPlaying) => logEvent('start', e, items, isPlaying)"
+        @stop="(e, items, isPlaying) => logEvent('stop', e, items, isPlaying)"
       />
     </div>
 
@@ -76,8 +78,8 @@ export default {
     stop() {
       this.$refs.freeze.stop();
     },
-    logEvent(e) {
-      console.log(e);
+    logEvent(event, items, isPlaying) {
+      console.log(event, items, isPlaying);
     },
   },
 };

diff --git a/packages/vue-freezeframe/src/components/Freezeframe.vue b/packages/vue-freezeframe/src/components/Freezeframe.vue
@@ -43,8 +43,8 @@ export default {
       if (this.$freezeframe) {
         this.$freezeframe.on('toggle', (items, isPlaying) => {
           const event = isPlaying ? 'start' : 'stop';
-          this.$emit(event, items);
-          this.$emit('toggle', isPlaying);
+          this.$emit(event, items, isPlaying);
+          this.$emit('toggle', items, isPlaying);
         });
       }
     },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/freezeframe.js/favicon.ico><title>vue-freezeframe</title><link href=/freezeframe.js/css/app.ad2ac0c2.css rel=preload as=style><link href=/freezeframe.js/js/app.7d0d9b77.js rel=preload as=script><link href=/freezeframe.js/js/chunk-vendors.96dc7471.js rel=preload as=script><link href=/freezeframe.js/css/app.ad2ac0c2.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-freezeframe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/freezeframe.js/js/chunk-vendors.96dc7471.js></script><script src=/freezeframe.js/js/app.7d0d9b77.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/freezeframe.js/favicon.ico><title>vue-freezeframe</title><link href=/freezeframe.js/css/app.753ee7d5.css rel=preload as=style><link href=/freezeframe.js/js/app.6e095d7d.js rel=preload as=script><link href=/freezeframe.js/js/chunk-vendors.c0b3e944.js rel=preload as=script><link href=/freezeframe.js/css/app.753ee7d5.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-freezeframe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/freezeframe.js/js/chunk-vendors.c0b3e944.js></script><script src=/freezeframe.js/js/app.6e095d7d.js></script></body></html>