Merge pull request #6 from mvdwg/click-effect

Adds click effect
mvdwg · Aug 27, 2016 · f0a475f · f0a475f
2 parents ed29dfd + 1fa5aeb
commit f0a475f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 15 deletions.
diff --git a/addon/animation.js b/addon/animation.js
@@ -3,7 +3,7 @@ import Ember from 'ember';
 const { $, RSVP } = Ember;
 
 // 100px in 1000ms
-const SPEED = 100 / 800;
+const SPEED = 100 / 400;
 
 function sleep(milliseconds) {
   return new RSVP.Promise(function(resolve) {
@@ -13,6 +13,15 @@ function sleep(milliseconds) {
   });
 }
 
+function clickEffectBefore() {
+  pointer('#ember-testing').addClass('tsClick');
+  return sleep(300);
+}
+
+function clickEffectAfter() {
+  return sleep(1000).then(() => pointer('#ember-testing').removeClass('tsClick'));
+}
+
 function distance(a,b) {
   return Math.sqrt(Math.pow(b.left - a.left, 2) + Math.pow(b.top - a.top, 2));
 }
@@ -26,15 +35,15 @@ function delay(from, to) {
  *
  * @param {HTMLElement|jQuery|String} container - where to look for the mouse pointer
  * @return {jQuery} element that represents the mouse pointer
- */
-function pointer(container) {
-  let pointer = $('#tsPointer', container);
-
+ */ function pointer(container) { let pointer = $('#tsPointer', container);
   if (!pointer.length) {
-    $(container).append($('<img>', {
-      id: 'tsPointer',
-      src: '/telling-stories/pointer.png'
-    }));
+    let $img = $('<img>', { src: '/telling-stories/pointer.png' });
+    let $click = $('<span>', { id: 'tsPointerClickEffect'});
+    let $cursor = $('<span>', { id: 'tsPointer' });
+
+    $cursor.append($click, $img);
+
+    $(container).append($cursor);
 
     pointer = $('#tsPointer', container);
   }
@@ -46,7 +55,7 @@ function movePointerTo(target) {
   return function() {
     let $target = $(target);
     let offset = $target.offset();
-    let width = $target.width() / 2 - 13;
+    let width = $target.width() / 2;
     let height = $target.height() / 2 + 3;
 
     offset.left = offset.left + width;
@@ -55,7 +64,7 @@ function movePointerTo(target) {
     let ms = delay(pointer('#ember-testing').offset(), offset, SPEED);
 
     pointer('#ember-testing').offset(offset);
-    pointer('#ember-testing').css('transition', `all ${ms}ms`);
+    pointer('#ember-testing').css('transition', `top ${ms}ms cubic-bezier(0.4, 0, 1, 1), left ${ms}ms linear`);
 
     return sleep(ms + 100); // wait the delay plus a delta
   };
@@ -64,6 +73,12 @@ function movePointerTo(target) {
 export default {
   pointer,
   movePointerTo,
+  clickEffectBefore() {
+    return () => clickEffectBefore();
+  },
+  clickEffectAfter() {
+    return () => clickEffectAfter();
+  },
   sleep(milliseconds) {
     return () => sleep(milliseconds);
   }

diff --git a/addon/page-object-execution-context.js b/addon/page-object-execution-context.js
@@ -26,10 +26,14 @@ TellingStoriesContext.prototype = {
 
   click(selector, container) {
     /* global wait */
-    wait().then(Animation.movePointerTo(selector));
+    wait()
+      .then(Animation.movePointerTo(selector))
+      .then(Animation.clickEffectBefore());
 
     /* global click */
     click(selector, container);
+
+    wait().then(Animation.clickEffectAfter());
   },
 
   fillIn(selector, container, text) {

diff --git a/package.json b/package.json
@@ -20,7 +20,12 @@
   "engines": {
     "node": ">= 0.10.0"
   },
-  "author": "Santiago Ferreira",
+  "author": [
+    "Ignacio Ferreira <hidnasio@gmail.com>",
+    "Juan Azambuja <jmazambuja@gmail.com>",
+    "Marcelo Dominguez <marcelo@mimiquate.com>",
+    "Santiago Ferreira <san650@gmail.com>"
+  ],
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.2",

diff --git a/vendor/telling-stories/player-mode.css b/vendor/telling-stories/player-mode.css
@@ -1,10 +1,44 @@
 /* Player */
 #tsPointer {
-  width: 25px;
   position: absolute;
   left: 600px;
   top: 200px;
-  transition: all 2s;
+  z-index: 2;
+}
+
+#tsPointer img {
+  width: 29px;
+}
+
+#tsPointer.tsClick {
+  animation: tsClick 0.2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forward;
+}
+
+#tsPointer.tsClick:after {
+  content: "";
+  border-radius: 50%;
+  height: 35px;
+  width: 35px;
+  position: absolute;
+  margin: -17px 0 0 -38px;
+  animation: tsPulsate .5s ease-out;
+  animation-iteration-count: 1;
+  opacity: 0;
+  box-shadow: 0 0 1px 2px rgba(0,0,0,0.4);
+  z-index: -1;
+}
+
+@keyframes tsPulsate {
+  0% { transform: scale(0.1, 0.1); opacity: 0.0;}
+  50% { opacity: .5; }
+  100% { transform: scale(1.2, 1.2); opacity: 0;}
+}
+
+@keyframes tsClick {
+  0% { transform: rotateX(0);}
+  100% { transform: rotateX(30deg);}
 }
 
 /* Reset */