slideshow/pointer_org.js at master · Presentations/slideshow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var slideshowPointer = function () {
  var $canvas,
    circle,
    pointerTimeout,
    currentAnimationTarget;

  function init () {
  	if (!$canvas) {
  		$canvas = $('#slideshow canvas');
      circle = $('<div></div>');
			circle.css({
			  backgroundColor: "#FF0000",
			  position: "absolute"
			});
			circle.hide();
			$("#slideshow").append(circle);
  	}
  	return circle;
  }

  function show (x,y) {
	  if (currentAnimationTarget &&
	      x === currentAnimationTarget[0] &&
	      y === currentAnimationTarget[1]) {
	    // prevent strange animation bugs if
	    // the same animation gets started more than once
	    return
	  }
	  // create circle if not already existing
	  init();
	  // store current parameters for the test above
	  currentAnimationTarget = [x,y];
	  // compute absolut coordinates
	  var offset = $canvas.offset(),
	    circleRadius = .03 * $canvas.width();
	  x = offset.left + $canvas.width() * x;
	  y = offset.top + $canvas.height() * y;
	  // display circle
	  circle.stop(true, true);
	  if (pointerTimeout) {
	    circle.animate({
	      top: y - circleRadius,
	      left: x - circleRadius
	    }, {
	      duration: 300,
	      done: function () {
	        currentAnimationTarget = null;
	      }
	    });
	    window.clearTimeout(pointerTimeout);
	    pointerTimeout = null;
	  } else {
	    circle.show();
	    circle.css({
	      top: y,
	      left: x,
	      opacity: 0,
	      borderRadius: 0,
	      width: 0,
	      height: 0
	    });
	    circle.animate({
	      top: y - circleRadius,
	      left: x - circleRadius,
	      width: 2 * circleRadius,
	      height: 2 * circleRadius,
	      borderRadius: circleRadius,
	      opacity: .64
	    }, {
	      duration: 600,
	      done: function () {
	        currentAnimationTarget = null;
	      },
	      easing: "easeOutElastic"
	    });
	  }
	  // start timeout to hide circle
	  pointerTimeout = window.setTimeout(function() {
	    circle.fadeOut({
	      duration: 600
	    });
	    pointerTimeout = null;
	  }, 4000);
	}

	function hide () {
	  if (pointerTimeout) {
	    window.clearTimeout(pointerTimeout);
	    pointerTimeout = null;
	    circle.hide();
	  }
	}

  return {
  	show: show,
  	hide: hide
  }
}();